<template>
  <div class="aos-ref-lease">
    <el-select
      v-if="editable"
      ref="aosRefLease"
      v-model="refValue"
      filterable
      :multiple="multiple"
      :collapse-tags="collapseTags"
      :clearable="clearable"
      :disabled="disabled"
      :placeholder="placeholder"
      @change="handleRefChange"
      @visible-change="handleVisibleChange"
      @clear="handleClear"
      @blur="handleBlur"
      @focus="handleFocus"
      @remove-tag="handleRemoveTag">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <div v-else class="el-form-item__content aos-form-input-text">
      {{refValueLable}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'AosRefLease',
  props: {
    value: {
      type: String,
      required: true
    },
    field: {
      type: String,
      required: true
    },
    baseUrl: {
      type: String,
      required: true
    },
    // 参照的路径
    refUrl: {
      type: String,
      required: true
    },
    editable: {
      type: Boolean,
      required: true,
      default: true
    },
    debounce: {
      type: Number,
      default: 300
    },
    // 参照下拉列表的位置
    placement: {
      type: String,
      default: 'bottom-start'
    },
    // 提示
    placeholder: {
      type: String,
      default: '请选择'
    },
    // 是否可清空
    clearable: {
      type: Boolean,
      default: true
    },
    // 禁用状态
    disabled: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    collapseTags: {
      type: Boolean,
      default: false
    },
    queryParams: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      options: [],
      refValue: '',
      refValueLable: ''
    }
  },
  methods: {
    /**
     * @description: 获取参照 
     * @param {type} 1： 确认刷新 0：根据逻辑判断是否需要刷新 
     * @return: null
     */
    getOptions (type) {
      let paramsData = {}
      if (this.queryParams) {
        paramsData = JSON.parse(JSON.stringify(this.queryParams))
      }
      paramsData.RequesetId = new Date().getTime()
      this.$get({
        method: 'get',
        url: this.baseUrl +this.refUrl,
        params: paramsData
      }).then((data) => {
        this.options = data
        this.setRefValue()
      })
    },
    handleRefChange (data) {
      const sourceData = this.$_.find(this.options, { value: data })
      if (sourceData) {
        this.refValueLable = sourceData.label
      }
      this.$emit('change', data)
    },
    handleVisibleChange (data) {
      this.$emit('visible-change', data)
    },
    handleRemoveTag (tag) {
      this.$emit('remove-tag', tag)
    },
    handleClear () {
      this.$emit('clear')
    },
    handleBlur (e) {
      this.$emit('blur', e)
    },
    handleFocus (e) {
      this.$emit('focus', e)
    },
    setRefValue () {
      if (this.value) {
        const data = this.$_.find(this.options, { value: this.value })
        if (data) {
          this.refValueLable = data.label
        }
      }
    }
  },
  created () {
    this.getOptions(0)
    this.refValue = this.value
  },
  watch: {
    refValue: function (val, oldVal) {
      if (this.options.length > 0 && val && val !== oldVal) {
        const data = this.$_.find(this.options, { value: val })
        if (data) {
          this.refValueLable = data.label
        }
      }
    },
    queryParams: function (val, oldVal) {
      if (val && !this.$_.isEqual(val, oldVal)) {
        this.getOptions(1)
      }
    }
  }
}
</script>
