<template>
  <div>
    <el-dialog title="设置角色权限" :visible.sync="dialog" width="950px" :close-on-click-modal="false" top="50px">
      <el-tree
        v-loading="loading"
        :data="treeData"
        ref="tree"
        show-checkbox
        :expand-on-click-node="false"
        :check-on-click-node="true"
        :check-strictly="true"
        node-key="id"
        :default-expand-all="true"
        :props="defaultProps">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>
                        <span class="marginR-10">{{ node.label }}</span>
                        <span v-if="node.level == 1">
                            <el-button
                              type="text"
                              size="mini"
                              @click.stop="() => selectChildren(node, data)">
                                全选
                            </el-button>
                            <el-button
                              type="text"
                              size="mini"
                              @click.stop="() => clear(node, data)">
                                清空
                            </el-button>
                        </span>
                    </span>
                </span>
      </el-tree>
      <div slot="footer" class="dialog-footer text-center">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="danger" :disabled="booLock" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: true
    },
    exData: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  computed: {},
  data () {
    return {
      loading: true,
      defaultProps: {
        children: 'son',
        label: 'rule_title',
      },
      treeData: [],
      defaultChecked: [],
      dialog: !!this.value,
      booLock: false
    }
  },
  methods: {
    selectChildren (node, data) {
      let keys = this.getAllkeys(node)
      // 获取已选的
      let selectedKeys = this.$refs.tree.getCheckedKeys()
      // 合并
      keys = [...selectedKeys, ...keys]
      // 去重
      // keys = [...new Set(keys)]
      this.$refs.tree.setCheckedKeys(keys)
    },
    clear (node, data) {
      let keys = this.getAllkeys(node)
      let selectedKeys = this.$refs.tree.getCheckedKeys()
      selectedKeys = selectedKeys.filter(item => !keys.includes(item))
      this.$refs.tree.setCheckedKeys(selectedKeys)
    },
    // 根据node 获取所有包含子节点ID的数组
    getAllkeys (node) {
      let keys = []
      const getMyKeys = (node) => {
        keys.push(node.key)
        if (node.childNodes && node.childNodes.length > 0) {
          for (const key in node.childNodes) {
            getMyKeys(node.childNodes[key])
          }
        }
      }
      getMyKeys(node)
      return keys
    },
    async handleSubmit () {
      let rule_id = this.$refs.tree.getCheckedKeys()
      this.booLock = true
      const data = await this.$fetch('/api/auth/role/set_role_rule', { id: this.exData.id, rule_id })
      this.booLock = false
      if (data.code == 200) {
        this.$message.success('修改成功')
        this.$emit('success')
        this.dialog = false
      }
    },
    async getPermissionsTree () {
      const data = await this.$fetch('/api/auth/role/get_role_rule', { id: this.exData.id }, 'get')
      if (data.code == 200) {
        this.treeData = data.data.setting_rule
        // this.treeData.flatMap( x => [x, ...x.son]).forEach(item => {
        //     if (item.status) {
        //         this.defaultChecked.push(item.id)
        //     }
        // })
        this.$refs.tree.setCheckedKeys(data.data.checked)
        this.loading = false
      }
    }
  },
  mounted () {
    this.getPermissionsTree()
  },
  watch: {
    dialog (val) {
      if (!val) this.$emit('input', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.top-tip {
  margin-top: -20px;
  margin-bottom: 20px;
}
</style>
