<template>
    <div class="custom-select" ref="selectRef">
        <!-- 触发区域 -->
        <div class="custom-select-trigger" @click="toggleDropdown">
            <span class="selected-text">{{ selectedOption?.text || placeholder }}</span>
            <van-icon name="arrow-down" class="dropdown-icon" />
        </div>

        <!-- 下拉框内容 -->
        <div v-if="showDropdown" class="custom-dropdown"
            :style="{ top: dropdownStyle.top + 'px', left: dropdownStyle.left + 'px', width: dropdownStyle.width + 'px' }">
            <div v-for="(option, index) in optionValue" :key="index" class="dropdown-item"
                :class="{ 'dropdown-item-selected': option.value === selectedOption?.value }"
                @click="selectOption(option)">
                {{ option.text }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, nextTick,defineProps,defineEmits,onMounted,onBeforeUnmount} from 'vue';

defineProps({
    optionValue: {
        type: Array,
        required: true,
    },
    placeholder: {
        type: String,
        default: '请选择',
    }
})
const emit = defineEmits(['update:selectedOption']);
const showDropdown = ref(false);
const selectedOption = ref(null);

const selectRef = ref(null);
const dropdownStyle = ref({});

const toggleDropdown = async () => {
    showDropdown.value = !showDropdown.value;
    if (showDropdown.value) {
        await nextTick();
        updateDropdownPosition();
    }
};

const selectOption = (option) => {
    selectedOption.value = option;
    emit('update:selectedOption', option);
    showDropdown.value = false;
};

const updateDropdownPosition = () => {
    const triggerRect = selectRef.value.getBoundingClientRect();
    dropdownStyle.value = {
        top: `${triggerRect.height}px`,
        left: '0px',
        width: `${triggerRect.width}px`,
    };
};

const handleDocumentClick = (event) => {
    if (!selectRef.value.contains(event.target)) {
        showDropdown.value = false;
    }
};

onMounted(() => {
    document.addEventListener('click', handleDocumentClick);
});

onBeforeUnmount(() => {
    document.removeEventListener('click', handleDocumentClick);
});

</script>

<style scoped>
.custom-select {
    width: 11.56rem;
    position: relative;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    border: 1px solid #dcdfe6;
    background: #fff;
    border-radius: 0.38rem;
    height: 2rem;
}

.custom-dropdown {
    position: absolute;
    z-index: 1000;
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 0.38rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    max-height: 10rem;
    overflow-y: auto;
    width: 100%;
    /* 保持与触发器等宽 */
}

.selected-text{
    background-color: rgba(255,255,255,1);
    color: rgba(16,16,16,1);
    font-size: 0.88rem;
    text-align: left;
    font-family: PingFangSC-regular;
}

.dropdown-item {
    padding: 5px 8px;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
    font-family: PingFangSC-regular;
}

.dropdown-item:hover {
    background-color: #f5f7fa;
}
.dropdown-item-selected {
    color: #fff;
    background-color: #4095e5;
}
</style>