<template>
  <el-select 
    remote 
    clearable 
    filterable 
    v-model="_value" 
    :remote-method="remoteSearchVendor" 
    :loading="vendorLoading" 
    placeholder="请选择供应商"
  >
    <el-option v-for="item in vendorList" :key="item.supplierId" :label="item.name" :value="item.supplierId" />
  </el-select>
</template>

<script>
import { listSupplier } from "@/api/wms/supplier";

export default {
  name: "VendorSelect",
  data() {
    return {
      vendorList: [],
      vendorLoading: false,
    }
  },
  props: {
    value: {
      type: String,
      default: ""
    }
  },
  computed: {
    _value: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      }
    }
  },
  mounted() {
    this.remoteSearchVendor("");
  },
  methods: {
    remoteSearchVendor(query) {
      this.vendorLoading = true;
      listSupplier({
        pageNum: 1,
        pageSize: 20,
        name: query
      }).then(response => {
        this.vendorList = response.rows;
        this.vendorLoading = false;
      });
    }
  }
}
</script>