window.ConfigEditor = {
    setup() {
        const { ref, onMounted } = Vue;
        const api = useApi();

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

        async function load() {
            const json = await api.getConfig();
            if (json) {
                configData.value = json.data;
                configLabels.value = json.labels || {};
                loaded.value = true;
            }
        }

        async function save() {
            saving.value = true;
            const json = await api.saveConfig(configData.value);
            if (json) ElementPlus.ElMessage.success('配置已保存');
            saving.value = false;
        }

        onMounted(load);

        return { configData, configLabels, loaded, saving, save };
    },
    template: `
    <div class="panel-page">
        <div class="panel-scroll">
            <template v-if="loaded">
                <ConfigSection
                    v-for="(fields, section) in configData" :key="section"
                    :section="section"
                    :label="configLabels[section] || section"
                    :fields="fields"
                    v-model="configData[section]" />
            </template>
            <div v-else class="panel-loading">
                加载中...
            </div>
        </div>
        <div class="panel-footer">
            <el-button type="primary" @click="save" :loading="saving">保存配置</el-button>
        </div>
    </div>
    `
};