<template>
    <Dialog v-model="dialogVisible" bg-color="#fff" width="1000">
        <div class="tryon-dialog bg-fff hidden round-10">
            <header class="dialog-header flex-items-center gap-12 px-24 py-18">
                <span class="header-icon flex-center wh-32 round-6">
                    <el-icon class="fs-20">
                        <MagicStick />
                    </el-icon>
                </span>
                <div>
                    <div class="flex-items-center gap-8">
                        <h3 class="fs-16 lh-22 color-000">模特换衣</h3>
                        <span class="batch-tag h-22 lh-22 px-10 round-6 fs-10 fw-700">PRO BATCH</span>
                    </div>
                    <p class="fs-12 lh-20 color-888">将您的服装智能融合到数字模特与写实商用场景中，极速批量生成商用主图</p>
                </div>
            </header>

            <section class="dialog-body px-24 py-24 over-y-auto">
                <div class="step-row flex-between mb-14">
                    <div class="step-title flex-items-center gap-8">
                        <span class="step-index flex-center w-20 h-20 round-6 fs-12">1</span>
                        <span class="lh-22 fw-700 color-000">选择或上传模特原型（MODEL PROTOTYPE）</span>
                    </div>
                    <div class="switch-tabs flex-items-center h-34 p-4 round-8">
                        <el-button v-for="item in modelSources" :key="item.value"
                            class="h-26 px-12 round-6 border-none fs-12" :class="{ active: modelSource === item.value }"
                            text @click="modelSource = item.value">
                            {{ item.label }}
                        </el-button>
                    </div>
                </div>
                <div v-if="modelSource === 'library'" class="model-list flex gap-16">
                    <div v-for="item in models" :key="item.id" class="model-card flex-1 p-6 round-14 pointer"
                        :class="{ active: selectedModel === item.id }" @click="selectedModel = item.id">
                        <div class="model-cover relative h-202 hidden round-10">
                            <img v-if="item.image" :src="item.image" :alt="item.name" class="w-full h-full cover" />
                            <div v-else class="fake-portrait w-full h-full" :style="{ background: item.bg }"></div>
                            <span class="gender-tag absolute right-8 bottom-8 h-20 lh-20 px-8 round-6 fs-10 color-fff">
                                {{ item.gender }}
                            </span>
                        </div>
                        <div class="text-center mt-8">
                            <div class="fs-12 lh-20 fw-700 color-000">{{ item.name }}</div>
                            <div class="fs-12 lh-18 color-888">{{ item.desc }}</div>
                        </div>
                    </div>
                </div>
                <UploadFile v-else listType="drap" />

                <div class="section-line my-24"></div>

                <div class="step-row flex-between mb-12">
                    <div class="step-title flex-items-center gap-8">
                        <span class="step-index flex-center w-20 h-20 round-6 fs-12">2</span>
                        <span class="lh-22 fw-700 color-000">调整模特身材类型（MODEL FIGURE TYPE）</span>
                    </div>
                    <div class="switch-tabs flex-items-center h-34 p-4 round-8">
                        <el-button v-for="item in bodyModes" :key="item.value"
                            class="h-26 px-12 round-6 border-none fs-12" :class="{ active: bodyMode === item.value }"
                            text @click="bodyMode = item.value">
                            {{ item.label }}
                        </el-button>
                    </div>
                </div>
                <div v-if="bodyMode === 'origin'"
                    class="tip-box flex-items-center gap-8 h-44 px-16 round-10 fs-12 color-888">
                    <el-icon class="tip-icon">
                        <Opportunity />
                    </el-icon>
                    <span>智能引擎将保持上传模特照片中的原本身材形态、比例与线条，仅完成衣物及高级换脸的智能融合。</span>
                </div>
                <div v-else class="figure-list flex flex-wrap gap-12">
                    <div v-for="item in figureTemplates" :key="item.id"
                        class="figure-card flex-col justify-center h-48 px-14 round-10 pointer"
                        :class="{ active: selectedFigure === item.id }" @click="selectedFigure = item.id">
                        <div class="fs-12 lh-20 fw-700 color-000">{{ item.name }}</div>
                        <div class="fs-10 lh-18 color-888">{{ item.desc }}</div>
                    </div>
                </div>

                <div class="section-line my-24"></div>

                <div class="step-row flex-between mb-12">
                    <div class="step-title flex-items-center gap-8">
                        <span class="step-index flex-center w-20 h-20 round-6 fs-12">3</span>
                        <span class="lh-22 fw-700 color-000">高级智能换脸 / 面孔重塑</span>
                    </div>
                    <div class="flex-items-center gap-8">
                        <el-switch v-model="faceEnabled" size="small" />
                        <span class="fs-12 fw-700 color-000">{{ faceEnabled ? '换脸已开启' : '换脸未开启' }}</span>
                    </div>
                </div>
                <div v-if="!faceEnabled" class="tip-box flex-center h-38 px-16 round-20 fs-12 color-888">
                    <el-icon class="tip-icon mr-6">
                        <Opportunity />
                    </el-icon>
                    <span>关闭换脸重塑后，模特将自动保持原型人面孔，或应用内置数字模特默认五官。</span>
                </div>
                <div v-else class="face-panel p-18 round-16">
                    <div class="face-tabs flex-items-center gap-16 mb-14">
                        <el-button v-for="item in faceSources" :key="item.value"
                            class="h-32 px-16 round-8 border-none fs-12" :class="{ active: faceSource === item.value }"
                            text @click="faceSource = item.value">
                            {{ item.label }}
                        </el-button>
                    </div>
                    <div class="face-list flex gap-12">
                        <div v-for="item in faceModels" :key="item.id"
                            class="face-card flex-1 flex-col flex-center h-92 round-10 pointer"
                            :class="{ active: selectedFace === item.id }" @click="selectedFace = item.id">
                            <span class="face-avatar flex-center wh-40 round hidden mb-6"
                                :style="{ background: item.avatarBg }">
                                <img v-if="item.avatar" :src="item.avatar" :alt="item.name"
                                    class="w-full h-full cover" />
                                <span v-else class="color-fff fs-12">{{ item.name.slice(0, 1) }}</span>
                            </span>
                            <div class="fs-12 lh-20 fw-700 color-000">{{ item.name }}</div>
                            <div class="fs-10 lh-18 color-888">{{ item.desc }}</div>
                        </div>
                    </div>
                </div>

                <div class="section-line my-24"></div>

                <div class="step-row flex-between mb-14">
                    <div class="step-title flex-items-center gap-8">
                        <span class="step-index flex-center w-20 h-20 round-6 fs-12">4</span>
                        <span class="lh-22 fw-700 color-000">选择服装（一次支持上传 / 添加多张批量生成）</span>
                    </div>
                    <div class="switch-tabs flex-items-center h-34 p-4 round-8">
                        <el-button v-for="item in clothSources" :key="item.value"
                            class="h-26 px-12 round-6 border-none fs-12" :class="{ active: clothSource === item.value }"
                            text @click="clothSource = item.value">
                            {{ item.label }}
                        </el-button>
                    </div>
                </div>
                <div v-if="clothSource==='multi'">
                    <div class="cloth-list flex gap-14">
                        <div v-for="item in clothes" :key="item.id" class="cloth-card relative h-182 round-10 hidden">
                            <img :src="item.image" :alt="item.name" class="w-full h-full cover" />
                            <span class="cloth-tag absolute left-8 bottom-8 h-22 lh-22 px-8 round-6 fs-10 color-fff">
                                {{ item.name }}
                            </span>
                        </div>
                        <div class="cloth-card add-cloth flex-col flex-center h-182 round-10 pointer">
                            <el-icon class="fs-24 mb-8">
                                <Plus />
                            </el-icon>
                            <span class="fs-12 color-888">添加上传衣服</span>
                        </div>
                    </div>
                    <p class="flex-items-center mt-12 fs-12 lh-20 color-888">
                        <el-icon class="tip-icon mr-6">
                            <Opportunity />
                        </el-icon>
                        一次决定多张衣服照片进行上传，系统将自动对每件衣服与模特、场景进行真实穿戴试衣 Lookbook 生成。
                    </p>
                </div>
                <div v-else class="tip-box p-16 round-10 fs-12">
                    <div>
                        粘贴商品链接/ID (不同商品url/id请用“、”隔开)
                    </div>
                    <div class="flex gap-10 mt-10">
                        <el-input placeholder="粘贴商品链接/ID，请用“、”隔开" />
                        <el-button>自动解析商品</el-button>
                    </div>
                </div>

                <div class="section-line my-24"></div>

                <div class="step-row flex-between mb-14">
                    <div class="step-title flex-items-center gap-8">
                        <span class="step-index flex-center w-20 h-20 round-6 fs-12">5</span>
                        <span class="lh-22 fw-700 color-000">选择逼真商用融合场景（REQUIRED SCENE）</span>
                    </div>
                    <span class="fs-12 fw-700 required-text">* 必须选择场景</span>
                </div>
                <div class="scene-list flex gap-16">
                    <div v-for="item in scenes" :key="item.id" class="scene-card flex-1 p-4 round-12 pointer"
                        :class="{ active: selectedScene === item.id }" @click="selectedScene = item.id">
                        <div class="scene-cover relative h-112 hidden round-8">
                            <img :src="item.image" :alt="item.name" class="w-full h-full cover" />
                            <span v-if="selectedScene === item.id"
                                class="check-dot absolute flex-center wh-22 round color-fff">
                                <el-icon>
                                    <Check />
                                </el-icon>
                            </span>
                        </div>
                        <div class="px-8 py-8">
                            <div class="fs-12 lh-20 fw-700 color-000">{{ item.name }}</div>
                            <div class="fs-10 lh-18 color-888">{{ item.desc }}</div>
                        </div>
                    </div>
                </div>
            </section>

            <footer class="dialog-footer flex-between px-24 py-14">
                <div class="fs-12 color-888">
                    算力点数扣除
                    <strong class="color-main fs-16 mx-4">50</strong>
                    点数
                    <span class="fs-12 ml-6">（每件生成消耗 25 点）</span>
                </div>
                <div class="flex-items-center">
                    <el-button class="h-32 px-22 fs-12" @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" class="submit-btn fs-12 h-32 px-28 border-none">
                        <el-icon>
                            <MagicStick />
                        </el-icon>
                        <span>一键启动 AI 模特换衣（2件批量生成）</span>
                    </el-button>
                </div>
            </footer>
        </div>
    </Dialog>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { Check, MagicStick, Opportunity, Plus } from '@element-plus/icons-vue';
import peopleImg from '@/static/image/meinv.png';
import productImg from '@/static/image/huaban.png';
import UploadFile from '@/components/Upload/index.vue'

type OptionItem = {
    label: string;
    value: string;
};

type ModelItem = {
    id: string;
    name: string;
    desc: string;
    gender: string;
    image?: string;
    bg?: string;
};

type ImageCardItem = {
    id: string;
    name: string;
    desc?: string;
    image: string;
};

type FigureTemplate = {
    id: string;
    name: string;
    desc: string;
};

type FaceItem = {
    id: string;
    name: string;
    desc: string;
    avatar?: string;
    avatarBg: string;
};

const props = defineProps<{
    modelValue: boolean;
}>();

const emit = defineEmits<{
    'update:modelValue': [value: boolean];
}>();

const dialogVisible = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value),
});

const modelSources: OptionItem[] = [
    { label: '数字人库', value: 'library' },
    { label: '本地自主上传', value: 'local' },
];

const bodyModes: OptionItem[] = [
    { label: '默认图片身材', value: 'origin' },
    { label: '指定身材模板', value: 'template' },
];

const faceSources: OptionItem[] = [
    { label: '选择数字人预设面容', value: 'library' },
    { label: '用户本地上传人脸', value: 'local' },
];

const clothSources: OptionItem[] = [
    { label: '多图本地上传', value: 'multi' },
    { label: '商品链接/ID抓取', value: 'link' },
];

const models: ModelItem[] = [
    { id: 'shiyu', name: '诗雨', desc: '古典东方优雅', gender: '女性', image: peopleImg },
    { id: 'rose', name: 'Rose', desc: '欧美金发气场', gender: '女性', bg: 'linear-gradient(135deg, #d7b29c, #1d1f28)' },
    { id: 'jiale', name: '凯特', desc: '都市白领知性', gender: '女性', image: productImg },
    { id: 'tuozai', name: '拓哉', desc: '日韩轻熟形象', gender: '男性', bg: 'linear-gradient(135deg, #101014, #5a4236)' },
    { id: 'david', name: 'David', desc: '欧美时尚头', gender: '男性', bg: 'linear-gradient(135deg, #c4d2df, #34445c)' },
];

const clothes: ImageCardItem[] = [
    { id: 'cloth1', name: '衣服 #1', image: peopleImg },
    { id: 'cloth2', name: '衣服 #2', image: productImg },
];

const figureTemplates: FigureTemplate[] = [
    { id: 'slim', name: '欧美背部超模', desc: '高挑比例/肩背挺拔' },
    { id: 'sweet', name: '日系甜美少女', desc: '娇小匀称/元气少女' },
    { id: 'athletic', name: '国潮复古型男', desc: '肩宽腰窄/硬朗有型' },
    { id: 'urban', name: '资深都市丽人', desc: '优雅腰线/黄金比例' },
    { id: 'sport', name: '阳光运动型男', desc: '阳刚轮廓/腿侧线条' },
    { id: 'curve', name: '微胖丰满身材', desc: '丰满肉感/曲线柔和' },
];

const faceModels: FaceItem[] = [
    { id: 'face-xiaomei', name: '时尚小美', desc: '甜美东方', avatar: peopleImg, avatarBg: '#edf3fb' },
    { id: 'face-jia', name: '千练佳丽', desc: '知性丽人', avatar: productImg, avatarBg: '#fff0f7' },
    { id: 'face-shuai', name: '阳光小帅', desc: '活力潮男', avatarBg: 'linear-gradient(135deg, #262b36, #b47c5b)' },
    { id: 'face-han', name: '韩系欧巴', desc: '极简潮男', avatarBg: 'linear-gradient(135deg, #a9bfdb, #273449)' },
];

const scenes: ImageCardItem[] = [
    { id: 'studio', name: '高端室内摄影棚', desc: '影棚/静谧高光', image: peopleImg },
    { id: 'street', name: '巴黎春季时尚街头', desc: '户外/自然漫射', image: productImg },
    { id: 'villa', name: '奢华居家阳光露台', desc: '居家/落日氛围', image: peopleImg },
    { id: 'beach', name: '夏日热带落日海滩', desc: '海滩/海风阳光', image: productImg },
];

const modelSource = ref('library');
const bodyMode = ref('origin');
const clothSource = ref('multi');
const faceEnabled = ref(false);
const selectedModel = ref('shiyu');
const selectedScene = ref('studio');
const selectedFigure = ref('slim');
const faceSource = ref('library');
const selectedFace = ref('face-xiaomei');
</script>

<style scoped lang="scss">
.tryon-dialog {
    max-height: 92vh;
}

.dialog-header,
.dialog-footer {
    border-bottom: 1px solid #edf2f7;
}

.dialog-footer {
    border-top: 1px solid #edf2f7;
    border-bottom: 0;
}

.dialog-body {
    max-height: calc(92vh - 148px);
}

.header-icon {
    color: #1b6cff;
    background: #edf5ff;
}

.batch-tag,
.step-index {
    color: #1b6cff;
    background: #edf5ff;
}

.switch-tabs {
    background: #f3f7fc;
    border: 1px solid #dfe7f2;
}

.switch-tabs button.active {
    color: #1b6cff;
    background: #fff;
    box-shadow: 0 1px 4px rgba(17, 36, 62, .1);
}

.model-card,
.scene-card,
.figure-card,
.face-card {
    border: 1px solid #dfe7f2;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.model-card.active,
.scene-card.active,
.figure-card.active,
.face-card.active {
    border-color: #1b6cff;
    box-shadow: 0 0 0 1px #1b6cff;
}

.model-card:hover,
.scene-card:hover,
.figure-card:hover,
.face-card:hover {
    border-color: #1b6cff;
}

.model-cover {
    background: #eef3f8;
}

.fake-portrait {
    position: relative;
}

.fake-portrait::after {
    position: absolute;
    inset: 34px 28px 0;
    border-radius: 80px 80px 16px 16px;
    background: rgba(255, 255, 255, .28);
    content: '';
}

.gender-tag,
.cloth-tag {
    background: rgba(9, 16, 28, .78);
}

.section-line {
    height: 1px;
    background: #edf2f7;
}

.tip-box,
.add-cloth,
.face-panel {
    border: 1px solid #dfe7f2;
    background: #fbfdff;
}

.figure-card {
    flex: 0 0 calc((100% - 24px) / 3);
}

.face-tabs .el-button.active {
    color: #1b6cff;
    background: #fff;
    box-shadow: 0 1px 4px rgba(17, 36, 62, .1);
}

.face-card {
    background: #fff;
}

.tip-icon {
    color: #ffbd2f;
}

.cloth-card {
    flex: 0 0 182px;
    border: 1px dashed #d9e4f2;
    background: #fbfdff;
}

.add-cloth {
    color: #8aa0bf;
}

.required-text {
    color: #ff2d55;
}

.check-dot {
    top: 50%;
    left: 50%;
    background: #1b6cff;
    transform: translate(-50%, -50%);
}

.submit-btn {
    background: #1f67ff;
    box-shadow: 0 8px 18px rgba(31, 103, 255, .24);
}
</style>
