<template>
    <Select
        v-model="quantity"
        :options="quantityOptions"
        class="quantity-select"
        position="top"
    >
        <template #prefix>
            <img src="@/assets/dialog/quantity.svg" alt="" style="width: 16px;">
        </template>
    </Select>
</template>

<script setup>
import Select from '@/components/Select/index.vue'

const props = defineProps({
  modelValue: {
    type: Number,
    default: 1
  }
})

const emit = defineEmits(['update:modelValue'])

const quantity = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const quantityOptions = [
  { value: 1, label: '1 张' },
  { value: 2, label: '2 张' },
  { value: 3, label: '3 张' },
  { value: 4, label: '4 张' }
]
</script>

<style lang="less" scoped>
.quantity-select {
    :deep(.select-header) {
        height: 40px;
        padding: 0 15px;
        border-radius: 10px;
        border: 1px solid #E8E9EB;
        background: #f5f6f7;
        
        &:hover {
            background: #e9eaeb;
        }
    }
    
    :deep(.select-text) {
        font-size: 14px;
    }
    
    :deep(.dropdown-menu) {
        min-width: 80px;
    }
    
    :deep(.dropdown-item) {
        min-width: 80px;
        justify-content: center;
    }
}
</style>
