DataCenter/src/views/voyage/voyageDetail.vue

<template>
  <div class="line-container-p24">
    <i class="el-icon-arrow-left"></i>
    <div
      class="dib go-back ml8 pointer"
      @click="router.replace('/voyage/voyageList')"
    >
      返回航次列表
    </div>
  </div>

  <div class="container-title df aic jcsb">
    <div class="df aic">
      <div class="mr30">航次信息</div>
      <el-tooltip
        v-if="blockchainInfo"
        class="box-item"
        effect="light"
        :content="blockchainInfo.hash"
        placement="top"
      >
        <div class="pointer" style="font-size: 14px; font-weight: normal">
          汇很多科技区块链认证
        </div>
      </el-tooltip>
    </div>
  </div>
  <div class="line-container-p24">
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">航次名称</div>
        <el-input
          class="info-line-text"
          v-model="voyage.voyageName"
          disabled
        ></el-input>
      </div>
      <div class="info-gap" v-if="shipAudits.length"></div>
      <div class="info-line">
        <div class="info-line-title">货主</div>
        <el-input
          class="info-line-text"
          v-model="voyage.cargoOwnerName"
          disabled
        ></el-input>
      </div>
    </div>
    <!-- <div class="line">
      <div class="info-line">
        <div class="info-line-title">船东</div>
        <el-input
          class="info-line-text"
          v-model="voyage.shipOwnerName"
          disabled
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">船东手机号</div>
        <el-input
          class="info-line-text"
          v-model="voyage.shipOwnerPhone"
          disabled
        ></el-input>
      </div>
    </div> -->
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">船舶名称</div>
        <el-input
          class="info-line-text"
          v-model="voyage.shipName"
          disabled
        ></el-input>
      </div>
      <div
        class="info-gap"
        v-if="shipAudits.length"
        @click="isCertsVisable = true"
      >
        汇很多认证
      </div>
      <el-dialog
        @open="showCerts"
        v-model="isCertsVisable"
        destroy-on-close
        width="30%"
      >
        <Certs ref="certs"></Certs>
      </el-dialog>
      <div class="info-line">
        <div class="info-line-title">MMSI</div>
        <el-input
          class="info-line-text"
          v-model="voyage.shipMmsi"
          disabled
        ></el-input>
      </div>
    </div>
    <div :id="mapId" class="map-container"></div>
    <div class="line" style="margin-top: 30px">
      <div class="info-line">
        <div class="info-line-title">开始时间</div>
        <el-input
          class="info-line-text"
          v-model="voyage.startTime"
          disabled
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">结束时间</div>
        <el-input
          class="info-line-text"
          v-model="voyage.endTime"
          disabled
        ></el-input>
      </div>
    </div>
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">装货港</div>
        <el-input
          class="info-line-text"
          v-model="voyage.loadPort"
          disabled
        ></el-input>
      </div>
    </div>
    <div class="line">
      <div class="info-line" v-for="(item, index) in voyage.voyageDetails">
        <div class="info-line-title">{{ "第 " + (index + 1) + " 卸货港" }}</div>
        <el-input
          class="info-line-text"
          v-model="item.portName"
          disabled
        ></el-input>
      </div>
      <!-- <div v-if="voyage.voyageStatus != 2">
        <div
          class="info-line"
          v-if="!insertDiscPortVisable"
          style="margin-left: 140px"
        >
          <el-button type="primary" @click="insertDiscPortVisable = true"
            >添加提前卸货港</el-button
          >
        </div>
        <div class="info-line" v-else style="margin-left: 40px">
          <div class="info-line-title" style="width: 80px">提前卸货港</div>
          <el-autocomplete
            class="info-line-text mr20"
            v-model="toInsertDiscPortValue"
            :fetch-suggestions="getCol"
            @blur="clear('toInsertDiscPortId')"
            placeholder="选择卸货港"
            @select="selectToInsertDiscProt($event)"
            style="width: 120px !important"
          />
          <el-button type="primary" @click="addNewPort">确认添加</el-button>
          <el-button type="default" @click="cancelInsertDiscPort"
            >取消添加</el-button
          >
        </div>
      </div> -->
    </div>
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">货种</div>
        <el-input
          class="info-line-text"
          v-model="voyage.cargo"
          disabled
        ></el-input>
      </div>
      <div class="info-line">
        <div style="width: 120px !important" class="info-line-title">货量</div>
        <el-input
          style="width: 100px !important"
          class="info-line-text"
          v-model="voyage.tons"
          disabled
        ></el-input>
        <span class="unit">吨</span>
        <el-input
          style="width: 80px !important"
          class="info-line-text"
          v-model="voyage.pieces"
          disabled
        ></el-input>
        <span class="unit">件</span>
      </div>
    </div>
    <div class="container-second-title df aic jcsb mt40">
      <div>船舶运输记录详情</div>
      <!-- <div class="df aic">
        <div v-if="voyage.voyageStatus == 1">
          <el-button
            class="mr20"
            v-if="disabledStatus"
            type="primary"
            @click="changeVoyageInfo"
          >
            修改航次
          </el-button>
          <div v-else>
            <div>
              <el-button class="ml20" @click="cancelVoyageChange">
                取消修改
              </el-button>
              <el-button
                class="ml20 mr20"
                type="primary"
                @click="submitVoyageChange"
              >
                提交修改
              </el-button>
            </div>
          </div>
        </div>
        <el-button
          style="width: 160px"
          type="primary"
          @click="downloadExcel"
          :loading="isLoadingExcel"
        >
          下载船舶跟踪表
        </el-button>
      </div> -->
    </div>
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">到达装货港时间</div>
        <el-date-picker
          class="info-line-text"
          v-model="voyage.arrivalLoadPortTime"
          type="datetime"
          format="YYYY/MM/DD HH:mm"
          value-format="YYYY/MM/DD HH:mm:ss"
          placeholder="到达装货港时间"
          :disabled="disabledStatus"
        ></el-date-picker>
      </div>
      <div class="info-line">
        <div class="info-line-title">实装货量</div>
        <el-input
          style="width: 100px !important"
          class="info-line-text"
          v-model="voyage.actualLoadTons"
          :disabled="disabledStatus"
          placeholder="实装吨位"
        ></el-input>
        <span class="unit">吨</span>
        <el-input
          style="width: 80px !important"
          class="info-line-text"
          v-model="voyage.actualLoadPieces"
          :disabled="disabledStatus"
          placeholder="实装件数"
        ></el-input>
        <span class="unit">件</span>
      </div>
    </div>
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">装货开始时间</div>
        <el-date-picker
          class="info-line-text"
          v-model="voyage.loadStartTime"
          type="datetime"
          format="YYYY/MM/DD HH:mm"
          value-format="YYYY/MM/DD HH:mm:ss"
          placeholder="装货开始时间"
          :disabled="disabledStatus"
        ></el-date-picker>
      </div>
      <div class="info-line">
        <div class="info-line-title">装货结束时间</div>
        <el-date-picker
          class="info-line-text"
          v-model="voyage.loadEndTime"
          type="datetime"
          format="YYYY/MM/DD HH:mm"
          value-format="YYYY/MM/DD HH:mm:ss"
          placeholder="装货开始时间"
          :disabled="disabledStatus"
        ></el-date-picker>
      </div>
    </div>
    <el-tabs v-model="currentPortId" type="border-card" class="demo-tabs mb20">
      <el-tab-pane
        v-for="(item, index) in voyage.voyageDetails"
        :label="item.portName + ' # ' + (index + 1)"
        :name="item.portId + ''"
      >
        <div class="line">
          <div class="info-line">
            <div class="info-line-title">开航时间</div>
            <el-date-picker
              class="info-line-text"
              v-model="item.setSailTime"
              type="datetime"
              @change="calExpectedArrivalTime"
              format="YYYY/MM/DD HH:mm"
              value-format="YYYY/MM/DD HH:mm:ss"
              placeholder="开航时间"
              :disabled="disabledStatus"
            ></el-date-picker>
          </div>
          <div class="info-line">
            <div class="info-line-title">预计到港时间</div>
            <el-date-picker
              class="info-line-text"
              v-model="item.expectedArrivalTime"
              type="datetime"
              format="YYYY/MM/DD"
              value-format="YYYY/MM/DD HH:mm:ss"
              placeholder="预计到港时间"
              :disabled="disabledStatus"
            ></el-date-picker>
          </div>
        </div>
        <div class="line">
          <div class="info-line">
            <div class="info-line-title">实际到港时间</div>
            <el-date-picker
              class="info-line-text"
              v-model="item.actualArrivalTime"
              type="datetime"
              format="YYYY/MM/DD HH:mm"
              value-format="YYYY/MM/DD HH:mm:ss"
              placeholder="实际到港时间"
              :disabled="disabledStatus"
            ></el-date-picker>
          </div>
          <!-- <div class="info-line">
        <div class="info-line-title">抵达目的地港时间</div>
        <el-date-picker
          class="info-line-text"
          v-model="voyage.arrivalPortTime"
          type="datetime"
          format="YYYY/MM/DD HH:mm:ss"
          value-format="YYYY/MM/DD HH:mm:ss"
          placeholder="抵达目的地港时间"
          :disabled="disabledStatus"
        ></el-date-picker>
      </div> -->
        </div>
        <div class="line">
          <div class="info-line">
            <div class="info-line-title">卸货开始时间</div>
            <el-date-picker
              class="info-line-text"
              v-model="item.dischargeStartTime"
              type="datetime"
              format="YYYY/MM/DD HH:mm"
              value-format="YYYY/MM/DD HH:mm:ss"
              placeholder="卸货开始时间"
              :disabled="disabledStatus"
            ></el-date-picker>
          </div>
          <div class="info-line">
            <div class="info-line-title">卸货结束时间</div>
            <el-date-picker
              class="info-line-text"
              v-model="item.dischargeEndTime"
              type="datetime"
              format="YYYY/MM/DD HH:mm"
              value-format="YYYY/MM/DD HH:mm:ss"
              placeholder="卸货结束时间"
              :disabled="disabledStatus"
            ></el-date-picker>
          </div>
        </div>
        <div class="line">
          <div class="info-line">
            <div class="info-line-title">实际卸货量</div>
            <el-input
              style="width: 100px !important"
              class="info-line-text"
              placeholder="实际卸货吨位"
              v-model="item.actualDischargeTons"
              :disabled="disabledStatus"
            ></el-input>
            <span class="unit">吨</span>
            <el-input
              style="width: 80px !important"
              class="info-line-text"
              placeholder="实际卸货件数"
              v-model="item.actualDischargePieces"
              :disabled="disabledStatus"
            ></el-input>
            <span class="unit">件</span>
          </div>
          <!-- <div class="info-line">
        <div class="info-line-title">是否购买保险</div>
        <el-checkbox
          v-model="voyage.hasInsurance"
          :checked="voyage.hasInsurance == 1"
          :disabled="disabledStatus"
          label="购买保险"
        ></el-checkbox>
      </div> -->
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">备注</div>
        <el-input
          class="info-line-textarea"
          v-model="voyage.remark"
          autosize
          type="textarea"
          :disabled="disabledStatus"
        ></el-input>
      </div>
    </div>
  </div>
  <div class="container-title">卸货信息</div>
  <div class="line-container-p24">
    <el-tabs
      v-model="currentDiscPortId"
      type="card"
      class="demo-tabs"
      @tab-click="changeDiscPortTab"
    >
      <el-tab-pane
        v-for="(item, index) in voyage.voyageDetails"
        :label="item.portName + ' # ' + (index + 1)"
        :name="item.portId + ''"
      ></el-tab-pane>
    </el-tabs>
    <div class="container-second-title df aic jcsb">
      <div>天气信息</div>
    </div>
    <el-table style="width: 1200px" :data="weatherTableData" stripe>
      <el-table-column
        type="index"
        label="序号"
        min-width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="weather"
        label="天气"
        min-width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="temperature"
        label="温度"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="winddirection"
        label="风向"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="windpower"
        label="风力"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="reporttime"
        label="记录时间"
        min-width="100"
        align="center"
      >
        <template v-slot="scope">
          {{ subTimeStr(scope.row.reporttime, 16) }}
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 1200px; text-align: right; margin-top: 43px">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="weatherCurrentPage"
        :total="weatherTotal"
        @current-change="weatherPageChange"
      ></el-pagination>
    </div>
    <div class="hr mt20"></div>

    <div class="container-second-title df aic jcsb mt40">
      <div>提单信息</div>
      <!-- <div>
        <el-button type="primary" @click="showAddLab()">
          新增提单记录
        </el-button>
      </div> -->
    </div>
    <el-table :data="labTableData" stripe style="width: 1200px">
      <el-table-column
        type="index"
        label="序号"
        min-width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="billingNum"
        label="开单数量"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="billingDate"
        label="开单日期"
        min-width="120"
        align="center"
      ></el-table-column>
      <el-table-column label="单据" min-width="150" align="center">
        <template v-slot="scope">
          <el-button
            @click="showLab(scope.row, scope.$index, '查看提单')"
            type="primary"
            size="small"
          >
            {{ scope.row.file ? "查看" : "上传" }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="150" align="center">
        <template v-slot="scope">
          <el-button
            @click="showLab(scope.row, scope.$index, '修改提单')"
            type="primary"
            size="small"
          >
            修改
          </el-button>
          <el-button
            @click="deleteLab(scope.row.id, scope.$index)"
            type="danger"
            size="small"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right; margin-top: 43px; width: 1200px">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="labCurrentPage"
        :total="labTotal"
        @current-change="labPageChange"
      ></el-pagination>
    </div>
    <el-dialog
      v-model="isAddLabVisable"
      :title="labModalType"
      width="780px"
      center
      @close="cancelUploadLab"
      destroy-on-close
    >
      <el-form
        :model="labForm"
        inline
        style="margin-bottom: 20px"
        label-width="100px"
      >
        <el-form-item label="开单日期">
          <el-date-picker
            class="info-line-text"
            v-model="labForm.billingDate"
            type="date"
            format="YYYY/MM/DD"
            value-format="YYYY/MM/DD"
            placeholder="开单日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="开单数量">
          <el-input
            style="width: 240px"
            v-model="labForm.billingNum"
            placeholder="开单数量"
          ></el-input>
        </el-form-item>
        <el-form-item label="提单">
          <Uploader
            :actionUrl="store.state.wayBillUrl"
            :uploaderId="'labLoad'"
            :params="labParams"
            @onSendFileList="getLabBillList"
            :fileList="labBillList"
            uploadText="上传提单"
            :limit="1"
          ></Uploader>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="cancelUploadLab">取消</el-button>
        <el-button style="margin-left: 30px" type="primary" @click="addLab">
          提交
        </el-button>
      </template>
    </el-dialog>
    <div class="hr mt20"></div>

    <div class="container-second-title df aic jcsb">
      <div>卸货记录</div>
      <div>
        <!-- <el-button
          class="mr20"
          type="primary"
          @click="isAddPoundVisable = true"
        >
          新增卸货记录
        </el-button>
        <el-button
          @click="exportDischargeExcel"
          style="width: 160px"
          type="primary"
          :loading="isDischargeLoadingExcel"
          >下载卸货信息</el-button
        > -->
      </div>
    </div>
    <el-table
      style="width: 1200px"
      :data="dischargeList"
      stripe
      :disabled="disabledStatus"
    >
      <el-table-column
        type="index"
        label="序号"
        min-width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="dischargeTime"
        label="卸货时间"
        min-width="120"
        align="center"
      >
        <template v-slot="scope">
          {{ subTimeStr(scope.row.dischargeTime, 16) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="dischargeTons"
        label="卸货吨位"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="dischargePieces"
        label="卸货件数"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column label="磅单" min-width="150" align="center">
        <template v-slot="scope">
          <el-button
            @click="showUpdateDischarge(scope.row, scope.$index)"
            type="primary"
            size="small"
          >
            {{ scope.row.files ? "查看" : "上传" }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="150" align="center">
        <template v-slot="scope">
          <el-button
            @click="showUpdateDischarge(scope.row, scope.$index)"
            type="primary"
            size="small"
          >
            修改
          </el-button>
          <el-button
            @click="deleteDischarge(scope.row.id, scope.$index)"
            type="danger"
            size="small"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 1200px; text-align: right; margin-top: 43px">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="currentPage"
        :total="total"
        @current-change="pageChange"
      ></el-pagination>
    </div>
    <el-dialog v-model="isAddPoundVisable" destroy-on-close>
      <el-form :model="formInline">
        <el-form-item label="卸货时间">
          <el-date-picker
            class="info-line-text"
            v-model="formInline.dischargeTime"
            type="datetime"
            format="YYYY/MM/DD HH:mm:ss"
            value-format="YYYY/MM/DD HH:mm:ss"
            placeholder="卸货时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="卸货吨位">
          <el-input
            class="info-line-text"
            v-model="formInline.dischargeTons"
            placeholder="卸货吨位"
          ></el-input>
        </el-form-item>
        <el-form-item label="卸货件数">
          <el-input
            class="info-line-text"
            v-model="formInline.dischargePieces"
            placeholder="卸货件数"
          ></el-input>
        </el-form-item>
        <el-form-item label="卸货记录">
          <Uploader
            :actionUrl="store.state.wayBillUrl"
            :uploaderId="'pound'"
            :params="poundParams"
            @onSendFileList="getPoundBillList"
            :fileList="poundBillList"
            uploadText="拖拽或点击上传磅单"
          ></Uploader>
        </el-form-item>
      </el-form>
      <div class="df aic jcfe mb30">
        <el-button type="primary" @click="addDischarge"> 新增 </el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-model="updateDischargeDialog"
      title="修改记录"
      width="700px"
      center
      destroy-on-close
    >
      <el-form :model="updateForm" style="margin-bottom: 20px">
        <!-- <el-form-item label="记录ID">
            <span style="padding-left: 20px">{{ updateForm.id }}</span>
          </el-form-item> -->
        <el-form-item label="卸货时间">
          <el-date-picker
            class="info-line-text"
            v-model="updateForm.dischargeTime"
            type="datetime"
            format="YYYY/MM/DD HH:mm:ss"
            value-format="YYYY/MM/DD HH:mm:ss"
            placeholder="卸货时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="卸货吨位">
          <el-input
            style="width: 240px"
            v-model="updateForm.dischargeTons"
            placeholder="卸货吨位"
          ></el-input>
        </el-form-item>
        <el-form-item label="上传磅单">
          <Uploader
            :actionUrl="store.state.wayBillUrl"
            :uploaderId="'updatePound'"
            :params="updatePoundParams"
            @onSendFileList="getupdatePoundBillList"
            :fileList="updatePoundBillList"
            uploadText="拖拽或点击上传磅单"
          ></Uploader>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="cancelUpdateDischarge">取消</el-button>
        <el-button
          style="margin-left: 30px"
          type="primary"
          @click="updateDischarge"
        >
          提交
        </el-button>
      </template>
    </el-dialog>
    <el-dialog
      v-model="dialogVisible"
      title="图片预览"
      width="30%"
      destroy-on-close
    >
      <el-image
        :src="dialogImageUrl"
        style="height: 100%; width: 100%"
      ></el-image>
    </el-dialog>

    <div class="hr m30-0"></div>
    <div class="container-second-title df aic jcsb mt40">
      <div>汽车装货记录详情</div>
      <div>
        <!-- <el-button type="primary" @click="showAddTruckRecord()">
          新增汽车装货记录
        </el-button> -->
      </div>
    </div>
    <el-table :data="truckTableData" stripe>
      <el-table-column
        type="index"
        label="序号"
        min-width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="portName"
        label="港口名称"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="weighTime"
        label="称重时间"
        min-width="120"
        align="center"
      >
        <template v-slot="scope">
          {{ subTimeStr(scope.row.weighTime, 16) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="carNum"
        label="车号"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="cargoName"
        label="货物名称"
        min-width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="shippingUnit"
        label="发货单位"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="receivingUnit"
        label="收货单位"
        min-width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="grossWeight"
        label="毛重"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="tare"
        label="皮重"
        min-width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="netWeight"
        label="净重"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="shipName"
        label="货船名称"
        min-width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="weigher"
        label="司磅员"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column label="单据" min-width="150" align="center">
        <template v-slot="scope">
          <el-button
            @click="showTruckRecord(scope.row, scope.$index, '查看单据')"
            type="primary"
            size="small"
          >
            {{ scope.row.file ? "查看" : "上传" }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="150" align="center">
        <template v-slot="scope">
          <el-button
            @click="showTruckRecord(scope.row, scope.$index, '修改单据')"
            type="primary"
            size="small"
          >
            修改
          </el-button>
          <el-button
            @click="deleteTruckRecord(scope.row.id, scope.$index)"
            type="danger"
            size="small"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right; margin-top: 43px">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="truckCurrentPage"
        :total="truckTotal"
        @current-change="truckPageChange"
      ></el-pagination>
    </div>
    <!-- <div class="hr mt20"></div>
    <div class="df aic jcfe mt20" v-if="voyage.voyageStatus == 1">
      <el-button type="primary" class="mr20" @click="cancelVoyage">
        取消航次
      </el-button>
      <el-button
        v-if="voyage.canComplete && disabledStatus"
        type="primary"
        @click="finishVoyage"
      >
        完成航次
      </el-button>
    </div> -->
    <el-dialog
      v-model="isAddTruckRecordVisable"
      :title="truckRecordModalType"
      width="780px"
      center
      @close="cancelUploadTruckRecord"
      destroy-on-close
    >
      <el-form
        :model="truckRecordForm"
        inline
        style="margin-bottom: 20px"
        label-width="100px"
      >
        <el-form-item label="港口名称">
          <el-input
            style="width: 240px"
            v-model="truckRecordForm.portName"
            placeholder="港口名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="称重时间">
          <el-date-picker
            class="info-line-text"
            v-model="truckRecordForm.weighTime"
            type="datetime"
            format="YYYY/MM/DD HH:mm:ss"
            value-format="YYYY/MM/DD HH:mm:ss"
            placeholder="称重时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="车号">
          <el-input
            style="width: 240px"
            v-model="truckRecordForm.carNum"
            placeholder="车号"
          ></el-input>
        </el-form-item>
        <el-form-item label="货物名称">
          <el-input
            style="width: 240px"
            v-model="truckRecordForm.cargoName"
            placeholder="货物名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="发货单位">
          <el-input
            style="width: 240px"
            v-model="truckRecordForm.shippingUnit"
            placeholder="发货单位"
          ></el-input>
        </el-form-item>
        <el-form-item label="毛重">
          <el-input
            style="width: 240px"
            v-model="truckRecordForm.grossWeight"
            placeholder="毛重"
          ></el-input>
        </el-form-item>
        <el-form-item label="收货单位">
          <el-input
            style="width: 240px"
            v-model="truckRecordForm.receivingUnit"
            placeholder="收货单位"
          ></el-input>
        </el-form-item>
        <el-form-item label="皮重">
          <el-input
            style="width: 240px"
            v-model="truckRecordForm.tare"
            placeholder="皮重"
          ></el-input>
        </el-form-item>
        <el-form-item label="运输单位">
          <el-input
            style="width: 240px"
            v-model="truckRecordForm.transUnit"
            placeholder="运输单位"
          ></el-input>
        </el-form-item>
        <el-form-item label="净重">
          <el-input
            style="width: 240px"
            v-model="truckRecordForm.netWeight"
            placeholder="净重"
          ></el-input>
        </el-form-item>
        <el-form-item label="货船名称">
          <el-input
            style="width: 240px"
            v-model="truckRecordForm.shipName"
            placeholder="货船名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="司磅员">
          <el-input
            style="width: 240px"
            v-model="truckRecordForm.weigher"
            placeholder="司磅员"
          ></el-input>
        </el-form-item>
        <el-form-item label="汽车装货单">
          <Uploader
            :actionUrl="store.state.wayBillUrl"
            :uploaderId="'truckLoad'"
            :params="truckLoadParams"
            @onSendFileList="getTruckLoadBillList"
            :fileList="truckRecordBillList"
            uploadText="上传装货单"
            :limit="1"
          ></Uploader>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="cancelUploadTruckRecord">取消</el-button>
        <el-button
          style="margin-left: 30px"
          type="primary"
          @click="addTruckLoadRecord"
        >
          提交
        </el-button>
      </template>
    </el-dialog>
  </div>
  <div class="container-title">单据信息</div>
  <div class="line-container-p24">
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">保险单</div>
        <el-image
          style="height: 200px; width: 200px; object-fit: contain"
          v-for="item in policyFileList"
          :src="item.viewUrl"
          :preview-src-list="prePolicyFileList"
        ></el-image>

        <!-- <el-upload
          drag
          multiple
          :action="store.state.wayBillUrl"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemovePolicy"
          :data="policyParams"
          :on-success="policyUploadSuccess"
          :file-list="policyFileList"
        >
          <div class="upload-plus-icon">+</div>
          <div class="upload-text">拖拽或点击上传</div>
        </el-upload> -->
      </div>
    </div>
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">运单</div>
        <el-image
          style="height: 200px; width: 200px; object-fit: contain"
          v-for="item in voyageBill"
          :src="item.viewUrl"
          :preview-src-list="preVoyageBill"
        ></el-image>
        <!-- <el-upload
          drag
          multiple
          :action="store.state.wayBillUrl"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemoveBill"
          :data="billParams"
          :on-success="billUploadSuccess"
          :file-list="voyageBill"
        >
          <div class="upload-plus-icon">+</div>
          <div class="upload-text">拖拽或点击上传</div>
        </el-upload> -->
      </div>
    </div>
  </div>
  <!-- <div class="container-title">运单列表</div>
  <div class="line-container-p24">
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">上传航次运单</div>
        <el-upload
          drag
          multiple
          :action="store.state.wayBillUrl"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemoveBill"
          :data="billParams"
          :on-success="billUploadSuccess"
          :file-list="voyageBill"
        >
          <div class="upload-plus-icon">+</div>
          <div class="upload-text">拖拽或点击上传</div>
        </el-upload>
      </div>
    </div>
  </div> -->
  <!-- <div class="container-title">磅单列表</div>
  <div class="line-container-p24">
    <div class="line" style="margin-bottom: 60px">
      <div class="info-line">
        <div class="info-line-title">上传磅单</div>
        <el-upload
          drag
          multiple
          :action="store.state.wayBillUrl"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemovePoundBill"
          :data="poundParams"
          :on-success="poundBillUploadSuccess"
          :file-list="poundBill"
        >
          <div class="upload-plus-icon">+</div>
          <div class="upload-text">拖拽或点击上传</div>
        </el-upload>
      </div>
    </div>
  </div> -->
  <!-- <div class="container-title">船舶证书</div>
  <div class="line-container-p24">
    <Certs ref="certs"></Certs>
  </div> -->
  <div class="container-title df aic jcsb">
    <div @click="getVoyageDetail()">单据图片分配</div>
    <!-- <div>
      <el-checkbox
        v-model="isCheckAll"
        @change="checkAll"
        :indeterminate="isIndeterminate"
        size="large"
        style="margin-right: 20px"
        >全选</el-checkbox
      >
      <el-button
        style="width: 220px; margin-right: 20px"
        type="primary"
        @click="showDistributeModal"
      >
        分配单据
      </el-button>
    </div> -->
  </div>
  <div class="line-container-p24">
    <div v-show="shipownerUploadFiles.length" class="df aic fww">
      <div
        style="
          width: 100px;
          text-align: center;
          margin-right: 20px;
          margin-bottom: 20px;
        "
        v-for="item in shipownerUploadFiles"
      >
        <el-image
          style="height: 100px; width: 100px"
          fit="contain"
          :src="item.viewUrl"
          :preview-src-list="previewList"
        ></el-image>
        <div style="width: 100px; text-align: center; font-size: 12px">
          {{ item.createTime }}
        </div>
        <div class="tac">
          <el-checkbox
            @change="checkItem"
            v-model="item.checked"
            size="large"
          ></el-checkbox>
        </div>
      </div>
    </div>
    <div
      v-show="!shipownerUploadFiles.length"
      style="text-align: center; font-size: 24px; color: #ccc"
    >
      暂无单据图片
    </div>
  </div>
  <el-dialog
    title="单据分配"
    v-model="isDistributeModalVisable"
    @closed="distributeModalClose"
    destroy-on-close
    width="80%"
  >
    <h4 class="mb10">请选择卸货港:</h4>
    <div class="df aic distribute-group">
      <el-button
        v-for="(item, index) in voyage.voyageDetails"
        class="mr20"
        :type="distributePortId == item.portId ? 'primary' : ''"
        @click="distributePortId = item.portId"
        >{{ item.portName }}</el-button
      >
    </div>
    <div class="hr m10-0"></div>
    <h4 class="mb10">请选择单据类型:</h4>
    <div class="df aic distribute-group">
      <el-button
        class="mr20"
        :type="distributeType == 1 ? 'primary' : ''"
        @click="distributeType = 1"
        >运单</el-button
      >
      <el-button
        class="mr20"
        :type="distributeType == 2 ? 'primary' : ''"
        @click="distributeType = 2"
        >磅单</el-button
      >
      <el-button
        :type="distributeType == 4 ? 'primary' : ''"
        @click="distributeType = 4"
        >汽运装货单</el-button
      >
      <!-- <el-radio v-model="distributeType" label="1" size="large">运单</el-radio>
      <el-radio v-model="distributeType" label="2" size="large">磅单</el-radio>
      <el-radio v-model="distributeType" label="4" size="large"
        >汽运装货单</el-radio
      > -->
    </div>
    <div class="hr m10-0"></div>
    <div class="df aic fww" style="max-height: 300px; overflow: scroll">
      <div
        style="
          width: 100px;
          text-align: center;
          margin-right: 20px;
          margin-bottom: 10px;
          border: 2px solid #7598b1;
        "
        v-for="item in checkedImages"
      >
        <el-image
          style="height: 100px; width: 100px"
          fit="contain"
          :src="item.viewUrl"
          :preview-src-list="checkedPreviewList"
        ></el-image>
      </div>
    </div>
    <div class="hr m10-0"></div>
    <div v-show="distributeType == 2">
      <el-form inline :model="distributePoundForm">
        <el-form-item label="卸货时间">
          <el-date-picker
            class="info-line-text"
            v-model="distributePoundForm.dischargeTime"
            type="datetime"
            format="YYYY/MM/DD HH:mm:ss"
            value-format="YYYY/MM/DD HH:mm:ss"
            placeholder="卸货时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="卸货吨位">
          <el-input
            class="info-line-text"
            v-model="distributePoundForm.dischargeTons"
            placeholder="卸货吨位"
          ></el-input>
        </el-form-item>
        <el-form-item label="卸货件数">
          <el-input
            class="info-line-text"
            v-model="distributePoundForm.dischargePieces"
            placeholder="卸货件数"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div v-show="distributeType == 4">
      <div class="tar">
        <el-button @click="ocr" :loading="ocrLoading" type="primary">{{
          ocrLoading ? "正在识别" : "开始识别"
        }}</el-button>
      </div>
      <el-table :data="ocrTruckRecordTableData" stripe max-height="500">
        <el-table-column label="港口名称" min-width="200" align="center">
          <template v-slot="scope">
            <el-input size="small" v-model="scope.row.portName"></el-input>
          </template>
        </el-table-column>
        <!-- <el-table-column label="称重时间" min-width="200" align="center">
          <template v-slot="scope">
            <el-date-picker
              size="small"
              class="info-line-text"
              v-model="scope.row.weighTime"
              type="datetime"
              format="YYYY/MM/DD HH:mm:ss"
              value-format="YYYY/MM/DD HH:mm:ss"
              placeholder="称重时间"
            ></el-date-picker>
          </template>
        </el-table-column> -->
        <el-table-column label="称重时间" min-width="120" align="center">
          <template v-slot="scope">
            <el-input
              :input-style="
                scope.row.weighTime ? {} : { border: '1px solid red' }
              "
              size="small"
              v-model="scope.row.weighTime"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="车号" min-width="120" align="center">
          <template v-slot="scope">
            <el-input
              :input-style="
                scope.row.carNum?.length == 7 ? {} : { border: '1px solid red' }
              "
              size="small"
              v-model="scope.row.carNum"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="货物名称" min-width="120" align="center">
          <template v-slot="scope">
            <el-input size="small" v-model="scope.row.cargoName"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="发货单位" min-width="200" align="center">
          <template v-slot="scope">
            <el-input size="small" v-model="scope.row.shippingUnit"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="收货单位" min-width="200" align="center">
          <template v-slot="scope">
            <el-input
              :input-style="
                scope.row.receivingUnit ? {} : { border: '1px solid red' }
              "
              size="small"
              v-model="scope.row.receivingUnit"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="毛重" min-width="120" align="center">
          <template v-slot="scope">
            <el-input
              :input-style="
                scope.row.grossWeight ? {} : { border: '1px solid red' }
              "
              size="small"
              v-model="scope.row.grossWeight"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="皮重" min-width="120" align="center">
          <template v-slot="scope">
            <el-input
              :input-style="scope.row.tare ? {} : { border: '1px solid red' }"
              size="small"
              v-model="scope.row.tare"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="净重" min-width="120" align="center">
          <template v-slot="scope">
            <el-input
              :input-style="
                scope.row.netWeight ? {} : { border: '1px solid red' }
              "
              size="small"
              v-model="scope.row.netWeight"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="货船名称" min-width="120" align="center">
          <template v-slot="scope">
            <el-input size="small" v-model="scope.row.shipName"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="司磅员" min-width="120" align="center">
          <template v-slot="scope">
            <el-input size="small" v-model="scope.row.weigher"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="查看" min-width="120" align="center">
          <template v-slot="scope">
            <el-image
              style="height: 40px; width: 60px"
              fit="contain"
              :src="scope.row.viewUrl"
              :preview-src-list="ocrImageList"
            ></el-image
          ></template>
        </el-table-column>
        <!-- <el-table-column label="操作" min-width="120" align="center">
          <template v-slot="scope">
            <el-button
              size="small"
              @click="deleteOcrRecord(scope.$index)"
              type="danger"
              >删除</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <div class="hr m10-0"></div>
    <div class="tar">
      <el-button @click="submitDistribute" type="primary">确定</el-button>
    </div>
  </el-dialog>
  <div class="container-title">航次图片</div>
  <div class="line-container-p24">
    <div v-if="medias.length" class="medias-content df ffw">
      <div class="pic-container">
        <div v-for="(item, index) in medias" :key="item" class="pic-main">
          <div
            :class="[
              'box',
              index % 2 == 0 ? '' : 'bottom-box',
              item.status == 1 ? 'now-box' : '',
            ]"
          >
            <div class="card-note">
              {{ item.shipName }} 拍摄于
              <br />
              {{ item.createTime }}
              <br />
              天气 : {{ item.weather.weather }} - 气温 :
              {{ item.weather.temperature }}℃
            </div>
            <div class="medias-box mb10" style="position: relative">
              <el-image
                v-if="item.mediaType == 1"
                style="width: 100%; height: 100%"
                fit="contain"
                :src="item.downloadUrl"
                @click="openMediaModal(item.downloadUrl, 1, '图片审核')"
              ></el-image>
              <video
                style="width: 100%; height: 100%"
                v-else
                :src="item.downloadUrl"
              ></video>
              <img
                @click="openMediaModal(item.downloadUrl, 2, '视频审核')"
                v-if="item.mediaType == 2"
                src="../../assets/icon-player.png"
                style="
                  object-fit: contain;
                  width: 40px;
                  height: 40px;
                  position: absolute;
                  top: calc(50% - 20px);
                  left: calc(50% - 20px);
                  background: #fff;
                  border-radius: 50%;
                "
                alt=""
              />
            </div>
            <div class="checkbox-group df aic jcsa mb10">
              <el-checkbox
                @change="auditMedia(item.id, 1, index, item.mediaType)"
                :model-value="item.audit == 1"
                label="通过"
                disabled
              ></el-checkbox>
              <el-checkbox
                @change="auditMedia(item.id, 2, index, item.mediaType)"
                :model-value="item.audit == 2"
                label="未通过"
                disabled
              ></el-checkbox>
            </div>
            <div class="checkbox-group df aic jcsa">
              <el-checkbox
                @change="markMedia(item.id, 1, index, item.mediaType)"
                :model-value="item.type == 1"
                label="验仓"
                disabled
              ></el-checkbox>
              <el-checkbox
                @change="markMedia(item.id, 2, index, item.mediaType)"
                :model-value="item.type == 2"
                label="清仓"
                disabled
              ></el-checkbox>
            </div>
          </div>
          <div
            :class="[
              's-line',
              index % 2 == 0 ? '' : 'top210px',
              item.status == 1 ? 'now-s-line' : '',
            ]"
          ></div>
          <div :class="['point', item.status == 1 ? '' : 'now-point']"></div>
          <div
            :class="['l-line', item.status == 1 ? 'now-l-line' : '']"
            v-if="index + 1 != medias.length"
          ></div>
        </div>
        <el-dialog v-model="mediaModal" :title="modalTitle" destroy-on-close>
          <el-image
            v-if="modalType == 1"
            style="height: 60vh; display: flex"
            fit="contain"
            :src="currentUrl"
            :preview-src-list="modalPreview"
          ></el-image>
          <video
            v-else
            autoplay
            controls
            style="width: 100%; height: 100%"
            :src="currentUrl"
          ></video>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, reactive, ref, toRefs } from "vue";
import api from "../../apis/fetch";
import { useRoute } from "vue-router";
import _ from "lodash";
import router from "../../router";
import store from "../../store";
import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
import downloadBlobFile from "../../utils/downloadBlobFile";
import url from "../../apis/config";
import { subTimeStr } from "utils/utils";

const route = useRoute();
let map = ref({});
let voyage = ref({});
let medias = ref([]);
let coordinates = ref([]);
let previewSrcList = ref([]);
let shipAudits = ref([]);
let shipownerUploadFiles = ref([]);
let prePolicyFileList = ref([]);
let preVoyageBill = ref([]);
async function getVoyageDetail(isInit) {
  previewList.value = [];
  policyFileList.value = [];
  voyageBill.value = [];
  previewSrcList.value = [];
  shipownerUploadFiles.value = [];
  prePolicyFileList.value = [];
  preVoyageBill.value = [];
  let res = await api.getVoyageDetail({
    type: localStorage.userType,
    voyageId: route.query.id,
  });
  if (res.data.status == 0) {
    ElNotification({
      type: "success",
      title: res.data.msg,
    });
    blockchainInfo.value = res.data.result.blockChain;
    coordinates.value = res.data.result.coordinates;
    voyage.value = res.data.result.voyage;
    voyage.value.startTime = voyage.value.startTime.substring(0, 16);
    currentPortId.value = voyage.value.voyageDetails[0].portId + "";
    currentDiscPortId.value = voyage.value.voyageDetails[0].portId + "";
    medias.value = res.data.result.medias;
    shipAudits.value = res.data.result.shipAudits;
    shipownerUploadFiles.value = res.data.result.shipownerUploadFiles || [];
    for (let i of shipownerUploadFiles.value || []) {
      previewList.value.push(i.viewUrl);
    }
    for (let i of res.data.result.policys || []) {
      policyFileList.value.push({
        ...i,
        url: i.viewUrl,
      });
      prePolicyFileList.value.push(i.viewUrl);
    }
    for (let i of res.data.result.waybills) {
      voyageBill.value.push({
        ...i,
        url: i.viewUrl,
      });
      preVoyageBill.value.push(i.viewUrl);
    }
    for (let i of medias.value) {
      previewSrcList.value.push(i.downloadUrl);
    }
    if (isInit) {
      getDischargeList();
      getTruckLoadRecord();
      getLabList();
      getPortWeatherList();
      initMap();
    }
  } else {
    console.log(res);
    ElNotification({
      type: "error",
      title: res.data.msg,
    });
  }
}
let total = ref(0);
function pageChange(e) {
  dischargeCurrentPage.value = e;
  getDischargeList();
}
async function addDischarge() {
  if (!formInline.value.dischargeTime || !formInline.value.dischargeTons)
    return;
  let arr = [];

  if (poundBillList.value.length) {
    for (let i of poundBillList.value) {
      arr.push(i.response.result.id);
    }
  }
  let res = await api.addDischarge({
    ...formInline.value,
    voyageFileIds: arr.join(","),
    voyageId: route.query.id,
    portId: currentDiscPortId.value,
  });
  if (res.data.status == 0) {
    getDischargeList(1);
    poundBillList.value = [];
    formInline.value = {
      dischargeTons: 0,
      dischargePieces: 0,
    };
  } else {
    console.log(res);
  }
  isAddPoundVisable.value = false;
}
async function deleteDischarge(id, index) {
  let res = await api.deleteDischarge({
    id,
  });
  if (res.data.status == 0) {
    dischargeList.value.splice(index, 1);
    ElNotification({
      type: "success",
      title: res.data.msg,
    });
  } else {
    console.log(res);
    ElNotification({
      type: "error",
      title: res.data.msg,
    });
  }
}
async function exportExcel() {}
let dischargeCurrentPage = ref(1);
let dischargeList = ref([]);
let formInline = ref({
  dischargeTons: 0,
  dischargePieces: 0,
});
async function getDischargeList() {
  let res = await api.getDischargeList({
    voyageId: route.query.id,
    portId: currentDiscPortId.value,
    currentPage: dischargeCurrentPage.value,
    size: 10,
  });
  if (res.data.status == 0) {
    dischargeList.value = res.data.result;
    total.value = res.data.total;
  } else {
    dischargeList.value = [];
    total.value = 0;
  }
}
let updateForm = ref({});
let updateDischargeDialog = ref(false);
async function updateDischarge() {
  let postData = {
    ...updateForm.value,
  };
  let arr = [];
  if (updatePoundBillList.value.length) {
    for (let i of updatePoundBillList.value) {
      arr.push(i.id || i.response.result.id);
    }
    postData.voyageFileIds = arr.join(",");
  } else {
    postData.voyageFileIds = "";
  }
  let res = await api.updateDischarge({
    ...postData,
  });
  if (res.data.status == 0) {
    getDischargeList();
    cancelUpdateDischarge();
    ElNotification({
      type: "success",
      title: res.data.msg,
    });
  } else {
    console.log(res);
    ElNotification({
      type: "error",
      title: res.data.msg,
    });
  }
}
function showUpdateDischarge(item, index) {
  updateDischargeDialog.value = true;
  updatePoundBillList.value = [];

  let { id, dischargeTons, dischargeTime, voyageId, files } = item;
  if (files && files.length) {
    for (let i of files)
      updatePoundBillList.value.push({ id: i.id, url: i.viewUrl });
  }

  updateForm.value = {
    id,
    dischargeTons,
    dischargeTime,
  };
}
function cancelUpdateDischarge() {
  updateDischargeDialog.value = false;
  updateForm.value = {};
  updatePoundBillList.value = [];
}
let mapId = ref(`map${route.query.id}`);
function initMap() {
  let c;
  let longitude = 121.524761;
  let latitude = 31.228721;
  if (medias.value.length) {
    c = Math.floor(medias.value.length / 2);
    longitude = medias.value[c].longitude;
    latitude = medias.value[c].latitude;
  }
  map.value = new AMap.Map(mapId.value, {
    zoom: 16, //级别
    center: [longitude, latitude], //中心点坐标
    mapStyle: "amap://styles/f48d96805f5fa7f5aada657c5ee37017",
    zoomEnable: false,
    dragEnable: false,
  });
  let toolBar = new AMap.ToolBar({
    position: {
      top: "40px",
      right: "40px",
    },
  });
  let hawkEye = new AMap.HawkEye({
    opened: false,
  });
  map.value.addControl(toolBar);
  map.value.addControl(hawkEye);
  let markers = [];
  for (let i of medias.value) {
    let content = `<div style='width:160px'>
        ${
          i.audit == 1
            ? `<img id='img${i.id}' style='width:160px;height:160px;object-fit:contain;' src='${i.viewUrl}'/>`
            : ``
        }
        <img src='https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/ship-red-icon.png' style='display:block;width:20px;height:20px;margin:6px auto'/
      </div>`;

    let marker = new AMap.Marker({
      content,
      position: new AMap.LngLat(i.longitude, i.latitude),
      offset: new AMap.Pixel(-75, i.audit == 1 ? -195 : -30),
    });
    if (i.audit == 1) {
      marker.on("click", () => {
        openMediaModal(i.viewUrl, 1, "航次图片", i);
      });
    }

    markers.push(marker);
  }

  let overlayGroups = new AMap.OverlayGroup(markers);
  map.value.on("complete", function () {
    let t = setTimeout(() => {
      map.value.add(overlayGroups);
      map.value.setFitView(markers, true, [200, 50, 0, 0], 18);
      clearTimeout(t);
    }, 2000);
  });
}

let disabledStatus = ref(true);
let updateCache = {};
function changeVoyageInfo() {
  updateCache = _.cloneDeep(voyage.value);
  disabledStatus.value = false;
}
function cancelVoyageChange() {
  voyage.value = updateCache;
  disabledStatus.value = true;
}
async function submitVoyageChange() {
  let res = await api.updateVoyage({
    ...voyage.value,
    hasInsurance: Number(voyage.value.hasInsurance),
  });
  if (res.data.status == 0) {
    ElNotification({
      type: "success",
      title: res.data.msg,
    });
    disabledStatus.value = true;
  } else {
    ElNotification({
      type: "error",
      title: res.data.msg,
    });
    console.log(res);
  }
  getVoyageDetail();
}
let options = ref([
  { value: 0, label: "请选择" },
  {
    value: 1,
    label: "航行",
  },
  {
    value: 2,
    label: "停泊",
  },
  {
    value: 3,
    label: "装货",
  },
  {
    value: 4,
    label: "运输中",
  },
  {
    value: 5,
    label: "卸货",
  },
]);

async function finishVoyage() {
  if (!voyage.value.canComplete) return;
  let res = await api.finishVoyage({
    voyageId: route.query.id,
  });

  if (res.data.status == 0) {
    ElNotification({
      type: "success",
      title: "航次已完成",
    });
  } else {
    ElNotification({
      type: "error",
      title: res.data.msg,
    });
    console.log(res);
  }
  getVoyageDetail();
}
let currentUrl = ref("");
let mediaModal = ref(false);
let modalType = ref(1);
let modalTitle = ref("");
let modalPreview = ref([]);
function openMediaModal(url, type, title, item = {}) {
  modalPreview.value = [url];
  modalTitle.value = title;
  modalType.value = type;
  currentUrl.value = url;
  mediaModal.value = true;
}

async function auditMedia(mediaId, a, index, mediaType) {
  console.log(mediaId, a, index, mediaType);
  let res = await api.auditMedia({
    mediaId,
    audit: a,
  });
  if (res.data.status == 0) {
    medias.value[index].audit = a;
    ElNotification({
      type: "success",
      title: res.data.msg,
    });
  } else {
    console.log(res);
  }
}

async function markMedia(mediaId, type, index, mediaType) {
  console.log(mediaId, type, index, mediaType);
  let res = await api.markMedia({
    mediaId,
    type,
  });
  if (res.data.status == 0) {
    medias.value[index].type = type;
    ElNotification({
      type: "success",
      title: res.data.msg,
    });
  } else {
    console.log(res);
  }
}
let dialogImageUrl = ref("");
let dialogVisible = ref(false);
function handlePictureCardPreview(file) {
  dialogVisible.value = true;
  dialogImageUrl.value = file.url;
}

async function handleRemovePolicy(file, list) {
  let cache = _.cloneDeep(policyFileList.value);
  console.log(cache);
  ElMessageBox.confirm("确认删除保险单?", "Warning", {
    confirmButtonText: "删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let { id } = file;
      let res = await api.deleteWaybill({
        id,
      });
      if (res.data.status == 0) {
        ElMessage({
          message: "删除成功!",
          type: "success",
        });
        policyFileList.value = list;
      }
    })
    .catch(() => {
      policyFileList.value = cache;
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
}
let policyFileList = ref([]);

function policyUploadSuccess(response, file, list) {
  list[list.length - 1] = {
    ...response.result,
    url: response.result.viewUrl,
  };
  console.log(list);
  policyFileList.value = list;
}

let policyParams = ref({
  voyageId: route.query.id,
  type: 3,
});

async function handleRemovePoundBill(file, list) {
  let cache = _.cloneDeep(poundBill.value);
  console.log(cache);
  ElMessageBox.confirm("确认删除磅单?", "Warning", {
    confirmButtonText: "删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let { id } = file;
      let res = await api.deleteWaybill({
        id,
      });
      if (res.data.status == 0) {
        ElMessage({
          message: "删除成功!",
          type: "success",
        });
        poundBill.value = list;
      }
    })
    .catch(() => {
      poundBill.value = cache;
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
}

async function handleRemoveBill(file, list) {
  let cache = _.cloneDeep(voyageBill.value);
  console.log(cache);
  ElMessageBox.confirm("确认删除运单?", "Warning", {
    confirmButtonText: "删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let { id } = file;
      let res = await api.deleteWaybill({
        id,
      });
      if (res.data.status == 0) {
        ElMessage({
          message: "删除成功!",
          type: "success",
        });
        voyageBill.value = list;
      }
    })
    .catch(() => {
      voyageBill.value = cache;
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
}
let voyageBill = ref([]);

function billUploadSuccess(response, file, list) {
  list[list.length - 1] = {
    ...response.result,
    url: response.result.viewUrl,
  };
  console.log(list);
  voyageBill.value = list;
}

let billParams = ref({
  voyageId: route.query.id,
  type: 1,
});

function getPoundBillList(list) {
  console.log(list);
  poundBillList.value = list;
}
let poundBillList = ref([]);

let poundBill = ref([]);

function poundBillUploadSuccess(response, file, list) {
  list[list.length - 1] = {
    ...response.result,
    url: response.result.viewUrl,
  };
  console.log(list);
  poundBill.value = list;
}
function previewPoundBill(url) {
  console.log(url);
}

let updatePoundParams = ref({
  voyageId: route.query.id,
  type: 2,
});
let updatePoundBillList = ref([]);
function getupdatePoundBillList(list) {
  console.log(list);
  updatePoundBillList.value = list;
}

let previewPoundList = ref([]);

let poundParams = ref({
  voyageId: route.query.id,
  type: 2,
});
async function calExpectedArrivalTime() {
  let res = await api.calExpectedArrivalTime({
    voyageId: route.query.id,
    setSailTime: voyage.value.setSailTime,
  });
  if (res.data.status == 0) {
    voyage.value.expectedArrivalTime = res.data.result;
  }
}
let isLoadingExcel = ref(false);
async function downloadExcel() {
  isLoadingExcel.value = true;
  let res = await downloadBlobFile(
    `${url.baseurl}/voyage/exportExcel`,
    { voyageId: route.query.id },
    "船舶跟踪表",
    "post"
  );
  if (res) {
    isLoadingExcel.value = false;
  }
}

async function cancelVoyage() {
  console.log("取消航次");
  ElMessageBox.confirm("确认取消航次?", "确认操作", {
    confirmButtonText: "确认",
    cancelButtonText: "取消操作",
    type: "warning",
  })
    .then(async (e) => {
      console.log(e);
      let res = await api.cancelVoyage({
        id: route.query.id,
      });
      if (res.data.status == 0) {
        ElMessage({
          type: "success",
          message: "航次取消成功!",
        });
        router.push("/voyageList");
      } else {
        console.log(res);
      }
    })
    .catch((e) => {
      console.log(e);
      ElMessage({
        type: "info",
        message: "取消操作",
      });
    });
}
let certs = ref(null);
let isCertsVisable = ref(false);

function showCerts() {
  setTimeout(() => {
    certs.value.initCerts(shipAudits.value);
  });
}
let isDischargeLoadingExcel = ref(false);
async function exportDischargeExcel() {
  isDischargeLoadingExcel.value = true;
  let res = await downloadBlobFile(
    `${url.baseurl}/voyage/exportDischargeExcel`,
    { voyageId: route.query.id },
    "卸货记录表",
    "post"
  );
  if (res) {
    isDischargeLoadingExcel.value = false;
  }
}

let isAddPoundVisable = ref(false);

let isAddTruckRecordVisable = ref(false);
let truckTableData = ref([]);
let truckRecordForm = ref({});
let truckRecordBillList = ref([]);
let truckCurrentPage = ref(1);
let truckTotal = ref(0);
let truckLoadParams = ref({
  voyageId: route.query.id,
  type: 4,
});
function getTruckLoadBillList(list) {
  truckRecordBillList.value = list;
}
function cancelUploadTruckRecord() {
  isAddTruckRecordVisable.value = false;
  truckRecordForm.value = {};
  truckRecordBillList.value = [];
  currentRecordId.value = -1;
}
let currentRecordId = ref(-1);
async function addTruckLoadRecord() {
  let postData = {};
  if (truckRecordBillList.value.length) {
    if (truckRecordBillList.value[0].viewUrl) {
      let { fileKey, viewUrl, downloadUrl } = truckRecordBillList.value[0];
      postData = {
        fileKey,
        viewUrl,
        downloadUrl,
      };
    } else {
      let { fileKey, viewUrl, downloadUrl } =
        truckRecordBillList.value[0].response.result;
      postData = {
        fileKey,
        viewUrl,
        downloadUrl,
      };
    }
  } else {
    postData = {
      fileKey: "",
      viewUrl: "",
      downloadUrl: "",
    };
  }
  if (currentRecordId.value != -1) {
    postData.recordId = currentRecordId.value;
    delete truckRecordForm.value.file;
    delete truckRecordForm.value.fileId;
  }
  let res = await api[
    `${
      truckRecordModalType.value == "新增记录"
        ? "addTruckLoadRecord"
        : "updateTruckLoadRecord"
    }`
  ]({
    voyageId: route.query.id,
    portId: currentDiscPortId.value,
    ...postData,
    ...truckRecordForm.value,
  });
  cancelUploadTruckRecord();
  getTruckLoadRecord();
}
function showAddTruckRecord() {
  isAddTruckRecordVisable.value = true;
  truckRecordModalType.value = "新增记录";
}

async function getTruckLoadRecord() {
  let res = await api.getTruckLoadRecord({
    voyageId: route.query.id,
    portId: currentDiscPortId.value,
    currentPage: truckCurrentPage.value,
    size: 10,
  });
  if (res.data.status == 0) {
    truckTableData.value = res.data.result;
    truckTotal.value = res.data.total;
  } else {
    truckTableData.value = [];
    truckTotal.value = 0;
  }
}
function truckPageChange(e) {
  truckCurrentPage.value = e;
  getTruckLoadRecord();
}

let truckRecordModalType = ref("");
function showTruckRecord(item, index, text) {
  isAddTruckRecordVisable.value = true;
  currentRecordId.value = item.id;
  truckRecordModalType.value = text;
  if (item.file) {
    truckRecordBillList.value[0] = {
      ...item.file,
      url: item.file.viewUrl,
    };
  }

  truckRecordForm.value = { ...item };
}
async function deleteTruckRecord(id, index) {
  console.log(id);
  ElMessageBox.confirm("确认删除装货记录?", "Warning", {
    confirmButtonText: "删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let res = await api.deleteTruckLoadRecord({
        id,
      });
      if (res.data.status == 0) {
        ElMessage({
          message: "删除成功!",
          type: "success",
        });
      }
      getTruckLoadRecord();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
}

let isDistributeModalVisable = ref(false);
let previewList = ref([]);
let checkedImages = ref([]);
let distributeType = ref(-1);
let distributePortId = ref(-1);
let checkedPreviewList = ref([]);
let recordIds = ref("");
let ocrTruckRecordTableData = ref([]);
function showDistributeModal() {
  checkedImages.value = shipownerUploadFiles.value.filter((e) => e.checked);

  if (!checkedImages.value.length) {
    ElMessage({
      type: "error",
      message: "请选择要分配的图片!",
    });
    return;
  }
  let arr0 = [];
  for (let i of checkedImages.value) {
    checkedPreviewList.value.push(i.viewUrl);
    arr0.push(i.id);
  }
  recordIds.value = arr0.join(",");
  isDistributeModalVisable.value = true;
}

function distributeModalClose() {
  isDistributeModalVisable.value = false;
  distributeType.value = -1;
  distributePortId.value = -1;
  distributePoundForm.value = {
    dischargeTime: "",
    dischargeTons: "",
    dischargePieces: "",
  };
  ocrTruckRecordTableData.value = [];
}

async function submitDistribute() {
  if (distributePortId.value == -1) {
    ElMessage({
      type: "error",
      message: "请选择要分配的港口!",
    });
    return;
  }
  if (distributeType.value == -1) {
    ElMessage({
      type: "error",
      message: "请选择要分配类型!",
    });
    return;
  }
  let postData = {};
  let type = distributeType.value;
  if (2 == type) {
    postData = {
      poundBillData: {
        ...distributePoundForm.value,
        portId: distributePortId.value,
      },
    };
  } else if (4 == type) {
    for (let i of ocrTruckRecordTableData.value) {
      i.portId = distributePortId.value;
    }
    postData = { carLoadDatas: ocrTruckRecordTableData.value };
  }
  let res = await api.distribute({
    ...postData,
    voyageId: route.query.id,
    recordIds: recordIds.value,
    type,
  });
  console.log(res);
  distributeModalClose();
  getVoyageDetail();
  if (2 == type) getDischargeList();
  if (4 == type) getTruckLoadRecord();
}

async function deleteOcrRecord(index) {
  console.log(index);
  ocrTruckRecordTableData.value.splice(index, 1);
}

let distributePoundForm = ref({});
async function ocr() {
  ocrLoading.value = true;
  ocrImageList.value = [];
  let res = await api.ocr({
    recordIds: recordIds.value,
  });
  ocrLoading.value = false;
  ocrTruckRecordTableData.value = res.data.result;
  for (let i of ocrTruckRecordTableData.value) {
    if (i.weighTime) i.weighTime = i.weighTime.substring(0, 10);
    ocrImageList.value.push(i.viewUrl);
  }
}
let isCheckAll = ref(false);
let isIndeterminate = ref(false);
function checkAll(b) {
  isIndeterminate.value = false;
  shipownerUploadFiles.value.forEach((e) => {
    e.checked = b;
  });
}
function checkItem() {
  let arr = shipownerUploadFiles.value.filter((e) => e.checked);
  if (arr.length == shipownerUploadFiles.value.length) {
    isCheckAll.value = true;
    isIndeterminate.value = false;
  } else if (arr.length == 0) {
    isCheckAll.value = false;
    isIndeterminate.value = false;
  } else {
    isIndeterminate.value = true;
  }
}

let ocrLoading = ref(false);
let ocrImageList = ref([]);
let blockchainInfo = ref("");

let isAddLabVisable = ref(false);
let labTableData = ref([]);
let labForm = ref({});
let labBillList = ref([]);
let labCurrentPage = ref(1);
let labTotal = ref(0);
let labParams = ref({
  voyageId: route.query.id,
  type: 5,
});
function getLabBillList(list) {
  labBillList.value = list;
}
function cancelUploadLab() {
  isAddLabVisable.value = false;
  labForm.value = {};
  labBillList.value = [];
  currentLabId.value = -1;
}
let currentLabId = ref(-1);
async function addLab() {
  let postData = {
    portId: currentDiscPortId.value,
  };
  if (labBillList.value.length) {
    if (labBillList.value[0].viewUrl) {
      let { fileKey, viewUrl, downloadUrl } = labBillList.value[0];
      postData = {
        ...postData,
        fileKey,
        viewUrl,
        downloadUrl,
      };
    } else {
      let { fileKey, viewUrl, downloadUrl } =
        labBillList.value[0].response.result;
      postData = {
        ...postData,
        fileKey,
        viewUrl,
        downloadUrl,
      };
    }
  } else {
    postData = {
      ...postData,
      fileKey: "",
      viewUrl: "",
      downloadUrl: "",
    };
  }
  if (currentLabId.value != -1) {
    postData.labId = currentLabId.value;
    delete postData.portId;
    delete labForm.value.file;
    delete labForm.value.fileId;
  }
  let res = await api[
    `${labModalType.value == "新增记录" ? "addLab" : "updateLab"}`
  ]({
    voyageId: route.query.id,
    ...postData,
    ...labForm.value,
  });
  cancelUploadLab();
  getLabList();
}
function showAddLab() {
  isAddLabVisable.value = true;
  labModalType.value = "新增记录";
}

async function getLabList() {
  let res = await api.getLabList({
    voyageId: route.query.id,
    portId: currentDiscPortId.value,
    currentPage: labCurrentPage.value,
    size: 10,
  });
  if (res.data.status == 0) {
    labTableData.value = res.data.result;
    labTotal.value = res.data.total;
  } else {
    labTableData.value = [];
    labTotal.value = 0;
  }
}
function labPageChange(e) {
  labCurrentPage.value = e;
  getLabList();
}

let labModalType = ref("");
function showLab(item, index, text) {
  isAddLabVisable.value = true;
  currentLabId.value = item.id;
  labModalType.value = text;
  if (item.file) {
    labBillList.value[0] = {
      ...item.file,
      url: item.file.viewUrl,
    };
  }

  labForm.value = { ...item };
}
async function deleteLab(id, index) {
  console.log(id);
  ElMessageBox.confirm("确认删除装货记录?", "Warning", {
    confirmButtonText: "删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let res = await api.deleteLab({
        id,
      });
      if (res.data.status == 0) {
        ElMessage({
          message: "删除成功!",
          type: "success",
        });
      }
      getLabList();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
}

let weatherTableData = ref([]);
let weatherCurrentPage = ref(1);
let weatherTotal = ref(0);
async function getPortWeatherList() {
  let res = await api.getPortWeatherList({
    voyageId: route.query.id,
    portId: currentDiscPortId.value,
    currentPage: weatherCurrentPage.value,
    size: 10,
  });
  if (res.data.status == 0) {
    weatherTableData.value = res.data.result;
    weatherTotal.value = res.data.total;
  } else {
    weatherTableData.value = [];
    weatherTotal.value = 0;
  }
}

function weatherPageChange(e) {
  weatherCurrentPage.value = e;
  getPortWeatherList();
}

let currentPortId = ref("");
let currentDiscPortId = ref("");
let currentDiscPortIndex = ref(0);
function changeDiscPortTab(e) {
  currentDiscPortIndex.value = e.index;
  currentDiscPortId.value =
    voyage.value.voyageDetails[currentDiscPortIndex.value].portId + "";
  weatherTableData.value = [];
  weatherTotal.value = 0;
  labTableData.value = [];
  labTotal.value = 0;
  dischargeList.value = [];
  total.value = 0;
  truckTableData.value = [];
  truckTotal.value = 0;
  labCurrentPage.value = 1;
  dischargeCurrentPage.value = 1;
  weatherCurrentPage.value = 1;
  truckCurrentPage.value = 1;
  getDischargeList();
  getTruckLoadRecord();
  getLabList();
  getPortWeatherList();
}

let toInsertDiscPortId = ref("");
let toInsertDiscPortValue = ref("");
let getCol = _.debounce(
  async (queryString, cb) => {
    if (!queryString) return;
    let res = await api.getCol({
      term: queryString,
    });
    if (res.data.status == 0) {
      cb(res.data.result);
    }
  },
  1000,
  { leading: true }
);
function clear(type) {
  toInsertDiscPortId.value = "";
  toInsertDiscPortValue.value = "";
}
let selectToInsertDiscProt = (item, index) => {
  console.log(item);
  toInsertDiscPortId.value = item.key;
  toInsertDiscPortValue.value = item.value;
};
let insertDiscPortVisable = ref(false);
async function addNewPort() {
  if (!toInsertDiscPortId.value || !toInsertDiscPortValue.value) {
    ElMessage({
      message: "请选择提前卸货港!",
      type: "warning",
    });
    return;
  }
  let res = await api.addNewPort({
    voyageId: route.query.id,
    portId: toInsertDiscPortId.value,
  });
  if (res.data.status == 0) {
    ElMessage({
      message: "添加提前卸货港成功!",
      type: "success",
    });
    getVoyageDetail(true);
    cancelInsertDiscPort();
  } else {
    ElMessage({
      message: res.data.msg,
      type: "error",
    });
  }
}

function cancelInsertDiscPort() {
  insertDiscPortVisable.value = false;
  toInsertDiscPortId.value = "";
  toInsertDiscPortValue.value = "";
}

onMounted(() => {
  getVoyageDetail(true);
});
</script>
<style scoped>
.map-container {
  width: 100%;
  height: 500px;
}

.card-note {
  height: 30px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #777777;
}

.medias-box {
  width: 200px;
  height: 200px;
  margin-top: 20px;
}

.medias-content {
  width: 100%;
  height: 600px;
  background: #f7f7f7;
  border-radius: 2px;
}

.pic-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  padding: 30px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.pic-main {
  position: relative;
  width: 120px;
}
.box {
  position: absolute;
  height: 255px;
  width: 180px;
  border: 5px solid #dddddd;
  transition: all 0.5s;
  background: #fff;
  z-index: 10;
}

.point {
  position: relative;
  left: 93px;
  top: 277px;
  width: 16px;
  height: 16px;
  background-image: url(../../assets/blue-circle.png);
}

.s-line {
  position: absolute;
  left: 100px;
  top: 261px;
  height: 20px;
  border-left: 2px dashed;
  box-sizing: border-box;
  border-color: #ddd;
}

.l-line {
  position: relative;
  bottom: 30px;
  left: 111px;
  top: 268px;
  height: 3px;
  width: 100px;
  background-color: #dddddd;
}

.bottom-box {
  top: 309px;
}
.top210px {
  top: 289px;
}

.box:hover {
  transform: scale(1.15);
}

.medias-box {
  width: 80px;
  height: 80px;
  margin-top: 10px;
}

.card-note {
  height: 30px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #777777;
  padding: 10px 20px;
}

.medias-box {
  width: 100%;
  height: 100px;
  margin-top: 20px;
}

.checkbox-group {
  width: 180px;
}

.el-checkbox {
  height: 20px;
  margin-top: 15px;
  margin-right: 0;
}

.now-box {
  border: 5px solid #0094fe;
}

.now-l-line {
  background-color: #0094fe;
}

.now-s-line {
  border-color: #97caf6;
}

.now-point {
  filter: grayscale(1);
}

.info-line-text-table {
  width: 180px !important;
}

.upload-plus-icon {
  height: 15%;
  color: rgb(139, 147, 156);
  line-height: 100px;
  font-size: 40px;
  font-weight: 200;
}

.upload-text {
  height: 25%;
  color: rgb(139, 147, 156);
}
.el-checkbox {
  margin-top: 0;
}

:deep().el-upload-dragger {
  width: 100%;
  height: 148px !important;
}

.info-gap {
  width: 40px;
  font-size: 14px;
  overflow: visible;
  white-space: nowrap;
  color: #006ebc;
  cursor: pointer;
}

.unit {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #353a42;
  line-height: 100%;
  margin: 0 10px;
}

.line {
  flex-wrap: wrap;
  margin: 0 20px;
}

.info-line {
  margin-bottom: 20px;
}

.ml50 {
  margin-left: 140px;
}
</style>