{% extends "base.html" %}

{% block title %}插件管理 - 机器人管理后台{% endblock %}

{% block content %}
<!-- 插件管理 -->
<div>
    <el-row {% raw %}:gutter="20"{% endraw %}>
        <el-col {% raw %}:span="24"{% endraw %}>
            <el-card shadow="hover">
                <div slot="header">
                    <span>插件管理</span>
                    <el-button style="float: right; padding: 3px 0" type="text" {% raw %}@click="refreshPlugins"{% endraw %}>
                        <i class="el-icon-refresh"></i> 刷新
                    </el-button>
                </div>
                <el-table {% raw %}:data="plugins"{% endraw %} style="width: 100%" border>
                    <el-table-column prop="name" label="插件名称"></el-table-column>
                    <el-table-column prop="module_name" label="模块名称"></el-table-column>
                    <el-table-column prop="version" label="版本"></el-table-column>
                    <el-table-column prop="author" label="作者"></el-table-column>
                    <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
                    <el-table-column label="状态">
                        <template slot-scope="scope">
                            <el-tag {% raw %}:type="scope.row.status === 'RUNNING' ? 'success' : 'danger'"{% endraw %}>
                                {% raw %}{{ scope.row.status === 'RUNNING' ? '已启用' : '已禁用' }}{% endraw %}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="280">
                        <template slot-scope="scope">
                            <el-button 
                                size="mini" 
                                {% raw %}:type="scope.row.status === 'RUNNING' ? 'danger' : 'success'"{% endraw %}
                                {% raw %}@click="togglePluginStatus(scope.row)"{% endraw %}>
                                {% raw %}{{ scope.row.status === 'RUNNING' ? '禁用' : '启用' }}{% endraw %}
                            </el-button>
                            <el-button 
                                size="mini" 
                                type="primary" 
                                {% raw %}@click="reloadPlugin(scope.row)"{% endraw %}>
                                重载
                            </el-button>
                            <el-button 
                                size="mini" 
                                type="info" 
                                {% raw %}@click="showPluginInfo(scope.row)"{% endraw %}>
                                详情
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
    </el-row>
    
    <!-- 插件详情对话框 -->
    <el-dialog title="插件详情" {% raw %}:visible.sync="pluginInfoVisible"{% endraw %} width="50%">
        <div v-if="selectedPlugin">
            <el-descriptions border direction="vertical" :column="1">
                <el-descriptions-item label="插件名称">{% raw %}{{ selectedPlugin.name }}{% endraw %}</el-descriptions-item>
                <el-descriptions-item label="模块名称">{% raw %}{{ selectedPlugin.module_name }}{% endraw %}</el-descriptions-item>
                <el-descriptions-item label="版本">{% raw %}{{ selectedPlugin.version }}{% endraw %}</el-descriptions-item>
                <el-descriptions-item label="作者">{% raw %}{{ selectedPlugin.author }}{% endraw %}</el-descriptions-item>
                <el-descriptions-item label="描述">{% raw %}{{ selectedPlugin.description }}{% endraw %}</el-descriptions-item>
                <el-descriptions-item label="状态">
                    <el-tag {% raw %}:type="selectedPlugin.status === 'RUNNING' ? 'success' : 'danger'"{% endraw %}>
                        {% raw %}{{ selectedPlugin.status === 'RUNNING' ? '已启用' : '已禁用' }}{% endraw %}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="命令前缀" v-if="selectedPlugin.command_prefix !== undefined">
                    {% raw %}{{ selectedPlugin.command_prefix || '无' }}{% endraw %}
                </el-descriptions-item>
                <el-descriptions-item label="命令列表" v-if="selectedPlugin.commands && selectedPlugin.commands.length > 0">
                    <el-tag v-for="cmd in selectedPlugin.commands" :key="cmd" style="margin-right: 5px; margin-bottom: 5px;">
                        {% raw %}{{ cmd }}{% endraw %}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="配置信息" v-if="selectedPlugin.config">
                    <pre style="max-height: 300px; overflow-y: auto;">{% raw %}{{ JSON.stringify(selectedPlugin.config, null, 2) }}{% endraw %}</pre>
                </el-descriptions-item>
            </el-descriptions>
        </div>
    </el-dialog>
</div>
{% endblock %}

{% block scripts %}
<script>
    new Vue({
        el: '#app',
        mixins: [baseApp],
        data() {
            return {
                plugins: [],
                selectedPlugin: null,
                pluginInfoVisible: false,
                loading: false
            }
        },
        mounted() {
            this.currentView = '11'; // 设置当前菜单项
            this.loadPlugins();
        },
        methods: {
            loadPlugins() {
                this.loading = true;
                axios.get('/api/plugins')
                    .then(response => {
                        if (response.data.success) {
                            this.plugins = response.data.data || [];
                        } else {
                            this.$message.error(response.data.message || '加载插件列表失败');
                        }
                    })
                    .catch(error => {
                        console.error('加载插件列表出错:', error);
                        this.$message.error('加载插件列表出错');
                    })
                    .finally(() => {
                        this.loading = false;
                    });
            },
            refreshPlugins() {
                this.loadPlugins();
                this.$message.success('插件列表已刷新');
            },
            togglePluginStatus(plugin) {
                const action = plugin.status === 'RUNNING' ? 'disable' : 'enable';
                const actionText = plugin.status === 'RUNNING' ? '禁用' : '启用';
                
                this.$confirm(`确定要${actionText}插件 "${plugin.name}" 吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post(`/api/plugins/${action}`, {
                        plugin_name: plugin.module_name
                    })
                    .then(response => {
                        if (response.data.success) {
                            this.$message.success(`${actionText}插件成功`);
                            this.loadPlugins(); // 重新加载插件列表
                        } else {
                            this.$message.error(response.data.message || `${actionText}插件失败`);
                        }
                    })
                    .catch(error => {
                        console.error(`${actionText}插件出错:`, error);
                        this.$message.error(`${actionText}插件出错`);
                    });
                }).catch(() => {
                    this.$message.info('已取消操作');
                });
            },
            reloadPlugin(plugin) {
                this.$confirm(`确定要重载插件 "${plugin.name}" 吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post('/api/plugins/reload', {
                        plugin_name: plugin.module_name
                    })
                    .then(response => {
                        if (response.data.success) {
                            this.$message.success('重载插件成功');
                            this.loadPlugins(); // 重新加载插件列表
                        } else {
                            this.$message.error(response.data.message || '重载插件失败');
                        }
                    })
                    .catch(error => {
                        console.error('重载插件出错:', error);
                        this.$message.error('重载插件出错');
                    });
                }).catch(() => {
                    this.$message.info('已取消操作');
                });
            },
            showPluginInfo(plugin) {
                // 获取插件详细信息
                axios.get(`/api/plugins/info?plugin_name=${plugin.module_name}`)
                    .then(response => {
                        if (response.data.success) {
                            this.selectedPlugin = response.data.data;
                            this.pluginInfoVisible = true;
                        } else {
                            this.$message.error(response.data.message || '获取插件详情失败');
                        }
                    })
                    .catch(error => {
                        console.error('获取插件详情出错:', error);
                        this.$message.error('获取插件详情出错');
                    });
            }
        }
    });
</script>
{% endblock %}