<template>
    <main class="flex-1 flex-col">
        <div class="flex-1 over-y-auto hide-scroll py-20 px-20">
            <div>
                <div class="mb-10">
                    1. 商品参考图
                    <span class="fs-12 color-888">(上传丰富的参考图有助于提升模型的生成质量)</span>
                </div>
                <UploadFile v-model="referenceFiles" :width="104" :show-file-list="false" />
            </div>
            <div class="mt-20">
                <div class="fw-600">2. 商品详细信息</div>
                <div class="flex gap-12 flex-wrap mt-10">
                    <div class="base-card px-16 py-10 round-10 bg-fff">
                        <div class="mb-10">商品名称</div>
                        <el-input v-model="product.name" class="plain-input" />
                    </div>
                    <div class="base-card px-16 py-10 round-10 bg-fff">
                        <div class="mb-10">商品行业</div>
                        <el-input v-model="product.industry" class="plain-input" />
                    </div>
                    <div class="base-card px-16 py-10 round-10 bg-fff">
                        <div class="mb-10">商品品类</div>
                        <el-input v-model="product.category" class="plain-input" />
                    </div>
                </div>
                <div class="flex flex-wrap gap-12 mt-20">
                    <div v-for="section in productSections" :key="section.key"
                        class="detail-card flex-col p-18 round-10 bg-fff"
                        :class="{ editing: isSectionEditing(section.key) }">
                        <div class="flex-between mb-14">
                            <div class="fs-14 fw-600">{{ section.title }}</div>
                            <el-icon class="edit-icon pointer" @click.stop="toggleSectionEdit(section.key)">
                                <Check v-if="isSectionEditing(section.key)" />
                                <Edit v-else />
                            </el-icon>
                        </div>

                        <template v-if="isSectionEditing(section.key)">
                            <template v-if="section.items.length">
                                <div v-for="(_, index) in section.items" :key="`${section.key}-${index}`"
                                    class="editable-row flex-items-center gap-8 h-34 px-8 mb-6 round-4">
                                    <span class="dot flex-center wh-6 round"></span>
                                    <el-input v-model="section.items[index]" class="row-input flex-1" />
                                    <el-icon class="delete-line color-999 pointer"
                                        @click="removeSectionItem(section.key, index)">
                                        <Delete />
                                    </el-icon>
                                </div>
                            </template>
                            <div v-else class="fs-14 color-666 mb-12">暂无{{ section.title }}</div>

                            <div class="add-row flex-items-center gap-8 mt-8">
                                <el-input v-model="section.draft" class="add-input flex-1"
                                    :placeholder="`添加${section.title}`" @keyup.enter="addSectionItem(section.key)" />
                                <el-button type="primary" class="add-btn wh-34 p-0 border-none"
                                    @click="addSectionItem(section.key)">
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                </el-button>
                            </div>
                        </template>
                        <template v-else>
                            <div v-if="section.items.length" class="view-list flex-col gap-8">
                                <div v-for="item in section.items" :key="item"
                                    class="view-row flex-items-center gap-8 fs-12 lh-22 color-333">
                                    <span class="dot flex-center wh-6 round"></span>
                                    <span>{{ item }}</span>
                                </div>
                            </div>
                            <div v-else class="fs-14 color-666">暂无{{ section.title }}</div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
        <footer class="flex justify-end pt-12 pb-12 pr-20" style="border-top: 1px solid #eee;">
            <el-button class="fs-12">一键成片</el-button>
            <el-button type="primary" class="fs-12 border-none create-btn" @click="emit('createRecord')">
                生成创意与分镜
            </el-button>
        </footer>
    </main>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { UploadUserFile } from 'element-plus';
import { Check, Delete, Edit, Plus } from '@element-plus/icons-vue';
import UploadFile from '@/components/Upload/index.vue';

type ProductSection = {
    key: string;
    title: string;
    draft: string;
    items: string[];
};

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

const product = reactive({
    name: '看看卡萨斯',
    industry: '电商零售',
    category: '待补充具体品类',
});

const referenceFiles = ref<UploadUserFile[]>([]);
const editingSectionKeys = ref<string[]>([]);

const productSections = reactive<ProductSection[]>([
    {
        key: 'selling',
        title: '商品卖点',
        draft: '',
        items: ['核心功能突出', '使用简单', '效果直观', '适配日常场景'],
    },
    {
        key: 'pain',
        title: '商品痛点',
        draft: '',
        items: ['现有产品使用体验不佳', '难以直观看到使用效果', '同类商品选择成本高'],
    },
    {
        key: 'target',
        title: '目标人群',
        draft: '',
        items: ['有看看卡萨斯相关使用需求的消费者', '关注实际效果的人群', '重视性价比的用户'],
    },
    {
        key: 'scene',
        title: '适用人群和场景',
        draft: '',
        items: ['日常家庭使用', '需要快速解决问题时使用', '购买同类商品前对比选择'],
    },
    {
        key: 'spec',
        title: '商品规格',
        draft: '',
        items: ['核心功能配置', '便携易用设计', '适配常见使用环境'],
    },
    {
        key: 'discount',
        title: '优惠信息',
        draft: '',
        items: [],
    },
]);

const findSection = (key: string) => productSections.find((section) => section.key === key);

const isSectionEditing = (key: string) => editingSectionKeys.value.includes(key);

const toggleSectionEdit = (key: string) => {
    if (isSectionEditing(key)) {
        editingSectionKeys.value = editingSectionKeys.value.filter((item) => item !== key);
        return;
    }
    editingSectionKeys.value = [...editingSectionKeys.value, key];
};

const addSectionItem = (key: string) => {
    const section = findSection(key);
    const value = section?.draft.trim();
    if (!section || !value) {
        return;
    }
    section.items.push(value);
    section.draft = '';
};

const removeSectionItem = (key: string, index: number) => {
    const section = findSection(key);
    section?.items.splice(index, 1);
};
</script>

<style scoped lang="scss">
.base-card,
.detail-card {
    border: 1px solid #dce6f2;
}

.base-card {
    flex: 0 0 calc((100% - 12px) / 2);

    &:hover {
        border-color: rgba(var(--main-color), .6);
    }
}

.detail-card {
    flex: 0 0 calc((100% - 12px) / 2);
    min-height: 158px;
    transition: border-color .2s, box-shadow .2s;

    &:hover {
        border-color: rgba(var(--main-color), .6);
    }

    &.editing {
        border-color: #dce6f2;
    }
}

.editable-row {
    background: #f8fafc;

    &:hover {
        background: #f3f6fa;
    }
}

.dot {
    flex: 0 0 6px;
    background: #c8d4e3;
}

.edit-icon {
    color: #8aa0bf;

    &:hover {
        color: #7d28ff;
    }
}

.delete-line {
    flex: 0 0 18px;
}

.add-row {
    border-top: 1px solid #edf2f7;
    padding-top: 10px;
}

.add-btn,
.create-btn {
    background: #7d28ff;
}

:deep(.plain-input .el-input__wrapper),
:deep(.row-input .el-input__wrapper),
:deep(.add-input .el-input__wrapper) {
    padding: 0;
    box-shadow: none;
    background: transparent;
}

:deep(.plain-input .el-input__inner) {
    height: 26px;
    font-size: 14px;
    color: #0a1b34;
}

:deep(.row-input .el-input__inner),
:deep(.add-input .el-input__inner) {
    height: 30px;
    font-size: 12px;
}

:deep(.add-input .el-input__wrapper) {
    padding: 0 10px;
    border: 1px solid #dce6f2;
    border-radius: 4px;
    background: #fff;
}
</style>
