<template>
  <div>
    <el-select v-model="carSelected" clearable>
      <el-option v-for="car in carList" :key="car.id" :label="car.licenseNumber" :value="car.id"/>
    </el-select>
  </div>
</template>

<script>

import {remindCarMainPage} from "@/api/base/carmain";

export default {
  name: "CarChoose",
  props: {
    value: {
      type: Object
    },
    cusName: {
      type: String,
    }
  },
  watch: {
    carSelected(val) {
      if (val) {
        const car = this.carList.find(item => item.id === val);
        this.$emit('input', car);
      }
    },
    value(val) {
      this.carSelected = val ? val.id : null;
    },
    cusName(val, old) {
      if (val !== old) {
        // this.carSelected = null
        this.getCarList()
      }
    }
  },
  data() {
    return {
      carSelected: null,
      carList: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        cusName: null
      },
      total: 0
    }
  },
  methods: {
    async getCarList() {
      try {
        if (this.cusName) {
          this.queryParams["cusName"] = this.cusName
          const res = await remindCarMainPage(this.queryParams)
          this.carList = res.data.records
          this.total = res.data.total
        }
      } catch {
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
