<template>
  <el-select
    :value="value"
    :placeholder="placeholder"
    :clearable="clearable"
    :disabled="disabled"
    filterable
    remote
    :size="size"
    :loading="loading"
    reserve-keyword
    :remote-method="search"
    @change="onChange"
    @input="emitChange($event)">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="showLabel(item.label,item.remark)"
      :value="item.value">
      <span style="float: left">{{ item.label }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.remark }}</span>
    </el-option>
  </el-select>
</template>

<script>
  import request from '@/api/request'

  export default {
    name: 'RemoteSearchSelect',
    props: {
      placeholder: {
        type: String,
        default: '请选择'
      },
      size: {
        default: 'small'
      },
      clearable: {
        type: Boolean,
        default: true
      },
      disabled: {},
      change: { // 选中后回调函数
        type: Function,
        default: function (data) {
        }
      },
      exactParam: {
        type: Object,
        default: () => {
          return {}
        }
      }, // 额外参数
      url: {}, // 远程URL
      nameUrl: '',
      itemKey: {type: String, default: 'key'}, // 下拉框值对应key
      itemText: {type: String, default: 'text'}, // 下拉框文本对应key
      itemRemark: {type: String, default: 'remark'}, // 下拉框备注对应key
      dataKey: {type: String, default: 'data.content'}, // 数据对应key 以点隔开
      value: {},
      showLabel: {
        type: Function,
        default: function (label, remark) {
          if (this.$utils.dataFormat.isNull(remark)) {
            return label;
          }
          return label + '-' + remark;
        }
      }
    },
    data () {
      return {
        options: [],
        dataList: [],
        loading: false
      }
    },
    watch: {
      value (newValue, oldValue) {
        if (newValue !== oldValue) {
          this.search(newValue);
        }
      }
    },
    mounted () {
      this.search(this.value);
    },
    methods: {
      emitChange (val) {
        this.$emit('input', val)
      },
      loadOption (list) {
        let options = list.map(item => {
          return {
            value: item[this.itemKey],
            label: item[this.itemText],
            remark: item[this.itemRemark]
          }
        });
        this.dataList = list;
        this.options = options;
      },
      search (text) {
        if (text === undefined) text = '';
        this.loading = true;
        request({
          url: this.url,
          method: 'post',
          data: {...this.exactParam, text}
        }).then(res => {
          this.loading = false;
          this.loadOption(this.$utils.dataFormat.getObjectValue(res, this.dataKey, []));
        }).catch(e => {
          this.loading = false
        })
      },
      onChange (value) {
        for (let item of this.dataList) {
          if (item[this.itemKey] === value) {
            this.change(item);
            return;
          }
        }
      }
    }
  }
</script>

<style scoped>

</style>
