<template>
  <el-tree
    ref="tree"
    :data="data"
    :expand-on-click-node="expandOnClickNode"
    :props="props"
    :check-strictly="checkStrictly"
    :indent="indent"
    :default-checked-keys="defaultCheckedKeys"
    :render-content="renderContent"
    :highlight-current="highlightCurrent"
    :show-checkbox="showCheckbox"
    :node-key="nodeKey"
    @check="handleCheckClick"
  />
</template>

<script>

const flatTreeKeys = (tree = [], initialValue = [], childrenKey = 'subList') => {
  const keys = tree.reduce((acc, cur) => {
    if (Array.isArray(cur[childrenKey]) && cur[childrenKey].length > 0) {
      return [cur.id, ...flatTreeKeys(cur[childrenKey], acc)]
    }
    return [...acc, cur.id]
  }, initialValue)

  return [...new Set(keys)]
}
const getParentKeys = (id, data) => {
  function parentNode(data, id, parents) {
    for (let i = 0; i < data.length; i++) {
      const item = data[i]
      if (item.id === id) return parents
      if (!item.subList || !item.subList.length) continue
      parents.push(item.id)
      if (parentNode(item.subList, id, parents).length) return parents
      parents.pop()
    }
    return []
  }
  return parentNode(data, id, [])
}

export default {
  name: 'ResourceTree',
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    expandOnClickNode: {
      type: Boolean,
      default: false
    },
    props: {
      type: Object,
      default: () => {
        return {
          label: 'resourceName',
          children: 'subList'
        }
      }
    },
    checkStrictly: {
      type: Boolean,
      default: true
    },
    indent: {
      type: Number,
      default: 32
    },
    defaultCheckedKeys: {
      type: Array,
      default: () => {
        return []
      }
    },
    highlightCurrent: {
      type: Boolean,
      default: false
    },
    showCheckbox: {
      type: Boolean,
      default: false
    },
    nodeKey: {
      type: String,
      default: 'id'
    }
  },
  data() {
    return {}
  },
  methods: {
    renderContent(h, { node }) { //参数, data, store 
      const childNodes = node.childNodes
      const childNodesLen = childNodes.length
      const hasCheckedChildNodesLen = childNodes.filter(v => !v.checked).length
      return (
        <span class="el-tree-node__leopard__custom">
          <span>{ node.label }</span>
          {
            childNodesLen > 0 && (
              <span>(全<strong>{ childNodesLen }</strong> / 未勾选 <strong style={{ color: hasCheckedChildNodesLen > 0 ? '#f56c6c' : 'inherit' }}>{ hasCheckedChildNodesLen }</strong>)</span>
            )
          }
        </span>
      )
    },
    handleCheckClick(data, { checkedKeys }) {
      const children = data.subList
      const currentNodeKey = data.id
      const childrenKeys = flatTreeKeys(Array.isArray(children) && children.length > 0 ? children : [])
      const parentKeys = getParentKeys(currentNodeKey, this.data)
      if (checkedKeys.includes(currentNodeKey)) {
        this.$refs.tree.setCheckedKeys([...checkedKeys, ...childrenKeys, ...parentKeys])
      } else {
        this.$refs.tree.setCheckedKeys([...(checkedKeys.filter(key => !childrenKeys.includes(key))), ...parentKeys])
      }
    }
  }
}
</script>

<style lang='scss'>
.el-tree-node__leopard__custom {
  font-size: 12px;
  span {
    &:last-child {
      margin-left: 10px;
    }
  }
}
</style>
