<template>
  <el-select
    v-model="value"
    multiple
    filterable
    clearable
    remote
    :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.nickname"
      :value="item.id"
    />
  </el-select>
</template>

<script>
import asyncRequest from '@/apis/components/search-account'
import resToken from '@/mixins/resToken'
import { mapState } from 'vuex'

export default {
  name: 'SearchAccount',
  mixins: [resToken],
  props: [
    'size',
    'value',
    'placeholder',
    'isDetail',
    'disabled',
    'names',
    'itemid',
    'filterCompany',
    'level'
  ],
  /**
   * 属性集合
   * @param {String}        size             : 组件大小            非必填
   * @param {Array}         value            : 选中值              必填
   * @param {String}        placeholder      : 提示信息            非必填
   * @param {Boolean}       isDetail          : 是否是详情逻辑       必填
   * @param {Boolean}       disabled         : 是否禁用            必填
   * @param {String}        names            : 选中值label         展示详情必填
   * @param {String}        itemid           : 组织id              非必填
   * @param {boolean}       filterCompany    : 是否按当前公司筛选
   */
  /**
   * 事件集合
   * @searchChange             : 选中值变化调用   抛出选中数据
   */
  data() {
    return {
      options: [],
      selectLoading: false,
      searchName: ''
    }
  },
  computed: {
    ...mapState({
      currentCompany: (state) => state.user.currentCompany // 当前选中的业务公司
    })
  },
  watch: {
    names: {
      handler: function(val, old) {
        this.searchName = val
        if (this.isDetail && this.searchName) {
          this.remoteMethod(this.searchName)
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.options = []
    this.selectLoading = false
  },
  methods: {
    async selectChange(e) {
      if (e && e.length > 0) {
        const index = this.options.findIndex((v) => v.id === e[0])
        if (index !== -1) {
          const model = {
            id: this.options[index].id,
            code: this.options[index].id,
            label: this.options[index].nickname,
            level: this.options[index].level
          }
          this.$emit('searchChange', model)
        } else {
          this.$emit('searchChange', {})
        }
      } else {
        this.$emit('searchChange', {})
      }
    },
    async remoteMethod(query) {
      this.selectLoading = true
      if (query !== '') {
        this.options = []

        const formValue = {
          page: 1,
          nickname: query,
          itemid: this.itemid || '',
          companyNo: this.filterCompany ? this.currentCompany : ''
        }

        // const level = this.level || '2'
        // const listApi = level === '3' ? asyncRequest.supplier_list : asyncRequest.list
        const res = await asyncRequest.list({
          ...formValue,
          level: this.level
        })

        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>

<style>
</style>
