<template>
  <div>
    <div class="tab-menu">
      <div
        v-for="(item, index) in list"
        :key="index"
        :id="item.value"
        class="tab-item"
        :class="{
          'active-tab': modelValue == item.value,
          'py-3': size == 'small',
        }"
        @click="clickTab(item.value)"
      >
        <p class="tab-title">
          {{ item.label }}
        </p>
      </div>
      <div
        class="line-active"
        :style="{ left: `${linePosition}px`, width: `${lineWidth}px` }"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: [Array],
      required: true,
    },
    size: {
      type: [String],
      validator: function (value) {
        return ["small"].indexOf(value) !== -1;
      },
    },
    modelValue: {
      type: [String],
    },
  },
  data() {
    return {
      linePosition: 0,
      lineWidth: 0,
    };
  },
  watch: {
    modelValue(newVal, oldVal) {
      if (newVal != oldVal) {
        this.clickTab(this.modelValue)
      }
    }
  },
  mounted() {
    if (this.modelValue) {
      this.clickTab(this.modelValue)
    }
  },
  methods: {
    clickTab(data) {
      setTimeout(() => {
        this.linePosition = document.getElementById(data).offsetLeft;
        this.lineWidth = document.getElementById(data).offsetWidth;
      }, 100);
      this.$emit("update:modelValue", data);
    },
  },
};
</script>

<style lang="scss" scoped>
@use "@/assets/style/_color.scss" as *;

.tab-menu {
  color: #14375e;
  display: flex;
  border-bottom: 1px solid $neutral-2;
  position: relative;
  font-size: 14px;
  background: #fff;
  width: fit-content;

  .tab-item {
    cursor: pointer;
    transition: all 0.2s;
    z-index: 1;
    line-height: 1;
    text-align: center;
    padding: 16px 13px;
  }

  .py-3 {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .tab-item:hover {
    color: $dark-blue-4;
  }

  .line-active {
    position: absolute;
    bottom: 0px;
    background: #3e7dc0;
    height: 2px;
    z-index: 1;
  }

  .active-tab {
    color: $dark-blue-4;
    font-weight: 700;
    background: #fff;
  }
}

.tab-menu::-webkit-scrollbar {
  opacity: 0;
  height: 0px;
}
</style>
