<template>
  <div class="tab_wrap">
    <div class="item_wrap" :style="{ gap: `${gap}px` }">
      <div class="item" :ref="el => itemRefs[index] = el" v-for="(item, index) in props.list" :key="index"
        :class="{ modelValue: modelValue == index }" @click="changeHandle(index)">
        <span>{{ item.label }}</span>
      </div>
      <div class="active_wrap" :style="{ '--left': `${leftValue}px`, '--width': `${itemsWidth[modelValue]}px` }">
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from 'vue'

const props = defineProps({
  // {label: '设置',value: 1}
  list: {
    type: Array,
    default: []
  }
})

const emits = defineEmits(['update:modelValue', 'change'])

const modelValue = defineModel('modelValue', {
  type: [String, Number],
  required: true
})

// 更新active_wrap位置
function updateActivePosition(index) {
  let left = 0
  itemsWidth.value.forEach((val, i) => {
    if (i < index) {
      left += val
    }
  })
  leftValue.value = left + gap.value * index
}

// 改变索引
function changeHandle(index) {
  modelValue.value = index
  updateActivePosition(index)
  emits('change', index)
}

const itemRefs = ref([])
const itemsWidth = ref([])
const gap = ref(24)
const leftValue = ref(0)

onMounted(() => {
  nextTick(() => {
    itemRefs.value.forEach((el, index) => {
      itemsWidth.value.push(el.offsetWidth)
    })
    console.log('itemRefs===', itemRefs.value);
    console.log('itemsWidth===', itemsWidth.value);

    updateActivePosition(modelValue.value)
  })
})

// 监听modelValue变化，更新位置
watch(modelValue, (newVal) => {
  updateActivePosition(newVal)
})
</script>

<style scoped lang="scss">
.tab_wrap {
  padding: 12px;
  background-color: #F8F8F8;
  border-radius: 2px;

  .item_wrap {
    position: relative;
    display: flex;
    align-items: center;

    .item {
      padding: 0 12px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
      cursor: pointer;

      &.modelValue {
        span {
          color: #fff;
        }
      }

      span {
        font-size: 16px;
        color: #999;
        transition: all .1s ease-in-out .15s;
      }
    }

    .active_wrap {
      width: var(--width);
      background-color: var(--el-color-primary);
      height: 34px;
      position: absolute;
      top: 0;
      left: var(--left);
      z-index: 1;
      border-radius: 2px;
      transition: all .3s ease-in-out;
    }
  }
}
</style>