<template>
  <el-select
    v-model="value"
    style="width:100%"
    clearable
    :placeholder="placeholder"
    @focus="setMinWidth"
  >
    <el-option
      v-for="item in array"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :style="{ 'min-width': minWidth + 2 + 'px' }"
    />
  </el-select>
</template>

<script>
export default {
  name: 'ShySelect',
  // 将子父组件的v-model打通
  model: {
    prop: 'value', // 要存在于props
    event: 'change' // 当组件的值发生改变时要emit的事件名
  },
  props: ['value', 'array', 'placeholder'],
  data() {
    return {
      newValue: this.value,
      minWidth: ''
    }
  },
  watch: {
    // 这里检测data中的值，一旦发生变化就提交事件到父组件
    newValue: function(newVal) {
      this.$emit('change', newVal)
    },
    // 监测父组件值的变化
    value: function(newVal) {
      this.newValue = newVal
    }
  },
  methods: {
    setMinWidth(event) {
      if (this.array && this.array.length > 0) {
        // 有数据情况
        this.minWidth = event.srcElement.clientWidth
      } else {
        // 无数据的情况下，给请选择提示设置最小宽度
        const domEmpty = document.getElementsByClassName(
          'el-select-dropdown__empty'
        )
        if (domEmpty && domEmpty.length > 0) {
          domEmpty[0].style['min-width'] =
            event.srcElement.clientWidth + 2 + 'px'
        }
      }
    }
  }
}
</script>
