<template>
  <div>
    <el-tree
      ref="preTree"
      :data="treeData"
      :props="dprops"
      :default-checked-keys="apiIds"
      :show-checkbox="showCheckBox"
      node-key="id"
      @check="checkItem"
      @getCheckedNodes="getCheckedNodes"
    />
  </div>
</template>

<script>
import { getPremission } from '@/api/system/permissionTemplate'
export default {
  name: 'PremissionTree',
  props: {
    apiIds: {
      type: Array,
      default() {
        return []
      }
    },
    isUserSet: {
      type: Boolean,
      required: false,
      default() {
        return false
      }
    },
    isShowCheckBox: {
      type: Boolean,
      required: false,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      treeLoading: false,
      treeData: [],
      defaultIds: [],
      dprops: {
        label: 'label',
        children: 'children'
      }
    }
  },
  computed: {
    showCheckBox() {
      if (this.isShowCheckBox) {
        return true
      } else {
        return false
      }
    }
  },
  created() {
    this.getPremission()
  },
  methods: {
    getPremission() {
      getPremission().then(res => {
        const arr = res
        const lastArr = []
        let basePname = arr[0].pname
        let baseObj = {
          label: basePname,
          id: basePname,
          children: []
        }
        for (let i = 0; i < arr.length; i++) {
          const item = arr[i]
          if (item.pname === basePname) {
            item.label = item.alias
            baseObj.children.push(item)
          } else {
            lastArr.push(baseObj)
            basePname = item.pname
            item.label = item.alias
            baseObj = {
              label: basePname,
              id: basePname,
              children: []
            }
            baseObj.children.push(item)
          }
        }
        this.treeData = lastArr
        this.defaultIds = this.apiIds
      })
    },
    checkItem(currentObj, treeStatus) {
      if (!this.isUserSet) return
      //  去除一级节点
      const allSelectChecked = treeStatus.checkedKeys.filter(item => {
        return typeof item === 'number'
      })
      // 获取手动点击的（非模版的）
      const handSelectChecked = this.getArrDifference(allSelectChecked, this.apiIds)
      this.$refs['preTree'].setCheckedKeys(allSelectChecked)
      this.$emit('handChecked', handSelectChecked)
    },
    getCheckedNodes() {
      return this.$refs.preTree.getCheckedNodes()
    },
    getArrDifference(arr1, arr2) {
      return arr1.concat(arr2).filter(function(v, i, arr) {
        return arr.indexOf(v) === arr.lastIndexOf(v)
      })
    }
  }
}
</script>

<style scoped>

</style>