<template>
  <div>
    <el-select filterable :value="value === 0 ? undefined : value" @change="change" v-bind="$attrs" clearable>
      <el-option v-for="supplier in getSuppliers" :key="supplier.id" :label="$t('公司名称:') + $l(supplier, 'company') + $t('，地址:') + supplier.externalBackVO.receiveAddress + $t('，邮箱:') + supplier.externalBackVO.receiveEmail + $t('，品名:') + supplier.externalBackVO.goodName + $t('，From M No:') + supplier.externalBackVO.fromNo + $t('，BA No:') + supplier.externalBackVO.baNo" :value="supplier.id" style="width: 600px">
        <el-tooltip class="item" effect="dark" placement="top">
          <div slot="content">
            <span>{{ $t('公司名称:') + $l(supplier, 'company') + $t('，地址:') + supplier.externalBackVO.receiveAddress + $t('，邮箱:') + supplier.externalBackVO.receiveEmail + $t('，品名:') + supplier.externalBackVO.goodName + $t('，From M No:') + supplier.externalBackVO.fromNo + $t('，BA No:') + supplier.externalBackVO.baNo }}</span>
          </div>
          <div class="iclass">{{ $t('公司名称:') + $l(supplier, 'company') + $t('，地址:') + supplier.externalBackVO.receiveAddress + $t('，邮箱:') + supplier.externalBackVO.receiveEmail + $t('，品名:') + supplier.externalBackVO.goodName + $t('，From M No:') + supplier.externalBackVO.fromNo + $t('，BA No:') + supplier.externalBackVO.baNo }}</div>
        </el-tooltip>
      </el-option>
    </el-select>
  </div>
</template>

<script>
/**
 * 供应商
 */
export default {
  name: 'supplierSelect',
  props: {
    companyType: String,
    value: Number,
    allSupplier: Array,
    areaType: {
      type: Number,
      default: 0
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  data() {
    return {}
  },
  computed: {
    getSuppliers() {
      let allSupplier = this.allSupplier.filter((item) => item.areaType == this.areaType)
      allSupplier.forEach((map) => {
        map.externalBackVO.receiveAddress = map.externalBackVO.receiveAddress ? map.externalBackVO.receiveAddress : ''
        map.externalBackVO.receiveEmail = map.externalBackVO.receiveEmail ? map.externalBackVO.receiveEmail : ''
        map.externalBackVO.goodName = map.externalBackVO.goodName ? map.externalBackVO.goodName : ''
        map.externalBackVO.fromNo = map.externalBackVO.fromNo ? map.externalBackVO.fromNo : ''
        map.externalBackVO.baNo = map.externalBackVO.baNo ? map.externalBackVO.baNo : ''
      })
      if (this.areaType == 1 || !this.companyType) return allSupplier
      return allSupplier.filter((item) => item.companyTypes.includes(this.companyType))
    }
  },
  methods: {
    change(val) {
      this.$emit('change', val)
    }
  }
}
</script>
<style scoped>
.iclass {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>