<template>
    <view class="select" @click.stop="toggle">
        <view class="select-current">
            <text>{{ currentLabel }}</text>
            <view class="select-arrow" :class="{ open: visible }"></view>
        </view>

        <view v-if="visible" class="select-mask" @click.stop="visible = false"></view>
        <view v-if="visible" class="select-panel">
            <view
                v-for="item in selectList"
                :key="String(item.value)"
                :class="['select-option', { active: modelValue === item.value }]"
                @click.stop="onPick(item)"
            >
                <text>{{ item.label }}</text>
                <view v-if="modelValue === item.value" class="select-check"></view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
/**
 * 下拉选择器（Claymorphism）
 * 与原 qy-Select API 一致：v-model + selectList + @selectChange
 */
import { computed, ref } from 'vue';

interface Option {
    label: string;
    value: string | number;
}

const props = defineProps<{
    modelValue: string | number;
    selectList: Option[];
    placeholder?: string;
}>();

const emit = defineEmits<{
    (e: 'update:modelValue', v: string | number): void;
    (e: 'selectChange', item: Option): void;
}>();

const visible = ref(false);

const currentLabel = computed(() => {
    const found = props.selectList.find((i) => i.value === props.modelValue);
    return found?.label || props.placeholder || '请选择';
});

const toggle = () => {
    visible.value = !visible.value;
};

const onPick = (item: Option) => {
    visible.value = false;
    if (props.modelValue === item.value) return;
    emit('update:modelValue', item.value);
    emit('selectChange', item);
};
</script>

<style lang="scss" scoped>
.select {
    position: relative;
    display: inline-block;
}

.select-current {
    height: 64rpx;
    padding: 0 24rpx;
    background: #ffffff;
    border-radius: 999rpx;
    display: flex;
    align-items: center;
    gap: 12rpx;
    font-size: 26rpx;
    color: #4f46e5;
    font-weight: 500;
    box-shadow:
        0 6rpx 14rpx rgba(99, 102, 241, 0.12),
        inset 0 -3rpx 0 rgba(199, 210, 254, 0.6);
}

.select-arrow {
    width: 12rpx;
    height: 12rpx;
    border-right: 4rpx solid #4f46e5;
    border-bottom: 4rpx solid #4f46e5;
    border-radius: 2rpx;
    transform: rotate(45deg);
    transition: transform 200ms ease;
    margin-top: -6rpx;

    &.open {
        transform: rotate(-135deg);
        margin-top: 6rpx;
    }
}

.select-mask {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 100;
}

.select-panel {
    position: absolute;
    top: calc(100% + 12rpx);
    right: 0;
    z-index: 101;
    min-width: 220rpx;
    padding: 12rpx;
    background: #ffffff;
    border-radius: 24rpx;
    box-shadow:
        0 16rpx 40rpx rgba(99, 102, 241, 0.18),
        inset 0 -4rpx 0 rgba(199, 210, 254, 0.4);
}

.select-option {
    height: 72rpx;
    padding: 0 20rpx;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 26rpx;
    color: #312e81;

    &.active {
        background: #eef2ff;
        color: #4f46e5;
        font-weight: 600;
    }
}

.select-check {
    width: 14rpx;
    height: 14rpx;
    border-radius: 50%;
    background: #22c55e;
}
</style>
