<template>
  <div class="carlist-box">
    <el-table v-loading="isLoading" :data="newTableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
              ref="carlist"
              :height="tableHeight"
              @row-click="openCar"
              :header-cell-style="{'background-color': '#94A1CC',color: '#ffffff'}"
              :row-style="{ cursor: 'pointer' }">
      <el-table-column prop="carNum"
                       label="车牌号"
                       width="150"
                       align="center"
                       show-overflow-tooltip
                       sortable>
      </el-table-column>
      <el-table-column prop="companyName"
                       label="企业"
                       width="200"
                       align="center"
                       sortable>
      </el-table-column>
      <el-table-column prop="firstRegistrationDate"
                       label="上牌时间"
                       width="120"
                       align="center"
                       sortable>
      </el-table-column>
      <el-table-column prop="gpsTime" label="最后更新时间" width="200" align="center">
      </el-table-column>
    </el-table>
    <div class="table-paging">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="[10, 50, 150,200]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="newTableData.length">
      </el-pagination>
    </div>
  </div>

</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
import HttpApi from "@/api";
import ShipFun from "@/util/map/map.js";
import DialogUtil from "@/util/new-dialog";
import CarInfoTemp from "@/views/new-dialog/CarInfoTemp.vue";
import {DialogType} from "@/util/temp-interface";
import storeUtil from "@/util/store";
const elementResizeDetectorMaker = require('element-resize-detector')

@Component({})
export default class CarInfo extends Vue {
  private tableData: any = []
  private isLoading = false
  private newTableData: any = []
  private currentPage = 1
  private pageSize = 50
  private tableHeight = 280
  private ShipFun: any = storeUtil.getMapFun()

  private handleSizeChange(val: any) {
    this.pageSize = val
  }

  private handleCurrentChange(val: any) {
    this.currentPage = val
  }

  private cancel() {
    // this.shipFun.clearallship()
  }

  public mounted() {
    const erd = elementResizeDetectorMaker()
    erd.listenTo((this.$refs.carlist as any).$parent.$el, () => {
      this.tableHeight = (this.$refs.carlist as any).$parent.$el.clientHeight - 40
    })
    const result: any = []
    HttpApi.getCarInfo().then((res) => {
      for (let i = 0; i < Object.keys(res).length; i++) {
        const key = Object.keys(res)[i]
        result.push({
          carNum: res[key].carNum,
          companyName: res[key].companyName,
          customsCreateDate: res[key].customsCreateDate,
          gpsTime: res[key].data && res[key].data.GpsTime ? res[key].data.GpsTime : '',
          latitude: res[key].data && res[key].data.Latitude ? res[key].data.Latitude : '',
          longitude: res[key].data && res[key].data.Longitude ? res[key].data.Longitude : '',
          entryId: res[key].entryId,
          firstRegistrationDate: res[key].firstRegistrationDate,
          vehicleModel: res[key].vehicleModel
        })
      }
    })

    this.newTableData = result
  }

  private openCar(data: any) {

    DialogUtil.showDialog(CarInfoTemp, DialogType.CAR_INFO, {
      dialogData: {
        title: data.carNum,
        vueName: DialogType.CAR_INFO
      },
      infoData: {
        carData: data
      },
      show: true
    })
  }
}
</script>

<style lang="scss" scoped>
.carlist-box {
  width: 100%;
  height: 100%;
  min-height: 300px;
  overflow-y: hidden;
  position: relative;
}
</style>
