<template>
    <Dialog v-model="dialogVisible" bg-color="#fff" width="720">
        <div class="voice-dialog bg-fff round-10 hidden flex-col">
            <header class="dialog-header flex-items-center gap-12 px-28 pt-28 pb-22">
                <span class="header-icon flex-center wh-48 round-10">
                    <el-icon class="fs-24 color-536">
                        <Microphone />
                    </el-icon>
                </span>
                <h3 class="fs-18 fw-700 color-000">配置音色</h3>
            </header>

            <section class="dialog-body flex-col px-32">
                <div class="tab-row flex-items-center h-44 p-4 round-6 mb-20">
                    <div v-for="item in tabs" :key="item.value" class="tab-item flex-center h-36 fs-14 pointer"
                        :class="{ active: activeTab === item.value }" @click="activeTab = item.value">
                        {{ item.label }}
                    </div>
                </div>

                <div v-if="activeTab === 'design'" class="design-panel flex-1 flex hidden">
                    <div class="design-form flex-1 pr-20">
                        <div class="field-label flex-items-center gap-8 mb-8">
                            <span class="index-dot flex-center wh-18 round fs-12">1</span>
                            <span class="fs-14 color-666">提示词</span>
                        </div>
                        <el-input v-model="voicePrompt" class="voice-textarea mb-18" type="textarea" resize="none"
                            :rows="7" placeholder="请输入音色提示词" />

                        <div class="field-label flex-items-center gap-8 mb-8">
                            <span class="index-dot flex-center wh-18 round fs-12">2</span>
                            <span class="fs-14 color-666">试听文本（可选）</span>
                        </div>
                        <el-input v-model="auditionText" class="voice-textarea" type="textarea" resize="none" :rows="3"
                            placeholder="请输入试听文本" />

                        <div class="flex-center mt-42">
                            <el-button type="primary" class="generate-btn w-260 h-36 border-none fs-14"
                                :disabled="!voicePrompt.trim()">
                                <el-icon>
                                    <MagicStick />
                                </el-icon>
                                <span>100</span>
                            </el-button>
                        </div>
                    </div>
                    <div class="history-panel flex-1 pl-20">
                        <div class="fs-14 color-666 mb-10">历史</div>
                        <div class="history-empty flex-col flex-center h-full color-aaa fs-14">
                            <el-icon class="fs-28 mb-8">
                                <Microphone />
                            </el-icon>
                            <span>暂未生成角色音频</span>
                        </div>
                    </div>
                </div>

                <div v-else-if="activeTab === 'library'" class="library-panel flex-1 flex-col hidden">
                    <div class="filter-row flex-items-center gap-12 mb-20">
                        <el-input v-model="searchKeyword" class="search-input" placeholder="搜索">
                            <template #prefix>
                                <el-icon>
                                    <Search />
                                </el-icon>
                            </template>
                        </el-input>
                        <el-select v-model="genderValue" class="filter-select" placeholder="全部性别">
                            <el-option v-for="item in genderOptions" :key="item" :label="item" :value="item" />
                        </el-select>
                        <el-select v-model="ageValue" class="filter-select" placeholder="全部年龄">
                            <el-option v-for="item in ageOptions" :key="item" :label="item" :value="item" />
                        </el-select>
                        <el-select v-model="languageValue" class="filter-select" placeholder="全部语言">
                            <el-option v-for="item in languageOptions" :key="item" :label="item" :value="item" />
                        </el-select>
                    </div>
                    <div class="voice-list flex flex-wrap over-y-auto hide-scroll">
                        <div v-for="item in voiceList" :key="item.id" class="voice-item flex-items-center gap-10 p-10 round-8 pointer"
                            :class="{ active: selectedVoiceId === item.id }" @click="selectedVoiceId = item.id">
                            <div class="voice-avatar relative wh-42 round hidden">
                                <img :src="item.avatar" :alt="item.name" class="w-full h-full cover" />
                                <span class="play-dot absolute flex-center wh-14 round color-fff">
                                    <el-icon class="fs-10">
                                        <VideoPlay />
                                    </el-icon>
                                </span>
                            </div>
                            <div class="flex-1 hidden">
                                <div class="fs-14 fw-700 color-000 lh-22">{{ item.name }}</div>
                                <div class="fs-12 color-aaa lh-20 ellipsis">{{ item.desc }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div v-else-if="activeTab === 'local'" class="local-panel flex-1">
                    <UploadFile v-model="localFiles" list-type="drap" accept=".mp3,.wav" :max-size="10"
                        :show-file-list="true">
                        <template #trigger>
                            <div class="upload-trigger flex-col flex-center">
                                <el-icon class="fs-28 color-536 mb-14">
                                    <Microphone />
                                </el-icon>
                                <div class="fs-16 fw-700 color-333 lh-26">点击或拖拽音频文件到此处上传</div>
                                <div class="fs-12 color-888 lh-22">支持 MP3、WAV，单个文件不超过 10MB，超过 5 秒将自动裁剪</div>
                            </div>
                        </template>
                    </UploadFile>
                </div>

                <div v-else class="audio-panel flex-1 flex-col">
                    <div class="flex-between mb-12">
                        <el-select v-model="teamValue" class="team-select">
                            <el-option v-for="item in teamOptions" :key="item" :label="item" :value="item" />
                        </el-select>
                        <div class="audio-tabs flex-items-center gap-24 fs-14">
                            <span class="audio-tab active pointer">所有音频</span>
                            <span class="audio-tab color-666 pointer">文件夹</span>
                        </div>
                    </div>
                    <el-input v-model="audioKeyword" class="mb-20" placeholder="搜索">
                        <template #prefix>
                            <el-icon>
                                <Search />
                            </el-icon>
                        </template>
                    </el-input>
                    <div class="audio-empty flex-1 flex-col flex-center color-aaa fs-14">
                        <span class="empty-icon flex-center wh-48 round-10 mb-14">
                            <el-icon class="fs-24">
                                <Microphone />
                            </el-icon>
                        </span>
                        <span>暂无音频内容</span>
                    </div>
                </div>
            </section>

            <footer class="dialog-footer flex justify-end gap-12 px-24 py-20">
                <el-button class="w-96 h-36 fs-14" @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" class="confirm-btn w-96 h-36 fs-14 border-none" @click="confirmVoice">
                    确认
                </el-button>
            </footer>
        </div>
    </Dialog>
</template>

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

type VoiceTab = 'design' | 'library' | 'local' | 'audio';

type VoiceItem = {
    id: string;
    name: string;
    desc: string;
    avatar: string;
};

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

const emit = defineEmits<{
    'update:modelValue': [value: boolean];
    confirm: [value: { tab: VoiceTab; voiceId?: string; prompt?: string }];
}>();

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

const tabs: { label: string; value: VoiceTab }[] = [
    { label: '智能音色设计', value: 'design' },
    { label: '音色库选择', value: 'library' },
    { label: '本地上传', value: 'local' },
    { label: '音频库', value: 'audio' },
];
const genderOptions = ['全部性别', '男声', '女声'];
const ageOptions = ['全部年龄', '青年', '中年', '老年'];
const languageOptions = ['全部语言', '中文', '英文', '粤语'];
const teamOptions = ['团队资产', '我的资产'];
const voiceList: VoiceItem[] = [
    { id: 'voice-1', name: '婆婆', desc: '语调舒缓、声线慈祥，自带岁月感的长辈音色', avatar: peopleImg },
    { id: 'voice-2', name: '幽默大爷', desc: '墨迹沧桑的乐观爷爷，通透豁达又从容', avatar: productImg },
    { id: 'voice-3', name: '和蔼奶奶', desc: '慈祥的老奶奶，耐心亲切，散发着岁月沉淀', avatar: peopleImg },
    { id: 'voice-4', name: '武则天', desc: '声线威严、气场拉满，自带帝王霸气的御姐音', avatar: productImg },
    { id: 'voice-5', name: '邻居阿姨', desc: '温暖成熟的中年阿姨，兼具知性气质', avatar: peopleImg },
    { id: 'voice-6', name: '女雷神', desc: '声线雄浑、气场拉满，充满力量感的御姐音', avatar: productImg },
    { id: 'voice-7', name: '温柔妈妈', desc: '语调舒缓、咬字温润，自带母性柔光的治愈音', avatar: peopleImg },
    { id: 'voice-8', name: '胡子叔叔', desc: '历经风雨后变得沉稳的大叔，果敢让人信赖', avatar: productImg },
    { id: 'voice-9', name: '油腻大叔', desc: '沧桑的大叔，性格张扬，十分自信爱吹牛', avatar: peopleImg },
    { id: 'voice-10', name: '诡异神秘', desc: '诡异神秘的大叔，气质沧桑，自带压迫感', avatar: productImg },
];

const activeTab = ref<VoiceTab>('design');
const voicePrompt = ref('女声，青年音色，音调偏高，质感清透柔亮，气息绵长，语速轻快，情绪底色亲切活泼');
const auditionText = ref('你好，我的声音，为你演尽喜怒哀乐。');
const searchKeyword = ref('');
const genderValue = ref('全部性别');
const ageValue = ref('全部年龄');
const languageValue = ref('全部语言');
const selectedVoiceId = ref('voice-1');
const localFiles = ref<UploadUserFile[]>([]);
const teamValue = ref('团队资产');
const audioKeyword = ref('');

const confirmVoice = () => {
    emit('confirm', {
        tab: activeTab.value,
        voiceId: selectedVoiceId.value,
        prompt: voicePrompt.value,
    });
    dialogVisible.value = false;
};
</script>

<style scoped lang="scss">
.voice-dialog {
    height: 660px;
}

.dialog-header {
    flex: 0 0 98px;
}

.dialog-body {
    flex: 1;
    min-height: 0;
}

.dialog-footer {
    flex: 0 0 76px;
}

.header-icon {
    box-shadow: 0 2px 8px rgba(22, 36, 58, .12);
}

.color-536 {
    color: #536883;
}

.tab-row {
    background: #f5f7fa;
}

.tab-item {
    flex: 1;
    color: #000;
    border: 1px solid transparent;
    border-radius: 6px;

    &.active {
        background: #fff;
        border-color: #d5ddeb;
        box-shadow: 0 1px 4px rgba(22, 36, 58, .1);
    }
}

.design-panel,
.library-panel,
.local-panel,
.audio-panel {
    min-height: 0;
}

.design-form {
    border-right: 1px solid #e7edf5;
}

.index-dot {
    color: #8aa0bf;
    border: 1px solid #ccd7e6;
}

.voice-textarea {
    :deep(.el-textarea__inner) {
        color: #000;
        line-height: 24px;
        border-radius: 4px;
        box-shadow: 0 0 0 1px #d5ddeb inset;
    }
}

.generate-btn {
    background: linear-gradient(90deg, #2382ff 0%, #b947ee 100%);
}

.history-empty {
    min-height: 300px;
}

.search-input {
    flex: 1;
}

.filter-select {
    width: 112px;
}

.voice-list {
    flex: 1;
    gap: 6px 24px;
}

.voice-item {
    flex: 0 0 calc((100% - 24px) / 2);
    border: 1px solid transparent;

    &.active,
    &:hover {
        border-color: rgba(var(--main-color), 1);
        background: rgba(var(--main-color), .04);
    }
}

.play-dot {
    right: 0;
    bottom: 0;
    background: #6b7b93;
}

.local-panel {
    :deep(.el-upload),
    :deep(.el-upload-dragger) {
        width: 100%;
    }

    :deep(.el-upload-dragger) {
        height: 318px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-color: #d9e2f2;
        background: #fbfcff;
    }
}

.audio-tab {
    position: relative;
    height: 34px;
    line-height: 34px;

    &.active {
        color: #000;

        &::after {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 2px;
            background: rgba(var(--main-color), 1);
            content: '';
        }
    }
}

.team-select {
    width: 136px;
}

.audio-empty {
    min-height: 280px;
}

.empty-icon {
    box-shadow: 0 2px 8px rgba(22, 36, 58, .1);
}

.confirm-btn {
    background: #a5adf7;
}

:deep(.el-input__wrapper),
:deep(.el-select__wrapper) {
    border-radius: 4px;
    box-shadow: 0 0 0 1px #d5ddeb inset;
}
</style>
