<template>
    <Select
        v-model="model"
        :options="options"
        width="auto"
        class="quality-select"
        position="top"
    >
        <template #prefix>
            <span class="quality-label">画质</span>
        </template>
    </Select>
</template>

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

const props = defineProps({
  modelValue: { type: String, default: 'medium' },
  options: { type: Array, default: () => [] }
})

const emit = defineEmits(['update:modelValue'])
const model = computed({
  get: () => props.modelValue,
  set: (v) => emit('update:modelValue', v)
})
</script>

<style lang="less" scoped>
.quality-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; }
}
.quality-label {
  font-family: "Microsoft YaHei";
  font-size: 12px;
  color: #999;
}
</style>
