<template>
  <div>
    <div class="treebox-header2">
        <el-select v-model="academicYearId" slot="prepend" size="mini" :placeholder="$t('Student.inschooltree.52049u0o1400')">
            <el-option
              v-for="item in academicYearData"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
        </el-select>
      </div>
    <div class="treebox-header">
      <el-input
        :placeholder="$t('Student.inschooltree.52049u0o1zg0')"
        v-model="filterTree"
        size="mini"
        clearable
      >
        <el-select
        v-if="tags && tags.length > 0"
        v-model="tagIds"
        slot="prepend"
        size="mini"
        multiple
        collapse-tags
        :placeholder="$t('Student.inschooltree.52049u0o24w0')"
      >
        <el-option
          v-for="item in tags"
          :key="item.Id"
          :label="item.Name"
          :value="item.Id"
        >
        </el-option>
      </el-select>
        
        
      </el-input>
      
    </div>
    <div class="treebox-content2">
      <el-tree
        v-if="inSchoolNodeData"
        ref="tree"
        node-key="value"
        :data="inSchoolNodeData"
        :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 }}</span>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
export default {
  name: "inschooltree",
  props: {
    value: { required: true },
    valueType: { type: Number, default: 0 }, //0 只选择用户 1混合选择
    multiple: Boolean,
    mixed: Boolean, //混合选择
    academicYearData: { dafault: null }, //学年数据
    treeData: { dafault: null },
    closeTag: { default: null },
    tags:{default:null},
      tagDict:{default:null}
  },
  data() {
    return {
      title: this.$t('Student.inschooltree.52049u0o28g0'),
      filterTree: "",
      academicYearId: 0,
      inSchoolNodeData: null,
      tagIds: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(this.tagIds && this.tagIds.length>0){
        if(!this.filterTags(data.id)){
          return false
        }
      }
      if (!value) return true
      return data.label.includes(value)
    },
    filterTags(itemId) {
      if (this.tagIds.length == 0) {
        return true;
      }
      if (!this.tagDict[itemId]) {
        return false;
      }
      let refObjectTagIds = this.tagDict[itemId];
      for (let i = 0; i < refObjectTagIds.length; i++) {
        const refObjectTagId = refObjectTagIds[i];

        if (this.tagIds.indexOf(refObjectTagId) > -1) {
          return true;
        }
      }
      return false;
    },
    addChildrenTag(childrens) {
      console.log(childrens);
      let chickChildrens = childrens.filter(item => {
        return this.$refs.tree.getCheckedKeys().includes(item.value);
      });
      chickChildrens.forEach(data => {
        let index = this.value.findIndex(
          value => value.Id == data.id && value.Type == data.type
        );
        if (index == -1) {
          this.value.push({ Id: data.id, Label: data.label, Type: data.type });
        }
      });
    },
    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.Id == data.id && value.Type == data.type
        );
        if (index > -1) {
          this.value.splice(index, 1);
        }
      });
    },
    nodeClick(data, checked, indeterminate) {
      if (this.multiple) {
        if (data.type == "class" && !this.mixed) {
          if (checked) {
            this.addChildrenTag(data.children);
          } else {
            if (!indeterminate) {
              this.deleteChildrenTag(data.children);
            }
          }
          return;
        }
        let index = this.value.findIndex(
          value => value.Id == data.id && value.Type == data.type
        );
        // data.selected = checked
        if (!checked) {
          if (index > -1) {
            this.value.splice(index, 1);
          }
          if (indeterminate && this.mixed) {
            this.addChildrenTag(data.children);
          }
        } else {
          if (this.mixed && this.parentIsChecked(data.parentId)) {
            this.deleteChildrenTag(data.children);
            return;
          }
          if (index == -1) {
            this.value.push({
              Id: data.id,
              Label: data.label,
              Type: data.type
            });
            if (this.mixed) {
              this.deleteChildrenTag(data.children);
            }
          }
        }
      } else {
        if (data.type == "student" || (data.type == "class" && this.mixed)) {
          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() {
      let academicYearId = this.academicYearId;
      if (this.treeData) {
        let treeData = this.treeData.find(
          node => node.value === `year_${academicYearId}`
        );
        if (treeData) {
          return treeData.children;
        } else {
          return [];
        }
      } else {
        return [];
      }
    }
  },
  mounted() {
    this.academicYearId = this.academicYearData.find(
      academicYear => academicYear.isDefault
    ).id;
  },
  watch: {
    academicYearId(value) {
      if (value) {
        this.inSchoolNodeData = this.getTreeData();
        this.$nextTick(() => {
          this.$refs.tree.filter(this.filterTree);
          this.value.forEach(val => {
            this.$refs.tree.setChecked(`${val.Type}_${val.Id}`, true, true);
          });
        });
      }
    },
    closeTag: {
      handler(val) {
        if (val) {
          if (this.multiple) {
            this.$refs.tree.setChecked(`${val.Type}_${val.Id}`, false, true);
          } else {
            this.$refs.tree.setCurrentKey(`${val.Type}_${val.Id}`);
          }
        }
      },
      deep: true
    },
    filterTree(val) {
      console.log(val);
      if (this.$refs.tree) {
        this.$refs.tree.filter(val);
      }
    },
    tagIds(val) {
      console.log(val);
      if (this.$refs.tree) {
        this.$refs.tree.filter(this.filterTree);
      }
    }
  }
};
</script>
<style lang="scss">
.treebox-header2 {
    margin: 5px 0;
    height: 28px;
    .el-select{
        width: 100%;
      }
      .input-with-select .el-input-group__prepend {
        background-color: #fff;
      }
    
  }
.treebox-content2 {
    height: 318px;
    overflow: auto;
  }
</style>