<template>
  <el-select v-model="supplierSelected" clearable filterable>
    <el-option v-for="supplier in supplierList" :key="supplier.id" :label="supplier.name"
               :value="supplier.id"/>
  </el-select>
</template>

<script>

import {getBaseSupplierList} from "@/api/repair/supplier";

export default {
  name: "SupplierChoose",
  props: {
    value: {
      type: Object,
      defaultValue: null
    }
  },
  data() {
    return {
      supplierSelected: undefined,
      supplierList: null
    }
  },
  watch: {
    supplierSelected(val) {
      const supplier = this.supplierList.find(item => item.id === val)
      this.$emit("input", supplier);
    },
    value(newVal) {
      if (newVal) {
        this.supplierSelected = newVal.id
      } else {
        this.supplierSelected = null
      }
    }
  },
  mounted() {
    this.listSupplier()
  },
  methods: {
    async listSupplier() {
      const res = await getBaseSupplierList();
      this.supplierList = res.data
    }
  }
}
</script>

<style scoped lang="scss">

</style>
