<template>
  <div>
    <a-row>
      <!-- 角色列表 -->
      <a-col :span="5">
        <div class="cardTitle">所有角色</div>
        <a-button class="add-btn" style="margin: 10px" @click="add.show = true"
          >新增角色</a-button
        >
        <a-collapse accordion @change="rolechange">
          <a-collapse-panel
            v-for="(item, index) in roleList"
            :key="index"
            :header="item.name"
          >
		  	<a-button
                  type="link"
                  icon="form"
                  slot="extra"
                  @click.stop="editRole(item.id)"
                >
                </a-button>
                <a-button
                  type="link"
                  slot="extra"
                  style="color: #ff4d4f"
                  icon="delete"
                  @click.stop="delRole(item.id)"
                ></a-button>
            <div
              v-for="(rolechild, indexs) in item.childrenList"
              class="role-card"
              :key="indexs"
            >
              <span class="role-li">
                <span>{{ rolechild.name || "无" }}</span>
                <span v-show="rolechild.name"
                  ><a-button type="link" icon="form" @click="editRole(rolechild.id)">
                  </a-button>
                  <a-button
                    type="link"
                    style="color: #ff4d4f"
                    icon="delete"
                    @click="delRole(rolechild.id)"
                  ></a-button
                ></span>
              </span>
            </div>
          </a-collapse-panel>
        </a-collapse>
      </a-col>
      <!-- 人员表格 -->
      <a-col :span="19">
        <div class="treebox">
          <a-tree
            class="tree"
            v-model="checkedKeys"
            checkable
            :replace-fields="replaceFields"
            :expanded-keys="expandedKeys"
            :auto-expand-parent="autoExpandParent"
            :selected-keys="selectedKeys"
            :tree-data="menus"
            @expand="onExpand"
            @select="onSelect"
            @check="onCheck"
          />
        </div>
      </a-col>
    </a-row>
    <add-form
      :show="add.show"
      :title="add.title"
      :list="roleList"
      @close="addClose"
	  @success='success'
	  :id='add.editId'
    ></add-form>
  </div>
</template>

<script>
import { getrolelist, FindAllMenus, roleDel } from "@/api/basic/role";
import addForm from "./form.vue";
export default {
	components: {
		addForm,
	},
	data() {
		return {
			add: {
				show: false,
				title: "新增角色",
				editId:null
			},
			roleList: [],
			expandedKeys: [],
			replaceFields: {
				children: "childrenList",
				title: "name",
				key: "id",
			},
			autoExpandParent: true,
			checkedKeys: [],
			selectedKeys: [],
			ActionsList: [],
			menus: [],
		};
	},
	mounted() {
		this.getData();
	},
	methods: {
		getData() {
			getrolelist().then((res) => {
				this.roleList = res.data;
			});
		},
		rolechange(data) {
			if (data) {
				this.searchForm.roleId = this.roleList[data].id;
				FindAllMenus({ roleId: this.searchForm.roleId }).then((res) => {
					this.menus = res.data;
				});
			} else {
				this.searchForm.roleId = null;
			}
		},
		success(){
			this.getData()
		},
		addClose() {
			this.add.show = false;
			this.add.editId = undefined;
		},
		// 编辑角色
		editRole(id){
			this.add.editId = id
			this.add.title = '修改角色'
			this.add.show= true;
		},
		// 删除角色
		delRole(id) {
			var vm = this;
			this.$confirm({
				title: "是否删除",
				// okText:'删除',
				// cancelText:'取消',
				icon: "delete",
				onOk:()=> {
					roleDel({roleId:id}).then(res=>{
						if(res.code === 200){
							this.$message.success(res.msg)
							this.getData()
						}else{
							this.$message.error(res.msg)
						}
					})
				}
			});
		},
		onExpand(expandedKeys) {
			this.expandedKeys = expandedKeys;
			this.autoExpandParent = false;
		},
		onCheck(checkedKeys) {
			// console.log('onCheck', checkedKeys);
			this.checkedKeys = checkedKeys;
		},
		onSelect(selectedKeys, info) {
			// console.log('onSelect', info);
			this.selectedKeys = selectedKeys;
		},
	},
	watch: {
		checkedKeys(val) {
			// console.log('onCheck', val);
		},
		roleList: {
			handler(val) {
				val.forEach((ele, index) => {
					if (ele.childrenList === undefined || ele.childrenList === null) {
						this.roleList[index].childrenList = [{}];
					}
				});
			},
			deep: true,
		},
	},
};
</script>

<style lang="less" scoped>
.role-card {
  line-height: 30px;
  font-size: 16px;
  cursor: pointer;
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
/deep/.ant-tree ul {
  width: 200px;
}
.tree {
  display: flex;
  margin-left: 20px;
}
.role-card {
  line-height: 30px;
  font-size: 16px;
  cursor: pointer;
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.role-li {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
</style>