<template>
	<div>
		<el-row style="margin: 10px auto;">
			<el-button type="primary" @click="add()">新建组</el-button>
		    <!-- <el-button type="danger">删除</el-button> -->
		  </el-row>
		<el-table :data="tableData" style="width: 100%" row-key="id">
			<el-table-column prop="id" label="Id" width="100" />
			<el-table-column prop="group_name" label="名称" />
			<el-table-column prop="created_at" label="创建时间" />
			<el-table-column label="操作">
				<template #default="scope">
					<el-button round type="primary" size="small" @click="bind(scope.row.id)">菜单绑定</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-drawer v-model="drawer" title="勾选菜单">
			<el-tree ref="tree"  node-key="id" :default-expanded-keys="defaultExpandedKeys" :default-checked-keys="defaultCheckedKeys" :data="menuList" :props="props" show-checkbox />
			<div class="demo-drawer__footer">
				<el-button @click="drawer=false">取消</el-button>
				<el-button type="primary" :loading="loading" @click="submitAuth">{{
          loading ? '提交中 ...' : '提交'
        }}</el-button>
			</div>
		</el-drawer>
		<el-dialog
		   v-model="dialogVisible"
		   title="组"
		   width="30%"
		 >
		   <el-form :model="GroupInfo" label-width="50px" v-loading="loading">
					 
		       <el-form-item label="名称">
		         <el-input v-model="GroupInfo.name" />
		       </el-form-item>
		     </el-form>
		   <template #footer>
		     <span class="dialog-footer">
		       <el-button @click="dialogVisible = false">取消</el-button>
		       <el-button type="primary" @click="Save">
		         确定
		       </el-button>
		     </span>
		   </template>
		 </el-dialog>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'
	import {
		getGroupList,
		GroupChangeMenu,
		GetAdminMenuList,
		AdminGetGroupMenuList,
		SaveGroup
	} from '@/api/api.js'
	let loading = ref(false)
	let saveType=ref('save')
	let drawer = ref(false)  //是否显示右侧抽屉
	let tableData = ref([])
	let tree = ref([])
	let menuList = ref([]) //可用菜单列表
	let defaultExpandedKeys=ref([]) //默认展开的id
	let defaultCheckedKeys=ref([])//默认勾选的id
	let dialogVisible=ref(false) //是否显示 弹框
	let GroupInfo=ref({
		id:'',
		name:''
	})
	let props = {
		label: 'name',
		children: 'children',
	}
	const bind = (groupId) => {
		GroupInfo.value.id=groupId
		getMenuList()
		drawer.value = true
	}
	const getList = () => {
		getGroupList().then(res => {
			tableData.value = res.list
		})
	}
	const getMenuList = () => { //获取可用菜单列表
	defaultExpandedKeys.value=[]
	defaultCheckedKeys.value=[]
		GetAdminMenuList({
			type: 'enable'
		}).then(res => {
			menuList.value = res.list
			AdminGetGroupMenuList({groupId:GroupInfo.value.id}).then(res=>{  //获取当前组已有菜单
				let list =res.list
				let l1=[]
				let l2=[]
				list.forEach(function(v,i){
					if(v.pid==''||v.pid==null){
						l1.push(v.id)
					}else{
						l2.push(v.id)
					}
					
				})
				defaultExpandedKeys.value=l1
				defaultCheckedKeys.value=l2
				//console.log(defaultCheckedKeys.value)
			})
		})
	}

	const submitAuth = () => { //提交保存权限

		loading.value = true
		GroupChangeMenu({menuList:tree.value.getCheckedNodes(false, true),groupId:GroupInfo.value.id}).then(res => {
			loading.value = false
			if (res.status == 'ok') {
				drawer.value=false
				 ElMessage({
				    message: '分配完成',
				    type: 'success',
				  })
			} else {
				ElMessage.error(res.msg) 
			}
		})
	}
	const add=()=>{ //点击添加按钮
		dialogVisible.value=true
	}
	const Save=()=>{ //保存
		SaveGroup({groupInfo:GroupInfo.value,type:saveType.value}).then(res=>{
			if(res.status=='ok'){
				dialogVisible.value=false
				ElMessage({
				   message: '操作成功',
				   type: 'success',
				 })
				 getList()
			}else{
				ElMessage.error(res.msg) 
			}
		})
	}
	onMounted(() => {
		getList()
	})
</script>

<style scoped>
	.demo-drawer__footer{
		margin: 20px;
	}
</style>