<template>
  <el-row>
    <el-col :span="24">
      <div style="padding: 10px 0">

        <el-button type="primary" style="margin-left: 0.5%;margin-top: 0px;" @click="queryInfo">
          <el-icon style="vertical-align: middle;">
            <search/>
          </el-icon>
          <span style="vertical-align: middle;"> 查找 </span>
        </el-button>

      </div>
      <el-table :data="tableData" border
                highlight-current-row="true"
                style="width: 100%;"
                :height=myHeight
                :header-cell-style="{height:'70px'}"
                :row-style="{height:'60px'}"
                v-loading="tableLoading"
      >
<!--        <el-table-column prop="__row_number__" label="序号" align="center" width="80"></el-table-column>-->
        <el-table-column prop="enStationName" label="入口站名" align="center"></el-table-column>
        <el-table-column prop="exStationName" label="出口站名" align="center"></el-table-column>
        <el-table-column prop="vehicleId" label="车牌号码" align="center"></el-table-column>
        <el-table-column prop="colortext" label="车牌颜色" align="center"></el-table-column>
        <el-table-column prop="typetext" label="车型" align="center"></el-table-column>
        <el-table-column prop="alexCount" label="轴数" align="center"></el-table-column>
        <el-table-column prop="classDate" label="统计日" align="center" :formatter="dateFormatDay"></el-table-column>
        <el-table-column prop="checkTime" label="检测时间" align="center" width="200"></el-table-column>
        <el-table-column prop="weight" label="车货总重(千克)" align="center"></el-table-column>
        <el-table-column prop="limitWeight" label="超载重量(千克)" align="center"></el-table-column>
        <el-table-column prop="overWeight" label="超限重量(千克)" align="center"></el-table-column>


        <el-table-column fixed="right" label="操作" width="150" align="center">
          <template v-slot="scope">
            <el-button
                style="margin-top: 0%;"
                @click="viewThis(scope.row)" type="success"
                size="default"
                :icon="View">查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-config-provider :locale="locale">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchForm.pageNum"
            :page-sizes="[ 10, 50, 100]"
            :page-size="searchForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="searchForm.total">
        </el-pagination>
      </el-config-provider>
    </el-col>
    <div class="version-info">版本号：{{ version }}</div>
  </el-row>
  <!--             :style="{ maxHeight: '700px' }"-->
  <el-dialog title="治超详情" v-model="viewShow" width="70%" top="0.5%" destroy-on-close
             :close-on-click-modal="false">
    <el-form :model="viewThisRow" size="medium" ref="viewThisRow">
      <el-row>
        <el-col :span="8">
          <el-form-item label="流水号:" :label-width="formLabelWidth" prop="listno">
            <el-input v-model="viewThisRow.listno" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="识别车牌:" :label-width="formLabelWidth" prop="recognitionCarNo">
            <el-input v-model="viewThisRow.recognitionCarNo" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否大件运输车:" :label-width="formLabelWidth" prop="largeFlag">
            <el-input v-model="viewThisRow.largeFlag" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入口站名称:" :label-width="formLabelWidth" prop="enStationName">
            <el-input v-model="viewThisRow.enStationName" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出口站名称:" :label-width="formLabelWidth" prop="exStationName">
            <el-input v-model="viewThisRow.exStationName" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="大件许可证号:" :label-width="formLabelWidth" prop="certNo">
            <el-input v-model="viewThisRow.certNo" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入口站编号:" :label-width="formLabelWidth" prop="enStationId">
            <el-input v-model="viewThisRow.enStationId" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出口站编号:" :label-width="formLabelWidth" prop="exStationId">
            <el-input v-model="viewThisRow.exStationId" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否黑名单:" :label-width="formLabelWidth" prop="blackFlag">
            <el-input v-model="viewThisRow.blackFlag" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入口车道编号:" :label-width="formLabelWidth" prop="enTollLaneId">
            <el-input v-model="viewThisRow.enTollLaneId" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出口车道编号:" :label-width="formLabelWidth" prop="exTollLaneId">
            <el-input v-model="viewThisRow.exTollLaneId" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="OBU编号:" :label-width="formLabelWidth" prop="obuId">
            <el-input v-model="viewThisRow.obuId" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入口时间:" :label-width="formLabelWidth" prop="enTime">
            <el-input v-model="viewThisRow.enTime" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="总质量(千克):" :label-width="formLabelWidth" prop="weight">
            <el-input v-model="viewThisRow.weight" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆用户类型:" :label-width="formLabelWidth" prop="obuUserTypeText">
            <el-input v-model="viewThisRow.obuUserTypeText" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入口重量:" :label-width="formLabelWidth" prop="enWeight">
            <el-input v-model="viewThisRow.enWeight" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="限载量(千克):" :label-width="formLabelWidth" prop="limitWeight">
            <el-input v-model="viewThisRow.limitWeight" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="OBU车辆总质量(千克):" :label-width="formLabelWidth" prop="obuTotalWeight">
            <el-input v-model="viewThisRow.obuTotalWeight" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入口轴数:" :label-width="formLabelWidth" prop="enAlexCount">
            <el-input v-model="viewThisRow.enAlexCount" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="超限量(千克):" :label-width="formLabelWidth" prop="overWeight">
            <el-input v-model="viewThisRow.overWeight" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="OBU整备质量(千克):" :label-width="formLabelWidth" prop="obuMaintenanceWeight">
            <el-input v-model="viewThisRow.obuMaintenanceWeight" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="称重设备编号:" :label-width="formLabelWidth" prop="equipCode">
            <el-input v-model="viewThisRow.equipCode" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆轴数:" :label-width="formLabelWidth" prop="alexCount">
            <el-input v-model="viewThisRow.alexCount" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="OBU车辆准牵引总质量(千克):" :label-width="formLabelWidth" prop="obuPermittedTowWeight">
            <el-input v-model="viewThisRow.obuPermittedTowWeight" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="统计日:" :label-width="formLabelWidth" prop="statisticalDay">
            <el-input v-model="viewThisRow.statisticalDay" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车速:" :label-width="formLabelWidth" prop="speed">
            <el-input v-model="viewThisRow.speed" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="OBU车辆核定载质量(千克):" :label-width="formLabelWidth" prop="obuPermittedWeight">
            <el-input v-model="viewThisRow.obuPermittedWeight" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="检测时间:" :label-width="formLabelWidth" prop="checkTime">
            <el-input v-model="viewThisRow.checkTime" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车货总长度(厘米):" :label-width="formLabelWidth" prop="length">
            <el-input v-model="viewThisRow.length" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="OBU车辆长度:" :label-width="formLabelWidth" prop="obuLength">
            <el-input v-model="viewThisRow.obuLength" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实际车牌:" :label-width="formLabelWidth" prop="actualCarNo">
            <el-input v-model="viewThisRow.actualCarNo" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车货总宽度(厘米):" :label-width="formLabelWidth" prop="width">
            <el-input v-model="viewThisRow.width" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="OBU车辆宽度:" :label-width="formLabelWidth" prop="obuWeight">
            <el-input v-model="viewThisRow.obuWeight" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车型:" :label-width="formLabelWidth" prop="typetext">
            <el-input v-model="viewThisRow.typetext" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车货总高度(厘米):" :label-width="formLabelWidth" prop="height">
            <el-input v-model="viewThisRow.height" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="OBU车辆高度:" :label-width="formLabelWidth" prop="obuHeight">
            <el-input v-model="viewThisRow.obuHeight" autocomplete="off" :disabled="true"
                      clearable></el-input>
          </el-form-item>
        </el-col>



      </el-row>
    </el-form>
    <span style="font-size: 15px;">照片</span>
    <el-divider/>
    <el-row>
      <el-col :span="12" v-loading="carFrontPicLoad">
        <span style="font-size: 15px;">车头照片</span>
        <el-image style="width: 350px; height: 300px;left: 80px" :src="carFrontPic"
                  :zoom-rate="1.2"
                  :preview-src-list="carFrontPicList"
                  v-if="showCarFrontPic"/>
        <span v-if="notCarFrontPic" style="font-size: 15px;left: 50px">
            <br/>
          未查询到车头照片</span>
      </el-col>
      <el-col :span="12" v-loading="carRearPicLoad">
        <span style="font-size: 15px;">车尾照片</span>
        <el-image style="width: 350px; height: 300px;left: 80px" :src="carRearPic"
                  :zoom-rate="1.2"
                  :preview-src-list="carRearPicList"
                  v-if="showCarRearPic"/>
        <span v-if="notCarRearPic" style="font-size: 15px;left: 50px">
            <br/>
          未查询到车尾照片</span>
      </el-col>
    </el-row>
    <el-divider/>
    <el-row>
      <el-col :span="12" v-loading="platePicLoad" v-if="isDisplayed">
        <span style="font-size: 15px;" >
          车侧身照片</span>
        <el-image style="width: 400px; height: 300px;left: 80px" :src="platePic"
                  :zoom-rate="1.2"
                  :preview-src-list="platePicList"
                  v-if="showPlatePic"/>
        <span v-if="notPlatePic" style="font-size: 15px;left: 50px">
          <br/>
          未查询到车侧身照片</span>
      </el-col>
      <el-col :span="12" v-loading="platePicLoad" v-if="!isDisplayed">
        <span style="font-size: 15px;" >
          车牌照片</span>
        <el-image style="width: 400px; height: 300px;left: 80px" :src="platePic"
                  :zoom-rate="1.2"
                  :preview-src-list="platePicList"
                  v-if="showPlatePic"/>
        <span v-if="notPlatePic" style="font-size: 15px;left: 50px">
          <br/>
          未查询到车牌照片</span>
      </el-col>
      <el-col :span="12" v-loading="shortVideoLoad">
        <span style="font-size: 15px;">短视频</span>
        <video  style="width: 500px;height: 300px" controls="controls" autoPlay="autoplay" v-if="showShortVideo">
          <source
              :src="videoSrc"
              type="video/mp4">
        </video>
        <span v-if="notShortVideo" style="font-size: 15px;left: 50px">
           <br/>
          未查询到短视频</span>
      </el-col>

    </el-row>
    <el-divider/>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="viewShow=false" type="primary"> 关闭</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog title="出口治超" v-model="searchShow" width="40%" top="5%" destroy-on-close
             :close-on-click-modal="false">
    <el-form :model="searchForm" size="medium" ref="searchForm">
      <el-row>
        <el-col :span="24">
          <el-form-item label="统计日期:" :label-width="searchFormLabelWidth" prop="dT">
            <el-date-picker
                v-model="searchForm.dT"
                type="daterange"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                unlink-panels
                range-separator="To"
                start-placeholder="开始时间"
                end-placeholder="截止时间"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="入口站名:" :label-width="searchFormLabelWidth" prop="enStationName">
            <el-input v-model="searchForm.enStationName" autocomplete="off"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出口站名:" :label-width="searchFormLabelWidth" prop="stano">
            <el-select v-model="searchForm.stano" clearable
            >
              <el-option
                  v-for="item in exportStaList"
                  :label="item.staname"
                  :value="item.gbstationid"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="车型:" :label-width="searchFormLabelWidth" prop="type">
            <el-select v-model="searchForm.type" clearable
            >
              <el-option
                  v-for="item in CarTypeList"
                  :label="item.text"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="车牌号码:" :label-width="searchFormLabelWidth" prop="carno">
            <el-input v-model="searchForm.carno" autocomplete="off"
                      clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="检测时间:" :label-width="searchFormLabelWidth" prop="checkTime">
            <el-date-picker
                v-model="searchForm.checkTime"
                type="datetimerange"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                unlink-panels
                range-separator="到"
                start-placeholder="开始时间"
                end-placeholder="截止时间"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="轴数:" :label-width="searchFormLabelWidth" prop="axiscountStart">
            <el-input v-model.number="searchForm.axiscountStart" autocomplete="off"
                      oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value<0)value=0"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="到" :label-width="searchFormLabelWidth2" prop="axiscountEnd">
            <el-input v-model.number="searchForm.axiscountEnd" autocomplete="off"
                      oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value<0)value=0"
                      clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="车货总重(千克):" :label-width="searchFormLabelWidth" prop="inweightStart">
            <el-input v-model.number="searchForm.inweightStart" autocomplete="off"
                      oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value<0)value=0"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="到" :label-width="searchFormLabelWidth2" prop="inweightEnd">
            <el-input v-model.number="searchForm.inweightEnd" autocomplete="off"
                      oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value<0)value=0"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="超限重量(千克):" :label-width="searchFormLabelWidth" prop="overWeightStart">
            <el-input v-model.number="searchForm.overWeightStart" autocomplete="off"
                      oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value<0)value=0"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="到" :label-width="searchFormLabelWidth2" prop="overWeightEnd">
            <el-input v-model.number="searchForm.overWeightEnd" autocomplete="off"
                      oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value<0)value=0"
                      clearable></el-input>
          </el-form-item>
        </el-col>


      </el-row>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
         <el-button type="primary" style="margin-left: 0.5%;margin-top: 0px;" @click="network">
          <el-icon style="vertical-align: middle;">
            <search/>
          </el-icon>
          <span style="vertical-align: middle;"> 搜索 </span>
        </el-button>
        <el-button type="info" style="margin-left: 0.5%;margin-top: 0px;" @click="reNetwork">
          <el-icon>
            <Refresh/>
          </el-icon>
          <span style="vertical-align: middle;"> 重置 </span>
        </el-button>
        <el-button @click="searchShow=false" type="warning"> 关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
// import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import {
  getCarTypeList,
  getJurisdictionStaList,
  getExportPage,
  displayedSideImage
} from "../../util/api/zcdataquery/api.js";
import pro from '../../util/tool.js';
import {CloseBold, Delete, Edit, Reading, Select, Switch, View, ZoomIn} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import {queryImageInfo} from "../../util/api/zcdataquery/api";
import Dark from '../../views/Dark.vue'
import moment from "moment";
import axios from "axios";
import {queryProgramVersion} from "../../util/api/realtimeinfoquery/api";

export default {
  name: "ExportQuery",
  components: {Dark},
  data() {

    return {
      version: '', // 初始版本号为空
      fieldMapping: {
        LISTNO: "listno",
        PASSID: "passId",
        ENSTATIONNAME: "enStationName",
        ENSTATIONID: "enStationId",
        ENTOLLLANEID: "enTollLaneId",
        ENTIME: "enTime",
        ENWEIGHT: "enWeight",
        ENALEXCOUNT: "enAlexCount",
        VEHICLEID: "vehicleId",
        VEHICLECOLOR: "vehicleColor",
        VEHICLETYPE: "vehicleType",
        EXSTATIONNAME: "exStationName",
        EXSTATIONID: "exStationId",
        EXTOLLLANEID: "exTollLaneId",
        EQUIPCODE: "equipCode",
        CHECKTIME: "checkTime",
        WEIGHT: "weight",
        ALEXCOUNT: "alexCount",
        SPEED: "speed",
        LIMITWEIGHT: "limitWeight",
        OVERWEIGHT: "overWeight",
        OVERRATE: "overRate",
        LENGTH: "length",
        WIDTH: "width",
        HEIGHT: "height",
        ISBULKVEHICLE: "isBulkVehicle",
        CERTNO: "certNo",
        ISBLACKVEHICLE: "isBlackvehicle",
        OBUID: "obuId",
        IDENTIFYVEHICLEID: "identifyVehicleId",
        IDENTIFYVEHICLECOLOR: "identifyVehicleColor",
        IDENTIFYVEHICLETYPE: "identifyVehicleType",
        OBUUSERTYPE: "obuUserType",
        OBUTOTALWEIGHT: "obuTotalWeight",
        OBUMAINTENANCEWEIGHT: "obuMaintenanceWeight",
        OBUPERMITTEDTOWWEIGHT: "obuPermittedTowWeight",
        OBUPERMITTEDWEIGHT: "obuPermittedWeight",
        OBULENGTH: "obuLength",
        OBUWEIGHT: "obuWeight",
        OBUHEIGHT: "obuHeight",
        HEADPICID: "headPicId",
        TAILPICID: "tailPicId",
        SIDEPICID: "sidePicId",
        VIDEOID: "videoId",
        BACKUP1: "backup1",
        BACKUP2: "backup2",
        BACKUP3: "backup3",
        BACKUP4: "backup4",
        CLASSDATE: "classDate",
        DATEMARK: "datemark",
        COLORTEXT: "colortext",
        IDCOLORTEXT: "idcolortext",
        TYPETEXT: "typetext",
        STATISTICALDAY: "statisticalDay",
        RECOGNITIONCARN: "recognitionCarNo",
        LARGEFLAG: "largeFlag",
        BLACKFLAG: "blackFlag",
        OBUSER_TYPETEXT: "obuUserTypeText",
        ACTUALCARN: "actualCarNo",
      },

      isDisplayed:false,
      videoSrc: '',
      carFrontPic: '',
      carFrontPicList: [],
      showCarFrontPic: false,
      notCarFrontPic: false,
      carFrontPicLoad: false,
      panoramaPic: '',
      panoramaList: [],
      showPanoramaPic: false,
      notPanoramaPic: false,
      panoramaPicLoad: false,
      carRearPic: '',
      carRearPicList: [],
      showCarRearPic: false,
      notCarRearPic: false,
      carRearPicLoad: false,
      platePic: '',
      platePicList: [],
      showPlatePic: false,
      notPlatePic: false,
      platePicLoad: false,
      shortVideoUrl: '',
      showShortVideo: false,
      notShortVideo: false,
      shortVideoLoad: false,


      View,
      Delete,
      Edit,
      Reading,
      ZoomIn,
      Select,
      CloseBold,
      Switch,
      completeShow: false,
      isShowFreeTimes: false,
      addShow: false,
      isShow: false,
      locale: zhCn,
      tableData: [],
      CarTypeList: [],
      exportStaList: [],
      searchForm: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        dT: [moment(new Date().setTime(new Date().getTime())).format('YYYY-MM-DD'), moment(new Date()).format('YYYY-MM-DD')],
      },
      searchShow: false,
      man: '',
      manno: '',
      mannoDe: '',
      userUnitClass: '',
      wxIsComplete: '1',
      formLabelWidth: '200px',
      searchFormLabelWidth: '120px',
      searchFormLabelWidth2: '40px',
      myHeight: 500,
      tableLoading: false,
      viewShow: false,
      viewThisRow: {},
    }
  },
  methods: {
//获取用户的基础信息
    queryUserBasic() {
      //获取当前的用户id
      //正式使用
      // this.mannoDe = localStorage.getItem("mannoDe");
      // this.userUnitClass = localStorage.getItem("userUnitClass");
      //测试使用
      // this.mannoDe = '1';
      // this.userUnitClass = '1';

    },
    // playVideo(){
    //   window.open(this.videoUrl)
    //
    // },
    transformData(data) {
      return data.map((item) => {
        const transformedItem = {};
        for (const key in item) {
          const transformedKey = this.fieldMapping[key] || key;
          transformedItem[transformedKey] = item[key];
        }
        return transformedItem;
      });
    },
    queryJurisdictionexportStaList() {
      getJurisdictionStaList({
      }).then((res) => {
        this.exportStaList = res;
        this.network();


      })


    },

    queryInfo() {
      this.searchShow = true;
      // this.searchForm = {
      //   total: 0,
      //   pageNum: 1,
      //   pageSize: 10,
      //   dT: [moment(new Date().setTime(new Date().getTime())).format('YYYY-MM-DD'), moment(new Date()).format('YYYY-MM-DD')],
      // };
    },


    viewThis(row) { //查看明细
      // console.log(row)
      this.viewThisRow = row
      this.viewThisRow.actualCarNo = this.viewThisRow.vehicleId + "_" + this.viewThisRow.colortext;
      this.viewThisRow.recognitionCarNo = this.viewThisRow.identifyVehicleId + "_" + this.viewThisRow.idcolortext;
      this.viewThisRow.statisticalDay = pro.dateFormatDay(this.viewThisRow.classDate);

      const isBulkVehicle = this.viewThisRow.isBulkVehicle;
      this.viewThisRow.largeFlag = isBulkVehicle === 1 ? '是' : '否'
      const isBlackvehicle = this.viewThisRow.isBlackvehicle;
      this.viewThisRow.blackFlag = isBlackvehicle === 1 ? '是' : '否'
      const obuUserType = this.viewThisRow.obuUserType;
      if (obuUserType === 1) {
        this.viewThisRow.obuUserTypeText = '个人';
      } else if (obuUserType === 2) {
        this.viewThisRow.obuUserTypeText = '单位';
      } else {
        this.viewThisRow.obuUserTypeText = '未知';
      }
      this.viewShow = true
      //查询车头照片
      this.showCarFrontPic = false;
      this.notCarFrontPic = false;
      this.queryCarFrontPic();
      //查询车尾照片
      this.showCarRearPic = false;
      this.notCarRearPic = false;
      this.queryCarRearPic();
      //查询车牌照片/车侧身照片
      this.showPlatePic = false;
      this.notPlatePic = false;
      this.queryPlatePic();
      //查询短视频
      this.showShortVideo = false;
      this.notShortVideo = false;
      this.queryShortVideoUrl();


    },
    queryShortVideoUrl() {
      const videNo = this.viewThisRow.videoId;
      // const videNo = '0F058E042D1D62A895B';
      if (videNo === null || videNo === ''||videNo === '0' || videNo === undefined || videNo === 'undefined') {
        this.notShortVideo = true;
        this.shortVideoLoad = false;
        this.showShortVideo = false;
        return;
      }
      this.showShortVideo = true;
      this.videoSrc=axios.defaults.baseURL+'/AggregationProgram/getVideo?videNo='+videNo;
      // this.shortVideoLoad = true;
      // const shortvideo = this.viewThisRow.videoId;
      // if (shortvideo === null || shortvideo === '' || shortvideo === undefined || shortvideo === 'undefined') {
      //   this.notShortVideo = true;
      //   this.shortVideoLoad = false;
      //   return;
      // }
      // queryImageInfo({
      //   "listNO": shortvideo,
      // }).then((res) => {
      //   if (res.code === 0) {
      //     // console.log(res)
      //     if (res.data != null && res.data.length > 0) {
      //
      //       this.shortVideoUrl = res.data
      //       this.showShortVideo = true;
      //       this.notShortVideo = false;
      //       this.shortVideoLoad = false;
      //
      //     } else {
      //       this.notShortVideo = true;
      //       this.shortVideoLoad = false;
      //     }
      //   } else {
      //     this.notShortVideo = true;
      //     this.shortVideoLoad = false;
      //
      //   }
      // })

    },
    openNewPage() {
      window.open(this.shortVideoUrl)
    },
    queryPlatePic() {
      this.platePicLoad = true;
      let platepic ='';
      let imgType ='';
      if (this.isDisplayed){
        platepic = this.viewThisRow.sidePicId;
        imgType='1'
      }else {
        platepic = this.viewThisRow.backup3;
        imgType='15'
      }
      // const platepic = this.viewThisRow.sidePicId;
      console.log(platepic)
      if (platepic === null || platepic === '' || platepic === '0' || platepic === undefined || platepic === 'undefined') {
        this.notPlatePic = true;
        this.platePicLoad = false;
        return;
      }
      queryImageInfo({
        "listNO": platepic,
        "imgType": imgType
      }).then((res) => {
        if (res.code === 0) {
          // console.log(res)
          if (res.data != null && res.data.length > 2) {
            let blob = this.dataURLtoBlob(res.data)
            let url = URL.createObjectURL(blob);
            // 示例1：将 base64 字符串转换为图片 Blob 对象
            this.platePic = url
            this.platePicList = [url]
            this.showPlatePic = true;
            this.platePicLoad = false;

          } else {
            this.notPlatePic = true;
            this.platePicLoad = false;
          }
        } else {
          this.notPlatePic = true;
          this.platePicLoad = false;

        }
      })
    },
    queryCarRearPic() {
      this.carRearPicLoad = true;
      const tailpic = this.viewThisRow.tailPicId;
      if (tailpic === null || tailpic === '' ||tailpic === '0'|| tailpic === undefined || tailpic === 'undefined') {
        this.notCarRearPic = true;
        this.carRearPicLoad = false;
        return;
      }
      queryImageInfo({
        "listNO": tailpic,
        "imgType": "1"
      }).then((res) => {
        if (res.code === 0) {
          // console.log(res.data)
          if (res.data != null && res.data.length > 2) {
            let blob = this.dataURLtoBlob(res.data)
            let url = URL.createObjectURL(blob);
            // 示例1：将 base64 字符串转换为图片 Blob 对象
            this.carRearPic = url
            this.carRearPicList = [url]
            this.showCarRearPic = true;
            this.carRearPicLoad = false;

          } else {
            this.notCarRearPic = true;
            this.carRearPicLoad = false;
          }
        } else {
          this.notCarRearPic = true;
          this.carRearPicLoad = false;
        }
      })
    },
    queryCarFrontPic() {
      this.carFrontPicLoad = true;
      const listno = this.viewThisRow.listno;
      if (listno === null || listno === '' ||listno === '0'|| listno === undefined || listno === 'undefined') {
        this.notCarFrontPic = true;
        this.carFrontPicLoad = false;
        return;
      }
      queryImageInfo({
        "listNO": listno,
        "imgType": "1"
      }).then((res) => {
        if (res.code === 0) {
          // console.log(res.data)
          if (res.data != null && res.data.length > 2) {
            let blob = this.dataURLtoBlob(res.data)
            let url = URL.createObjectURL(blob);
            // 示例1：将 base64 字符串转换为图片 Blob 对象
            this.carFrontPic = url
            this.carFrontPicList = [url]
            this.showCarFrontPic = true;
            this.carFrontPicLoad = false;

          } else {
            this.notCarFrontPic = true;
            this.carFrontPicLoad = false;
          }
        } else {
          this.notCarFrontPic = true;
          this.carFrontPicLoad = false;
        }
      })
    },


    /**
     * base64数据转为Blob
     * @ {String} base64数据
     * @return {Object} Blob
     */
    dataURLtoBlob: function (base64Data) {
      let tmp = base64Data.split(',');
      if (tmp.length === 2) { // 如果base64包含头部的话，去掉base64的头
        tmp.shift()
      }
      const bytes = window.atob(tmp); // 转换为byte;
      // 处理异常,将ascii码小于0的转换为大于0
      const ab = new ArrayBuffer(bytes.length);
      const ia = new Uint8Array(ab);
      for (let i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i)
      }
      return new Blob([ia], {type: 'application/octet-stream'})
    },

    reNetwork() {
      this.searchForm = {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        dT: [moment(new Date().setTime(new Date().getTime())).format('YYYY-MM-DD'), moment(new Date()).format('YYYY-MM-DD')],
      };
      this.network()
    },
    network() {
      this.tableLoading = true;
      this.searchForm.staList=this.exportStaList;
      getExportPage(this.searchForm).then((res) => {
        if (res.records != null) {
          // console.log(res.records)
          // 转换字段名
          this.tableData = this.transformData(res.records);
          // this.tableData = res.records;
          this.searchForm.total = res.total;
          this.searchForm.pageNum = res.current;
          this.searchForm.pageSize = res.size;
        } else {
          ElMessage.error('查询失败！')
        }
        this.tableLoading = false;
        this.searchShow = false;
      })
    },

    dateFormatDay(row, column) {
      return pro.dateFormatDay(row[column.property]);
    },
    handleSizeChange(val) { //页大小改变
      this.searchForm.pageSize = val
      this.network()
    },
    handleCurrentChange(val) { //当前页改变
      this.searchForm.pageNum = val
      this.network()
    },
    fetchVersion(){
      queryProgramVersion().then((res) => {
        // console.log(res)
        this.version = res.data;

      })
    },
  },
  mounted() {
    this.queryUserBasic();
    this.queryJurisdictionexportStaList();
    getCarTypeList().then((res) => {
      this.CarTypeList = res;
    })
    displayedSideImage().then((res) => {
      this.isDisplayed = res.data;
    })

    // document.documentElement.style.setProperty('--el-bg-color', '#2f39a4')
    this.myHeight = (document.documentElement.clientHeight) * 0.86;
    this.fetchVersion();
  }
}
</script>

<style scoped>
.version-info {
  position: fixed;
  top: 10px;        /* 调整为页面顶部 */
  right: 10px;      /* 调整为页面右侧 */
  font-size: 12px;
  color: #332f2f;
  z-index: 1000;    /* 确保版本号在最上层 */
}

</style>
