<template>
    <div id="select" class="select-container">
      <el-select
        v-model="value"
        :size="settings.size || 'default'"
        :style="{width:settings.width}"
        @change="handelChange"
        :placeholder="settings.placeholder || '请选择'"
      >
        <el-option
          v-for="item in data"
          :key="item.value"
          :label="item.label||item.value"
          :value="item"
        ></el-option>
      </el-select>
    </div>
</template>

<script>
/* 
  settings:{
      placeholder 提示语,默认 "请选择"
      isSelected 是否以选项第一个作为当前项,默认false
      isMultiple 是否多选,默认false,
      title   选择器名称,
      size: 选择器尺寸,默认mini
      width 选择器宽度,默认element-ui自带的默认宽度
  }
  options:[
      { value 必填 , label 选填,如果不传,以value的值展示 }
  ]

*/

export default {
name: '',
props: {
  data: { type: Array, default: () => [], required: true },
  settings: {
    type: Object,
    default: () => {
      return {
        placeholder: '',
        isSelected: false,
        isMultiple: false,
        title: '',
        size:''
      };
    }
  }
},
data() {
  return {
    value: this.settings.placeholder 
  };
},
methods: {
  handelChange(e) {
    this.$emit('select', e)
  }
}
};
</script>

<style scoped>
.select-container {
    margin-left:10px;
}

</style>
