<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-card class="box-card tree-wrapper" shadow="always">
        <el-tree
          ref="tree"
          :data="treeOptions"
          node-key="id"
          empty-text="加载中，请稍后"
          :props="defaultProps"
          default-expand-all
          highlight-current
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span><i v-if="node.level === 1" class="iconfont icon-zuzhi tree-folder" />{{ node.label }}</span>
          </span>
        </el-tree>
      </el-card>
    </el-col>
    <el-col :span="18">
      <el-card class="box-card tree-wrapper" shadow="always">
        <el-row type="flex" justify="space-between">
          <el-col :span="12">
            <el-button-group>
              <el-button
                type="warning"
                icon="el-icon-refresh"
                size="mini"
                @click="handleCacheRefresh"
              >刷新缓存</el-button>
            </el-button-group>
          </el-col>
          <el-col :span="12">
            <el-button-group style="float: right;">
              <template v-if="showBtns">
                <el-button size="mini" round v-if="disabled" @click="disabled = false">修改</el-button>
                <el-button size="mini" round v-else @click="handSubmit">保存</el-button>
              </template>
            </el-button-group>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-form ref="form" :model="form" :disabled="disabled">
          <el-tree
            ref="data"
            :data="dataTreeOptions"
            show-checkbox
            node-key="id"
            empty-text="加载中，请稍后"
            :props="dataDefaultProps"
            highlight-current
            :expand-on-click-node="false"
            :check-strictly="checkStrictly"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>
                <i v-if="node.level === 1" class="iconfont icon-shujuku tree-folder" />
                <i v-else-if="node.level === 2" class="iconfont icon-shujubiao tree-folder"/>
                <i v-else-if="node.level === 3" class="iconfont icon-shujuziduan tree-folder"/>
                {{ data.code ? (data.name ? data.code + '(' + data.name + ')' : data.code) : data.name }}
              </span>
            </span>
          </el-tree>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { listRole } from '@/api/system/role'
import { getDataMetadataTree, getGrantPermission, grantPermission } from '@/api/metadata/datacolumn'

export default {
  name: 'DataPermissionList',
  data() {
    return {
      tableHeight: document.body.offsetHeight - 310 + 'px',
      // 展示切换
      showOptions: {
        data: {},
        showList: true
      },
      // 左侧树
      treeOptions: [],
      defaultProps: {
        children: 'children',
        label: 'roleName'
      },
      // 右侧树
      dataTreeOptions: [],
      dataDefaultProps: {
        children: 'children',
        label: 'label'
      },
      checkStrictly: false,
      form: {},
      disabled: true,
      showBtns: false,
      btnSubmitEnable: false
    }
  },
  created() {
    this.getLeftTree()
    this.getRightTree()
  },
  methods: {
    getLeftTree() {
      listRole().then(response => {
        if (response.success) {
          const { data } = response
          const tree = {}
          tree.roleName = '角色组'
          tree.children = data
          this.treeOptions = []
          this.treeOptions.push(tree)
        }
      })
    },
    handleNodeClick(data) {
      if (data.id) {
        this.form.roleId = data.id
        getGrantPermission(data.id).then(response => {
          if (response.success) {
            const { data } = response
            const checkedKeys = data || []
            if (checkedKeys && checkedKeys.length > 0) {
              this.checkStrictly = true
              this.$nextTick(() => {
                this.$refs.data.setCheckedKeys(checkedKeys)
                this.checkStrictly = false
              })
            }
            this.showBtns = true
          }
        })
      }
    },
    getRightTree() {
      getDataMetadataTree('column').then(response => {
        if (response.success) {
          const { data } = response
          this.dataTreeOptions = data
        }
      })
    },
    // 获取选中节点数据
    getAllCheckedKeys() {
      // 目前被选中的节点
      const checkedKeys = this.$refs.data.getHalfCheckedKeys()
      // 半选中的菜单节点
      const halfCheckedKeys = this.$refs.data.getCheckedKeys()
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
      return checkedKeys
    },
    handSubmit() {
      this.form.ids = this.getAllCheckedKeys()
      grantPermission(this.form).then(response => {
        if (response.success) {
          this.$message.success('保存成功')
          this.disabled = true
        }
      })
    },
    handleCacheRefresh() {}
  }
}
</script>

<style lang="scss" scoped>
.right-toolbar {
  float: right;
}
.el-card ::v-deep .el-card__body {
  height: calc(100vh - 170px);
}
.tree-wrapper {
  overflow-y: auto;
  ::v-deep .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    .tree-folder {
      margin-right: 5px;
      color: #f6cf07;
    }
  }
}

</style>
