<template>
    <div class="p-20 vh100 hidden">
        <el-card class="h-full round-10 content" shadow="never">
            <template #header>
                <div class="flex-items-center">
                    <div class="">
                        <span class="fw-600">{{title}}</span>
                    </div>
                    <div class="flex-1 flex-center gap-10 mr-100">
                        <div v-for="(item, index) in steps" :key="index" class="flex-items-center gap-10 default"
                            :class="{ finish: item.stepn < currentStep, active: item.stepn === currentStep, select: selectStep === item.stepn }" @click="lookStep(item)">
                            <div class="flex-items-center px-10 py-6 gap-6 round-6 pointer color-888 name">
                                <el-icon>
                                    <component :is="item.icon" />
                                </el-icon>
                                <span>{{ item.name }}</span>
                            </div>
                            <div v-if="index < steps.length-1" class="w-40 line" style="height: 1px;"></div>
                        </div>
                    </div>
                </div>
            </template>
            <div class="flex h-full">
                <Step1 v-if="selectStep === 1" @create-record="addCreateRecord" />
                <Step2 v-else-if="selectStep === 2" @create-preview="addPreviewRecord" />
                <Step3 v-else-if="selectStep === 3" @create-video="addVideoRecord" />
                <Step4 v-else-if="selectStep === 4" @upload-resource="addUploadRecord" />
                <div v-else class="flex-1 flex-center color-888 fs-14">当前步骤内容待生成</div>
                <aside class="record-side flex-col bg-fff">
                    <header class="record-header flex-items-center gap-8 h-48 px-16">
                        <el-icon class="color-main">
                            <ChatDotSquare />
                        </el-icon>
                        <span class="fs-14 fw-700 color-000">创作记录</span>
                    </header>
                    <div class="flex-1 over-y-auto px-18 py-16">
                        <div class="flex justify-end mb-16">
                            <div class="user-message color-fff fs-12 lh-20 px-16 py-10 round-8">
                                用我的「商品」拍一条营销视频
                            </div>
                        </div>
                        <div class="product-mini flex-items-center gap-12 p-12 round-8 mb-20">
                            <img :src="productImg" alt="看看卡萨斯" class="mini-cover wh-58 round-4 cover" />
                            <div>
                                <div class="fs-12 fw-700 color-000 mb-6">看看卡萨斯</div>
                                <div class="fs-12 color-888">商品 · 共 1 张参考图</div>
                            </div>
                        </div>

                        <div class="assistant-text fs-12 color-333 lh-22 mb-18">
                            为了帮您制作合适的电商营销视频，请补充具体商品信息，例如商品名称、所属品类、品牌或款式。
                        </div>
                        <div class="flex justify-end mb-18">
                            <div class="user-message color-fff fs-12 lh-20 px-16 py-10 round-8">看看卡萨斯</div>
                        </div>
                        <div class="assistant-text fs-12 color-333 lh-22 mb-14">
                            商品信息已确认，正在为您进行需求分析。
                        </div>
                        <div class="record-card flex-items-center gap-12 p-12 round-10 mb-20">
                            <el-icon class="color-main fs-18">
                                <Document />
                            </el-icon>
                            <div>
                                <div class="fs-12 fw-700 color-000 mb-4">看看卡萨斯</div>
                                <div class="fs-10 color-999">查看详情 ｜ 09:12</div>
                            </div>
                        </div>

                        <template v-for="item in chatMessages" :key="item.id">
                            <div class="assistant-text fs-12 color-333 lh-22 mb-12">
                                已根据您的要求更新需求分析内容。
                            </div>
                            <div class="flex justify-end mb-18">
                                <div class="user-message color-fff fs-12 lh-20 px-16 py-10 round-8">{{ item.content }}
                                </div>
                            </div>
                        </template>
                    </div>
                    <div class="chat-input-wrap p-12">
                        <div class="chat-input flex-items-center gap-10 p-8 round-8">
                            <el-input v-model="chatInput" class="chat-text flex-1" type="textarea" resize="none"
                                :rows="2" placeholder="卡萨丁卡上课的" />
                            <el-button type="primary" class="send-btn wh-36 p-0 border-none" @click="sendChatMessage">
                                <el-icon>
                                    <Top />
                                </el-icon>
                            </el-button>
                        </div>
                    </div>
                </aside>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ChatDotSquare, Document, Edit, Top } from '@element-plus/icons-vue';
import productImg from '@/static/image/huaban.png';
import Step1 from './components/Step1.vue';
import Step2 from './components/Step2.vue';
import Step3 from './components/Step3.vue';
import Step4 from './components/Step4.vue';

type ChatMessage = {
    id: number;
    content: string;
};

const title = ref('商品分析信息')
const currentStep = ref(4)
const selectStep = ref(1)
const steps = ref([
    { name: '需求分析', icon: Edit, stepn: 1, desc: '商品分析信息' },
    { name: '创意与分镜', icon: Edit, stepn: 2, desc: '创意与分镜' },
    { name: '视频预览', icon: Edit, stepn: 3, desc: '视频预览' },
    { name: '视频成片', icon: Edit, stepn: 4, desc: '视频成片' },
])
const lookStep = (item:any)=>{
    if(currentStep.value < item.stepn) return
    selectStep.value = item.stepn
    title.value = item.desc
}

const chatMessages = ref<ChatMessage[]>([
    { id: 1, content: '大活动哈师大' },
    { id: 2, content: '大萨达搬还打算大萨达' },
    { id: 3, content: '大萨达马上到凯撒' },
    { id: 4, content: '大萨达久啊圣诞节啊十八大手机登记登记啊萨' },
    { id: 5, content: '流量卡的角度讲撒娇大萨达' },
]);
const chatInput = ref('');

const sendChatMessage = () => {
    const value = chatInput.value.trim();
    if (!value) {
        return;
    }
    chatMessages.value.push({
        id: Date.now(),
        content: value,
    });
    chatInput.value = '';
};

const addCreateRecord = () => {
    currentStep.value = Math.max(currentStep.value, 2);
    selectStep.value = 2;
    title.value = '创意与分镜';
    chatMessages.value.push({
        id: Date.now(),
        content: '生成创意与分镜',
    });
};

const addPreviewRecord = () => {
    currentStep.value = Math.max(currentStep.value, 3);
    selectStep.value = 3;
    title.value = '视频预览';
    chatMessages.value.push({
        id: Date.now(),
        content: '生成视频预览',
    });
};

const addVideoRecord = () => {
    currentStep.value = Math.max(currentStep.value, 4);
    selectStep.value = 4;
    title.value = '视频成片';
    chatMessages.value.push({
        id: Date.now(),
        content: '生成视频成片',
    });
};

const addUploadRecord = () => {
    chatMessages.value.push({
        id: Date.now(),
        content: '上传资源库',
    });
};
</script>

<style scoped lang="scss">
.content {
    :deep(.el-card__body) {
        padding: 0;
    }
}

.default {
    .name {
        &:hover {
            background-color: #eee;
        }
    }

    .line {
        background: #ddd;
    }

    &.finish {
        .name {
            color: #01b95d;
        }

        .line {
            background: #01b95d;
        }
    }
    &.active {
        .name {
            color: rgba(var(--main-color), 1);
        }

        .line {
            background: rgba(var(--main-color), 1);
        }
    }
    &.select {
        .name {
            color: #fff;
            background-color: rgba(var(--main-color), 1);
        }

        .line {
            background: rgba(var(--main-color), 1);
        }
    }
}

.backhover {
    &:hover {
        color: rgba(var(--main-color), 1);
    }
}

.record-card,
.product-mini {
    border: 1px solid #dce6f2;
}

.send-btn,
.user-message {
    background: #7d28ff;
}

.record-side {
    flex: 0 0 30%;
    border-left: 1px solid #dce6f2;
}

.record-header {
    border-bottom: 1px solid #dce6f2;
}

.product-mini {
    width: 250px;
    margin-left: auto;
    background: #f4f0ff;
}

.mini-cover {
    background: #f8fafc;
}

.record-card {
    width: 280px;
    background: #fbfdff;
}

.chat-input-wrap {
    border-top: 1px solid #dce6f2;
}

.chat-input {
    border: 1px solid #dce6f2;
    background: #fbfdff;
}

:deep(.chat-text .el-textarea__inner) {
    padding: 0;
    box-shadow: none;
    background: transparent;
}

:deep(.chat-text .el-textarea__inner) {
    font-size: 12px;
}
</style>
