<template>
  <div>
    <div class="treebox-header">
      <el-input
        :placeholder="$t('UserMixed.usertree.5205umjykuo0')"
        v-model="filterTree"
        size="mini"
        clearable
      >
        <el-select
          v-if="tags && tags.length > 0"
          v-model="tagIds"
          slot="prepend"
          multiple
          collapse-tags
          :placeholder="$t('UserMixed.usertree.5205umjym5g0')"
        >
          <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-content">
      <el-tree
        v-if="treeData"
        ref="tree"
        node-key="id"
        :data="treeData"
        :check-strictly="true"
        :check-on-click-node="true"
        :expand-on-click-node="false"
        :default-expanded-keys="defaultExpandedKeys"
        :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: "roletree",
  props: {
    value: { required: true },
    treeData: { dafault: null },
    closeTag: { default: null },
    tags: { default: null },
    tagDict: { default: null },
    multiple: Boolean //是否多选
  },
  data() {
    return {
      title: this.$t('UserMixed.usertree.5205umjyme40'),
      filterTree: "",
      defaultExpandedKeys: [],
      tagIds: null
    };
  },
  computed: {
    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;
    },
    nodeClick(data, checked) {
      if (this.multiple) {
        let index = this.value.findIndex(
          value => value.Id == data.id && value.Type == data.type
        );
        if (!checked) {
          if (index > -1) {
            this.value.splice(index, 1);
          }
        } else {
          if (index == -1) {
            this.value.push({
              Id: data.id,
              Label: data.label,
              Type: data.type
            });
          }
        }
      } 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 });
        }
      }
    }
  },
  mounted() {},
  watch: {
    value: {
      handler(value) {
        if (value) {
          this.$nextTick(() => {
            this.$refs.tree.filter(this.filterTree);
            this.$refs.tree.setCheckedNodes([]);
            this.$refs.tree.setCurrentKey(null);
            value.forEach(val => {
              if (val.Type == "user") {
                this.$refs.tree.setChecked(val.Id, true, false);
              }
            });
          });
        }
      },
      immediate: true,
      deep: true
    },
    closeTag: {
      handler(val) {
        if (val) {
          this.$refs.tree.setChecked(val.Id, false, true);
        }
      },
      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>
