<template>
    <div class="multi-lang-input">
        <el-input v-model="props.modelValue" :placeholder="`請輸入 ${currentLangLabel}`" clearable
            @input="emit('update:modelValue', $event)"> <!-- 新增這行：觸發父組件更新 -->
            <template #append>
                <el-button @click="openDialog" circle>
                    <template #icon>
                        <i class="iconfont icon-diqiu1"></i>
                    </template>
                </el-button>
            </template>
        </el-input>

        <el-dialog v-model="dialogVisible" title="多語言設置" width="600px">
            <el-form ref="ruleFormRef" label-width="auto">
                <el-row :gutter="35">
                    <el-col v-for="lang in languages" :key="lang.code" :span="24">
                        <el-form-item :label="lang.label">
                            <el-input v-model="multiLangValue[lang.code]" :placeholder="`請輸入: ${lang.label}`"
                                clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <template #footer>
                <el-button @click="aiTranslation">AI翻譯</el-button>
                <el-button @click="closeDialog">關閉</el-button>
                <el-button type="primary" @click="confirmDialog">確認修改</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
    import { ref, computed, onMounted, reactive } from 'vue';
    import { useLangStore } from '/@/stores/useLangStore';
    import { Local } from '/@/utils/storage';
    import { getAPI } from '/@/utils/axios-utils';
    import { SysLangTextApi } from '/@/api-services/api';
    import { ElMessage } from 'element-plus';

    const ruleFormRef = ref();

    const fetchMultiLang = async () => {
        const result = await getAPI(SysLangTextApi).apiSysLangTextListPost({ entityName: props.entityName, entityId: props.entityId, fieldName: props.fieldName, pageSize: 200 }).then(res => res.data.result)
        return result ?? [];
    };


    const props = defineProps<{
        modelValue : string;
        entityName : string;
        entityId : string;
        fieldName : string;
    }>();

    // 定義 emit 事件：支持 update:modelValue（v-model 雙向綁定的固定事件名）
    const emit = defineEmits<{
        (e : 'update:modelValue', value : string) : void;
    }>();

    // 全局語言
    const langStore = useLangStore();
    const languages = ref<any>([] as any);

    // 當前語言（可根據用戶設置或瀏覽器設置）
    const currentLang = ref('zh_CN');
    const activeLang = ref('zh_CN');

    // 是否彈框
    const dialogVisible = ref(false);

    // 多語言對象
    const multiLangValue = ref<Record<string, string>>({});

    // 當前語言顯示 Label
    const currentLangLabel = computed(() => {
        return (
            languages.value.find((l : { code : string; }) => l.code === currentLang.value)?.Label || currentLang.value
        );
    });

    // 初始化語言
    onMounted(async () => {
        if (langStore.languages.length === 0) {
            await langStore.loadLanguages();
        }
        const themeConfig = Local.get('themeConfig');
        const globalI18n = themeConfig?.globalI18n;
        if (globalI18n) {
            const matched = langStore.languages.find(l => l.code === globalI18n);
            const langCode = matched?.code || 'zh_CN';
            currentLang.value = langCode;
            activeLang.value = langCode;
        }
        languages.value = langStore.languages;

        if (languages.value.length > 0) {
            currentLang.value = languages.value[0].code;
            activeLang.value = languages.value[0].code;
        }
    });
    const aiTranslation = async () => {
        languages.value.forEach(async (element : { code : string | number; value : string | number; }) => {
            if (element.code == currentLang.value) {
                return;
            }
            multiLangValue.value[element.code] = '正在翻譯...';
            try {
                const text = await getAPI(SysLangTextApi).apiSysLangTextAiTranslateTextPost({ originalText: props.modelValue, targetLang: element.value }).then(res => res.data.result);
                if (text) {
                    multiLangValue.value[element.code] = text;
                } else {
                    multiLangValue.value[element.code] = '';
                }
            } catch (e : any) {
                multiLangValue.value[element.code] = '';
                ElMessage.warning(e.message);
            }
        });
    }

    // 打開對話框（點擊按鈕）
    const openDialog = async () => {
        multiLangValue.value = {};
        const res = await fetchMultiLang();
        multiLangValue.value[currentLang.value] = props.modelValue;
        res.forEach((element : { langCode : string | number; content : string; }) => {
            multiLangValue.value[element.langCode] = element.content;
        });
        dialogVisible.value = true;
        ruleFormRef.value?.resetFields();
    };

    // 關閉對話框（只是關閉）
    const closeDialog = () => {
        dialogVisible.value = false;
        multiLangValue.value = {};
        ruleFormRef.value?.resetFields();
    };

    // 確認按鈕（更新 + 關閉）
    const confirmDialog = async () => {
        const langItems = Object.entries(multiLangValue.value)
            .filter(([_, content]) => content && content.trim() !== '')
            .map(([code, content]) => ({
                EntityName: props.entityName,
                EntityId: props.entityId,
                FieldName: props.fieldName,
                LangCode: code,
                Content: content,
            }));

        if (langItems.length === 0) {
            ElMessage.warning('請輸入至少一條多語言內容！');
            return;
        }

        try {
            await getAPI(SysLangTextApi).apiSysLangTextBatchSavePost(langItems);
            ElMessage.success('保存成功！');
            dialogVisible.value = false;
        } catch (err) {
            console.error(err);
            ElMessage.error('保存失敗！');
        }
        dialogVisible.value = false;
        ruleFormRef.value?.resetFields();
    };
</script>

<style scoped>
    .multi-lang-input {
        width: 100%;
    }
</style>