{% extends "base.html" %}

{% block title %}群机器人管理 - 机器人统计看板{% endblock %}

{% block content %}
<!-- 群机器人管理 -->
<div>
    <el-row :gutter="20">
        <el-col :span="24">
            <el-card shadow="hover">
                <div slot="header" class="clearfix">
                    <span>群机器人管理</span>
                    <el-input
                        placeholder="搜索群组..."
                        v-model="searchQuery"
                        style="width: 200px; float: right"
                        clearable>
                    </el-input>
                </div>
                
                <!-- 群组列表 -->
                <el-table 
                    :data="filteredGroups" 
                    style="width: 100%" 
                    border
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column label="群组信息">
                        <template slot-scope="scope">
                            {% raw %}{{ scope.row.group_name || scope.row.group_id }} ({{ scope.row.group_id }}){% endraw %}
                        </template>
                    </el-table-column>
                    <el-table-column label="机器人状态" width="120">
                        <template slot-scope="scope">
                            <el-tag 
                                :type="scope.row.robot_status === 'enabled' ? 'success' : 'danger'">
                                {% raw %}{{ scope.row.robot_status === 'enabled' ? '已启用' : '已关闭' }}{% endraw %}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button 
                                size="mini" 
                                type="primary" 
                                @click="viewGroupPermissions(scope.row)">
                                查看权限
                            </el-button>
                            <el-button 
                                size="mini" 
                                :type="scope.row.robot_status === 'enabled' ? 'danger' : 'success'"
                                @click="toggleRobotStatus(scope.row)">
                                {% raw %}{{ scope.row.robot_status === 'enabled' ? '关闭' : '启用' }}{% endraw %}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                
                <!-- 批量操作按钮 -->
                <div style="margin-top: 20px" v-if="selectedGroups.length > 0">
                    <el-alert
                        title="批量操作"
                        type="info"
                        :closable="false">
                        <span>已选择 {% raw %}{{ selectedGroups.length }}{% endraw %} 个群组</span>
                    </el-alert>
                    <div style="margin-top: 10px">
                        <el-button type="success" size="small" @click="batchEnableRobot">批量启用</el-button>
                        <el-button type="danger" size="small" @click="batchDisableRobot">批量关闭</el-button>
                        <el-button type="warning" size="small" @click="batchRemoveGroups">批量移除</el-button>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>
    
    <!-- 群组权限管理对话框 -->
    <el-dialog 
        :title="currentGroupName + ' 功能权限管理'" 
        :visible.sync="permissionDialogVisible"
        width="70%">
        <el-table :data="permissions" style="width: 100%" border>
            <el-table-column prop="feature_id" label="功能ID" width="80"></el-table-column>
            <el-table-column prop="feature_description" label="功能描述"></el-table-column>
            <el-table-column label="状态" width="100">
                <template slot-scope="scope">
                    <el-tag 
                        :type="scope.row.status === 'enabled' ? 'success' : 'danger'">
                        {% raw %}{{ scope.row.status === 'enabled' ? '已启用' : '已关闭' }}{% endraw %}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.statusBool"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        @change="togglePermission(scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button @click="enableAllPermissions" type="success">一键启用全部</el-button>
            <el-button @click="disableAllPermissions" type="danger">一键关闭全部</el-button>
            <el-button @click="permissionDialogVisible = false">关闭</el-button>
        </div>
    </el-dialog>
</div>
{% endblock %}

{% block scripts %}
<script>
    new Vue({
        el: '#app',
        mixins: [baseApp],
        data() {
            return {
                groups: [],
                permissions: [],
                currentGroupId: null,
                currentGroupName: '',
                searchQuery: '',
                selectedGroups: [],
                permissionDialogVisible: false
            }
        },
        computed: {
            filteredGroups() {
                if (!this.searchQuery) return this.groups;
                const query = this.searchQuery.toLowerCase();
                return this.groups.filter(group => 
                    (group.group_id && group.group_id.toLowerCase().includes(query)) || 
                    (group.group_name && group.group_name.toLowerCase().includes(query))
                );
            }
        },
        mounted() {
            this.currentView = '5'; // 设置当前菜单项
            this.loadGroups();
        },
        methods: {
            loadGroups() {
                axios.get('/api/robot/groups')
                    .then(response => {
                        if (response.data.success) {
                            this.groups = response.data.data || [];
                        } else {
                            this.$message.error('加载群组失败');
                        }
                    })
                    .catch(error => {
                        console.error('加载群组失败:', error);
                        this.$message.error('加载群组失败: ' + error.message);
                    });
            },
            handleSelectionChange(selection) {
                this.selectedGroups = selection.map(item => item.group_id);
            },
            viewGroupPermissions(group) {
                this.currentGroupId = group.group_id;
                this.currentGroupName = group.group_name || group.group_id;
                
                axios.get(`/api/robot/group/${group.group_id}/permissions`)
                    .then(response => {
                        if (response.data.success) {
                            // 添加布尔值属性用于switch组件
                            const permissionsData = response.data.data || [];
                            this.permissions = permissionsData.map(p => ({
                                ...p,
                                statusBool: p.status === 'enabled'
                            }));
                            this.permissionDialogVisible = true;
                        } else {
                            this.$message.error('加载权限失败');
                        }
                    })
                    .catch(error => {
                        console.error('加载权限失败:', error);
                        this.$message.error('加载权限失败: ' + error.message);
                    });
            },
            toggleRobotStatus(group) {
                const newStatus = group.robot_status === 'enabled' ? 'disabled' : 'enabled';
                
                // 找到ROBOT功能对应的feature_id
                const robotFeatureId = 1; // 根据Feature枚举，ROBOT的值为1
                
                axios.post(`/api/robot/group/${group.group_id}/permissions`, {
                    feature_id: robotFeatureId,
                    status: newStatus
                })
                .then(response => {
                    if (response.data.success) {
                        group.robot_status = newStatus;
                        this.$message.success(`机器人已${newStatus === 'enabled' ? '启用' : '关闭'}`);
                    } else {
                        this.$message.error('操作失败');
                    }
                })
                .catch(error => {
                    console.error('更新权限失败:', error);
                    this.$message.error('更新权限失败: ' + error.message);
                });
            },
            togglePermission(permission) {
                const newStatus = permission.statusBool ? 'enabled' : 'disabled';
                
                axios.post(`/api/robot/group/${this.currentGroupId}/permissions`, {
                    feature_id: permission.feature_id,
                    status: newStatus
                })
                .then(response => {
                    if (response.data.success) {
                        permission.status = newStatus;
                        
                        // 如果是ROBOT功能，更新群组列表中的状态
                        if (permission.feature_id === 1) { // ROBOT的feature_id为1
                            const group = this.groups.find(g => g.group_id === this.currentGroupId);
                            if (group) {
                                group.robot_status = newStatus;
                            }
                        }
                        
                        this.$message.success(`功能已${newStatus === 'enabled' ? '启用' : '关闭'}`);
                    } else {
                        // 恢复原状态
                        permission.statusBool = !permission.statusBool;
                        this.$message.error('操作失败');
                    }
                })
                .catch(error => {
                    // 恢复原状态
                    permission.statusBool = !permission.statusBool;
                    console.error('更新权限失败:', error);
                    this.$message.error('更新权限失败: ' + error.message);
                });
            },
            enableAllPermissions() {
                this.$confirm('确定要启用所有功能吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const promises = this.permissions.map(permission => {
                        if (permission.status !== 'enabled') {
                            permission.statusBool = true;
                            return axios.post(`/api/robot/group/${this.currentGroupId}/permissions`, {
                                feature_id: permission.feature_id,
                                status: 'enabled'
                            });
                        }
                        return Promise.resolve();
                    });
                    
                    Promise.all(promises)
                        .then(() => {
                            this.permissions.forEach(p => {
                                p.status = 'enabled';
                                p.statusBool = true;
                            });
                            
                            // 更新群组列表中的机器人状态
                            const group = this.groups.find(g => g.group_id === this.currentGroupId);
                            if (group) {
                                group.robot_status = 'enabled';
                            }
                            
                            this.$message.success('所有功能已启用');
                        })
                        .catch(error => {
                            console.error('批量启用失败:', error);
                            this.$message.error('批量启用失败');
                        });
                }).catch(() => {});
            },
            disableAllPermissions() {
                this.$confirm('确定要关闭所有功能吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const promises = this.permissions.map(permission => {
                        if (permission.status !== 'disabled') {
                            permission.statusBool = false;
                            return axios.post(`/api/robot/group/${this.currentGroupId}/permissions`, {
                                feature_id: permission.feature_id,
                                status: 'disabled'
                            });
                        }
                        return Promise.resolve();
                    });
                    
                    Promise.all(promises)
                        .then(() => {
                            this.permissions.forEach(p => {
                                p.status = 'disabled';
                                p.statusBool = false;
                            });
                            
                            // 更新群组列表中的机器人状态
                            const group = this.groups.find(g => g.group_id === this.currentGroupId);
                            if (group) {
                                group.robot_status = 'disabled';
                            }
                            
                            this.$message.success('所有功能已关闭');
                        })
                        .catch(error => {
                            console.error('批量关闭失败:', error);
                            this.$message.error('批量关闭失败');
                        });
                }).catch(() => {});
            },
            batchEnableRobot() {
                if (this.selectedGroups.length === 0) {
                    this.$message.warning('请先选择群组');
                    return;
                }
                
                this.$confirm(`确定要批量启用 ${this.selectedGroups.length} 个群组的机器人吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const promises = this.selectedGroups.map(groupId => {
                        return axios.post(`/api/robot/group/${groupId}/permissions`, {
                            feature_id: 1, // ROBOT的feature_id为1
                            status: 'enabled'
                        });
                    });
                    
                    Promise.all(promises)
                        .then(() => {
                            // 更新本地数据
                            this.selectedGroups.forEach(groupId => {
                                const group = this.groups.find(g => g.group_id === groupId);
                                if (group) {
                                    group.robot_status = 'enabled';
                                }
                            });
                            
                            this.$message.success('批量启用成功');
                        })
                        .catch(error => {
                            console.error('批量启用失败:', error);
                            this.$message.error('批量启用失败');
                        });
                }).catch(() => {});
            },
            batchDisableRobot() {
                if (this.selectedGroups.length === 0) {
                    this.$message.warning('请先选择群组');
                    return;
                }
                
                this.$confirm(`确定要批量关闭 ${this.selectedGroups.length} 个群组的机器人吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const promises = this.selectedGroups.map(groupId => {
                        return axios.post(`/api/robot/group/${groupId}/permissions`, {
                            feature_id: 1, // ROBOT的feature_id为1
                            status: 'disabled'
                        });
                    });
                    
                    Promise.all(promises)
                        .then(() => {
                            // 更新本地数据
                            this.selectedGroups.forEach(groupId => {
                                const group = this.groups.find(g => g.group_id === groupId);
                                if (group) {
                                    group.robot_status = 'disabled';
                                }
                            });
                            
                            this.$message.success('批量关闭成功');
                        })
                        .catch(error => {
                            console.error('批量关闭失败:', error);
                            this.$message.error('批量关闭失败');
                        });
                }).catch(() => {});
            },
            batchRemoveGroups() {
                if (this.selectedGroups.length === 0) {
                    this.$message.warning('请先选择群组');
                    return;
                }
                
                this.$confirm(`确定要批量移除 ${this.selectedGroups.length} 个群组吗? 此操作将清除这些群组的所有设置。`, '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'danger'
                }).then(() => {
                    axios.post('/api/robot/batch_operation', {
                        operation: 'remove_groups',
                        group_ids: this.selectedGroups
                    })
                    .then(response => {
                        if (response.data.success) {
                            // 从列表中移除这些群组
                            this.groups = this.groups.filter(g => !this.selectedGroups.includes(g.group_id));
                            this.selectedGroups = [];
                            this.$message.success('批量移除成功');
                        } else {
                            this.$message.error('批量移除失败');
                        }
                    })
                    .catch(error => {
                        console.error('批量移除失败:', error);
                        this.$message.error('批量移除失败: ' + error.message);
                    });
                }).catch(() => {});
            }
        }
    });
</script>
{% endblock %}