<!--普通下拉选择框-->
<template>
  <div>
    <el-select
      v-if="editable"
      style="width: 100%"
      :value="value"
      :clearable="clearable"
      :disabled="disabled"
      @change="change"
      :size="size"
      :multiple="multiple"
      :placeholder="placeholder"
      :allow-create="allowCreate"
      @input="emitChange($event)">
      <el-option
        v-for="item in optionList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled">
        <span style="float: left">{{ item.label }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.remark }}</span>
      </el-option>
    </el-select>
    <span v-if="!editable">{{selectText}}</span>
  </div>
</template>

<script>
  export default {
    name: 'SimpleSelect',
    props: {
      itemKey: {default: 'key'},
      itemText: {default: 'text'},
      itemRemark: {default: 'remark'},
      placeholder: {
        type: String,
        default: '请选择'
      },
      allowCreate: {
        type: Boolean,
        default: false
      },
      multiple: {
        type: Boolean,
        default: false
      },
      clearable: {
        type: Boolean,
        default: false
      },
      editable: {
        type: Boolean,
        default: true
      },
      disabled: {},
      change: {
        type: Function,
        default: function (value) {
        }
      },
      size: {
        type: String,
        default: 'small'
      },
      options: {
        type: Array,
        default: function () {
          let list = [
            {key: '0', text: '测试1'},
            {key: '1', text: '测试2'}
          ]
          return list
        }
      },
      value: {}
    },
    data () {
      return {}
    },
    computed: {
      optionList () {
        let options = this.options.map(item => {
          return {
            value: item[this.itemKey],
            label: item[this.itemText],
            remark: item[this.itemRemark]
          }
        });
        return options;
      },
      selectText () {
        for (let item of this.options) {
          if (this.value === item[this.itemKey]) {
            return item[this.itemText];
          }
        }
        return ''
      }
    },
    methods: {
      emitChange (val) {
        this.$emit('input', val)
        this.$emit('change', val)
      }
    }
  }
</script>

<style scoped>

</style>
