<template>
  <el-select filterable v-model="_customerId" remote :remote-method="remoteSearchCustomer" :loading="customerLoading" placeholder="请选择客户">
    <el-option v-for="item in customerList" :key="item.supplierId" :label="item.name" :value="item.supplierId" />
  </el-select>
</template>

<script>
  import { listSupplier } from '@/api/oa/supplier';

  export default {
    name: 'CustomerSelect',
    props: {
      value: {
        type: String,
        default: ''
      }
    },
    computed: {
      _customerId: {
        get() {
          return this.value;
        },
        set(value) {
          this.$emit('input', value);
        }
      }
    },
    data() {
      return {
        customerList: [],
        customerLoading: false
      }
    },
    mounted() {
      this.remoteSearchCustomer('');
    },
    methods: {
      remoteSearchCustomer(query) {
        this.customerLoading = true;
        listSupplier({ name: query, pageNum: 1, pageSize: 10 }).then(response => {
          this.customerList = response.rows;
        }).finally(() => {
          this.customerLoading = false;
        });
      }
    }
  }
</script>