<template>
  <div>
    <a-row>
      <!-- 角色列表 -->
      <a-col :span="5">
        <div class="cardTitle">所有角色</div>
        <a-collapse accordion @change="rolechange">
          <a-collapse-panel
            v-for="(item, index) in roleList"
            :key="index"
            :header="item.name"
          >
            <div
              v-for="(rolechild, indexs) in item.childrenList"
              class="role-card"
              :key="indexs"
              @click="rolechoose(rolechild.id)"
            >
              <span class="role-li">
                <span>{{ rolechild.name || "无" }}</span>
                <span v-show="rolechild.name"> </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
            checkStrictly
            :replace-fields="replaceFields"
            :expanded-keys="expandedKeys"
            :selected-keys="selectedKeys"
            :tree-data="menus"
            @expand="onExpand"
            @select="onSelect"
            @check="onCheck"
          />
        </div>
      </a-col>
    </a-row>
    <a-drawer
      title="配置操作"
      placement="right"
      :closable="false"
      :visible="actions.show"
      @close="onClose"
    >
      <div class="content">
        <div v-if="actionsList.length === 0">无可配置操作</div>
        <a-checkbox
          v-for="action in actionsList"
          :checked="action.isCheck"
          :key="action.id"
          @change="onChange($event, action.id)"
        >
          {{ action.name }}</a-checkbox
        >
      </div>
    </a-drawer>
  </div>
</template>

<script>
import {
	getrolelist,
	FindAllMenus,
	changeMenuShow,
	getActions,
	changeActions,
} from "@/api/basic/role";
export default {
	data() {
		return {
			roleId: null,
			roleList: [],
			expandedKeys: [],
			replaceFields: {
				children: "childrenList",
				title: "name",
				key: "id",
			},
			checkedKeys: [],
			selectedKeys: [],
			menus: [], //页面菜单
			actionsList: [], //操作
			actions: {
				show: false,
			},
		};
	},
	mounted() {
		this.getData();
	},
	methods: {
		getData() {
			getrolelist().then((res) => {
				this.roleList = res.data;
			});
		},
		rolechoose(data) {
			this.checkedKeys = [];
			if (data !== undefined) {
				this.roleId = data;
				FindAllMenus({ roleId: this.roleId }).then((res) => {
					this.menus = res.data;
					this.defaultCheck(this.menus);
				});
			} else if (data === undefined) {
				this.roleId = null;
			}
		},
		rolechange(data) {
			if (data) {
				this.checkedKeys = [];
				this.roleId = this.roleList[data].id;
				FindAllMenus({ roleId: this.roleId }).then((res) => {
					this.menus = res.data;
					this.defaultCheck(this.menus);
				});
			} else {
				this.roleId = null;
				this.menus = [];
			}
		},
		defaultCheck(arr) {
			for (let item of arr) {
				if (item.isShow === true && item.childrenList !== null) {
					this.checkedKeys.push(item.id);
					this.defaultCheck(item.childrenList);
				} else if (item.isShow === true) {
					this.checkedKeys.push(item.id);
				}
			}
		},
		onExpand(expandedKeys) {
			this.expandedKeys = expandedKeys;
			this.autoExpandParent = false;
		},
		onCheck(checkedKeys, e) {
			this.checkedKeys = checkedKeys;
			// console.log(e.node.eventKey);
			changeMenuShow({
				roleId: this.roleId,
				showMenusId: e.node.eventKey,
			}).then((res) => {
				if (res.code === 200) {
					this.$message.success(res.msg);
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		onSelect(selectedKeys, info) {
			// console.log('onSelect', info);
			this.selectedKeys = selectedKeys;
			// console.log(selectedKeys);
			getActions({ roleId: this.roleId, menusId: this.selectedKeys[0] }).then(
				(res) => {
					this.actionsList = res.data;
					this.actions.show = true;
				}
			);
		},
		onChange(e, id) {
			changeActions({
				roleId: this.roleId,
				menusId: this.selectedKeys[0],
				operationId: id,
			}).then((res) => {
				if (res.code === 200) {
					this.$message.success(res.msg);
					this.onSelect(this.selectedKeys)
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		onClose() {
			this.actions.show = false;
		},
	},
	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;
}
.treebox {
  padding-left: 30px;
}
.tree {
  display: flex;
}
.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%;
}
/deep/.ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin: 0px;
}
</style>
