<template>
  <div>
    <el-select ref="ticketSelect" v-model="ticketSelected" clearable>
      <el-option v-for="ticket in ticketList" :key="ticket.id" :label="ticket.ticketNo" :value="ticket.id" v-show="false"/>
      <el-table v-loading="loading" :data="ticketList" :stripe="true" :show-overflow-tooltip="true" @row-click="rowClick">
        <el-table-column label="序号" align="center">
          <template scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单号" align="center" width="200" prop="ticketNo" />
        <el-table-column label="姓名" align="center" width="180" prop="userName" />
        <el-table-column label="车牌" align="center" width="180" prop="carNo" />
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
      />
    </el-select>
  </div>
</template>

<script>

import {getTicketsPage} from "@/api/repair/tickets/Tickets";

export default {
  name: "TicketChoose",
  props:{
    value:{
      type: Object
    }
  },
  data() {
    return {
      ticketSelected: null,
      ticketList: [],
      total: 0,
      loading: false,
      queryParams:{
        pageNo: 1,
        pageSize: 10,
        ticketsStatus: "01"
      }
    }
  },
  watch:{
    value(val){
      // console.log(val)
    }
  },
  mounted() {
    this.listTicket()
  },
  methods: {
    // 未结算工单
    async listTicket(){
      const res = await getTicketsPage(this.queryParams)
      this.ticketList = res.data.records
      this.total = res.data.total
    },
    rowClick(row){
      this.ticketSelected = row.id
      this.$emit("selected", row.id)
      this.$refs.ticketSelect.blur()
    }
  }
}
</script>

<style scoped lang="scss">

</style>
