<template>
    <Dialog v-model="dialogVisible" bg-color="#fff" width="1000">
        <div class="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">
                        <User />
                    </el-icon>
                </span>
                <div>
                    <div class="flex-items-center gap-8">
                        <h3 class="fs-16 lh-22 color-000">AI 智能数字人分身工作台</h3>
                    </div>
                    <p class="fs-12 lh-20 color-888">高保真音容笑貌克隆，无需实景拍摄，分钟级输出口播带货视频</p>
                </div>
            </header>

            <section class="dialog-body flex gap-24 px-24 py-24">
                <div class="left-column flex-col gap-24 flex-1">
                    <div>
                        <div class="lh-22 mb-14">1 · 选择主播模特分身</div>
                        <div class="anchor-list flex flex-wrap gap-12 w-full">
                            <div v-for="item in anchors" :key="item.id"
                                class="anchor-option pointer"
                                :class="{ active: selectedAnchor === item.id }"
                                @click="selectAnchor(item.id)">
                                <div class="anchor-card flex-items-center gap-12 p-14 round-12 bg-fff">
                                    <span class="avatar flex-center wh-42 round hidden"
                                        :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">{{ item.name.slice(0, 1) }}</span>
                                    </span>
                                    <span class="anchor-copy flex-col text-left">
                                        <span class="anchor-name lh-20 color-000">{{ item.name }}</span>
                                        <span class="anchor-desc fs-12 lh-20 color-888">{{ item.desc }}</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="lh-22  mb-10">2 · 调节声音音色及音速</div>
                        <div class="voice-panel p-16 round-14">
                            <div class="fs-12 lh-20  color-888 mb-8">推荐音色标签</div>
                            <el-select v-model="voiceStyle" class="w-full" size="large">
                                <el-option label="热情高亢（带货爆款）" value="hot" />
                                <el-option label="温柔亲和（护肤种草）" value="soft" />
                                <el-option label="专业可信（知识讲解）" value="pro" />
                            </el-select>
                            <div class="flex-between mt-14">
                                <span class="fs-12 lh-20  color-888">口播语速倍率</span>
                                <span class="fs-12 lh-20  speed-value">{{ speed.toFixed(2) }}x</span>
                            </div>
                            <el-slider v-model="speed" :min="0.8" :max="1.3" :step="0.05" :show-tooltip="false" />
                        </div>
                    </div>
                </div>

                <div class="right-column flex-col gap-24 flex-1">
                    <div>
                        <div class="lh-22  mb-10">3 · 设定数字人播报文案</div>
                        <el-input v-model="scriptText" class="script-input" type="textarea" resize="none" :rows="7"
                            maxlength="300" show-word-limit />
                        <div class="flex-between mt-12 fs-12 color-888">
                            <span>建议文案字数控制在 300 字以内</span>
                            <span>当前: {{ scriptText.length }} 字</span>
                        </div>
                    </div>

                    <div class="cost-card flex-col gap-12 p-18 round-14 mt-auto">
                        <div class="flex-between">
                            <div class=" lh-22  color-888">所需积分消耗</div>
                            <div class=" lh-22  cost-value">40 点算力</div>
                        </div>

                        <el-button type="primary" class="submit-btn h-40 round-10 border-none">
                            <el-icon>
                                <User />
                            </el-icon>
                            <span>一键合成数字人推流视频</span>
                        </el-button>
                    </div>
                </div>
            </section>
        </div>
    </Dialog>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { User } from '@element-plus/icons-vue';
import peopleImg from '@/static/image/meinv.png';
import productImg from '@/static/image/huaban.png';

type AnchorItem = {
    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 anchors: AnchorItem[] = [
    { id: 'xiaomei', name: '主播小美', desc: '甜美知性 · 亲和力极佳', avatar: peopleImg, avatarBg: '#edf3fb' },
    { id: 'daliu', name: '主播大刘', desc: '专业严谨 · 沉稳有说服力', avatarBg: 'linear-gradient(135deg, #ba7a43, #16324f)' },
    { id: 'luoxi', name: '主播露西', desc: '外籍超模 · 时尚气息浓郁', avatar: productImg, avatarBg: '#dff4fb' },
    { id: 'wang', name: '主播王总', desc: '中年精英 · 行业大咖气质', avatarBg: 'linear-gradient(135deg, #d9c4ae, #2e3b32)' },
];

const selectedAnchor = ref('xiaomei');
const voiceStyle = ref('hot');
const speed = ref(1.05);
const scriptText = ref('哈罗各位宝宝们！今天给大家带来一款超级好用的黑科技香水。轻轻一喷，香味持久一整天，而且前中后调都特别有层次感。现在下单还享受买一送一哦，心动的宝宝赶紧点击下方链接抢购吧！');

const selectAnchor = (id: string) => {
    selectedAnchor.value = id;
};
</script>

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

.header-icon {
    color: #f23594;
    background: #fff0f7;
}

.anchor-list {
    align-items: stretch;
}

.anchor-option {
    flex: 0 0 calc((100% - 12px) / 2);
    border: 1px solid #dfe7f2;
    border-radius: 14px;
    transition: border-color .2s, box-shadow .2s;
}

.anchor-option.active {
    border-color: #f23594;
    box-shadow: 0 0 0 1px #f23594;
}

.anchor-option:hover {
    border-color: #f23594;
}

.anchor-card {
    min-height: 66px;
}

.voice-panel,
.script-input :deep(.el-textarea__inner),
.cost-card {
    border: 1px solid #dfe7f2;
    background: #fbfdff;
}

:deep(.el-select__wrapper) {
    border-radius: 10px;
    box-shadow: 0 0 0 1px #dfe7f2 inset;
    background: #fff;
}

:deep(.el-slider__bar),
:deep(.el-slider__button) {
    background: #f23594;
}

:deep(.el-slider__button) {
    border-color: #f23594;
}

.speed-value,
.cost-value {
    color: #f23594;
}

.script-input :deep(.el-textarea__inner) {
    min-height: 174px !important;
    padding: 16px;
    border-radius: 14px;
    box-shadow: none;
    color: #183151;
    line-height: 24px;
}

.script-input :deep(.el-input__count) {
    display: none;
}

.submit-btn {
    width: 100%;
    background: #f23594;
    box-shadow: 0 8px 18px rgba(242, 53, 148, .24);
}

.right-column {
    min-width: 0;
}
</style>
