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

<script>
export default {
  name: 'AosDefdocLease',
  props: {
    value: {
      type: String,
      required: true,
      default: ''
    },
    field: {
      type: String,
      required: true
    },
    defCode: {
      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
    }
  },
  data () {
    return {
      options: [],
      defValue: '',
      refValueLable: ''
    }
  },
  methods: {
    getOptions () {
      const dict = this.$storage.get('cbay.dict')
      if (dict) {
        this.options = dict[this.defCode] ? dict[this.defCode] : []
      } else {
        this.$http({
          url: this.api_url + 'custom/dict/getAllDict',
          params: {
            appCd: ''
          }
        }).then((data) => {
          console.log('[getDict]', data)
          this.$storage.add('cbay.dict', data)
          this.options = dict[this.defCode] ? dict[this.defCode] : []
        }).catch((error) => {
          this.$message({
            type: 'error',
            message: '[/custom/dict]' + error
          })
        })
      }
    },
    handleDefChange (data) {
      this.setDefValue(data)
      let emitData = '';
      if (this.multiple) {
        if (data && data.length > 0) {
          data.forEach((item, index) => {
            emitData += item
            if (index < data.length - 1) {
              emitData += ','
            }
          })
        }
      } else {
        emitData = data
      }
      this.$emit('change', emitData)
    },
    handleVisibleChange (data) {
      this.$emit('visible-change', data)
    },
    handleRemoveTag (tag) {
      this.$emit('remove-tag', tag)
    },
    handleClear () {
      this.$emit('clear', this.defValue)
    },
    handleBlur (e) {
      this.$emit('blur', e)
    },
    handleFocus (e) {
      this.$emit('focus', e)
    },
    // setRefValue () {
    //   if (this.value) {
    //     const data = this.$_.find(this.options, { dictCd: this.value })
    //     if (data) {
    //       this.refValueLable = data.dictCnDesc
    //     }
    //   }
    // },
    setDefValue (data) {
      if (this.multiple && data && data.length > 0) {
        this.refValueLable = ""
        data.forEach((item,index) => {
          const sourceData = this.$_.find(this.options, { dictCd: item })
          if (sourceData) {
            this.refValueLable += sourceData.dictCnDesc
            if (index < data.length - 1) {
              this.refValueLable += ',';
            }
          }
        })
      } else {
        const sourceData = this.$_.find(this.options, { dictCd: data })
        if (sourceData) {
          this.refValueLable = sourceData.dictCnDesc
        } else {
          this.refValueLable = ''
        }
      }
    },
    init () {
      if (this.multiple) {
        if (this.value) {
          this.defValue = this.value.split(',')
        } else {
          this.defValue = []
        }
      } else {
        this.defValue = this.value || ''
      }
      window.Promise.all([this.getOptions()]).then(() => {
        this.setDefValue(this.defValue);
      });
    }
  },
  created () {
    this.init()
  },
  watch: {
    defValue: function (val, oldVal) {
      if (this.options.length > 0 && val && val !== oldVal) {
        window.Promise.all([this.getOptions()]).then(() => {
          this.setDefValue(this.defValue);
        });
      }
    },
    value: function (val, oldVal) {
      if (!this.$_.isEqual(val, oldVal)) {
        this.init()
      }
    },
    defCode: function (val, oldVal) {
      if (!this.$_.isEqual(val, oldVal)) {
        this.init()
      }
    },
  }
}
</script>
