<template>
  <el-form-item :style="{ ...style, height: height, ...styleObject }" :required="required"
    :class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']"
    :label="label" :prop="prop" :rules="rules">
    <p v-if="desc" class="desc_right">{{ desc }}</p>
    <el-select :style="{ width: width }" :placeholder="placeholder1" @change="handleChange" v-model="selectedValue"
      v-bind="$attrs">
      <el-option v-for="item in processedOptions" :key="getItemValue(item)" :label="getItemLabel(item)"
        :disabled="item.disabled" :value="getItemValue(item)">
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script>
export default {
  name: 'GuipSelect',
  props: {
    value: [String, Number, Array],
    options: {
      type: Array,
      default: () => []
    },
    // 新增配置字段
    valueKey: {
      type: String,
      default: 'value'
    },
    labelKey: {
      type: String,
      default: 'label'
    },
    styleObject: Object,
    disabled: Boolean,
    required: Boolean,
    defaultValue: [String, Number, Array],
    placeholder: String,
    width: String,
    height: String,
    label: String,
    type: String,
    prop: String,
    rules: [Object, Array],
    column: Boolean,
    addClass: String,
    desc: String
  },
  data() {
    return {
      selectedValue: '',
      style: {},
      placeholder1: '请选择',
    }
  },
  computed: {
    // 处理options为空的情况
    processedOptions() {
      return this.options || []
    }
  },
  watch: {
    value(newVal) {
      this.selectedValue = newVal
    },
    defaultValue(newVal) {
      if (newVal !== undefined && newVal !== null) {
        this.selectedValue = newVal
      }
    }
  },
  mounted() {
    // 默认值赋值
    if (this.defaultValue !== undefined && this.defaultValue !== null) {
      this.selectedValue = this.defaultValue
    }
    if (this.value !== undefined && this.value !== null) {
      this.selectedValue = this.value
    }
    // 默认提示语
    if (this.placeholder) {
      this.placeholder1 = this.placeholder
    }
  },
  methods: {
    // 获取value值
    getItemValue(item) {
      return item[this.valueKey]
    },
    // 获取label值
    getItemLabel(item) {
      return item[this.labelKey]
    },
    handleChange(value) {
      this.$emit('input', value)
      this.$emit('change', value)
    }
  }
}
</script>