{% extends "base.html" %}

{% block title %}虚拟群组管理 - 机器人管理后台{% endblock %}

{% block content %}
<div class="page-shell virtual-page">
    <div class="page-hero">
        <div class="page-hero-copy">
            <div class="page-eyebrow">Virtual Groups Workspace</div>
            <h1>虚拟群组管理</h1>
            <p>管理虚拟群组与其包含的微信群，让分组运营与消息路由更清楚。</p>
        </div>
        <div class="page-hero-actions">
            <el-input placeholder="搜索虚拟群组..." v-model="searchQuery" class="hero-search" clearable>
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-button type="primary" @click="showCreateVirtualGroupDialog">创建虚拟群组</el-button>
        </div>
    </div>

    <el-row :gutter="16" class="overview-grid">
        <el-col :span="8"><el-card class="overview-card overview-card--primary"><div class="overview-label">虚拟群组数</div><div class="overview-value">{% raw %}{{ virtualGroups.length }}{% endraw %}</div><div class="overview-note">当前定义的虚拟群组数量</div></el-card></el-col>
        <el-col :span="8"><el-card class="overview-card"><div class="overview-label">可用微信群</div><div class="overview-value">{% raw %}{{ allGroups.length }}{% endraw %}</div><div class="overview-note">可纳入虚拟群组的微信群</div></el-card></el-col>
        <el-col :span="8"><el-card class="overview-card overview-card--soft"><div class="overview-label">筛选结果</div><div class="overview-value">{% raw %}{{ filteredVirtualGroups.length }}{% endraw %}</div><div class="overview-note">当前搜索命中的虚拟群组</div></el-card></el-col>
    </el-row>

    <el-card class="workspace-card" shadow="hover">
        <div slot="header" class="workspace-header"><div><h3>虚拟群组列表</h3><p>展开每个虚拟群组可以查看其包含的微信群并进行增删。</p></div></div>
        <el-table :data="filteredVirtualGroups" style="width:100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <div class="expand-shell">
                        <el-table :data="props.row.groups" style="width:100%">
                            <el-table-column label="微信群ID" prop="id" width="280"></el-table-column>
                            <el-table-column label="微信群名称" prop="name"></el-table-column>
                            <el-table-column label="操作" width="120"><template slot-scope="scope"><el-button size="mini" type="danger" @click="removeGroupFromVirtual(props.row.id, scope.row.id)">移除</el-button></template></el-table-column>
                        </el-table>
                        <div class="expand-actions"><el-button size="small" type="primary" @click="showAddGroupDialog(props.row)">添加微信群</el-button></div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="虚拟群组名称" min-width="260"><template slot-scope="scope"><div class="entity-cell"><div class="entity-badge">{% raw %}{{ scope.$index + 1 }}{% endraw %}</div><div class="entity-copy"><div class="entity-title">{% raw %}{{ scope.row.name }}{% endraw %}</div><div class="entity-subtitle">ID: {% raw %}{{ scope.row.id }}{% endraw %}</div></div></div></template></el-table-column>
            <el-table-column label="包含群数量" width="140" align="center"><template slot-scope="scope">{% raw %}{{ scope.row.groups.length }}{% endraw %} 个群</template></el-table-column>
            <el-table-column label="操作" width="220"><template slot-scope="scope"><div class="action-row"><el-button size="mini" type="primary" plain @click="editVirtualGroup(scope.row)">编辑</el-button><el-button size="mini" type="danger" @click="deleteVirtualGroup(scope.row)">删除</el-button></div></template></el-table-column>
        </el-table>
    </el-card>

    <el-dialog title="创建虚拟群组" :visible.sync="createVirtualGroupDialogVisible" width="30%">
        <div class="dialog-intro">为一组微信群创建统一的虚拟分组名称，方便集中管理。</div>
        <el-form :model="virtualGroupForm" :rules="virtualGroupRules" ref="virtualGroupForm">
            <el-form-item label="群组名称" prop="name"><el-input v-model="virtualGroupForm.name" placeholder="请输入虚拟群组名称"></el-input></el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer"><el-button @click="createVirtualGroupDialogVisible = false">取消</el-button><el-button type="primary" @click="submitCreateVirtualGroup">确定</el-button></span>
    </el-dialog>

    <el-dialog title="编辑虚拟群组" :visible.sync="editVirtualGroupDialogVisible" width="30%">
        <div class="dialog-intro">修改虚拟群组名称，不影响已包含的微信群列表。</div>
        <el-form :model="editVirtualGroupForm" :rules="virtualGroupRules" ref="editVirtualGroupForm">
            <el-form-item label="群组名称" prop="name"><el-input v-model="editVirtualGroupForm.name" placeholder="请输入虚拟群组名称"></el-input></el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer"><el-button @click="editVirtualGroupDialogVisible = false">取消</el-button><el-button type="primary" @click="submitEditVirtualGroup">确定</el-button></span>
    </el-dialog>

    <el-dialog title="添加微信群到虚拟群组" :visible.sync="addGroupDialogVisible" width="50%">
        <div class="dialog-intro">从可用微信群中选择一个加入当前虚拟群组。</div>
        <el-form :model="addGroupForm" :rules="addGroupRules" ref="addGroupForm">
            <el-form-item label="选择微信群" prop="wx_group_id">
                <el-select v-model="addGroupForm.wx_group_id" filterable placeholder="请选择微信群" style="width:100%">
                    <el-option v-for="group in availableGroups" :key="group.wxid" :label="group.name" :value="group.wxid"><span style="float:left">{% raw %}{{ group.name }}{% endraw %}</span><span style="float:right;color:#94a3b8;font-size:13px">{% raw %}{{ group.wxid }}{% endraw %}</span></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer"><el-button @click="addGroupDialogVisible = false">取消</el-button><el-button type="primary" @click="submitAddGroup">确定</el-button></span>
    </el-dialog>
</div>
{% endblock %}

{% block scripts %}
<script>
new Vue({
    el:'#app', mixins:[baseApp],
    data(){ return { virtualGroups:[], searchQuery:'', createVirtualGroupDialogVisible:false, virtualGroupForm:{name:''}, virtualGroupRules:{name:[{required:true,message:'请输入虚拟群组名称',trigger:'blur'}]}, editVirtualGroupDialogVisible:false, editVirtualGroupForm:{id:'',name:''}, addGroupDialogVisible:false, currentVirtualGroupId:'', addGroupForm:{wx_group_id:''}, addGroupRules:{wx_group_id:[{required:true,message:'请选择微信群',trigger:'change'}]}, availableGroups:[], allGroups:[] } },
    computed:{ filteredVirtualGroups(){ if(!this.searchQuery) return this.virtualGroups; const query=this.searchQuery.toLowerCase(); return this.virtualGroups.filter(group=>group.name.toLowerCase().includes(query)); } },
    mounted(){ this.currentView='12'; this.loadVirtualGroups(); this.loadAllGroups(); },
    methods:{
        loadVirtualGroups(){ axios.get('/virtual_group/api/virtual_groups').then(response=>{ if(response.data.success){ this.virtualGroups=response.data.data.chatGroups||[]; } else { this.$message.error('加载虚拟群组失败'); } }).catch(error=>{ console.error('加载虚拟群组失败:', error); this.$message.error('加载虚拟群组失败'); }); },
        loadAllGroups(){ axios.get('/contacts/api/groups').then(response=>{ if(response.data.success){ const groups=response.data.data.groups; this.allGroups=Object.entries(groups).map(([wxid,name])=>({wxid,name:name||wxid})); } }).catch(error=>{ console.error('加载群组列表失败:', error); this.$message.error('加载群组列表失败'); }); },
        showCreateVirtualGroupDialog(){ this.virtualGroupForm={name:''}; this.createVirtualGroupDialogVisible=true; this.$nextTick(()=>{ this.$refs.virtualGroupForm&&this.$refs.virtualGroupForm.clearValidate(); }); },
        submitCreateVirtualGroup(){ this.$refs.virtualGroupForm.validate(valid=>{ if(valid){ axios.post('/virtual_group/api/virtual_groups', this.virtualGroupForm).then(response=>{ if(response.data.success){ this.$message.success('创建虚拟群组成功'); this.createVirtualGroupDialogVisible=false; this.loadVirtualGroups(); } else { this.$message.error(response.data.error||'创建虚拟群组失败'); } }).catch(error=>{ console.error('创建虚拟群组失败:', error); this.$message.error('创建虚拟群组失败'); }); } }); },
        editVirtualGroup(group){ this.editVirtualGroupForm={ id:group.id, name:group.name }; this.editVirtualGroupDialogVisible=true; this.$nextTick(()=>{ this.$refs.editVirtualGroupForm&&this.$refs.editVirtualGroupForm.clearValidate(); }); },
        submitEditVirtualGroup(){ this.$refs.editVirtualGroupForm.validate(valid=>{ if(valid){ axios.put(`/virtual_group/api/virtual_groups/${this.editVirtualGroupForm.id}`, { name:this.editVirtualGroupForm.name }).then(response=>{ if(response.data.success){ this.$message.success('更新虚拟群组成功'); this.editVirtualGroupDialogVisible=false; this.loadVirtualGroups(); } else { this.$message.error(response.data.error||'更新虚拟群组失败'); } }).catch(error=>{ console.error('更新虚拟群组失败:', error); this.$message.error('更新虚拟群组失败'); }); } }); },
        deleteVirtualGroup(group){ this.$confirm(`确定要删除虚拟群组 "${group.name}" 吗?`,'提示',{ confirmButtonText:'确定', cancelButtonText:'取消', type:'warning' }).then(()=>{ axios.delete(`/virtual_group/api/virtual_groups/${group.id}`).then(response=>{ if(response.data.success){ this.$message.success('删除虚拟群组成功'); this.loadVirtualGroups(); } else { this.$message.error(response.data.error||'删除虚拟群组失败'); } }).catch(error=>{ console.error('删除虚拟群组失败:', error); this.$message.error('删除虚拟群组失败'); }); }).catch(()=>{}); },
        showAddGroupDialog(virtualGroup){ this.currentVirtualGroupId=virtualGroup.id; this.addGroupForm={ wx_group_id:'' }; const existingGroupIds=virtualGroup.groups.map(g=>g.id); this.availableGroups=this.allGroups.filter(g=>!existingGroupIds.includes(g.wxid)); this.addGroupDialogVisible=true; this.$nextTick(()=>{ this.$refs.addGroupForm&&this.$refs.addGroupForm.clearValidate(); }); },
        submitAddGroup(){ this.$refs.addGroupForm.validate(valid=>{ if(valid){ axios.post(`/virtual_group/api/virtual_groups/${this.currentVirtualGroupId}/groups`, { wx_group_id:this.addGroupForm.wx_group_id }).then(response=>{ if(response.data.success){ this.$message.success('添加微信群成功'); this.addGroupDialogVisible=false; this.loadVirtualGroups(); } else { this.$message.error(response.data.error||'添加微信群失败'); } }).catch(error=>{ console.error('添加微信群失败:', error); this.$message.error('添加微信群失败'); }); } }); },
        removeGroupFromVirtual(virtualGroupId, wxGroupId){ this.$confirm('确定要从虚拟群组中移除该微信群吗?','提示',{ confirmButtonText:'确定', cancelButtonText:'取消', type:'warning' }).then(()=>{ axios.delete(`/virtual_group/api/virtual_groups/${virtualGroupId}/groups/${wxGroupId}`).then(response=>{ if(response.data.success){ this.$message.success('移除微信群成功'); this.loadVirtualGroups(); } else { this.$message.error(response.data.error||'移除微信群失败'); } }).catch(error=>{ console.error('移除微信群失败:', error); this.$message.error('移除微信群失败'); }); }).catch(()=>{}); }
    }
});
</script>
<style>
.page-shell{display:flex;flex-direction:column;gap:16px}.page-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:24px 26px;border-radius:24px;background:linear-gradient(135deg, rgba(79,70,229,.10), rgba(59,130,246,.08), rgba(255,255,255,.9));border:1px solid rgba(148,163,184,.16);box-shadow:0 18px 40px rgba(15,23,42,.06)}.page-hero-actions{display:flex;align-items:center;gap:12px}.hero-search{width:260px}.page-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#6366f1;font-weight:700;margin-bottom:8px}.page-hero-copy h1{font-size:30px;line-height:1.1;margin-bottom:10px;color:#0f172a}.page-hero-copy p{color:#64748b;font-size:14px}.overview-grid .el-col{margin-bottom:16px}.overview-card{min-height:112px}.overview-card--primary{background:linear-gradient(180deg, rgba(79,70,229,.10), rgba(255,255,255,.94)) !important}.overview-card--soft{background:linear-gradient(180deg, rgba(59,130,246,.08), rgba(255,255,255,.94)) !important}.overview-label{font-size:13px;color:#64748b;margin-bottom:14px}.overview-value{font-size:30px;font-weight:700;color:#0f172a;margin-bottom:10px}.overview-note{font-size:12px;color:#94a3b8}.workspace-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.workspace-header h3{font-size:18px;margin-bottom:4px}.workspace-header p{font-size:13px;color:#64748b}.entity-cell{display:flex;align-items:center;gap:12px}.entity-badge{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(79,70,229,.10);color:#4f46e5;font-size:12px;font-weight:700;flex-shrink:0}.entity-title{font-size:14px;font-weight:600;color:#0f172a}.entity-subtitle{margin-top:4px;font-size:12px;color:#94a3b8}.action-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.expand-shell{padding:8px 0}.expand-actions{margin-top:12px}.dialog-intro{margin-bottom:14px;color:#64748b;font-size:13px}
</style>
{% endblock %}