<template>
  <div class="content">
    <div class="table-wrapper">
      <div class="ticket-msg">
        <div>
          <p>Ticket ID: {{ ticketNo }}</p>
          <p>Ticket Name: {{ ticketName }}</p>
          <p>Operator: {{ Operator }}</p>
          <p>Comment: {{ comments }}</p>
        </div>
        <div>
          <el-button type="primary" size="small">Delete Ticket</el-button>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="vin" label="VIN" width="220px"></el-table-column>
        <el-table-column prop="vid" label="VID"></el-table-column>
        <el-table-column prop="brand" label="Brand"></el-table-column>
        <el-table-column prop="modelCode" label="Model Code"></el-table-column>
        <el-table-column prop="modelYear" label="Model Year"></el-table-column>
        <el-table-column
          prop="modelFamily"
          label="Model Family"
        ></el-table-column>
        <el-table-column
          prop="adsVersion"
          label="ADS Version"
        ></el-table-column>
        <el-table-column prop="lifeCycle" label="LifeCycle"></el-table-column>
        <el-table-column prop="brand" label="Brand"></el-table-column>
        <el-table-column
          prop="onlineStatus"
          label="Online Status"
        ></el-table-column>
        <template slot="empty" v-if="tableData.length == 0">
          <span>No data available</span>
        </template>
      </el-table>
      <el-pagination
        v-if="total > 0"
        :page-size="limit"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        layout="prev,sizes, pager, next"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { GetTicketDetial } from "@/api/vehicle";
export default {
  data() {
    return {
      ticketNo: "",
      ticketName: "",
      Operator: "",
      comments: "",
      brandList: [{ code: "1", name: "Audi" }],
      modelCodeList: [{ code: "1", name: "MC_0001" }],
      modelYearList: [{ code: "2021", name: "2021" }],
      adsVersionList: [{ code: "1", name: "1.0" }],
      existingGroupList: [{ code: "1", name: "AAA" }],
      onlineStatusList: [
        { code: "0", name: "Off" },
        { code: "1", name: "On" },
      ],
      brand: "",
      modelCode: "",
      modelYear: "",
      adsVersion: "",
      vin: "",
      existingGroup: "",
      onlineStatus: "",
      tableData: [],
      maxHeight: 0,
      page: 1,
      limit: 10,
      total: 0,
    };
  },
  created() {
    const { ticketNo } = this.$route.query;
    this.ticketNo = ticketNo;
    this.getTableData();
    // this.getMaxHeight();
    // window.addEventListener('resize', () => {
    //     this.getMaxHeight();
    // })
  },
  methods: {
    getTableData() {
      const { page, limit } = this;
      GetTicketDetial({
        currentPage: page,
        pageSize: limit,
        ticketNo: this.ticketNo,
      }).then((res) => {
        const { data } = res;
        this.ticketName = data.issueTicket.ticketName;
        this.Operator = data.issueTicket.createBy;
        this.comments = data.issueTicket.comments;
        this.tableData = data.vehicles.records;
        this.total = data.vehicles.total;
      });
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getTableData();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.handleCurrentChange(1)
    },
    getMaxHeight() {
      let bodyHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      this.maxHeight = bodyHeight - 194;
    },
  },
};
</script>

<style scoped lang="scss">
.ticket-msg {
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;
  div {
    display: flex;
  }
  p {
    margin-right: 50px;
    font-size: 16px;
    font-weight: 600;
    color: #212020;
    line-height: 30px;
  }
}
</style>
