<template>

  <div>
    <el-select
      v-model="value"
      multiple
      filterable
      remote
      clearable
      collapse-tags
      :multiple-limit="1"
      reserve-keyword
      :size="size || 'medium'"
      style="width: 100%"
      :placeholder="placeholder || ''"
      :disabled="disabled"
      :remote-method="remoteMethod"
      :loading="selectLoading"
      @change="selectChange"
    >
      <el-option
        v-for="(item, index) in options"
        :key="item.id + index"
        :label="item.cat_name"
        :value="item.cat_id + ''"
        :disabled="item.status + '' !== '1'"
      />
    </el-select>
  </div>
</template>

<script>
import asyncRequest from '@/apis/components/company-sort'
import companyHelper from '@/mixins/companyHelper'
import resToken from '@/mixins/resToken'
export default {
  name: 'CompanySort',
  mixins: [resToken, companyHelper],
  props: ['size', 'value', 'placeholder', 'isDetail', 'disabled', 'names', 'type', 'companyNo'],
  /**
   * 属性集合
   * @param {String}        size             : 组件大小            非必填
   * @param {Array}         value            : 选中值              必填
   * @param {String}        placeholder      : 提示信息            非必填
   * @param {Boolean}       isDetail          : 是否是详情逻辑       必填
   * @param {Boolean}       disabled         : 是否禁用            必填
   * @param {String}        names            : 选中值label         展示详情必填
   * @param {String}        type             : 数据类型            非必填 1是平台供应商0非平台供应商
   */
  /**
   * 事件集合
   * @searchChange             : 选中值变化调用   抛出选中数据
   */
  data() {
    return {
      options: [],
      selectLoading: false,
      searchName: ''
    }
  },
  watch: {
    names: {
      handler(val, old) {
        this.searchName = val
        if (this.isDetail && this.searchName) {
          this.remoteMethod(this.searchName)
        }
      },
      immediate: true,
      deep: true
    },
    isDetail: {
      handler(val, old) {
        if (val && this.searchName) {
          this.remoteMethod(this.searchName)
        }
      }
      // immediate: true,
      // deep: true
    },
    companyNo: function(val) {
      if (!val || (this.isDetail || this.names)) return
      this.remoteMethod()
    }
  },
  mounted() {
    this.options = []
    this.selectLoading = false
  },
  methods: {
    async selectChange(e) {
      if (e && e.length > 0) {
        const index = this.options.findIndex((v) => v.cat_id + '' === e[0])
        if (index !== -1) {
          const model = {
            id: this.options[index].cat_id + '',
            code: this.options[index].id + '',
            label: this.options[index].cat_name + '',
            cat_desc: this.options[index].cat_desc,
            item: this.options[index].item + '',
            pid: this.options[index].pid + '',
            is_gold: this.options[index].is_gold
          }
          console.log(model)
          this.$emit('searchChange', model)
        } else {
          console.log(1)
          this.$emit('searchChange', {})
        }
      } else {
        this.$emit('searchChange', {})
      }
    },
    async remoteMethod(query) {
      this.selectLoading = true
      if (query !== '') {
        this.options = []
        const formValue = {
          page: 1,
          size: 100,
          cat_name: query,
          pid: '',
          status: '',
          companyNo: this.companyNo,
          noRelation: !!this.companyNo
        }

        const res = await asyncRequest.list(formValue)
        if (res && res.code === 0 && res.data) {
          const { list } = res.data
          this.options = list
        } else if (res && res.code >= 100 && res.code <= 104) {
          await this.logout()
        } else {
          this.$message.warning(res.message)
        }
      } else {
        this.options = []
      }
      this.selectLoading = false
    }
  }
}
</script>
