<template>
  <div class="wrap selcetAll">
    <el-tooltip
      v-if="isShow"
      class="item"
      effect="dark"
      :content="labelStr"
      placement="top"
      ref="tooltip"
    >
      <div class="showDev"></div>
    </el-tooltip>
    <div class="select-all">
      <el-select
        multiple
        clearable
        filterable
        collapse-tags
        class="select"
        v-bind="{ ...$attrs, ...$props }"
        v-on:input="(value) => $emit('input', value)"
        ref="select"
      >
        <slot />
      </el-select>
      <el-button @click="selectAll" class="btn" v-bind="{ ...$attrs }">
        全选
      </el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "select-all",
  data() {
    return {
      isShow: false,
    };
  },
  mounted() {
    this.$nextTick((res) => {
      this.isShow =
        (this.$refs?.select?.disabled || false) && this.labelStr.length > 0;
    });
  },
  computed: {
    labelStr() {
      const { selected } = this.$refs.select;
      console.log(selected);
      let labelStr = selected
        .map((item) => (item.label ? item.label : item.value))
        .join(",");
      return labelStr;
    },
  },
  methods: {
    selectAll() {
      const { options } = this.$refs.select;
      const values = options
        .filter((item) => !item.disabled && item.value)
        .map((item) => item.value);
      this.$emit("input", values);
    },
  },
};
</script>
<style lang="scss">
.el-tooltip__popper {
  max-width: 300px;
  line-height: 180%;
}
</style>
<style lang="less" scoped>
.wrap {
  position: relative;
}

.select-all {
  display: flex;
  .select {
    flex: 1;
    /deep/ .el-input__inner {
      border-radius: 4px 0 0 4px;
    }
  }
}
.btn {
  width: 50px;
  padding: 0 10px;
  border-left: none;
  border-radius: 0 4px 4px 0;
  height: 40px;
}
.item {
  width: 100%;
  position: absolute;
  z-index: 1000;
  height: 40px;
  .showDev {
    width: 100%;
  }
}
</style>
