<template>
  <div class="tab">
    <div class="linebar">
      <div class="lineactive" :style="`width:${activeW}%`"></div>
    </div>
    <ul ref="tab$">
      <li @click="activeIdx = i" :class="{ active: i == activeIdx }" v-for="(item, i) in list" :key="i">
        <i></i>
        {{item.name}}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, defineProps, defineEmits, nextTick, provide } from "vue";

const tab$ = ref(null);

const activeW = ref(0);

const activeIdx = ref(0);

const props = defineProps({
    list: {
        type: Array,
        default: ()=>{
          return []
        },
    }
})

const emit = defineEmits(['handleTab'])


watch(
  activeIdx,
  () => {
    nextTick(() => {
      activeW.value = ((tab$.value.querySelector(".active").offsetLeft + tab$.value.querySelector(".active i").offsetLeft) / tab$.value.offsetWidth) * 100;
      emit('handleTab',props.list[activeIdx.value])
    });
  },
  {
    immediate: true,
  }
);

onMounted(() => {});
</script>

<style lang="scss" scoped>
.tab {
  width: 100%;
  .linebar {
    width: 100%;
    height: 1px;
    border-top: 1px #d9c791 dashed;
    position: relative;
    .lineactive {
      left: 0;
      top: -1px;
      height: 1px;
      border-top: 2px var(--main-color) solid;
      position: absolute;
      transition: .5s ease all;

    }
  }
  > ul {
    color: #999;
    display: flex;
    width: 100%;
    justify-content: center;
    > li {
      cursor: pointer;
      margin: 10px 80px 0;
      position: relative;
      > i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
        background: var(--main-color);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -14px;
      }
      &.active {
        color: var(--main-color);
        font-weight: bold;
      }
    }
  }
}
</style>
