<template>

  <!--
    下拉选择框:
      type: 'select'
      placeholder:  下拉选择框占位文本，默认‘请选择’+label
      filterable:   可搜索，默认true
      multiple:     多选，默认false
      v-model:      绑定数据
      keyName:      绑定key，默认‘key’
      labelName:    绑定label，默认‘label’
      dict:         字典
      binding:      执行data: ()=>{} 返回参数的绑定路径
      width:        输入框宽度
      disabled:  是否禁用，默认false
      clearable: 是否可清空，默认true
  -->
  <el-select
    v-model="data"
    :filterable="filterable"
    :multiple="multiple"
    :placeholder="placeholder || `请选择${label}`"
    :clearable="clearable"
    :disabled="disabled"
    :style="{width}"
  >
    <el-option
      v-for="item in itemsData"
      :key="item[keyName]"
      :label="item[labelName]"
      :value="item[keyName]"
    />
  </el-select>

</template>

<script>
import { geItemsData } from './common'

export default {
  name: 'ASelect',
  props: {
    prop: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    },
    value: {
      type: [String, Number, Array],
      default: undefined
    },
    filterable: {
      type: Boolean,
      default: true
    },
    multiple: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: undefined
    },
    keyName: {
      type: String,
      default: 'key'
    },
    labelName: {
      type: String,
      default: 'label'
    },
    dict: {
      type: String,
      default: undefined
    },
    option: {
      type: [Array, Function],
      default: undefined
    },
    binding: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    disabled: {
      type: Boolean
    },
    clearable: {
      type: Boolean
    }
  },
  data () {
    return {
      data: this.value,
      itemsData: []
    }
  },
  watch: {
    data (newVal) {
      this.$emit('update:value', newVal)
    },
    value (newVal) {
      this.data = newVal
    }
  },
  async created () {
    if (this.dict) {
      this.$emit('update:keyName', 'dictValue')
      this.$emit('update:labelName', 'dictLabel')
    }
    this.itemsData = await geItemsData(this.dict, this.option, this.binding)
  }
}
</script>
