<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="实时信息" name="first">
        <el-descriptions v-model="realTimeData">
          <el-descriptions-item v-for="(value, key) in realTimeData" :key="key" :label="key">
            {{ value }}
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="基本信息" name="second">
        <el-descriptions v-model="vehicleInfo">
          <el-descriptions-item label="车牌号">{{ vehicleInfo.licenceNumber }}</el-descriptions-item>
          <el-descriptions-item label="车牌颜色">{{ vehicleInfo.vehicleColor }}</el-descriptions-item>
          <el-descriptions-item label="车辆VIN">{{ vehicleInfo.vehicleVin }}</el-descriptions-item>
          <el-descriptions-item label="车辆类型">{{ vehicleInfo.vehicleTypeId }}</el-descriptions-item>
          <el-descriptions-item label="车辆品牌">{{ vehicleInfo.vehicleBrand }}</el-descriptions-item>
          <el-descriptions-item label="车辆型号">{{ vehicleInfo.vehicleModel }}</el-descriptions-item>
          <el-descriptions-item label="车辆行驶证">{{ vehicleInfo.vehicleLicense }}</el-descriptions-item>
          <el-descriptions-item label="行驶证到期日期">{{ vehicleInfo.vehicleLicenseDueDate }}</el-descriptions-item>
          <el-descriptions-item label="车辆状态">
            <dict-tag :options="dict.type.car_vehicle_status" :value="vehicleInfo.vehicleStatus"/>
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="电子围栏" name="third">电子围栏</el-tab-pane>
      <el-tab-pane label="预警信息" name="fourth">预警信息</el-tab-pane>
      <el-tab-pane label="故障信息" name="five">故障信息</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  findById,analysis
} from "../../../api/car/vehicle";

export default {
  name: "VehicleInfo",
  dicts: ['car_vehicle_status'],
  data() {
    return {
      // 标签页
      activeName: 'second',
      // 基本信息
      vehicleInfo:{},
      // 实时数据
      realTimeData: "",
    };
  },
  created() {
    this.getVehicleInfo()
    this.getRealData()
  },
  methods: {
    /** 车辆基本信息回显 **/
    getVehicleInfo(){
      findById(this.$route.query.vehicleId).then(response => {
        this.vehicleInfo = response.data
      })
    },
    getRealData(){
      var testStr = "7E 56 49 4e 31 32 33 34 35 36 37 38 39 31 32 33 34 35 32 33 35 36 37 38 39 31 32 33 34 35 31 31 36 2e 36 36 34 30 35 33 30 33 39 2e 35 33 31 37 39 31 30 32 30 30 2e 30 30 35 38 36 37 38 33 37 2e 33 32 34 36 33 35 2e 31 32 33 39 2e 34 39 31 36 38 37 39 38 2e 35 36 50 30 39 30 38 31 39 2e 39 39 39 39 2e 38 36 30 39 39 39 39 39 31 30 30 30 31 33 39 2e 34 36 31 34 2e 36 38 31 31 33 36 39 2e 38 39 31 30 30 2e 30 30 31 30 30 2e 30 30 31 30 30 2e 30 30 31 33 31 34 2e 36 35 33 36 30 2e 35 38 34 2e 35 36 33 2e 32 35 31 30 30 2e 30 30 39 38 2e 32 33 30 33 36 2e 32 36 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 76 7E";
      analysis(testStr).then(response => {
        this.realTimeData = response.data
        console.log(this.realTimeData)
      })
    }
  }
};
</script>
