<script setup>
// 接收 type 和 options props 以及 v-model
const props = defineProps({
    type: {
        type: String,
        default: "purple-pink", // 默认颜色渐变
    },
    options: {
        type: Array,
        required: true, // 动态传入选项
    },
    modelValue: {
        type: String,
        default: "", // v-model 绑定的值
    },
});
const emit = defineEmits(["update:modelValue"]);
// 选中内容绑定 v-model
const selected = ref(props.modelValue);

// 监听 v-model 的变化
watch(
    () => props.modelValue,
    (newValue) => {
        selected.value = newValue;
    }
);

// 根据type动态生成分割线的类名
const lineClass = computed(() => {
    switch (props.type) {
        case "blue-green":
            return "bg-gradient-to-r from-blue-400 via-green-500 to-teal-500";
        case "orange-yellow":
            return "bg-gradient-to-r from-orange-400 via-yellow-500 to-yellow-600";
        case "red-purple":
            return "bg-gradient-to-r from-red-500 via-purple-500 to-purple-600";
        default:
            return "bg-gradient-to-r from-purple-400 via-pink-500 to-red-500";
    }
});

// 计算滑动线的位置和宽度
const slideLineStyle = computed(() => {
    const index = props.options.findIndex(
        (option) => option.value === selected.value
    );
    const buttonWidth = 100 / props.options.length;
    return {
        width: `${buttonWidth}%`,
        transform: `translateX(${index * 100}%)`,
    };
});

// 选择选项函数
function selectOption(option) {
    selected.value = option.value;
    // 触发 v-model 的更新
    emit("update:modelValue", option.value);
}
</script>

<template>
    <div class="relative flex">
        <div
            v-for="(option, index) in options"
            :key="index"
            class="mx-4 flex-shrink-0 cursor-pointer py-2 text-center text-size-sm font-bold transition-transform duration-200 ease-in-out"
            :class="{
                'text-gray-900': selected === option.value,
                'text-gray-500': selected !== option.value,
            }"
            @click="selectOption(option)"
        >
            {{ option.label }}
        </div>
        <div
            class="absolute bottom-0 h-[3px] rounded transition-all duration-300"
            :style="slideLineStyle"
            :class="lineClass"
        />
    </div>
</template>

<style scoped>
/* 自定义样式 */
button {
    outline: none;
    border: none;
    cursor: pointer;
}
button:focus {
    outline: none;
}
</style>
