<!--
 * @Author: zk
 * @Date: 2022-02-09 15:47:09
 * @LastEditTime: 2022-03-02 11:14:29
 * @LastEditors: your name
 * @Description: 用户组树
 * @FilePath: \Foshan4A4.0\src\components\usergrouptree\index.vue
-->
<template>
  <div class="userGroupTree">
    <div class="head">
      <p class="manageTitle">{{ title }}</p>
    </div>
    <div
      :class="type ? 'radioBg':''"
      class="content"
    >
      <el-scrollbar
        style="height: 100%"
        wrap-style="overflow-x:hidden;"
      >
        <el-tree
          ref="tree"
          :data="data"
          show-checkbox
          :check-strictly="true"
          :default-props="defaultProps"
          :expand-on-click-node="false"
          node-key="GroupId"
          default-expand-all
          highlight-current
          @check-change="currentChange"
        >
          <span
            slot-scope="{ data }"
            class="custom-tree-node"
          >
            {{ data.GroupName }}
          </span>
        </el-tree>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { GetGroupTree } from '@/api/AccountGroup'
import { translateDataToTreeAll } from '@/utils/validate'
export default {
  name: 'UserGroupTree',
  props: {
    title: {
      // 标题
      type: String,
      default: ''
    },
    checkedKeys: {
      // 已选中
      type: Array,
      default: () => []
    },
    type: {
      type: Boolean,
      default: false
    },
    defaultProps: {
      type: Object,
      default: () => ({
        children: 'children',
        label: 'GroupName'
      })
    },
    checkDisabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      data: [], // tree数据
      checkedList: [], // 已选中数据
      pageIndex: 1,
      pageSize: 20
    }
  },
  watch: {
    checkedKeys: {
      handler(val) {
        this.checkedList = val
        this.$refs.tree.setCheckedKeys(val)
      },
      deep: true
    }
  },
  created() {
    this.getGroupTree()
  },
  methods: {
    // 复选框选中
    currentChange(data, isChecked) {
      if (this.type) {
        const { GroupId } = data
        this.$emit('getTreeData', this.$refs.tree.getCheckedNodes())
        if (isChecked) {
          const checked = [GroupId]
          this.$refs.tree.setCheckedKeys(checked)
        }
      } else {
        const arr = this.$refs.tree.getCheckedNodes()
        this.$emit('getTreeData', arr)
      }
    },
    async getGroupTree() {
      const result = await GetGroupTree({
        QueryName: '',
        PageIndex: this.pageIndex,
        PageSize: this.pageSize
      })
      const datas = result.returnData
      if (this.checkDisabled) {
        datas.forEach(data => {
          data.disabled = true
        })
      }
      const tree = translateDataToTreeAll(datas, 'GroupUpid', 'GroupId')
      const obj = {
        AuthCount: 0,
        GroupId: -1,
        GroupName: '系统用户组',
        GroupUpid: 0,
        QueryTarget: 0,
        Status: 0,
        UserCount: 0,
        disabled: true,
        children: tree
      }
      this.data = [obj]
    }
  }
}
</script>

<style lang="scss" scoped>
.userGroupTree {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 4px;
  padding: 27px 24px;
  .head {
    width: 100%;
    display: flex;
    align-items: center;
  }
  ::v-deep .content {
    width: 100%;
    height: calc(100% - 112px);
    box-sizing: border-box;
    margin-left: 0;
    margin-top: 30px;
    .el-tree-node.is-expanded > .el-tree-node__children {
      display: block;
    }
    .custom-tree-node {
      margin-left: 10px;
      font-size: 14px;
    }
  }
  ::v-deep .radioBg {
    .el-checkbox__inner {
      border-radius: 50%;
      &::after {
        width: 5px;
        height: 5px;
        background: #ffffff;
        border-radius: 50%;
        top: 3px;
        left: 3px;
      }
    }
  }
}
</style>
