<template>
  <div class="select">
    <el-select v-model="modelValue" clearable :placeholder="label" @change="onChange">
      <el-option v-for="item in options" :key="item.id" :label="item.ssname" :value="item.id" />
    </el-select>
  </div>
</template>

<script setup>
  defineProps({
    label: {
      type: String,
      default: '选择排队景区'
    },
    options: {
      type: Array,
      default: () => []
    }
  })
  let modelValue = defineModel()
  let emit = defineEmits(['on-change'])
  const onChange = (e) => {
    emit('on-change', e)
  }
</script>

<style scoped lang="scss">
  .select {
    :deep(.el-select__wrapper) {
      min-width: vw(180);
      padding: vh(4) vw(20);
      min-height: vh(30) !important;
      line-height: vh(30) !important;
      font-size: vw(14) !important;
      border-radius: vw(100) !important;
      box-shadow: none;
      border: 1px solid rgba(0, 114, 220, 0.3);
      background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
    }
    :deep(.el-select__placeholder) {
      font-weight: 400;
      font-size: vw(20);
      color: #ffffff;
    }
  }

  .label {
    font-weight: 400;
    font-size: vw(24);
  }
</style>
