<!-- 超出展开的盒子 -->
<template>
  <div ref="overflowbox">
    <div
      class="area_tag"
      @click="clickFilter(item)"
      :class="{ area_tag_active: currentValue == item.itemCode }"
      v-for="(item, index) in showData"
      :key="index"
    >
      {{ item.itemName }}
    </div>
    <div
      class="moreValue"
      v-if="hideData && hideData.length > 0"
      @click="showMore"
    >
      {{ isShowMore ? "收起" : "展开" }}
      <i class="el-icon-arrow-down el-icon--right"></i>
    </div>
    <div
      class="marks"
      ref="hidebox"
      :style="{ display: isShowMore ? 'block' : 'none' }"
      @click="clickMarks"
    >
      <div
        class="hideBox"
        :style="{
          width: domBox.width,
          height: domBox.height,
          top: domBox.bottom,
          left: domBox.left,
        }"
      >
        <div
          class="area_tag"
          @click="clickFilter(item, 'close')"
          :class="{ area_tag_active: currentValue == item.itemCode }"
          v-for="(item, index) in hideData"
          :key="index"
        >
          {{ item.itemName }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      domBox: {
        width: "200px",
        height: "40px",
        left: "200px",
        bottom: "0",
        display: "none",
      },
      currentValue: "",
      isShowMore: false,
      showData: [],
      hideData: [],
    };
  },
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    data: {
      type: [Object, Array],
      default: () => {
        return [];
      },
    },
  },

  components: {},
  computed: {},
  watch: {
    data() {
      this.initData();
    },
  },

  mounted() {
    this.initData();
    window.addEventListener("resize", this.initData);
    this.currentValue = this.value;
  },

  created() {},

  methods: {
    clickMarks(e) {
      this.showMore();
    },
    showMore() {
      this.isShowMore = !this.isShowMore;
      if (this.isShowMore) {
        let box = this.$refs.overflowbox.getBoundingClientRect();
        this.domBox.bottom = box.bottom + "px";
        this.domBox.left = box.left + "px";
        this.domBox.height = 80 + "px";
        this.domBox.width = box.width + "px";
        let win = this.$refs.hidebox;
        document.body.appendChild(win);
      } else {
        document.body.removeChild(document.body.lastChild);
      }
    },
    initData() {
      this.$nextTick(() => {
        if (this.$refs.overflowbox) {
          let boxWidth = this.$refs.overflowbox.offsetWidth - 80; //总的盒子宽度
          let dataWidth = 0;
          (this.showData = []), (this.hideData = []);
          this.data.forEach((res) => {
            dataWidth = dataWidth + res.itemName.length * 12 + 30;
            if (dataWidth < boxWidth) {
              this.showData.push(res);
            } else {
              this.hideData.push(res);
            }
          });
        }
      });
    },
    clickFilter(item, close) {
      this.currentValue = item.itemCode;
      this.$emit("input", item.itemCode);
      this.$emit("clickFilter", item);
      if (close) {
        this.showMore();
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.marks {
  height: 100vh;
  width: 100vw;
  // pointer-events:none;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba($color: #000000, $alpha: 0.01);
}
.moreValue {
  display: inline-block;
  font-size: 12px;
  margin-left: 5px;
  cursor: pointer;
  padding: 0 8px;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  border: 1px solid #e7e7e7;
  background: #fff;
  text-align: center;
  border-radius: 4px;
}
.hideBox {
  position: fixed;
  height: 60px;
  background-color: #fff;
  padding: 5px 0;
  border-radius: 4px;
  //   border: 1px solid #e8e8e8;
  box-shadow: 1px 2px 3px rgba($color: #000000, $alpha: 0.1);
  box-sizing: border-box;
}
.moreValue:hover {
  color: #0079fb;
}
.area_tag_active:hover {
  color: var(--base-acv);
}
.area_tag_active:hover {
  color: #fff;
}
.area_tag_active {
  color: #fff;
  border: 1px solid #d9ecff;
  background-color: var(--base-acv) !important;
}
.area_tag {
  background-color: #fff;
}
</style>