<template>
    <Dialog v-model="visible" bg-color="#fff" width="1160">
        <div class="bg-fff round-10 hidden breakdown-dialog">
            <div class="h-58 px-24 flex-items-center dialog-header">
                <span class="w-4 h-16 round-10 bg-main mr-10"></span>
                <span class="fs-16 font-bold color-000">拆解表</span>
            </div>

            <div class="px-24 py-14 flex-items-center dialog-toolbar">
                <div class="border-eee round-4 mr-12">
                    <el-input v-model="form.breakdownId" class="w-210" placeholder="请输入拆解表ID" />
                </div>
                <el-button type="default" plain @click="copyBreakdownId">复制拆解表ID</el-button>
                <el-button type="primary" plain @click="recognize">识别</el-button>
            </div>

            <div class="p-24 breakdown-body">
                <section class="round-6 hidden breakdown-table">
                    <div class="grid-row">
                        <div class="table-side row-span-2 flex-center font-bold">对接环节</div>
                        <div class="table-head">拍摄人员</div>
                        <div class="table-head">剪辑人员</div>
                        <div class="table-head">框架审核</div>
                        <div class="table-head">技术审核</div>
                        <div class="table-head">创意模特</div>
                        <div class="table-head">创意声源</div>
                        <div class="table-cell text-center"><el-input v-model="form.photographer"
                                placeholder="请输入拍摄人员" /></div>
                        <div class="table-cell text-center"><el-input v-model="form.editor" placeholder="请输入剪辑人员" />
                        </div>
                        <div class="table-cell text-center"><el-input v-model="form.frameReviewer"
                                placeholder="请输入框架审核人" /></div>
                        <div class="table-cell text-center"><el-input v-model="form.techReviewer"
                                placeholder="请输入技术审核人" /></div>
                        <div class="table-cell text-center"><el-input v-model="form.model" placeholder="请输入创意模特" />
                        </div>
                        <div class="table-cell text-center"><el-input v-model="form.voice" placeholder="请输入创意声源" />
                        </div>
                    </div>

                    <div class="grid-row connect-row">
                        <div class="table-side row-span-5 flex-center font-bold">对接环节</div>
                        <div class="table-label">创意场景</div>
                        <div class="table-cell col-span-2">
                            <el-input v-model="form.scene" placeholder="请输入创意场景，如：室内浴室/洗手台" />
                        </div>
                        <div class="table-label">创意灯光</div>
                        <div class="table-cell col-span-2">
                            <el-input v-model="form.light" placeholder="请输入创意灯光，如：柔和明亮暖光" />
                        </div>
                        <div class="table-label">模特服饰</div>
                        <div class="table-cell col-span-2">
                            <el-input v-model="form.clothes" placeholder="请输入模特服饰" />
                        </div>
                        <div class="table-label">模特道具</div>
                        <div class="table-cell col-span-2 flex-items-center gap-18">
                            <el-checkbox v-model="form.props.earring">耳环</el-checkbox>
                            <el-checkbox v-model="form.props.necklace">项链</el-checkbox>
                        </div>
                        <div class="table-label double-line">编导开拍前需<br />准备道具列表</div>
                        <div class="table-cell col-span-5">
                            <div class="flex-items-center flex-wrap">
                                <el-checkbox v-for="item in toolOptions" :key="item.value"
                                    v-model="form.tools[item.value]">
                                    {{ item.label }}
                                </el-checkbox>
                            </div>
                            <div class="flex-items-center gap-8 mt-8">
                                <span class="color-666 w-40">其他</span>
                                <el-input v-model="form.otherTools" placeholder="输入其他需要准备的道具"
                                    style="border-bottom: 1px solid #eee;" />
                            </div>
                        </div>
                        <div class="table-label">特殊需求</div>
                        <div class="table-cell col-span-5">
                            <el-input v-model="form.specialNeed" placeholder="请输入特殊需求，如：脚本、服装、动作注意事项" />
                        </div>
                    </div>

                    <div class="grid-row remark-row">
                        <div class="table-side flex-center font-bold">备注</div>
                        <div class="table-cell col-span-6">
                            <el-input v-model="form.remark" placeholder="请输入备注说明" />
                        </div>
                    </div>

                    <div class="grid-row shooting-row">
                        <div class="table-side flex-center font-bold shooting-side">拍摄拆解</div>
                        <div class="table-head required col-span-2">脚本分镜</div>
                        <div class="table-head required col-span-2">对话过程</div>
                        <div class="table-head">分镜头例图</div>
                        <div class="table-head">注意点</div>

                        <template v-for="(item, index) in form.shots" :key="item.id">
                            <div class="table-cell col-span-2">
                                <el-input v-model="item.script" type="textarea" :rows="3" resize="none"
                                    placeholder="请输入脚本分镜，如：开场画面、镜头动作、产品特写" />
                            </div>
                            <div class="table-cell  col-span-2">
                                <el-input v-model="item.dialog" type="textarea" :rows="3" resize="none"
                                    placeholder="请输入对话过程/口播台词" />
                            </div>
                            <div class="table-cell">
                                <Upload :width="50" />
                            </div>
                            <div class="table-cell col-span-1 relative">
                                <el-input v-model="item.notice" type="textarea" :rows="3" resize="none"
                                    placeholder="请输入注意点，如：拍摄重点、光线、构图、节奏" />
                                <div class="flex justify-end mt-8">
                                    <el-button v-if="form.shots.length > 1" class="color-888" link size="small"
                                        @click="removeShot(index)">
                                        删除行
                                    </el-button>
                                </div>
                            </div>
                        </template>

                        <div class="table-cell col-span-6 text-center">
                            <el-button type="primary" link class="font-bold" @click="addShot">＋ 新增一行</el-button>
                        </div>
                        <div class="table-head">视频格式</div>
                        <div class="table-head">视频尺寸</div>
                        <div class="table-head">字幕类型</div>
                        <div class="table-head">视频画质</div>
                        <div class="table-head col-span-2">BGM</div>
                        <div class="table-cell text-center"><el-input v-model="form.videoFormat"
                                placeholder="请输入视频格式" /></div>
                        <div class="table-cell text-center"><el-input v-model="form.videoSize" placeholder="请输入视频尺寸" />
                        </div>
                        <div class="table-cell text-center"><el-input v-model="form.subtitle" placeholder="请输入字幕类型" />
                        </div>
                        <div class="table-cell text-center"><el-input v-model="form.quality" placeholder="请输入视频画质" />
                        </div>
                        <div class="table-cell col-span-2 text-center"><el-input v-model="form.bgm"
                                placeholder="请输入BGM要求" /></div>
                    </div>

                    <div class="grid-row spec-row">
                        <div class="table-side row-span-2 flex-center font-bold">过审必备</div>
                        <div class="table-head col-span-3">视频下方文案</div>
                        <div class="table-head col-span-3">其他文案</div>
                        <div class="table-cell col-span-3">
                            <el-input v-model="form.bottomCopy" type="textarea" :rows="3" resize="none"
                                placeholder="请输入视频下方文案" />
                        </div>
                        <div class="table-cell col-span-3">
                            <el-input v-model="form.otherCopy" type="textarea" :rows="3" resize="none"
                                placeholder="请输入其他文案或禁用词说明" />
                        </div>
                    </div>
                </section>
            </div>

            <div class="px-24 py-14 flex justify-end gap-10 dialog-footer">
                <el-button class="minw-64" @click="visible = false">取消</el-button>
                <el-button type="primary" class="minw-90" @click="save">保存拆解表</el-button>
            </div>
        </div>
    </Dialog>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import Upload from '@/components/Upload/index.vue'

type ShotItem = {
    id: number;
    script: string;
    dialog: string;
    notice: string;
};

const props = withDefaults(
    defineProps<{
        breakdownId?: string;
    }>(),
    {
        breakdownId: 'CJB-06131146256-7133',
    }
);

const visible = defineModel<boolean>('visible', { required: true });
const emit = defineEmits<{
    (event: 'save', form: any): void;
}>();

const toolOptions = [
    { label: '洗发露/护发素', value: 'shampoo' },
    { label: '精油', value: 'oil' },
    { label: '头皮喷雾', value: 'spray' },
    { label: '毛巾', value: 'towel' },
    { label: '镜子', value: 'mirror' },
    { label: '发箍', value: 'hairBand' },
    { label: '梳子', value: 'comb' },
    { label: '吹风机', value: 'dryer' },
    { label: '热水', value: 'hotWater' },
];

const form = reactive({
    breakdownId: props.breakdownId,
    photographer: '张华',
    editor: '李明',
    frameReviewer: '王强',
    techReviewer: '赵雷',
    model: 'Anna',
    voice: '解说-男声1',
    scene: '室内浴室/洗手台',
    light: '柔和明亮暖光',
    clothes: '简约居家服',
    props: {
        earring: true,
        necklace: false,
    },
    tools: {
        shampoo: true,
        oil: false,
        spray: false,
        towel: true,
        mirror: true,
        hairBand: false,
        comb: false,
        dryer: false,
        hotWater: false,
    } as Record<string, boolean>,
    otherTools: '',
    specialNeed: '例如：淡水脚本，提醒模特自带服装',
    remark: '请注意控制拍摄时长在15秒内，重点突出前后效果对比',
    shots: [
        {
            id: 1,
            script: '开场前3秒：模特拿洗发露特写，展示受损发质与修复效果对比',
            dialog: '“头发干枯毛躁？别再用传统洗发水了！”',
            notice: '抓取强对比特写，前3秒背景音效要吸引人',
        },
        {
            id: 2,
            script: '挤出产品质地特写，泡沫丰富绵密',
            dialog: '“看看这绵密的云朵泡沫，蕴含多种植物精油”',
            notice: '特写镜头需光线充足，突出泡沫光泽感',
        },
    ] as ShotItem[],
    videoFormat: 'MP4 / H.264',
    videoSize: '9:16 竖屏 (1080x1920)',
    subtitle: '双语花字字幕',
    quality: '1080P / 60fps',
    bgm: '轻快卡点轻音乐',
    bottomCopy: '【特惠活动】点击下方链接，买一送一限量抢购！',
    otherCopy: '请勿包含违禁词及夸大宣传词汇',
});

watch(
    () => props.breakdownId,
    (value) => {
        form.breakdownId = value || 'CJB-06131146256-7133';
    },
    { immediate: true }
);

const addShot = () => {
    form.shots.push({
        id: Date.now(),
        script: '',
        dialog: '',
        notice: '',
    });
};

const removeShot = (index: number) => {
    form.shots.splice(index, 1);
};

const copyBreakdownId = () => {
    ElMessage.success(`已复制：${form.breakdownId}`);
};

const recognize = () => {
    ElMessage.success('识别完成');
};

const save = () => {
    emit('save', form);
    visible.value = false;
};
</script>

<style scoped lang="scss">
.dialog-header,
.dialog-toolbar,
.dialog-footer {
    border-bottom: 1px solid #edf0f5;
}

.dialog-footer {
    border-top: 1px solid #edf0f5;
    border-bottom: none;
}

.breakdown-body {
    max-height: calc(100vh - 210px);
    overflow: auto;
}

.breakdown-table {
    border: 1px solid #dce5f0;
}

.grid-row {
    display: grid;
    grid-template-columns: 96px repeat(6, 1fr);
}

.table-side,
.table-head,
.table-label,
.table-cell {
    min-height: 34px;
    padding: 8px 10px;
    border-right: 1px solid #dce5f0;
    border-bottom: 1px solid #dce5f0;
}

.table-side,
.table-head,
.table-label {
    background-color: #f8fbff;
    color: #40556f;
    font-weight: bold;
}

.table-cell {
    background-color: #fff;
}

.row-span-2 {
    grid-row: span 2;
}

.row-span-5 {
    grid-row: span 5;
}

.col-span-2 {
    grid-column: span 2;
}

.col-span-3 {
    grid-column: span 3;
}

.col-span-5 {
    grid-column: span 5;
}

.col-span-6 {
    grid-column: span 6;
}

.double-line {
    line-height: 18px;
}

.required::before {
    content: '*';
    color: #f03b65;
}

.shooting-side {
    grid-row: span 7;
}

.upload-box {
    border: 1px dashed #d7e1ee;
    background-color: #fbfdff;
}

.breakdown-dialog {
    :deep(.el-textarea__inner) {
        box-shadow: 0 0 0 1px #dce4f0 inset;
    }

    :deep(.el-input__wrapper) {
        box-shadow: none;
    }

    :deep(.el-textarea__inner) {
        min-height: 82px !important;
    }
}
</style>
