<template>
  <el-col :span="span">
    <el-select
      class="search-select"
      :clearable="clearable"
      :placeholder="placeholder"
      :multiple="multiple"
      v-model="selectedValue"
      @change="onSelectChange"
    >
      <el-option
        :disabled="item[itemDisabled]"
        v-for="item in list"
        :key="item[itemValue]"
        :label="item[itemLabel]"
        :value="item[itemValue]"
      ></el-option>
    </el-select>
  </el-col>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      required: true,
      default: () => []
    },
    itemDisabled: {
      type: String,
      default: 'disabled'
    },
    itemLabel: {
      type: String,
      default: 'name'
    },
    itemValue: {
      type: String,
      default: 'id'
    },
    clearable: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    multiple: {
      type: Boolean,
      default: false
    },
    span: {
      type: Number,
      default: 24
    },
    offset: {
      type: Number,
      default: 0
    },
    value: [String, Number, Array]
  },
  methods: {
    onSelectChange(val) {
      this.$emit('input', val)
      this.$emit('change', val)
    }
  },
  computed: {
    selectedValue: {
      get: function() {
        return this.value
      },
      set: function(newValue) {
        this.$emit('input', newValue)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.search-select {
  width: 100%;
  margin-bottom: 10px;
}
</style>
