<template>
  <div class="select">
    <y-select v-if="isRemote" v-model.trim="currentValue" :model="model" :api="$attrs.api" v-bind="$attrs" :clearable="$attrs.clearable || true" v-on="$listeners"></y-select>
    <el-select
      v-else
      v-model.trim="currentValue"
      :multiple="$attrs.multiple"
      :disabled="$attrs.disabled"
      :value-key="$attrs.valueKey"
      :size="$attrs.size"
      :clearable="$attrs.clearable || false"
      :collapse-tags="$attrs.collapseTags || false"
      :multiple-limit="$attrs.multipleLimit"
      :name="$attrs.name"
      :autocomplete="$attrs.autocomplete || 'off'"
      :auto-complete="$attrs.autoComplete || 'off'"
      :placeholder="$attrs.placeholder || '请选择'"
      :filterable="$attrs.filterable || false"
      :allow-create="$attrs.allowCreate || false"
      :filter-method="$attrs.filterMethod"
      :remote="$attrs.remote || false"
      :remote-method="$attrs.remoteMethod"
      :loading="$attrs.loading || false"
      :loading-text="$attrs.loadingText || '加载中'"
      :no-match-text="$attrs.noMatchText || '无匹配数据'"
      :no-data-text="$attrs.noDataText || '无数据'"
      :popper-class="$attrs.popperClass"
      :reserve-keyword="$attrs.reserveKeyword || false"
      :default-first-option="$attrs.defaultFirstOption || false"
      :popper-append-to-body="$attrs.popperAppendToBody === undefined ? true : $attrs.popperAppendToBody"
      :automatic-dropdown="$attrs.automaticDropdown || false"
      @input="handleInputEvent"
      v-on="$listeners"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item[model.label]"
        :value="item[model.value]"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'Select',
  props: {
    value: {
      // 默认值
      type: [String, Number, Boolean, Object],
      default: ''
    },
    options: {
      type: Array, // 下拉框选项列表
      default: () => []
    }
  },
  data() {
    return {
      currentValue: this.value
    }
  },
  computed: {
    model() {
      if (this.$attrs.model) {
        return {
          label: this.$attrs.model.label,
          value: this.$attrs.model.value,
          data: this.$attrs.model.data
        }
      }
      return { label: 'label', value: 'value', data: 'data' }
    },
    isRemote() {
      return this.$attrs.api && typeof this.$attrs.api === 'function'
    }
  },
  watch: {
    // 监听外部的value
    value(val) {
      this.currentValue = val
    }
  },
  methods: {
    handleInputEvent(value) {
      // 当选择框发生变化时，将值传递出去
      this.$emit('input', value)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select {
  display: block;
}
</style>
