<template>
  <layout-card>
    <el-divider content-position="left">车辆档案</el-divider>
    <el-descriptions border>
      <el-descriptions-item label="车牌号">
        {{ data.PLATE_NUMBER }}
      </el-descriptions-item>
      <el-descriptions-item label="车辆颜色">
        {{ data.VEHICLE_COLOR }}
      </el-descriptions-item>
      <el-descriptions-item label="车架号">
        {{ data.FRAMES_NUMBER }}
      </el-descriptions-item>
      <el-descriptions-item label="发动机号">
        {{ data.ENGINE_NUMBER }}
      </el-descriptions-item>
      <el-descriptions-item label="营运证号">
        {{ data.OPERATING_CERTIFICATE }}
      </el-descriptions-item>
      <el-descriptions-item label="运输类别">
        {{ data.TRANSPORT_TYPE }}
      </el-descriptions-item>
      <el-descriptions-item label="初登日期">
        {{ data.FIRSTSHOW_DATE }}
      </el-descriptions-item>
      <el-descriptions-item label="发证日期">
        {{ data.CERTIFICATE_DATE }}
      </el-descriptions-item>
      <el-descriptions-item label="到期日期">
        {{ data.EXPIRE_DATE }}
      </el-descriptions-item>
      <el-descriptions-item label="车主/业主">
        {{ data.VEHICLEOWNER }}
      </el-descriptions-item>
      <el-descriptions-item label="车主电话">
        {{ data.VEHICLEOWNER_NUMBER }}
      </el-descriptions-item>
      <el-descriptions-item label="归属地区">
        {{ data.HOME_TERRITORY }}
      </el-descriptions-item>
      <el-descriptions-item label="车主住址">
        {{ data.VEHICLEOWNER_ADDRESS }}
      </el-descriptions-item>
      <el-descriptions-item label="联系人">
        {{ data.CONTACT }}
      </el-descriptions-item>
      <el-descriptions-item label="联系电话">
        {{ data.CONTACT_NUMBER }}
      </el-descriptions-item>
      <el-descriptions-item label="家庭住址">
        {{ data.HOME_ADDRESS }}
      </el-descriptions-item>
      <el-descriptions-item label="实际住址">
        {{ data.PHYSICAL_ADDRESS }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left">详细信息</el-divider>
    <el-descriptions border>
      <el-descriptions-item label="车辆品牌">
        {{ data.VEHICLE_BRAND }}
      </el-descriptions-item>
      <el-descriptions-item label="车辆型号">
        {{ data.VEHICLE_MODEL }}
      </el-descriptions-item>
      <el-descriptions-item label="燃料类型">
        {{ data.FUEL_TYPE }}
      </el-descriptions-item>
      <el-descriptions-item label="排放标准">
        {{ data.EMISSION_STANDARD }}
      </el-descriptions-item>
      <el-descriptions-item label="核定总质量">
        {{ data.VOUCH_TOTALMASS }}
      </el-descriptions-item>
      <el-descriptions-item label="核定载质量">
        {{ data.VOUCH_PAYLOAD }}
      </el-descriptions-item>
      <el-descriptions-item label="准牵引质量">
        {{ data.RACTIONMASS_QUALITY }}
      </el-descriptions-item>
      <el-descriptions-item label="运输类别">
        {{ data.TRANSPORT_TYPE }}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="1" border>
      <el-descriptions-item label="备注">
        {{ data.REMARK }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left">相关照片</el-divider>
    <el-descriptions :column="3" border>
      <el-descriptions-item label="车头照片">
        <img
          v-viewer
          :src="VITE_FILE_URL + data.HEADSTOCK_PHOTO"
          width="100"
          height="100"
          alt=""
        />
      </el-descriptions-item>
      <el-descriptions-item label="行驶证照片">
        <img
          v-viewer
          :src="VITE_FILE_URL + data.DRIVINGLICENSE_PHOTO"
          width="100"
          height="100"
          alt=""
        />
      </el-descriptions-item>
      <el-descriptions-item label="营运证照片">
        <img
          v-viewer
          :src="VITE_FILE_URL + data.OPERATING_CERTIFICATE_PHOTO"
          width="100"
          height="100"
          alt=""
        />
      </el-descriptions-item>
      <el-descriptions-item label="车辆资料">
        {{ data.VEHICLE_MATERIAL }}
      </el-descriptions-item>
    </el-descriptions>
  </layout-card>
</template>

<script setup>
import { findByIdOperatingVehicleInfo } from "@/request/operation_vehicle.js";
import { useRoute } from "vue-router";
import { ref } from "vue";

const VITE_FILE_URL = import.meta.env.VITE_FILE_URL;
const route = useRoute();
const { OPERATING_ID } = route.query;
const data = ref({});
const getData = async () => {
  const { pd } = await findByIdOperatingVehicleInfo({ OPERATING_ID });
  data.value = pd;
};
getData();
</script>

<style scoped></style>
