<template>
    <el-select
        :name="name"
        :id="id"
        :value="value"
        :autocomplete="autocomplete"
        :automaticDropdown="automaticDropdown"
        :size="size"
        :disabled="disabled"
        :clearable="clearable"
        :filterable="filterable"
        :allowCreate="allowCreate"
        :loading="loading"
        :popperClass="popperClass"
        :remote="remote"
        :loadingText="loadingText"
        :noMatchText="noMatchText"
        :noDataText="noDataText"
        :remoteMethod="remoteMethod"
        :filterMethod="filterMethod"
        :multiple="multiple"
        :multipleLimit="multipleLimit"
        :placeholder="placeholder"
        :defaultFirstOption="defaultFirstOption"
        :reserveKeyword="reserveKeyword"
        :valueKey="valueKey"
        :collapseTags="collapseTags"
        :popperAppendToBody="popperAppendToBody"
        @change="change"
    >
        <template v-for="(group, index) in data">
            <el-option-group
                v-if="Object.prototype.hasOwnProperty.call(group, 'options') && Array.isArray(group.options)"
                :key='group.label + index'
                :label="group.label"
                :disabled="group.disable"
            >
                <el-option
                    v-for="item in group.options"
                    :key="item[realProps.value]"
                    :label="item[realProps.label]"
                    :value="item[realProps.value]"
                    :disabled="item[realProps.disabled]"
                ></el-option>
            </el-option-group>
            <el-option
                v-else
                :key="group[realProps.value]"
                :label="group[realProps.label]"
                :value="group[realProps.value]"
                :disabled="group[realProps.disabled]"
            ></el-option>
        </template>
    </el-select>
</template>
<script>
import Select from '@ued_fpi/element-ui/packages/select';
import Option from '@ued_fpi/element-ui/packages/option';
import OptionGroup from '@ued_fpi/element-ui/packages/option-group';
export default {
  name: 'ELDynamicSelect',
  props: {
    name: String,
    id: String,
    value: {
      required: true
    },
    autocomplete: {
      type: String,
      default: 'off'
    },
    /** @Deprecated in next major version */
    autoComplete: {
      type: String,
      validator() {
        process.env.NODE_ENV !== 'production' &&
                    console.warn(
                      "[Element Warn][Select]'auto-complete' property will be deprecated in next major version. please use 'autocomplete' instead."
                    );
        return true;
      }
    },
    automaticDropdown: Boolean,
    size: String,
    disabled: Boolean,
    clearable: Boolean,
    filterable: Boolean,
    allowCreate: Boolean,
    loading: Boolean,
    popperClass: String,
    remote: Boolean,
    loadingText: String,
    noMatchText: String,
    noDataText: String,
    remoteMethod: Function,
    filterMethod: Function,
    props: Object,
    multiple: {
      type: Boolean,
      default: false
    },
    multipleLimit: {
      type: Number,
      default: 0
    },
    placeholder: {
      type: String,
      required: false
    },
    defaultFirstOption: Boolean,
    reserveKeyword: Boolean,
    valueKey: {
      type: String,
      default: 'value'
    },
    collapseTags: Boolean,
    popperAppendToBody: {
      type: Boolean,
      default: true
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  components: {
    ElSelect: Select,
    ElOption: Option,
    ElOptionGroup: OptionGroup
  },
  computed: {
    realProps() {
      return {
        label: 'label',
        value: 'value',
        disabled: 'disabled',
        ...this.props
      };
    }
  },
  methods: {
    change(value) {
      this.$emit('input', value);
    }
  }
};
</script>
