<template>
  <div>
    <a-tree v-if="treeData.length > 0" v-model="checkedKeys" checkable show-icon showLine :expanded-keys="expandedKeys" :selected-keys="selectedKeys" :tree-data="treeData" @expand="onExpand" @select="onSelect" @check="onCheck">
      <a-icon slot="folder-open" type="folder-open" />
      <a-icon slot="container" type="container" />
    </a-tree>
  </div>
</template>

<script>
export default {
  name: "menuTree",
  data() {
    return {
      expandedKeys: [],//[ '10','20','30','40','50','60','70','80','90' ],
      checkedKeys: [],
      selectedKeys: [],
      defaultExpandAll: true
    }
  },
  props: {
    value: {
      type: Number,
      default: () => {
        return null
      }
    },
    treeData: {
      type: Array,
      require: true,
      default: () => {
        return []
      }
    }
  },
  created() {
    this.getMenuRoleByRoleId()
  },
  methods: {
    getMenuRoleByRoleId(RoleId) {
      if (!RoleId)
        RoleId = this.value

      let par = { roleId: RoleId }
      this.$api.systemManage.getMenuRoleByRoleId(par).then(({ data = {} }) => {
        if (data) {
          //this.checkedKeys = data
          data.forEach(e => {
            this.checkedKeys.push(e.menuId)
          })
        }
      }).catch(() => { })
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onSelect(selectedKeys, info) {
      this.selectedKeys = selectedKeys
    },
    onCheck(checkedKeys, e) {
      let pars = e.node.dataRef
      pars.roleId = this.value
      let par = { ...pars }
      //选中
      if (e.checked) {
        this.$api.systemManage.insertMenuRoleRecord(par).then(({ data = {} }) => {
          if (data) {
            this.$message.info(data)
            this.getMenuRoleByRoleId()
          }
        }).catch(() => { })
      } else {
        this.$api.systemManage.deleteMenuRoleRecord(par).then(({ data = {} }) => {
          if (data) {
            this.$message.info(data)
            this.getMenuRoleByRoleId()
          }
        }).catch(() => { })
      }
    }
  },
  watch: {
    value: {
      handler(value) {
        this.getMenuRoleByRoleId(value)
      },
    },
  }
};
</script>