<template>
    <main class="step2-main flex-1 flex hidden">
        <aside class="creative-list flex-col gap-12 py-20 pr-16 pl-16">
            <div v-for="item in creatives" :key="item.id" class="creative-card p-12 round-6 pointer"
                :class="{ active: selectedCreativeId === item.id }" @click="selectedCreativeId = item.id">
                <div class="flex-between mb-10">
                    <span class="fs-14 fw-700 color-000">{{ item.title }}</span>
                    <span class="tag h-24 lh-24 px-8 round-4 fs-12">{{ item.tag }}</span>
                </div>
                <div class="fs-14 fw-700 color-000 mb-8 ellipsis">{{ item.name }}</div>
                <div class="fs-12 color-666 lh-20 ellipsis-2">{{ item.desc }}</div>
            </div>
        </aside>

        <div class="flex-1 flex-col">
            <section class="step2-content flex-1 over-y-auto hide-scroll py-20 pr-20">
                <div class="creative-detail bg-fff round-8 hidden">
                    <div class="p-24">
                        <div class="flex-between mb-14">
                            <div class="flex-items-center gap-8">
                                <span class="color-main fs-12 fw-700">{{ selectedCreative.title }}</span>
                                <span class="tag h-22 lh-22 px-8 round-4 fs-12">{{ selectedCreative.tag }}</span>
                            </div>
                            <el-icon class="color-888 pointer">
                                <MoreFilled />
                            </el-icon>
                        </div>
                        <div class=" fw-700 color-000 mb-22">{{ selectedCreative.name }}</div>
                        <div class="summary-box p-16 round-8">
                            <div class="fs-14 fw-700 color-000 mb-10">创意概述</div>
                            <div class="fs-14 color-333 lh-24">{{ selectedCreative.desc }}</div>
                        </div>
                        <div class="flex-items-center gap-6 mt-18 pointer color-333 fs-12 fw-700"
                            @click="isCreativeExpanded = !isCreativeExpanded">
                            <span>{{ isCreativeExpanded ? '收起完整创意' : '查看完整创意' }}</span>
                            <el-icon>
                                <ArrowUp v-if="isCreativeExpanded" />
                                <ArrowRight v-else />
                            </el-icon>
                        </div>
                        <div v-if="isCreativeExpanded" class="full-creative mt-24 pt-24">
                            <div v-for="item in fullCreativeItems" :key="item.title" class="mb-24">
                                <div class="fs-14 fw-700 color-000 mb-12">{{ item.title }}</div>
                                <div class="fs-14 color-333 lh-24">{{ item.content }}</div>
                            </div>
                        </div>
                    </div>

                    <div class="script-panel p-24">
                        <h3 class="fs-14 fw-700 color-main mb-28">分镜脚本</h3>
                        <section class="mb-28">
                            <h4 class="fs-14 fw-700 color-000 mb-14">1. 主体设定</h4>
                            <div class="subject-list flex flex-wrap gap-12">
                                <div v-for="item in subjects" :key="item.id"
                                    class="subject-card w-220 p-12 round-8 pointer relative" @click="openSubjectDialog(item.id)">
                                    <div class="flex-between mb-8 ">
                                        <div>
                                            <div class="fs-14 fw-700 color-000 mb-6">{{ item.title }}</div>
                                            <div class="fs-12 color-666 ellipsis">{{ item.desc }}</div>
                                        </div>
                                        <el-button class="wh-28 p-0 border-none bg-fff absolute top-10 right-10" @click.stop="openSubjectDialog(item.id)">
                                            <el-icon>
                                                <component :is="item.actionIcon" />
                                            </el-icon>
                                        </el-button>
                                    </div>
                                    <div class="subject-cover flex-center round-6 hidden">
                                        <img v-if="item.image" :src="item.image" :alt="item.title"
                                            class="w-full h-full cover" />
                                        <el-icon v-else class="audio-icon">
                                            <Mute />
                                        </el-icon>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <section>
                            <h4 class="fs-14 fw-700 color-000 mb-18">2. 分镜描述</h4>
                            <div v-for="shot in shots" :key="shot.id" class="shot-block mb-28">
                                <div class="shot-title flex-items-center gap-8 mb-10 fs-12 fw-700 color-333">
                                    <span class="shot-dot wh-6 round"></span>
                                    <span>{{ shot.title }}</span>
                                </div>
                                <div class="shot-table round-8 hidden">
                                    <div class="table-head flex fs-12 fw-700 color-000">
                                        <div class="dialogue-cell p-14">人物台词</div>
                                        <div class="picture-cell p-14">画面描述</div>
                                    </div>
                                    <div v-for="row in shot.rows" :key="row.id" class="table-row flex">
                                        <div class="dialogue-cell p-14 fs-12 color-333 lh-24">
                                            <span class="role-tag h-24 lh-24 px-8 round-4 fw-700 color-main mr-6">
                                                {{ row.speaker }}
                                            </span>
                                            <span>{{ row.dialogue }}</span>
                                        </div>
                                        <div class="picture-cell p-14 fs-12 color-333 lh-24">
                                            <span class="role-tag h-24 lh-24 px-8 round-4 fw-700 color-main mr-6">
                                                {{ row.actor }}
                                            </span>
                                            <span>{{ row.picture }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </section>
            <footer class="flex justify-end pt-12 pb-12 pr-20" style="border-top: 1px solid #eee;">
                <el-button type="primary" class="fs-12 border-none create-btn" @click="emit('createPreview')">
                    生成视频预览
                </el-button>
            </footer>
        </div>
    </main>

    <Step2SubjectDialog v-model="subjectDialogVisible" :subject-type="activeSubjectType" />
</template>

<script setup lang="ts">
import { computed, ref, type Component } from 'vue';
import { ArrowRight, ArrowUp, MoreFilled, Mute, Plus, VideoCamera } from '@element-plus/icons-vue';
import Step2SubjectDialog from './Step2SubjectDialog.vue';
import productImg from '@/static/image/huaban.png';
import peopleImg from '@/static/image/meinv.png';

type CreativeItem = {
    id: string;
    title: string;
    tag: string;
    name: string;
    desc: string;
};

type SubjectType = 'product' | 'actor' | 'voice';

type SubjectItem = {
    id: SubjectType;
    title: string;
    desc: string;
    image?: string;
    actionIcon: Component;
};

type ShotRow = {
    id: string;
    speaker: string;
    actor: string;
    dialogue: string;
    picture: string;
};

type ShotItem = {
    id: string;
    title: string;
    rows: ShotRow[];
};

const emit = defineEmits<{
    createPreview: [];
}>();

const selectedCreativeId = ref('creative-1');
const isCreativeExpanded = ref(false);
const subjectDialogVisible = ref(false);
const activeSubjectType = ref<SubjectType>('product');

const creatives: CreativeItem[] = [
    {
        id: 'creative-1',
        title: '创意 1',
        tag: '痛点实测',
        name: '雨天视线危机',
        desc: '从雨天挡风玻璃油膜造成视线模糊的真实痛点切入，通过清洁前后的直观对比突出产品效果。',
    },
    {
        id: 'creative-2',
        title: '创意 2',
        tag: '场景转化',
        name: '夜间炫光对比',
        desc: '聚焦夜间会车时油膜放大灯光炫光的问题，通过左右对比强化购买理由。',
    },
    {
        id: 'creative-3',
        title: '创意 3',
        tag: '效率展示',
        name: '30秒快速去膜',
        desc: '用30秒计时挑战串联完整使用过程，以快节奏实操展示简单高效的清洁效果。',
    },
];

const selectedCreative = computed(() => creatives.find((item) => item.id === selectedCreativeId.value) || creatives[0]);

const fullCreativeItems = [
    {
        title: '一、推荐理由',
        content: '以“雨天视线模糊”这一高频驾驶安全隐患为切入点，先建立车主焦虑，再用清洁前后对比直接证明产品效果，购买理由清晰。',
    },
    {
        title: '二、核心卖点',
        content: '强力去油膜、擦拭无残留、视野通透、自带海绵擦头',
    },
    {
        title: '三、卖点表现形式',
        content: '雨天实景痛点 + 半边玻璃清洁对比 + 清洁后驾驶视角展示',
    },
];

const subjects: SubjectItem[] = [
    {
        id: 'product',
        title: '商品',
        desc: '防晒霜SPF50权威检测图',
        image: productImg,
        actionIcon: Plus,
    },
    {
        id: 'actor',
        title: '人物形象 1',
        desc: '一位注重生活品质和驾驶安全的车主',
        image: peopleImg,
        actionIcon: VideoCamera,
    },
    {
        id: 'voice',
        title: '旁白',
        desc: '广告旁白音色，专业清晰，节奏沉稳',
        actionIcon: VideoCamera,
    },
];

const openSubjectDialog = (type: SubjectType) => {
    activeSubjectType.value = type;
    subjectDialogVisible.value = true;
};

const shots: ShotItem[] = [
    {
        id: 'shot-1',
        title: '镜头 1：痛点前置，引发用户共鸣',
        rows: [
            {
                id: 'shot-1-1',
                speaker: '旁白',
                actor: '人物形象 1',
                dialogue: '一下雨，挡风玻璃就像蒙了一层雾，雨刮越刮反而越模糊。',
                picture: '雨天车内第一视角，雨刮扫过后玻璃仍有大片油膜与光晕，驾驶员皱眉观察前方。',
            },
            {
                id: 'shot-1-2',
                speaker: '人物形象 1',
                actor: '商品',
                dialogue: '别急，用这款玻璃油膜清洁擦，自己就能快速处理。',
                picture: '特写展示产品外观和实际使用过程，品牌与核心卖点清晰可见。',
            },
        ],
    },
    {
        id: 'shot-2',
        title: '镜头 2：产品实测，展示去膜效果',
        rows: [
            {
                id: 'shot-2-1',
                speaker: '旁白',
                actor: '人物形象 1',
                dialogue: '用它在玻璃上轻轻擦几遍，冲水后油膜很快就被带走了。',
                picture: '近景展示玻璃油膜清洁擦，完成涂抹、擦拭和冲水；画面保留一半未清洁区域形成直观对比。',
            },
            {
                id: 'shot-2-2',
                speaker: '人物形象 1',
                actor: '商品',
                dialogue: '操作简单，擦完以后玻璃清楚多了。',
                picture: '特写展示产品外观和实际使用过程，品牌与核心卖点清晰可见。',
            },
        ],
    },
    {
        id: 'shot-3',
        title: '镜头 3：效果收束，强化安全价值',
        rows: [
            {
                id: 'shot-3-1',
                speaker: '旁白',
                actor: '人物形象 1',
                dialogue: '玻璃重新透亮，雨天和夜间开车都安心多了。',
                picture: '切回驾驶视角，挡风玻璃清晰通透，路面与车灯轮廓清楚，产品定格收尾。',
            },
            {
                id: 'shot-3-2',
                speaker: '人物形象 1',
                actor: '商品',
                dialogue: '操作简单，擦完以后玻璃清楚多了。',
                picture: '特写展示产品外观和实际使用过程，品牌与核心卖点清晰可见。',
            },
        ],
    },
];
</script>

<style scoped lang="scss">
.step2-main {
    min-width: 0;
}

.creative-list {
    flex: 0 0 200px;
    border-right: 1px solid #dce6f2;
}

.creative-card {
    border: 1px solid #dce6f2;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;

    &:hover,
    &.active {
        border-color: rgba(var(--main-color), 1);
        box-shadow: 0 0 0 1px rgba(var(--main-color), .35);
    }
}

.tag,
.role-tag {
    color: rgba(var(--main-color), 1);
    background: rgba(var(--main-color), .08);
}

.step2-content {
    min-width: 0;
    padding-left: 24px;
}

.creative-detail {
    border: 1px solid #dce6f2;
}

.summary-box {
    background: #f8fafc;
}

.full-creative {
    border-top: 1px solid #edf2f7;
}

.script-panel {
    border-top: 1px solid #dce6f2;
}

.subject-card {
    border: 1px solid #dce6f2;
    background: #fbfdff;
}

.subject-cover {
    height: 180px;
    border: 1px dashed #dce6f2;
    background: #fff;
}

.audio-icon {
    font-size: 42px;
    color: #c4cfdd;
}

.shot-dot {
    flex: 0 0 6px;
    background: rgba(var(--main-color), 1);
}

.shot-table {
    border: 1px solid #dce6f2;
}

.table-head {
    background: #f8fafc;
}

.table-row {
    border-top: 1px solid #edf2f7;
}

.dialogue-cell,
.picture-cell {
    flex: 1;
    min-width: 0;
}

.dialogue-cell {
    border-right: 1px solid #dce6f2;
}
</style>
