<template>
  <div>
    <div class="treebox-header">
      <el-input :placeholder="$t('TsStudent.potentialtree.5205miamyww0')" v-model="filterTree" size="mini" clearable> </el-input>
    </div>
    <div class="treebox-content">
      <el-tree
        v-if="treeNodeData"
        ref="tree"
        node-key="value"
        :data="treeNodeData"
        :check-strictly="checkStrictly"
        :check-on-click-node="true"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        @check-change="nodeClick"
        :highlight-current="true"
        :show-checkbox="showCheckbox"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span v-if="data.icon" style="margin-right:10px;"><i :class="data.icon"/></span>
          <span>{{ node.label }}-{{data.tel}}</span>
          <span style="margin-left:10px;">({{ data.notes }})</span>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
export default {
  name: 'potentialtree',
  props: {
    value: { required: true },
    valueType: { type: Number, default: 0 }, //0 只选择用户 1混合选择
    multiple: Boolean,
    visible: { type: Boolean, default: false },
    closeTag: { default: null },
    treeData: { default: null },
  },
  data() {
    return {
      title: this.$t('TsStudent.potentialtree.5205mian9i00'),
      filterTree: '',
      defaultExpandedKeys: [],
      treeNodeData: null
    }
  },
  computed: {
    checkStrictly() {
      if (this.multiple) {
        return false
      } else {
        return true
      }
    },
    showCheckbox() {
      if (this.multiple) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    deepClone(obj) {
      var _obj = JSON.stringify(obj),
        objClone = JSON.parse(_obj)
      return objClone
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.includes(value) || data.tel.includes(value)
    },
    addChildrenTag(childrens) {
      console.log(childrens)
      let chickChildrens = childrens.filter(item => {
        return this.$refs.tree.getCheckedKeys().includes(item.id)
      })
      chickChildrens.forEach(data => {
        let index = this.value.findIndex(value => value == data.id)
        if (index == -1) {
          this.value.push(data.id)
        }
      })
    },
    parentIsChecked(parentId) {
      return this.$refs.tree.getCheckedKeys().findIndex(key => key == parentId) > -1
    },
    deleteChildrenTag(childrens) {
      console.log(childrens)
      childrens.forEach(data => {
        let index = this.value.findIndex(value => value == data.id)
        if (index > -1) {
          this.value.splice(index, 1)
        }
      })
    },
    nodeClick(data, checked, indeterminate) {
      if (this.multiple) {
        let index = this.value.findIndex(value => value == data.id)
        if (!checked) {
          if (index > -1) {
            this.value.splice(index, 1)
          }
          if (indeterminate) {
            this.addChildrenTag(data.children)
          }
        } else {
          if (this.parentIsChecked(data.parentId)) {
            this.deleteChildrenTag(data.children)
            return
          }
          if (index == -1) {
            // this.value.push(data.id)
            this.value.push({ Id: data.id, Label: data.label, Type: data.type })
            this.deleteChildrenTag(data.children)
          }
        }
      } else {
        if (this.value.length > 0) {
          this.value.splice(0, 1, { Id: data.id, Label: data.label, Type: data.type })
        } else {
          this.value.push({ Id: data.id, Label: data.label, Type: data.type })
        }
      }
    },
    getTreeData(studentData) {
      console.log(studentData)

      let valueType = this.valueType
      let buildStudentNode = function(parentId, nodes) {
        studentData
          .filter(student => {
            return student.Status === 0
          })
          .forEach(student => {
            let studentId = valueType == 0 ? student.Id : `student_${student.Id}`
            let userNode = { id: studentId, label: student.Name, icon: 'el-icon-user', parentId: parentId, children: [] }
            nodes.push(userNode)
          })
      }

      let nodeData = []
      buildStudentNode(0, nodeData)

      return nodeData
    }
  },
  mounted() {
    this.treeNodeData = this.treeData
    this.$nextTick(() => {
      this.$refs.tree.filter(this.filterTree)
      this.value.forEach(val => {
        this.$refs.tree.setChecked(val, true, true)
      })
    })
  },
  watch: {
    closeTag: {
      handler(val) {
        if (val) {
          if (this.multiple) {
            this.$refs.tree.setChecked(`${val.Type}_${val.Id}`, false, true)
          }
        }
      },
      deep: true
    },
    filterTree(val) {
      console.log(val)
      this.$refs.tree.filter(val)
    }
  }
}
</script>
