<template>
  <div class="app-select-page">
    <span class="app-select-label" v-if="label">{{ label }}</span>
    <Select
      class="app-select-select"
      :placeholder="placeholder"
      v-model="value"
      v-bind="$attrs"
      :style="{ width }"
    >
      <Option v-for="item in data" :key="item.value" :value="item.value">
        {{ item.label }}
      </Option>
    </Select>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import { Select, Option } from '@king-design/vue';
const emits = defineEmits(['update:modelValue']);
const props = defineProps({
  label: {
    type: String,
    default: '',
  },
  data: {
    type: Array,
    default: [],
  },
  modelValue: {
    type: String,
    default: '',
  },
  listSet: Object,
  nodefalut: {
    type: Boolean,
    default: false,
  },
  placeholder: {
    type: String,
    default: '',
  },
  width: {
    type: String,
    default: '240px',
  },
});
const placeholder = computed(() => {
  return props.placeholder || `请选择${props.label || ''}`;
});
const value = computed({
  get: () => props.modelValue,
  set: (val) => {
    emits('update:modelValue', val);
  },
});
const data = ref([]);
onMounted(async () => {
  if (props.data?.length) {
    data.value = props.data;
  } 
  // 有默认值就用默认值，没有就获取数据的第一个值
  if(!props.nodefalut) {
    value.value =  data.value[0].value;
  }
  
});

</script>
<style scoped lang="less">
.app-select-page {
  display: inline-block;
}
.app-select-label {
  font-size: 12px;
  font-weight: 400;
  color: #3c4449;
  margin-right: 16px;
}
</style>
