<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>