<template>
    <Select
        v-model="quantity"
        :options="quantityOptions"
        class="quantity-select"
        position="top"
    >
        <template #prefix>
            <img src="@/assets/dialog/time.svg" alt="" style="width: 20px;">
        </template>
        <template #header>
            <span class="header">选择视频生成时长</span>
        </template>
    </Select>
</template>

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

const props = defineProps({
  modelValue: {
    type: Number,
    default: 1
  },
  options: {
    type: Array,
    default: () => [
      { value: 5, label: '5s' },
      { value: 6, label: '6s' },
      { value: 7, label: '7s' },
      { value: 8, label: '8s' },
      { value: 9, label: '9s' },
      { value: 10, label: '10s' }
    ]
  }
})

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

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

const quantityOptions = computed(() => props.options)
</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: 136px;
    }
    
    :deep(.dropdown-item) {
        min-width: 80px;
        justify-content: center;
    }
}
.header{
    margin-left: 10px;
    color: #999;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
</style>
