<template>
  <div
    class="logical-title"
    :style="{
      fontSize: `${fontSize}px`,
    }"
  >
    <div
      v-for="(item, index) in copyTitle"
      :key="index"
      class="logical-title-span"
      :class="{ 'logical-title-span-active': item.checked }"
      @click="clickHandle(item)"
    >
      {{ item.title }}
    </div>
    <div
      class="logical-title-line"
      :style="{ left: `${activeIndex * posLeft}px`, width: `${lineWidth}px` }"
    ></div>
  </div>
</template>

<script>
import { computed, ref } from "@vue/runtime-core";
export default {
  name: "LogicalTitle",
  props: {
    titles: {
      type: Array,
      default: () => [],
    },
    fontSize: {
      type: Number,
      default: 16,
    },
    lineWidth: {
      type: Number,
      default: 95,
    },
    posLeft: {
      type: Number,
      default: 141,
    },
  },
  setup(props, context) {
    const copyTitle = ref(
      props.titles.map((x, index) => {
        return {
          ...x,
          checked: index === 0,
        };
      })
    );
    const activeIndex = computed(() => {
      const index = copyTitle.value.findIndex((x) => x.checked);
      return index === -1 ? 0 : index;
    });
    const clickHandle = (item) => {
      copyTitle.value.forEach((x) => {
        x.checked = false;
      });
      item.checked = true;
      context.emit("check", item);
    };
    return {
      copyTitle,
      activeIndex,
      clickHandle,
    };
  },
};
</script>

<style lang="scss" scoped>
.logical-title {
  display: flex;
  position: relative;
  font-size: 16px;
  font-weight: 400;
  &-span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    width: 100px;
    max-width: 100px;
    margin-right: 40px;
    cursor: pointer;
    &-active {
      font-weight: 600;
      color: $yili-default-color;
    }
    &:hover {
      color: $yili-default-color;
    }
  }
  &-line {
    position: absolute;
    bottom: 0;
    width: 64px;
    height: 3px;
    background: $yili-default-color;
    border-radius: 2px;
    transition: all 0.3s;
  }
}
</style>
