<template>
  <el-select
    v-model="value"
    multiple
    filterable
    remote
    clearable
    :multiple-limit="1"
    :disabled="disabled"
    reserve-keyword
    :size="size || 'medium'"
    style="width: 100%"
    :placeholder="placeholder || ''"
    :loading="selectLoading"
    @change="selectChange"
  >
    <!-- :disabled="disabled || (isRelation && companyCode === '')" -->
    <el-option
      v-for="(item, index) in options"
      :key="item.id + index"
      :label="item.name"
      :value="item.wsm_code"
      :disabled="item.status + '' === '0'"
    >
      <span style="float: left">{{ item.name }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ (wsm_options.find(({value}) => String(value) === String(item.wsm_type)) || {}).label || '--' }}</span>
    </el-option>
  </el-select>
</template>

<script>
import asyncRequest from '@/apis/components/search-stock'
import resToken from '@/mixins/resToken'
export default {
  name: 'SearchStock',
  mixins: [resToken],
  props: [
    'size',
    'value',
    'placeholder',
    'isDetail',
    'disabled',
    'isRelation',
    // "companyCode",
    'companyNo', // 业务公司
    'wsmtype',
    'names',
    'noRelation'
  ],
  /**
   * 属性集合
   * @param {String}        size             : 组件大小            非必填
   * @param {Array}         value            : 选中值              必填
   * @param {String}        placeholder      : 提示信息            非必填
   * @param {Boolean}       isDetail         : 是否是详情逻辑       必填
   * @param {Boolean}       disabled         : 是否禁用            必填
   * @param {Boolean}       isRelation       : 是否关联公司        必填
   * @param {String}        companyCode      : 关联公司code        必填
   * @param {String}        names            : 选中值label         展示详情必填
   */
  /**
   * 事件集合
   * @searchChange             : 选中值变化调用   抛出选中数据
   */
  data() {
    return {
      options: [],
      selectLoading: false,
      searchName: '',
      wsm_options: [
        // {
        //   value: "1",
        //   label: "系统仓",
        // },
        //   {
        //   value: "2",
        //   label: "虚拟仓",
        // },
        //     {
        //   value: "3",
        //   label: "自建仓",
        // },
        {
          value: '5',
          label: '销售仓'
        },
        {
          value: '4',
          label: '次品仓'
        }
      ],
      formValue: {
        page: 1,
        size: 100,
        supplierNo: '',
        wsm_code: '',
        companyNo: '',
        start: '',
        end: '',
        mobile: '',
        contactor: '',
        wsm_type: ''
      }
    }
  },
  watch: {
    // companyCode: function (val, old) {
    //   if (this.isRelation && val !== "") {
    //     this.remoteMethod(val);
    //   }
    // },
    companyNo: {
      handler: async function(val, old) {
        if (this.isRelation && val !== '') {
          const [item] = await this.remoteMethod(val) || []
          if (this.isDetail && item) {
            const model = {
              id: this.options[0].id,
              code: this.options[0].wsm_code,
              label: this.options[0].name,
              contactor: this.options[0].wsm_name,
              mobile: this.options[0].mobile,
              addr: this.options[0].wsm_addr,
              addr_code: this.options[0].addr_code,
              addr_cn: this.options[0].addr_cn,
              supplierNo: this.options[0].supplierNo,
              supplierName: this.options[0].supplierName,
              contactor_name: this.options[0].contactor_name
            }
            this.$emit('searchChange', model)
          }
        }
      },
      immediate: true
    },
    names: {
      handler: function(val, old) {
      // console.log(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.wsm_code === e[0])
        if (index !== -1) {
          const model = {
            id: this.options[index].id,
            code: this.options[index].wsm_code,
            label: this.options[index].name,
            contactor: this.options[index].wsm_name,
            mobile: this.options[index].mobile,
            addr: this.options[index].wsm_addr,
            addr_code: this.options[index].addr_code,
            addr_cn: this.options[index].addr_cn,
            supplierNo: this.options[index].supplierNo,
            supplierName: this.options[index].supplierName,
            contactor_name: this.options[index].contactor_name
          }
          this.$emit('searchChange', model)
        } else {
          this.$emit('searchChange', {})
        }
      } else {
        this.$emit('searchChange', {})
      }
    },
    async remoteMethod() {
      this.selectLoading = true
      this.options = []
      // this.formValue.supplierNo = this.companyCode || "";
      this.formValue.companyNo = this.companyNo || ''
      this.formValue.wsm_type = this.wsmtype || ''
      const { code, data, message } = await asyncRequest.list({
        ...this.formValue,
        noRelation: this.noRelation
      })

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

<style></style>
