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

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

  export default {
    name: 'RemoteSelect',
    props: {
      placeholder: {
        type: String,
        default: '请选择'
      },
      url: {}, // 远程URL
      method: '',
      itemKey: {type: String, default: 'key'}, // 下拉框值对应key
      itemText: {type: String, default: 'text'}, // 下拉框文本对应key
      itemRemark: {type: String, default: 'remark'}, // 下拉框备注对应key
      dataKey: {type: String, default: 'data'}, // 数据对应key 以点隔开
      clearable: {type: Boolean, default: true},
      filterable: {type: Boolean, default: false},
      disabled: {type: Boolean, default: false},
      editable: {type: Boolean, default: true},
      change: { // 选项改变事件
        type: Function,
        default: function () {
        }
      },
      value: {default: undefined},
      loadComplete: { // 加载完成后事件
        type: Function,
        default: function (list) {
        }
      },
      loadData: {
        type: Function,
        default: function () {
          return request({
            url: this.url,
            method: this.method
          })
        }
      }
    },
    data () {
      return {
        options: [],
        loading: false,
        dataList: []
      }
    },
    mounted () {
      this.load();
    },
    computed: {
      selectText () {
        for (let item of this.options) {
          if (this.value === item.value) {
            return item.label
          }
        }
        return ''
      }
    },
    methods: {
      emitChange (val) {
        this.$emit('input', val)
      },
      showLabel (label, remark) {
        if (this.$utils.dataFormat.isNull(remark)) {
          return label;
        }
        return label + '-' + remark;
      },
      load () {
        this.loading = true;
        this.loadData().then(res => {
          this.loading = false;
          this.loadOption(this.$utils.dataFormat.getObjectValue(res, this.dataKey, []));
        }).catch(e => {
          this.loading = false
        })
      },
      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;
        this.loadComplete(list);
      }
    }
  }
</script>

<style scoped>
</style>
