<template>
    <Select
        v-model="quantity"
        :options="quantityOptions"
        class="quantity-select"
        position="top"
    >
        <template #prefix>
            <img :src="selectedIcon" alt="" style="width: 20px;">
        </template>
        <template #option="{ option }">
            <div class="option-content-custom">
                <img :src="option.icon" alt="" style="width: 20px;">
                <span v-if="option.labelText" class="option-label-text">{{ option.labelText }}</span>
            </div>
        </template>
    </Select>
</template>

<script setup>
import Select from '@/components/Select/index.vue'
import videoPattern1 from '@/assets/dialog/videoPattern1.svg'
import videoPattern2 from '@/assets/dialog/videoPattern2.svg'
import videoPattern3 from '@/assets/dialog/videoPattern3.svg'
import videoPattern4 from '@/assets/dialog/videoPattern4.svg'

const props = defineProps({
  modelValue: {
    type: String,
    default: '全能参考'
  }
})

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

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

const quantityOptions = [
  { value: '全能参考', label: '全能参考', labelText: '全能参考', icon: videoPattern1 },
  { value: '首尾帧', label: '首尾帧', labelText: '首尾帧', icon: videoPattern2 },
  { value: '智能多帧', label: '智能多帧', labelText: '智能多帧', icon: videoPattern3 },       
  { value: '主体参考', label: '主体参考', labelText: '主体参考', icon: videoPattern4 }
]

const selectedIcon = computed(() => {
  const option = quantityOptions.find(opt => opt.value === quantity.value)
  return option ? option.icon : videoPattern1
})
</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: 140px;
    }
    
    :deep(.dropdown-item) {
        min-width: 80px;
        justify-content: start;
    }
}

.option-content-custom {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;
}

.option-label-text {
    font-size: 14px;
    color: inherit;
}
</style>
