<!--
 * @Author: Billy
 * @Date: 2022-01-01 05:27:31
 * @LastEditors: Billy
 * @LastEditTime: 2022-01-06 14:32:19
 * @Description: 请输入
-->

<template>
  <div class="tabs-container">
    <Sliders
      class="tabs-sliders"
      ref="tabs-sliders"
      :sliders="tabs"
      :currentActive.sync="currentActive"
    >
      <template v-slot="{ item, index, isActive }">
        <div
          class="tab"
          :class="{ active: isActive }"
          :style="{
            width: `${perTabWidth}px`,
            maxWidth: `${perTabMaxWidth}px`,
            padding: `0 ${perTabPadding}px`,
          }"
          @mouseenter="onTabMouseenter(item, index)"
        >
          <span
            class="title"
            :style="{
              width: `${titleWidth}px`,
            }"
          >
            {{ item.title }}
          </span>
          <span
            class="close"
            :style="{ width: `${tabCloseWidth}px` }"
            @click="onTabCloseClick(item, index)"
            @mousedown="onTabCloseMousedown(item, index)"
            @mouseup="onTabCloseMouseup(item, index)"
            @mouseenter="onTabCloseMouseenter(item, index)"
            @mouseleave="onTabCloseMouseleave(item, index)"
            ><i class="el-icon-close icon"></i
          ></span>
        </div>
      </template>
    </Sliders>
  </div>
</template>
<script>
import Sliders from "../Sliders.vue";
export default {
  components: { Sliders },
  props: {
    // 标签数据对象的属性，数据对象的类型是@/entity/Ui/Tab/Tab.js
    tabs: {
      type: Array,
      default: function () {
        return [];
      },
    },
    // 当前激活菜单的 index (支持.sync)
    tabsCurrActiveIndex: { type: Number, default: 0 },
  },
  computed: {
    currentActive: {
      get() {
        return this.tabsCurrActiveIndex;
      },
      set(val) {
        this.$emit("update:tabsCurrActiveIndex", val);
      },
    },
    titleWidth: function () {
      return (
        Math.min(this.perTabWidth, this.perTabMaxWidth) -
        this.tabCloseWidth -
        this.perTabPadding * 2
      );
    },
  },
  data() {
    return {
      isTabCloseMousedown: false,
      tabCloseWidth: 18,
      perTabPadding: 8,
      perTabMaxWidth: 200,
      perTabWidth: this.perTabMaxWidth,
    };
  },
  mounted() {
    const rectSliders = this.$refs["tabs-sliders"].$el.getBoundingClientRect();
    this.perTabWidth = rectSliders.width / this.tabs.length;
  },
  methods: {
    onTabCloseClick(item, index) {},
    onTabMouseenter(item, index) {
      // if (!this.isTabCloseMousedown) {
      //   this.$refs["tabs-sliders"].DisFrozen();
      // }
    },
    onTabCloseMousedown(item, index) {
      // this.$refs["tabs-sliders"].DoFrozen();
      // this.isTabCloseMousedown = true;
    },
    onTabCloseMouseup(item, index) {
      // this.$refs["tabs-sliders"].DisFrozen();
      // this.isTabCloseMousedown = false;
    },
    onTabCloseMouseenter(item, index) {
      // this.$refs["tabs-sliders"].DoFrozen();
      // console.log("onTabCloseMouseenter");
    },
    onTabCloseMouseleave(item, index) {
      // this.$refs["tabs-sliders"].DisFrozen();
      // if (!this.isTabCloseMousedown) {
      //   this.$refs["tabs-sliders"].DisFrozen();
      // }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/scss/_variables.scss";
.tabs-container {
  width: 100%;
  height: 36px;
  line-height: 36px;
  background-color: $theme-background-dark;
  .tabs-sliders {
    .tab {
      height: 100%;
      box-sizing: border-box;
      background-color: $theme-background-dark;
      cursor: default;
      &.active {
        background-color: #fff;
      }
      .title {
        display: block;
        float: left;
        overflow: hidden;
      }
      .close {
        display: block;
        box-sizing: border-box;
        float: left;
        padding-left: 4px;
        cursor: pointer;
        .icon {
          border-radius: 50%;
          padding: 1px;
          &:hover {
            background-color: #bbb;
          }
        }
      }
    }
  }
}
</style>