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

        const plugins = ref([]);
        const loaded = ref(false);
        const dialogVisible = ref(false);
        const dialogPluginName = ref('');

        async function load() {
            const json = await api.getPlugins();
            if (json) { plugins.value = json.plugins; loaded.value = true; }
        }

        async function toggle(plugin, enable) {
            const json = await api.togglePlugin(plugin.name, enable);
            if (json) {
                ElementPlus.ElMessage.success((enable ? '已启用: ' : '已禁用: ') + plugin.name);
                await load();
            }
        }

        function openConfig(name) {
            dialogPluginName.value = name;
            dialogVisible.value = true;
        }

        onMounted(load);

        return { plugins, loaded, toggle, openConfig, dialogVisible, dialogPluginName };
    },
    template: `
    <div class="panel-scroll">
        <template v-if="loaded">
            <el-card v-for="p in plugins" :key="p.name" shadow="hover" class="plugin-card">
                <div class="plugin-main">
                    <div class="plugin-info">
                        <div class="plugin-title">
                            <span class="plugin-name">{{ p.name }}</span>
                            <span class="plugin-version">
                                v{{ p.version }}
                            </span>
                        </div>
                        <div class="plugin-desc">
                            {{ p.description }}
                        </div>
                        <div class="plugin-meta">
                            作者: {{ p.author }} · 目录: {{ p.directory }}
                        </div>
                    </div>
                    <div class="plugin-actions">
                        <el-button v-if="p.has_config" size="small" @click="openConfig(p.name)">
                            配置
                        </el-button>
                        <el-tag :type="p.enabled ? 'success' : 'danger'" size="small">
                            {{ p.enabled ? '已启用' : '已禁用' }}
                        </el-tag>
                        <el-switch :model-value="p.enabled"
                                   @update:model-value="toggle(p, $event)"
                                   :disabled="p.name === 'ManagePlugin'"
                                   active-text="开" inactive-text="关" />
                    </div>
                </div>
            </el-card>
        </template>
        <div v-else class="panel-loading">
            加载中...
        </div>
        <PluginConfigDialog v-model:visible="dialogVisible" :plugin-name="dialogPluginName" />
    </div>
    `
};