<template>
    <div class="main-workspace">
        <div class="workspace-container">
             <div class="left">
                <div class="title">泛化语料</div>
                <el-form ref="generalizationFormRef" :rules="generalizationRules" :model="generalizationForm" label-position="top" label-width="auto">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="" prop="text">
                                <el-input type="textarea" :rows="3" v-model="generalizationForm.text" placeholder="请输入待合成文本" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="语种" prop="language">
                                <el-select v-model="generalizationForm.language" placeholder="语种">
                                    <el-option v-for="item in languageOption" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="数量" prop="count">
                                <el-input-number v-model="generalizationForm.count" :min="1" :max="10" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <el-row style="margin-top: 10px;" :gutter="20">
                    <el-col :span="12">
                        <el-button :loading="generalizationLoading" type="primary" :icon="VideoPlay" class="btn"
                            @click="generalization">开始泛化</el-button>
                    </el-col>
                    <el-col :span="12">
                        <el-button size="small" type="primary" plain :icon="Delete" class="btn"
                            @click="generalizationCancel">清空</el-button>
                    </el-col>
                </el-row>
                <div v-if="corpusList.length > 0" >
                    <el-row style="margin: 10px 0;">
                        <el-col :span="24">泛化语料列表</el-col>
                    </el-row>
                    <div class="corpus-container">
                        <el-row :gutter="20" v-for="(item, index) in corpusList" style="margin-bottom: 4px;">
                            <el-col :span="22" >
                                <el-input v-model="corpusList[index]"></el-input>
                            </el-col>
                            <el-col :span="2">
                                <el-button icon="Plus" @click="addTag(item)"></el-button>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="title">
                    文本与参数配置
                </div>
                <el-form ref="formRef" :rules="rules" :model="form" label-position="top" label-width="auto">
                    <el-row>
                        <el-form-item label="待合成语料" prop="tags">
                            <el-tag v-for="tag in form.tags" :key="tag.name" closable  @close="handleClose(tag)" class="tag">
                                {{ tag }}
                            </el-tag>
                        </el-form-item>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="模型" prop="voice">
                                <el-select v-model="form.model" placeholder="模型">
                                    <el-option label="科大讯飞" value="科大讯飞" />
                                    <el-option label="火山引擎" value="火山引擎" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="音色" prop="voice">
                                <el-select v-model="form.voice" placeholder="音色">
                                    <el-option v-for="item in voiceOption" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="音量">
                                <el-slider v-model="form.volume" :min="1" :max="100" :step="1" />
                            </el-form-item>
                        </el-col>
                         <el-col :span="8">
                            <el-form-item label="语速" prop="speed">
                                <el-slider v-model="form.speed" :min="1" :max="100" :step="1" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="音高">
                                <el-slider v-model="form.pitch" :min="1" :max="100" :step="1" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="采样率">
                                <el-select v-model="form.sampleRate" placeholder="采样率">
                                    <el-option label="8kHz" value="8000" />
                                    <el-option label="16kHz" value="16000" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="输出格式">
                                <el-select v-model="form.outputFormat" placeholder="输出格式">
                                    <el-option label="WAV" value="wav" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top: 20px;" :gutter="20">
                        <el-col :span="12">
                            <el-button :loading="loading" type="primary" :icon="VideoPlay" class="btn"
                                @click="synthesis">开始合成</el-button>
                        </el-col>
                        <el-col :span="12">
                            <el-button size="small" type="primary" plain :icon="Delete" class="btn"
                                @click="cancel">清空</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import { Delete, VideoPlay } from '@element-plus/icons-vue'
import { batchTaskApi, regenerateApi, generalizationApi } from '@/api/corpusManger/speech_synthesis'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['refresh'])

const generalizationFormRef = ref()
const generalizationForm = ref({
    text: '',
    language: '普通话',
    count: 1
})
const generalizationRules = ref({
    text: [{ required: true, message: '请输入合成文本', trigger: 'blur' }],
    language: [{ required: true, message: '请选择语种', trigger: 'blur' }]
})


const languageOption = ref([
    {
        label: '中文（普通话）',
        value: '普通话'
    }, {
        label: '英文',
        value: '英文'
    }, {
        label: '粤语',
        value: '粤语'
    }, {
        label: '四川话',
        value: '四川话'
    }, {
        label: '韩语',
        value: '韩语'
    }, {
        label: '日语',
        value: '日语'
    }, {
        label: '俄语',
        value: '俄语'
    }
])

const corpusList = ref([])
const generalizationLoading = ref(false)
const generalization = async () => {
    const result = await generalizationFormRef.value.validate()
    if (result) {
        generalizationLoading.value = true
        const res = await generalizationApi(generalizationForm.value)
        if (res.code === 200) {
            corpusList.value = res.data
            ElMessage.success(res.msg)
        } else {
            ElMessage.error(res.msg)
        }
        generalizationLoading.value = false
    }
}

const generalizationCancel = () => {
    generalizationFormRef.value.resetFields()
}

const addTag = (data) => {
    console.log('data', data)
    form.value.tags.push(data)
}

// ========================================================
const handleClose = (tag) => {
  form.value.tags.splice(form.value.tags.indexOf(tag), 1)
}

const form = ref({
    tags: [],
    model: '科大讯飞',
    voice: '',
    speed: 50,
    volume: 50,
    pitch: 50,
    sampleRate: '16000',
    outputFormat: 'wav'
})

const formRef = ref(null)

const validateArray = (rule, value, callback) => {
  if (!Array.isArray(value) || value.length === 0) {
    callback(new Error('请至少添加一条语料'))
  } else {
    callback()
  }
}

const rules = reactive({
    model: [{ required: true, message: '请选择模型', trigger: 'blur' }],
    tags: [{ required: true, validator: validateArray, trigger: 'change' }],
    voice: [{ required: true, message: '请输入音色', trigger: 'blur' }]
})

const dialectOption = ref([
    {
        label: '东北话',
        value: '东北话'
    }, {
        label: '四川话',
        value: '四川话'
    }, {
        label: '广东话',
        value: '广东话'
    }
])

const voiceOption = ref([
    {
        label: '普通话-男声',
        value: 'x4_lingbosong'
    }, {
        label: '普通话-女声',
        value: 'x4_yezi'
    }, {
        label: '英语-女声',
        value: 'x4_EnUs_Laura_education'
    }, {
        label: '英语-男声',
        value: 'x4_enus_ryan_assist'
    }, {
        label: '粤语-女声',
        value: 'x3_xiaoyue'
    }, {
        label: '东北话-女声',
        value: 'x4_xiaobei'
    }, {
        label: '四川话-女声',
        value: 'x3_yezi_sc'
    }, {
        label: '韩语-女声',
        value: 'x2_KoKr_Miya'
    }, {
        label: '日语-女声',
        value: 'x2_JaJp_ZhongCun'
    }, {
        label: '俄语-女声',
        value: 'x2_RuRu_Keshu'
    }
])

const emotionOption = ref([
    {
        label: '开心',
        value: '开心'
    }, {
        label: '严肃',
        value: '严肃'
    }, {
        label: '温和',
        value: '温和'
    }
])

const loading = ref(false)

const synthesis = async () => {
    const result = await formRef.value.validate()
    if (result) {
        const arr = []
        const obj = JSON.parse(JSON.stringify(form.value))
        delete obj.tags
        form.value.tags.forEach(item => {
            arr.push({
                ...obj,
                text: item
            })
        })
        loading.value = true
        const res = await batchTaskApi(arr)
        if (res.code === 200) {
            emit('refresh')
            ElMessage.success(res.msg)
        } else {
            ElMessage.error(res.msg)
        }
        loading.value = false
    }
}


const cancel = () => {
    formRef.value.resetFields()
}
</script>

<style lang="scss" scoped>
.main-workspace {
    .workspace-container {
        display: flex;
        gap: 24px;

        .right {
            flex: 1;
            background: #fff;
            padding: 20px;
            border-radius: 12px;

            .title {
                font-size: 16px;
                font-weight: bold;
                margin-bottom: 10px;
            }

            .tag {
                margin-right: 8px;
            }

            .btn {
                width: 100%;
                height: 32px;
                font-size: 18px;
            }

            :deep(.el-form-item--default) {
                margin-bottom: 4px;
            }
        }

        .left {
            flex: 1;
            background: #fff;
            padding: 20px;
            border-radius: 12px;

            .title {
                font-size: 16px;
                font-weight: bold;
                margin-bottom: 10px;
            }

            .corpus-container {
                max-height: 100px;
                overflow-y: auto;
                overflow-x: hidden;
            }

            :deep(.el-form-item--default) {
                margin-bottom: 4px;
            }


            .btn {
                width: 100%;
                height: 32px;
                font-size: 18px;
            }
        }
    }
}
</style>