<template>
  <div class="select-form">
    <el-form-item
      :key="item.model"
      :prop="item.model"
      :label="item.label || ''"
      :label-width="item.labelWidth || item['label-width'] || ''"
      :required="item.required || false"
      :rules="item.rules || []"
      :size="item.size"
    >
      <el-select :style="{ width: item.modelWidth || item['model-width'] || '100%' }"
        v-bind="item.attrs"
        v-on="$listeners"
        v-model="formData[item.model]"
        :placeholder="item.placeholder"
        :disabled="item.disabled || false"
      >
        <el-option
          v-for="option in item.values"
          :label="option.label"
          :value="option.value"
          :key="option.value"
        ></el-option>
      </el-select>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: 'SelectForm',
  componentName: 'SelectForm',
  props: {
    item: {
      type: Object,
      default () {
        return {}
      }
    },
    formData: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {}
  }
}
</script>
