<template>
  <div class='grant-tree-box'>
    <el-row>
      <el-col :span='10'>
        <div class='grant-text'>点击菜单名可查看菜单权限</div>
        <el-tree
          ref='grantMenuTree'
          show-checkbox
          node-key='id'
          :props='treeProps'
          :data='treeData'
          :expand-on-click-node='false'
          :default-checked-keys='defaultCheckedKeys'
          @node-click='handleNodeClick'
          @check='handleNodeCheck'
        ></el-tree>
      </el-col>
      <el-col :span='14'>
        <div class='grant-text' v-if="menuTitle !== ''">所选择的菜单"{{ menuTitle }}"拥有的权限</div>
        <div class='grant-text' v-else>未选择菜单</div>
        <div v-if='permissions.length === 0'>未查询到权限</div>
        <el-checkbox-group v-model='selectedPermissions' @change='handleCheckedPermissions'>
          <el-checkbox v-for='permission in permissions' :label='permission.id' :key='permission.id'>
            {{ permission.permissionName }}
          </el-checkbox>
        </el-checkbox-group>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { loadTree, loadTreeSelected, createAuthMenu, createPermission } from '@api/upms/api-role';

export default {
  name: 'GrantResource',
  components: {},
  props: {
    roleId: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      bodyStyle: {
        height: '420px',
        padding: '8px'
      },
      treeProps: {
        label: 'title',
        children: 'children'
      },
      menuTitle: '',
      treeData: [],
      defaultCheckedKeys: [],
      grantPermissions: [],
      permissions: [],
      selectedPermissions: [],
      oldPermissions: [],
      selectedMenuId: 0
    };
  },
  methods: {
    initMenuIds() {
      let vm = this;
      let params = {
        roleId: vm.roleId,
        scope: '1'
      };
      loadTreeSelected(params).then(
        (res) => {
          let checkedMenus = res.data.checkedMenus;
          let arr = [];
          checkedMenus.forEach(item => {
            // 防止直接选中父级造成全选
            if (!checkedMenus.some(same => same.parentId === item.id)) {
              arr.push(Number(item.id));
            }
          });
          vm.defaultCheckedKeys = arr;
          vm.grantPermissions = res.data.permissionIds;
        },
        (error) => {
          vm.$notify.error({
            title: error.data.msg,
            message: error.data.data
          });
        }
      );
    },
    loadTreeData() {
      let vm = this;
      let params = {
        scope: '1'
      };
      loadTree(params).then(
        (res) => {
          vm.treeData = res.data;
        },
        (error) => {
          vm.$notify.error({
            title: error.data.msg,
            message: error.data.data
          });
        }
      );
    },
    handleNodeClick(data) {
      let vm = this;
      vm.menuTitle = data.title;
      vm.permissions = Object.assign([], data.permissions);
      let permissionIdSet = new Set();
      vm.permissions.forEach((ele) => {
        permissionIdSet.add(ele.id);
      });
      vm.selectedPermissions = vm.grantPermissions.filter((ele) => {
        return permissionIdSet.has(ele);
      });
      vm.oldPermissions = vm.selectedPermissions;
      vm.selectedMenuId = data.id;
    },
    async handleNodeCheck(data, nodeData) {
      let vm = this;
      const checkArr = vm.$refs.grantMenuTree.getCheckedNodes(false, true);
      let arr = [];
      checkArr.forEach(item => {
        arr.push(item.id);
      });
      await createAuthMenu({ roleId: vm.roleId, menuIds: arr });
      vm.initMenuIds();
      vm.permissions = [];
    },
    async handleCheckedPermissions(data) {
      let vm = this;
      await createPermission({ roleId: vm.roleId, menuId: vm.selectedMenuId, permissionIds: data });
    }
  },
  mounted() {
    this.initMenuIds();
  },
  created() {
    this.loadTreeData();
  }
};
</script>

<style scoped lang='less'>
.grant-text {
  font-size: 16px;
  margin-bottom: 5px;
}
</style>
