<template>
  <el-select :disabled="this.complaint_id === undefined ? false : true" @change="onSelectChange" v-model="customer" filterable remote
             :remote-method="getCustomerSelectFn" :placeholder="$t('请选择客户编号')">
    <el-option v-for="item in getCustomerList" :label="item.number" :value="Number(item.id)" :data="item.name" :key="item.id"></el-option>
  </el-select>
</template>

<script>
import {getCustomerList, getCustomerSelect} from "@/api/ecw/customer";

export default {
  props:{
    complaint_id: Number,
   value:{
     type:Number,
     default:undefined,
   },
  },
  name: "customerSelectByNumber",
  mounted() {
    console.log(this.complaint_id);
    this.getCustomerSelectFn();
    this.$nextTick(()=>{
      this.customer = this.value;
      if(!(this.customerList.some(i => i.id === this.value)) && this.value !== undefined){
        getCustomerList({ids:this.value}).then(r => {
          this.recommended = r.data;
        })
      }
    });
    this.initializeCustomer();
  },
  computed:{
    getCustomerList(){
      let index = this.customerList.findIndex(
        item => item.id === this.recommended[0]?.id
      )
       if(index > -1) return this.customerList
        else return [...this.customerList,...this.recommended]
    }
  },
  data(){
    return {
      customer:'',
      customerList:[],
      recommended:[],
    }
  },
  methods:{

    getCustomerSelectFn(val){
      getCustomerSelect({pageNo:1,pageSize:100,customerNumber:val}).then(r => {
        this.customerList = r.data.list;
      })
    },
    onSelectChange(selectedId) {
      const selectedItem = this.customerList.find(
        (item) => Number(item.id) === selectedId
      );
      this.customer = selectedId; // 记录选中的客户ID
      if (selectedItem) {
        this.$emit("input", { id: selectedId, name: selectedItem.name }); // 返回id和name
      }
    },
    // 初始化时根据传入的 value 请求客户信息
    initializeCustomer() {
      console.log('value:' + this.value)
      console.log('complaint_id:' + this.complaint_id)
      console.log(this.complaint_id !== undefined ? true : false)
      if (this.value !== undefined) {

        getCustomerList({ ids: this.value }).then((r) => {
          const customerData = r.data?.[0];
          // if (customerData) {
          //   this.customer = customerData.id;
          //   this.$emit("input", { id: customerData.id, name: customerData.name + ':select'}); // 返回初始化值
          // }
        });
      }
    },
  },
  watch:{
    value(val){
      this.customer = val;
      this.initializeCustomer(); // 监听传入值的变化
      if(!(this.customerList.some(i => i.id === val)) && val !== undefined){
        getCustomerList({ids:val}).then(r => {
          this.recommended = r.data;
        })
      }
    }
  }
}
</script>

<style scoped>

</style>