<template>
  <main>
    <el-select
      ref="select"
      v-model="values"
      multiple
      clearable
      filterable
      allow-create
      style="width:100%"
      :placeholder=lang.pleaseSelect
      @change="handleChange"
      @keyup.enter.native="handleChange2"
      @remove-tag="removeTag"
    >
      <el-option
        v-for="item in options"
        :key="item.id"
        :disabled="disabled && item.id === Number(judgingCondition)"
        :label="item.name"
        :value="item.name"
      >
        <div class="selectBox">
          <span>{{ item.name }}</span>
          <div class="controlsBox">
            <span
              class="delSelect"
              @click.stop="deleteTag(item.id, item.name)"
            ></span>
          </div>
        </div>
      </el-option>
    </el-select>
  </main>
</template>
<script>
export default {
  name: "select-tags",
  props: {
    // 选项
    options: {
      type: Array,
      default: () => []
    },
    // 选中的值
    value: {
      type: Array,
      default: () => []
    },
    // 提示
    placeholder: {
      type: String,
      default: ''
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 判断条件
    judgingCondition: {
      type: String | Number,
      default: ""
    }
  },
  data() {
    return {
      observer: null,
      hideDom: null
    };
  },
  computed: {
    /**
     * @description 获取当前选中的值
     */
    values: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      }
    }
  },
  mounted() {
    this.mutationObserver();
  },
  beforeDestroy() {
    this.observer.disconnect();
  },
  methods: {
    /**
     * @description 监听tag变化
     */
    mutationObserver() {
      const tagLIstDom = this.$refs.select.$el.querySelector(
        ".el-select__tags"
      );
      const tagSpanDom = this.$refs.select.$el.querySelector(
        ".el-select__tags > span"
      );

      const input = this.$refs.select.$el.querySelector(
        ".el-select__tags > input"
      );
      // 创建隐藏的计数节点
      this.hideDom = document.createElement("span");
      this.hideDom.classList.add("count-node");
      tagSpanDom.append(this.hideDom);

      const config = { childList: true };

      const callback = mutationsList => {
        mutationsList.forEach(item => {
          if (item.type === "childList") {
            const tagList = item.target.childNodes;
            let tagWidth = 0;
            let tagNum = 0;
            let availableTagWidth = 0;

            for (let i = 0; i < tagList.length; i++) {
              const e = tagList[i];
              if (tagWidth > (tagLIstDom.offsetWidth - 30)) {
                e.style.display = "none";
              } else {
                e.style.display = "inline-block";
              }
              tagWidth += e.offsetWidth + 5;

              if (tagWidth > (tagLIstDom.offsetWidth - 30)) {
                e.style.display = "none";
              } else {
                e.style.display = "inline-block";
              }

              if (e.style.display !== "none") {
                tagNum++;
                this.hideDom.style.display = "none";
                const margin = tagNum === 1 ? 0 : 7;
                availableTagWidth += e.offsetWidth + margin;
              } else {
                this.hideDom.style.display = "inline-block";
                this.hideDom.style.left = `${availableTagWidth}px`;
                this.hideDom.innerHTML = `+${tagList.length - tagNum}`;
              }
            }
          }
        });
        if(this.hideDom.style.display != 'none'){
          input.style.marginLeft = "40px"
        }else{
          input.style.marginLeft = "15px"
        }
      };

      this.observer = new MutationObserver(callback);
      this.observer.observe(tagSpanDom, config);
    },
    /**
     * @description 选择框改变
     */
    handleChange(value) {
      console.log(value);
      console.log(this.value);
      
      this.$emit("change", value);
    },
    handleChange2(event) {
      let value = event.target.value
      console.log(this.value);
      this.value.push(value)  
      this.$emit("change", this.value);
    },
    deleteTag(id, name){
      this.$emit("deleteTag", id, name);
    },
    /**
     *
     * @param val 当前角色绑定的分校不允许删除
     */
    removeTag(val) {
      this.$emit("remove-tag", val);
    }
  }
};
</script>
<style scoped>
.selectBox {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.controlsBox {
  display: flex;
  align-items: center;
  width: auto;
  height: 100%;
  display: flex;
}

.delSelect {
  width: 16px;
  height: 16px;
  /* display: none; */
  align-items: center;
  justify-content: center;
  background: url("../../../../assets/icon/classroomObservation/del.svg") no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  /* transform: translateY(7px); */
}


</style>
