window.PluginConfigDialog = {
    props: {
        visible: Boolean,
        pluginName: String,
    },
    emits: ['update:visible'],
    setup(props, { emit }) {
        const { ref, watch, computed } = Vue;
        const api = useApi();

        const configData = ref({});
        const configLabels = ref({});
        const saving = ref(false);
        const loading = ref(false);

        watch(() => props.visible, async (val) => {
            if (val && props.pluginName) {
                loading.value = true;
                const json = await api.getPluginConfig(props.pluginName);
                loading.value = false;
                if (json) {
                    configData.value = json.data;
                    configLabels.value = json.labels || {};
                } else {
                    emit('update:visible', false);
                }
            }
        });

        function collectSections(obj, prefix) {
            const result = [];
            for (const [key, val] of Object.entries(obj)) {
                if (typeof val !== 'object' || Array.isArray(val)) continue;
                const fullKey = prefix ? prefix + '.' + key : key;
                result.push({
                    key: fullKey,
                    fields: val,
                    label: configLabels.value[fullKey] || fullKey,
                });
                result.push(...collectSections(val, fullKey));
            }
            return result;
        }

        const sections = computed(() => collectSections(configData.value, ''));

        async function save() {
            saving.value = true;
            const json = await api.savePluginConfig(props.pluginName, configData.value);
            if (json) {
                ElementPlus.ElMessage.success('插件配置已保存');
                emit('update:visible', false);
            }
            saving.value = false;
        }

        function close() { emit('update:visible', false); }

        return { configData, sections, saving, loading, save, close };
    },
    template: `
    <el-dialog :model-value="visible"
               @update:model-value="$emit('update:visible', $event)"
               :title="pluginName + ' 配置'"
               width="720px" top="8vh" destroy-on-close>
        <div v-if="loading" class="panel-loading">
            加载中...
        </div>
        <div v-else class="dialog-body-scroll">
            <ConfigSection v-for="sec in sections" :key="sec.key"
                :section="sec.key"
                :label="sec.label"
                :fields="sec.fields"
                v-model="sec.fields" />
        </div>
        <template #footer>
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="save" :loading="saving">保存</el-button>
        </template>
    </el-dialog>
    `
};