<template>
  <el-select
    v-model="selectValue"
    :placeholder="placeholder"
    :disabled="disabled"
    :prop="prop"
    @change="change"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :value="prop ? item[prop.id] : item.id"
    >
      <i v-if="item.icon" :class="item.icon"></i>
      <span>{{ prop ? item[prop.label] : item.label }}</span>
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: 'PsSelect',
  props: {
    value: null,
    placeholder: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },

    options: {
      type: Array,
      default: () => []
    },
    prop: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      selectValue: null
    }
  },

  //处理v-model语法糖的emit事件
  model: {
    prop: 'value',
    event: 'handler'
  },
  watch: {
    value: {
      handler(val) {
        this.selectValue = val
      },
      immediate: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    change(e) {
      this.$emit('handler', this.selectValue)
      this.$emit('change', e)
    }
  }
}
</script>

<style>
</style>
