<template>
  <div class="car-info">
    <el-tabs>
      <el-tab-pane label="GPS信息">
        <div class="car-item">
          <div class="title">所属企业：</div>
          <div class="value">{{carData.companyName}}</div>
        </div>
        <div class="car-item">
          <div class="title">海关放行时间：</div>
          <div class="value">{{carData.customsCreateDate}}</div>
        </div>
        <div class="car-item">
          <div class="title">报关单号：</div>
          <div class="value">{{carData.entryId}}</div>
        </div>
        <div class="car-item">
          <div class="title">车辆型号：</div>
          <div class="value">{{carData.vehicleModel}}</div>
        </div>
        <div class="car-item">
          <div class="title">交警上牌日期：</div>
          <div class="value">{{carData.firstRegistrationDate}}</div>
        </div>
        <div class="car-item">
          <div class="title">更新时间：</div>
          <div class="value">{{carData.gpsTime}}</div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div style="height: 20px"></div>
    <div class="car-btn">
      <el-button @click="posCar"> <span style="color: #FFFFFF;margin: 0">车辆定位</span></el-button>
      <el-button @click="trackRecord"> <span style="color: #FFFFFF;margin: 0">轨迹查询</span></el-button>
    </div>
  </div>
</template>

<script lang="ts">
import {Vue, Component, Watch} from 'vue-property-decorator'
import storeUtil from "@/util/store";
import {ShipUtils} from "@/util/tool";
import CarTrackRecordTemp from '@/views/new-dialog/CarTrackRecordTemp.vue'
import DialogUtil from '@/util/new-dialog'
import {DialogType as DialogType2} from '@/util/temp-interface/index'

@Component({
  props: {
    carData: {
      type: Object,
      required: true,
      default: {}
    }
  }
})
export default class CarInfo extends Vue {
  private carData: any
  private ShipFun: any = storeUtil.getMapFun()
  @Watch('carData', {
    immediate: true,
    deep: true
  })
  carChange(data: any) {
    const flagDom: any = document.getElementById('ship-flag-url');
    flagDom.setAttribute('src', `/zero2/country-img/CHN.png`)
    this.carData = data
  }

  private cancel() {
    this.ShipFun.delSelect()
  }

  private posCar() {
    this.ShipFun.setCenter([this.carData.longitude,this.carData.latitude])
    this.ShipFun.addSelectByCoor([this.carData.longitude,this.carData.latitude])
  }
  trackRecord() {
    DialogUtil.showDialog(CarTrackRecordTemp, DialogType2.TRACK_RECORD, {
      dialogData: {
        title: this.$props.carData.carNum,
        vueName: DialogType2.TRACK_RECORD
      },
      infoData: {
        shipData: this.$props.carData,
        isHistory: false
      },
      show: true
    })
  }
}
</script>

<style lang="scss" scoped>
.car-item {
  display: flex;
  align-items: center;
  line-height: 30px;

  .title {
    width: 100px;
  }
}
.car-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  .el-button {
    min-width: 80px !important;
    height: 27px;
    background: #F1F3F9 !important;
    border-radius: 14px;
    padding: 0 10px !important;
    border: none !important;
    span {
      color: #2D469B !important;
    }

    &:hover {
      background: #2D469B !important;

      span {
        color: #FFFFFF !important;
      }
    }
  }
}
</style>
