<template>
    <!--    版本选择    -->
    <view class="mt-[24rpx]">
        <view class="mr-[10px] text-base">版本选择</view>
        <drop-down mode="up">
            <template v-slot="{}">
                <view class="drop-down-input mt-2">
                    <text>{{ 'v' + modelValue || '请选择版本' }}</text>
                    <u-icon name="arrow-down" :size="22" color="#A8ABB2"></u-icon>
                </view>
            </template>
            <template #menu>
                <view class="w-[690rpx]">
                    <view
                        v-for="(item, key) in versionList"
                        :key="item"
                        class="py-[14rpx] px-[30rpx]"
                        @click="emit('update:modelValue', item)"
                    >
                        {{ key }}
                    </view>
                </view>
            </template>
        </drop-down>
    </view>
</template>
<script setup lang="ts">
import { watchEffect } from 'vue'
import DropDown from '@/components/drop-down/drop-down.vue'

const emit = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()
const props = withDefaults(
    defineProps<{
        modelValue?: any
        versionList?: any
    }>(),
    {
        modelValue: '',
        versionList: []
    }
)

watchEffect(() => {
    const obj = props.versionList
    emit('update:modelValue', obj['v1'] || obj[Object.keys(obj)[0]])
})
</script>

<style lang="scss" scoped>
.drop-down-input {
    display: flex;
    justify-content: space-between;
    color: #333;
    width: 690rpx;
    padding: 20rpx 20rpx;
    font-size: 28rpx;
    @apply bg-page-base;
    border-radius: 8rpx;
}
</style>
