<template>
  <div class="ship-info-dialog">
    <div class="ship-info-content">
      <el-tabs v-model="tabMode" style="margin-bottom: 1.25rem">
        <el-tab-pane name="shipInfo" :label="$t('message.shipInfo.ais')">
          <el-row>
            <el-col :span="12" class="flex"><span class="base-title">{{ $t('message.shipInfo.mmsi') }}</span>
              <div><span>{{ shipData.mmsi }}</span></div>
            </el-col>
            <el-col :span="12" class="flex"><span class="base-title">{{ $t('message.shipInfo.shipHeading') }}</span>
              <div><span>{{ shipData.heading }} °</span></div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="flex"><span class="base-title">{{ $t('message.shipInfo.callsign') }}</span>
              <div><span>{{ shipData.callsign }}</span></div>
            </el-col>
            <el-col :span="12" class="flex"><span class="base-title">{{ $t('message.shipInfo.shipCoursing') }}</span>
              <div><span>{{ shipData.cog / 10 }} °</span></div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="flex"><span class="base-title">{{ $t('message.shipInfo.imo') }}</span>
              <div><span>{{ shipData.imo }}</span></div>
            </el-col>
            <el-col :span="12" class="flex"><span class="base-title">{{ $t('message.shipInfo.speed') }}</span>
              <div><span>{{ shipData.sog / 10 }} Kn</span></div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="flex"><span class="base-title">{{ $t('message.shipInfo.vesselType') }}</span>
              <div>
                <span>
                   {{ language === 'zh' ? filterShipType(shipData.shiptype) : filterShipType(shipData.shiptype, true) }}
                </span>
              </div>
            </el-col>
            <el-col :span="12" class="flex"><span class="base-title">{{ $t('message.shipInfo.lat') }}</span>
              <div><span>{{ filterLat(shipData.lat) }}</span></div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="flex"><span class="base-title">{{ $t('message.shipInfo.status') }}</span>
              <div>
                 <span>
                  {{
                     language === 'zh' ? filterShipStatus(shipData.aisNavStatus) : filterShipStatus(shipData.aisNavStatus, true)
                   }}
                 </span>
              </div>
            </el-col>
            <el-col :span="12" class="flex"><span class="base-title">{{ $t('message.shipInfo.lon') }}</span>
              <div>
                <span>{{ filterLon(shipData.lon) }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="flex"><span class="base-title">{{ $t('message.shipInfo.shipLength') }}</span>
              <div><span>{{ shipData.length }} m</span></div>
            </el-col>
            <el-col :span="12" class="flex"><span class="base-title">{{ $t('message.shipInfo.destination') }}</span>
              <div>
                <span v-if="desPort" class="is-china" @click="goPort(desPort)">{{ shipData.destPort }}</span>
                <span v-else>{{ shipData.destPort }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="flex"><span class="base-title">{{ $t('message.shipInfo.breadth') }}</span>
              <div><span>{{ shipData.breadth }} m</span></div>
            </el-col>
            <el-col :span="12" class="flex"><span class="base-title">{{ $t('message.shipInfo.eta') }}</span>
              <div style="display: flex;align-items: center">
                <div><span>{{ formatDate(shipData.eta, 'yyyy-MM-dd hh:mm:ss') }}</span></div>
                &nbsp;
                <div v-if="isDelay && language === 'cn'">
                  <el-tooltip :content="$t('message.shipInfo.predictionEta') + delayTime">
                    <img style="width: 30px;height: 15px" src="../../../public/img/delay.png" alt="">
                  </el-tooltip>
                </div>
                <div v-if="isDelay && language === 'en'">
                  <el-tooltip :content="$t('message.shipInfo.predictionEta') + delayTime">
                    <div
                      style="height: 20px;width: 36px;background: rgba(219, 88, 91); color: #FFFFFF;border-radius: 1px">
                      Delay
                    </div>
                  </el-tooltip>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="flex"><span class="base-title">{{ $t('message.shipInfo.draught') }}</span>
              <div><span>{{ shipData.draught / 10 }} m </span></div>
            </el-col>
            <el-col :span="12" class="flex"><span class="base-title">
              {{ $t('message.shipInfo.lastUpdated') }}</span>
              <div><span style="white-space: nowrap;">{{ formatDate(shipData.posTime, 'yyyy-MM-dd hh:mm:ss') }}</span>
              </div>
            </el-col>
          </el-row>
          <div class="hc-class" v-if="funOpen.hc">
            <el-row v-if="voy.depart && voy.arrival">
              <el-col :span="9" class="item-hc">
                <div class="port-info">
                  <div style="width: 100%">
                    <div style="display: flex;justify-content: center;align-items: center">
                      <i class="iconfont icon-chuanbo" style="color: var(--theme-color);font-size: 1.25rem"></i>
                      <el-tooltip :content="voy.depart?voy.depart: ''">
                        <div class="port-name">{{ voy.depart ? subName(voy.depart) : '未知' }}</div>
                      </el-tooltip>
                    </div>
                    <div class="info-content">{{ voy.departTime ? dateDataFormat(voy.departTime) : '' }}</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="6" class="item-hc">
                <div class="fangxiang-box">
                  <div style="position: relative">
                    <div style="text-align: center;width: 100%;position: absolute;top: -45%;">
                      <span style="margin: 0;text-align: center"
                            v-show="isOut">{{ $t('message.shipInfo.onTheWay') }}</span>
                      <span style="margin: 0;text-align: center"
                            v-show="!isOut">{{ $t('message.shipInfo.arrival') }}</span>
                    </div>
                    <img :src="projectName + '/img/jiantou.png'" alt="">
                  </div>
                </div>
              </el-col>
              <el-col :span="9" class="item-hc">
                <div class="port-info">
                  <div style="width: 100%">
                    <div style="display: flex;justify-content: center;align-items: center">
                      <i class="iconfont icon-chuanbo" style="color: var(--theme-color)"></i>
                      <el-tooltip :content="voy.arrival?voy.arrival : ''">
                        <div class="port-name">{{ voy.arrival ? subName(voy.arrival) : '未知' }}</div>
                      </el-tooltip>
                    </div>
                    <div class="info-content">{{ voy.arrivalTime ? dateDataFormat(voy.arrivalTime) : '' }}</div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row v-else style="height: 100%;width: 100%">
              <div style="height: 100%;display: flex;align-items: center;justify-content: center">
                <span>{{ $t('message.shipInfo.noHc') }}</span>
              </div>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="funOpen.doc" name="reportInfo" :label="$t('message.shipInfo.shipDoc')">
          <div class="shipmessage_body">
            <el-row>
              <el-col :span="12" style="display: flex">
                <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">{{
                    $t('message.shipInfo.shipName')
                  }}:</span>
                <div style="display: flex;padding-right: 0.625rem">
                  <span style="margin-left: 0.3125rem">{{
                      shipDoc && shipDoc.basicShipInfo && shipDoc.basicShipInfo.shipName ? shipDoc.basicShipInfo.shipName : '******'
                    }}</span>
                </div>
              </el-col>
              <el-col :span="12" style="display: flex">
                      <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">{{
                          $t('message.shipInfo.ExName')
                        }}: </span>

                <div style="display: flex;padding-right: 0.625rem">
                      <span style="margin-left: 0.3125rem">{{
                          shipDoc && shipDoc.basicShipInfo && shipDoc.basicShipInfo.exName ? shipDoc.basicShipInfo.exName : '******'
                        }} </span>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" style="display: flex">
                      <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">
                        {{ $t('message.shipInfo.FlagName') }}:
                      </span>
                <div style="display: flex;padding-right: 0.625rem">
                        <span style="margin-left: 0.3125rem">
                          {{
                            shipDoc && shipDoc.basicShipInfo && shipDoc.basicShipInfo.flagName ?
                              shipDoc.basicShipInfo.flagName : '******'
                          }}
                        </span>
                </div>
              </el-col>
              <el-col :span="12" style="display: flex">
                      <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">{{
                          $t('message.shipInfo.DateOfBuild')
                        }}:</span>
                <div style="display: flex;padding-right: 0.625rem">
                    <span style="margin-left: 0.3125rem">{{
                        shipDoc && shipDoc.basicShipInfo && shipDoc.basicShipInfo.dateOfBuild ? shipDoc.basicShipInfo.dateOfBuild : '******'
                      }} </span>
                </div>

              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" style="display: flex">
                      <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">{{
                          $t('message.shipInfo.mmsi')
                        }}:</span>

                <div style="display: flex;padding-right: 0.625rem">
                        <span style="margin-left: 0.3125rem">
                          {{
                            shipDoc && shipDoc.basicShipInfo && shipDoc.basicShipInfo.mmsi ?
                              shipDoc.basicShipInfo.mmsi : '******'
                          }}
                        </span>
                </div>
              </el-col>
              <el-col :span="12" style="display: flex">
                      <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">{{
                          $t('message.shipInfo.imo')
                        }}:</span>
                <div style="display: flex;padding-right: 0.625rem">
                       <span style="margin-left: 0.3125rem">
                         {{
                           shipDoc && shipDoc.basicShipInfo && shipDoc.basicShipInfo.imo ?
                             shipDoc.basicShipInfo.imo : '******'
                         }}
                       </span>
                </div>

              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" style="display: flex">
                      <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">{{
                          $t('message.shipInfo.callsign')
                        }}:</span>
                <div style="display: flex;padding-right: 0.625rem">
                        <span style="margin-left: 0.3125rem">
                          {{
                            shipDoc && shipDoc.basicShipInfo && shipDoc.basicShipInfo.callsign ?
                              shipDoc.basicShipInfo.callsign : '******'
                          }}
                        </span>
                </div>

              </el-col>
              <el-col :span="12" style="display: flex">
                      <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">
                        {{ $t('message.shipInfo.shiptypeLevel3') }}:
                      </span>
                <div style="display: flex;padding-right: 0.625rem">
                        <span style="margin-left: 0.3125rem">
                          {{
                            shipDoc && shipDoc.basicShipInfo && shipDoc.basicShipInfo.shipTypeLevel3 ?
                              shipDoc.basicShipInfo.shipTypeLevel3 : '******'
                          }}
                        </span>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" style="display: flex">
                      <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">{{
                          $t('message.shipInfo.Length')
                        }}:</span>
                <div style="display: flex;padding-right: 0.625rem">
                         <span style="margin-left: 0.3125rem">
                           {{
                             shipDoc && shipDoc.basicShipInfo && shipDoc.basicShipInfo.lengthOverallLoa ?
                               shipDoc.basicShipInfo.lengthOverallLoa + 'm' : '******'
                           }}
                         </span>
                </div>
              </el-col>
              <el-col :span="12" style="display: flex">
                      <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">{{
                          $t('message.shipInfo.breadth')
                        }}:</span>
                <div style="display: flex;padding-right: 0.625rem">
                         <span style="margin-left: 0.3125rem">{{
                             shipDoc && shipDoc.basicShipInfo && shipDoc.basicShipInfo.breadthMoulded ?
                               shipDoc.basicShipInfo.breadthMoulded + 'm' : '******'
                           }}
                         </span>
                </div>

              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" style="display: flex">
                      <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">{{
                          $t('message.shipInfo.Depth')
                        }}:</span>
                <div style="display: flex;padding-right: 0.625rem">
                        <span style="margin-left: 0.3125rem">
                          {{
                            shipDoc && shipDoc.basicShipInfo && shipDoc.basicShipInfo.depth ?
                              shipDoc.basicShipInfo.depth + 'm' : '******'
                          }}
                        </span>
                </div>
              </el-col>
              <el-col :span="12" style="display: flex">
                      <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">
                        {{ $t('message.shipInfo.draught') }}:
                      </span>
                <div style="display: flex;padding-right: 0.625rem">
                         <span style="margin-left: 0.3125rem">
                           {{
                             shipDoc && shipDoc.basicShipInfo && shipDoc.basicShipInfo.draught ?
                               shipDoc.basicShipInfo.draught + 'm' : '******'
                           }}
                         </span>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" style="display: flex">
                      <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">
                        {{ $t('message.shipInfo.GrossTonnage') }}:
                      </span>
                <div style="display: flex;padding-right: 0.625rem">
                         <span style="margin-left: 0.3125rem">
                           {{
                             shipDoc && shipDoc.basicShipInfo && shipDoc.basicShipInfo.grossTonnage ?
                               shipDoc.basicShipInfo.grossTonnage : '******'
                           }}
                         </span>
                </div>
              </el-col>
              <el-col :span="12" style="display: flex">
                      <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">
                        {{ $t('message.shipInfo.NetTonnage') }}:
                      </span>
                <div style="display: flex;padding-right: 0.625rem">
                        <span style="margin-left: 0.3125rem">
                          {{
                            shipDoc && shipDoc.basicShipInfo && shipDoc.basicShipInfo.netTonnage ?
                              shipDoc.basicShipInfo.netTonnage : '******'
                          }}
                        </span>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" style="display: flex">
                      <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">
                        {{ $t('message.shipInfo.Deadweight') }}:
                      </span>
                <div style="display: flex;padding-right: 0.625rem">
                        <span style="margin-left: 0.3125rem">
                          {{
                            shipDoc && shipDoc.basicShipInfo && shipDoc.basicShipInfo.deadWeight ?
                              shipDoc.basicShipInfo.deadWeight : '******'
                          }}
                        </span>
                </div>

              </el-col>
              <el-col :span="12" style="display: flex">
                      <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">
                        {{ $t('message.shipInfo.speedService') }}:
                      </span>
                <div style="display: flex;padding-right: 0.625rem">
                         <span style="margin-left: 0.3125rem">
                           {{
                             shipDoc && shipDoc.basicShipInfo && shipDoc.basicShipInfo.speedService ?
                               shipDoc.basicShipInfo.speedService + 'Knots' : '******'
                           }}
                         </span>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" style="display: flex">
                      <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">{{
                          $t('message.shipInfo.mainEngineModel')
                        }}:</span>
                <div style="display: flex;padding-right: 0.625rem">
                       <span style="margin-left: 0.3125rem">
                         {{
                           shipDoc && shipDoc.shipInfo && shipDoc.shipInfo.mainEngineModel ?
                             shipDoc.shipInfo.mainEngineModel : '******'
                         }}
                       </span>
                </div>
              </el-col>
              <el-col :span="12" style="display: flex">
                      <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">
                        {{ $t('message.shipInfo.mainEngineType') }}:
                      </span>
                <div style="display: flex;padding-right: 0.625rem">
                        <span style="margin-left: 0.3125rem">
                          {{
                            shipDoc && shipDoc.shipInfo && shipDoc.shipInfo.mainEngineType ?
                              shipDoc.shipInfo.mainEngineType : '******'
                          }}
                        </span>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" style="display: flex">
                      <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">{{
                          $t('message.shipInfo.fuelType1First')
                        }}:</span>
                <div style="display: flex;padding-right: 0.625rem">
                          <span style="margin-left: 0.3125rem">
                            {{
                              shipDoc && shipDoc.cabinInfo && shipDoc.cabinInfo.fuelType1First ?
                                shipDoc.cabinInfo.fuelType1First : '******'
                            }}
                          </span>
                </div>
              </el-col>
              <el-col :span="12" style="display: flex">
                      <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">{{
                          $t('message.shipInfo.fuelType1Capacity')
                        }}:</span>
                <div style="display: flex;padding-right: 0.625rem">
                        <span style="margin-left: 0.3125rem">
                          {{
                            shipDoc && shipDoc.cabinInfo && shipDoc.cabinInfo.fuelType1Capacity ?
                              shipDoc.cabinInfo.fuelType1Capacity : '******'
                          }}
                        </span>
                </div>
              </el-col>
            </el-row>

            <el-row style="display: flex">
                    <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">{{
                        $t('message.shipInfo.groupBeneficialOwner')
                      }}:</span>
              <div style="display: flex;padding-right: 0.625rem">
                        <span style="margin-left: 0.3125rem">
                          {{
                            shipDoc && shipDoc.companyInfo && shipDoc.companyInfo.groupBeneficialOwner ?
                              shipDoc.companyInfo.groupBeneficialOwner : '******'
                          }}
                        </span>
              </div>
            </el-row>
            <el-row style="display: flex">
                    <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">{{
                        $t('message.shipInfo.operator')
                      }}:</span>
              <div style="display: flex;padding-right: 0.625rem">
                      <span style="margin-left: 0.3125rem">
                        {{
                          shipDoc && shipDoc.companyInfo && shipDoc.companyInfo.operator ?
                            shipDoc.companyInfo.operator : '******'
                        }}
                      </span>
              </div>
            </el-row>
            <el-row style="display: flex">
                    <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">{{
                        $t('message.shipInfo.registeredOwner')
                      }}:</span>
              <div style="display: flex;padding-right: 0.625rem">
                        <span style="margin-left: 0.3125rem">
                          {{
                            shipDoc && shipDoc.companyInfo && shipDoc.companyInfo.registeredOwner ?
                              shipDoc.companyInfo.registeredOwner : '******'
                          }}
                        </span>
              </div>
            </el-row>
            <el-row style="display: flex">
                    <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">{{
                        $t('message.shipInfo.docCompany')
                      }}:</span>
              <div style="display: flex;padding-right: 0.625rem">
                      <span style="margin-left: 0.3125rem">
                        {{
                          shipDoc && shipDoc.companyInfo && shipDoc.companyInfo.docCompany ?
                            shipDoc.companyInfo.docCompany : '******'
                        }}
                      </span>
              </div>
            </el-row>

            <el-row style="display: flex">
                    <span style="font-weight: bold;color: #333333;margin-left: 0;flex-shrink: 0">{{
                        $t('message.shipInfo.cargoCapacitiesNarrative')
                      }}:</span>
              <div style="display: flex;padding-right: 0.625rem">
                      <span style="margin-left: 0.3125rem">
                        {{
                          shipDoc && shipDoc.cabinInfo && shipDoc.cabinInfo.cargoCapacitiesNarrative ?
                            shipDoc.cabinInfo.cargoCapacitiesNarrative : '******'
                        }}
                      </span>
              </div>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="isInner && funOpen.innerShip" name="innerShip" :label="$t('message.shipInfo.innerShip')">
          <el-row>
            <el-col :span="12">
              <span class="base-title">{{ $t('message.shipInfo.sailAreaName') }}</span><span>{{
                innerData.sailAreaName
              }}</span>
            </el-col>
            <el-col :span="12">
              <span class="base-title">{{ $t('message.shipInfo.imo') }}</span><span>{{ innerData.shipImo }}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <span class="base-title">{{ $t('message.shipInfo.shipName') }}</span><span>{{ innerData.shipName }}</span>
            </el-col>
            <el-col :span="12">
              <span class="base-title">{{ $t('message.shipInfo.shipNameEn') }}</span><span>{{
                innerData.shipNameEn
              }}</span></el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <span class="base-title">{{ $t('message.shipInfo.shipGrosston') }}</span><span>{{
                innerData.shipGrosston
              }}</span>
            </el-col>
            <el-col :span="12"><span class="base-title">{{
                $t('message.shipInfo.shipType')
              }}</span><span>{{ innerData.shipType }}</span></el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <span class="base-title">{{
                  $t('message.shipInfo.shipEnginePower')
                }}</span><span>{{ innerData.shipEnginePower }}</span>
            </el-col>
            <el-col :span="12">
              <span class="base-title">{{ $t('message.shipInfo.shipPassengerNum') }}</span><span>{{
                innerData.shipPassengerNum
              }}</span></el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <div class="info-footer-btn">
        <el-button v-if="funOpen.pos" @click="posLocation">
          <span style="color: #FFFFFF;margin: 0">{{ $t('message.shipInfo.location') }}</span>
        </el-button>
        <el-button v-if="funOpen.track" @click="openHistory">
          <span style="color: #FFFFFF;margin: 0">{{ $t('message.shipInfo.trackHistory') }}</span>
        </el-button>
        <el-button v-if="funOpen.portCalling" @click="openPortOfCall">
          <span style="color: #FFFFFF;margin: 0">{{ $t('message.shipInfo.portCalling') }}</span>
        </el-button>
        <el-button v-if="funOpen.shipEvent" @click="openShipEvent">
          <span style="color: #FFFFFF;margin: 0">{{ $t('message.shipEvent.shipEvent') }}</span>
        </el-button>
        <el-button v-if="funOpen.routeYc" @click="routeYc">
          <span style="color: #FFFFFF;margin: 0">{{ $t('message.shipInfo.shipYc') }}</span>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Watch} from 'vue-property-decorator'
import MapUtil from '@/util/map'
import storeUtil from '@/util/store'
import {ShipUtils} from '@/util/tool'
import DialogUtil from '@/util/new-dialog'
import {DialogType as DialogType2} from '@/util/temp-interface/index'
import TrackRecordTemp from '@/views/new-dialog/TrackRecordTemp.vue'
import PortOfCallTemp from '@/views/new-dialog/PortOfCallTemp.vue'
import ShipEventTemp from "@/views/new-dialog/ShipEventTemp.vue";
import HttpApi from '@/api'
import {shipInfo} from "@/util/fun-switch";
import {getBeforeMonth2, getLongByTime, getNowTime, getTimeByLong} from '@/util/date'
import PortQueryTemp from "@/views/new-dialog/PortQueryTemp.vue";
import RouteYcTemp from "@/views/new-dialog/RouteYcTemp.vue";

const config = require('../../../public/config/sys-config.json')

@Component({
  props: {
    shipData: {
      type: Object,
      required: true,
      default: {}
    },
    shipDoc: {
      type: Object,
      required: true,
      default: {}
    }
  }
})
export default class ShipInfo extends Vue {
  private funOpen = shipInfo
  private language = window.localStorage.getItem('language')
  private dialogData: any = {}
  private ShipFun: any = storeUtil.getMapFun()
  private isFleet = false
  private tabMode = 'shipInfo'
  private isInner = false
  private innerData: any
  private voy: any = {}// 历史航次
  private voyList: any[] = [] // 历史航次
  private isOut = false
  private projectName = localStorage.getItem('pgName') ? '/' + localStorage.getItem('pgName') : location.origin
  private desPort: any = null
  private isDelay = false // 是否延误
  private delayTime = '' // 延误时间

  @Watch('shipData', {
    immediate: true,
    deep: true
  })
  async shipChange(data: any) {
    const flagDom: any = document.getElementById('ship-flag-url');
    flagDom.setAttribute('src', `${this.filterCountryImg(data.mmsi.slice(0, 3))}`)

    if (this.funOpen.destPortJump) {
      await this.getInfoByDesPort(data)
    }

    this.countDelayTime(data)
    if (DialogUtil.isShow(DialogType2.TRACK_RECORD)) {
      this.openHistory()
    }
    if (DialogUtil.isShow(DialogType2.PORT_OF_CALL)) {
      this.openPortOfCall()
    }
    if (this.funOpen.innerShip) {
      const ms = data.mmsi.substring(0, 3)
      if (ms === '412' || ms === '413' || ms === '414') {
        await HttpApi.getInnerShipData(data.mmsi).then((res: any) => {
          this.innerData = res[0]
          this.isInner = true
        })
      } else {
        this.isInner = false
      }
    }
    this.tabMode = 'shipInfo'
    if (this.funOpen.hc) {
      this.getArriveLeavePort(data)
    }
  }

  private routeYc() {
    DialogUtil.showDialog(RouteYcTemp, DialogType2.ROUTE_YC, {
      dialogData: {
        title: `${this.$t('message.shipInfo.shipYc')}`,
        vueName: DialogType2.ROUTE_YC
      },
      infoData: {
        data: this.$props.shipData
      },
      show: true
    })
  }

  /**
   * 目的港匹配
   * @private
   */
  private async getInfoByDesPort(data: any) {
    if (data.destPort) {
      await HttpApi.getInfoByDestPort({
        aisDestPort: data.destPort,
        dynWeight: 100
      }).then((res: any) => {
        if (res) {
          this.desPort = res
        } else {
          this.desPort = null
        }
      })
    } else {
      this.desPort = null
    }
  }

  /**
   * 计算延误时间
   * @private
   */
  private countDelayTime(data: any) {
    const time = new Date(data.eta * 1000).getTime()
    const nowTime = new Date().getTime()
    HttpApi.getPredictTime({mmsi: data.mmsi, dest: data.destination}).then((res) => {
      if (res) {
        const restTime = res.data.restTime
        const restTimeS = restTime * 60 * 60 * 1000
        this.isDelay = nowTime + restTimeS > time
        this.delayTime = getTimeByLong(nowTime + restTimeS)
      }
    })
  }

  private async goPort(data: any) {
    let port: any
    await HttpApi.getPortInfo(data.portId).then((res: any) => {
      port = res
      Object.assign(port, data)
    });
    (storeUtil.getMapFun() as any).clearallPort();
    (storeUtil.getMapFun() as any).delSelect()
    this.$store.commit('setShowPort', false)
    ShipInfo.addPortToMap(port)
    DialogUtil.showDialog(PortQueryTemp, DialogType2.PORT_QUERY, {
      dialogData: {
        title: `${data.nameCn}-${data.nameEn}`,
        vueName: DialogType2.PORT_QUERY
      },
      infoData: {
        portInfo: port
      },
      show: true
    })
  }

  private static addPortToMap(data: any) {
    let itemLon = data.lon / 600000
    let itemLat = data.lat / 600000;
    (storeUtil.getMapFun() as any).setCenter([itemLon, itemLat])
    let itemLonStr = itemLon < 0 ? Math.abs(Math.floor(itemLon * 100) / 100) + 'W' : Math.floor(itemLon * 100) / 100 + 'E'
    let itemLatStr = itemLat < 0 ? Math.abs(Math.floor(itemLat * 100) / 100) + 'S' : Math.floor(itemLat * 100) / 100 + 'N'
    let portInfo: any = {
      id: data.portId,
      nameCn: data.nameCn,
      nameEn: data.nameEn,
      code: data.unlocode,
      latLonStr: itemLonStr + ' ' + itemLatStr,
      lon: itemLon,
      lat: itemLat
    };
    (storeUtil.getMapFun() as any).showPort(portInfo)
  }

  /**
   * 限制名称长度
   * @param name
   * @private
   */
  private subName(name: string) {
    if (name && name.length > 13) {
      name = name.substring(0, 9) + '...'
    }
    return name
  }

  /**
   * 格式化时间
   * @param val
   */
  private dateDataFormat(val: number) {
    return getTimeByLong(val * 1000)
  }

  public mounted() {
    console.log(this.language)
    this.posLocation()
    let devicewidth = document.documentElement.clientWidth;//获取当前分辨率下的可是区域宽度
    let scale = devicewidth / 1920; // 分母——设计稿的尺寸
    // document.getElementById('')
  }

  /**
   * 获取船舶进出港信息
   * @private
   * @param ship
   */
  private async getArriveLeavePort(ship: any) {
    const nowTime = getNowTime()
    let startTime: any = ''
    let endTime: any = getLongByTime(nowTime)
    startTime = getLongByTime(getBeforeMonth2(nowTime, 1))
    HttpApi.getPortReport({
      shipId: ship.shipId,
      startTime: startTime,
      endTime: endTime
    }).then((res: any) => {
      if (res) {
        const list = res.portHisItems.reverse()
        this.setShipPorts(list, ship)
        if (list[0] && (list[0].outTime !== undefined)) {
          this.isOut = true
          this.$forceUpdate()
        } else {
          this.isOut = false
        }
      } else {
        this.voy = {}
      }
    })
  }

  /**
   * 设置船舶进出港数据
   * @param ports
   * @param ship
   * @private
   */
  private async setShipPorts(ports: any[], ship: any) {
    this.voy = {}
    let vList: any[] = []
    const len = ports.length
    ports.forEach((item: any, index: number) => {
      if (index !== len - 1) {
        let v: any = {
          departId: ports[index + 1].portId,
          depart: (ports[index + 1].portNameChs ? ports[index + 1].portNameChs + '/' : '') + ports[index + 1].portNameEn,
          departTime: ports[index + 1].outTime,
          departLon: ports[index + 1].cLon,
          departLat: ports[index + 1].cLat,
          arrivalId: item.portId,
          arrival: (item.portNameChs ? item.portNameChs + '/' : '') + item.portNameEn,
          arrivalTime: item.inTime,
          arrivalLon: item.cLon,
          arrivalLat: item.cLat,
          voyageId: Number(ship.shipId + '' + ports[index + 1].portId + '' + ports[index + 1].outTime),//用id和时间做唯一性
          flag: false
        }
        vList.push(v)
      }
    })
    this.voyList = vList
    if (ports.length > 0) { // 数组大于0
      if (ports.length === 1) { // 数组为1
        let port = ports[0]
        if (port.outTime) { // outTime != null
          if (ship.destPort) { // destPort != null
            // 离 - 预
            let destPortName = ship.destPort
            HttpApi.getDestPort({
              aisDestPort: ship.destPort,
              dynWeight: 100
            }).then((destPort: any) => {
              if (destPort && destPort.data) {
                destPortName = (destPort.data.nameCn ? destPort.data.nameCn : '') + (destPort.data.nameEn ? '/' + destPort.data.nameEn : '')
              }
            })

            this.voy = {
              departId: port.portId,
              depart: port.portNameChs ? port.portNameChs : '' + port.portNameEn ? '/' + port.portNameEn : '',
              departTime: port.outTime,
              departLon: port.cLon,
              departLat: port.cLat,
              flag: false,
              arrival: destPortName,//this.shipAis.destPort
              arrivalTime: ship.eta
            } as any
          } else {
            // 离 - null
            this.voy = {
              departId: port.portId,
              depart: (port.portNameChs ? port.portNameChs : '') + (port.portNameEn ? '/' + port.portNameEn : ''),
              departTime: port.outTime,
              departLon: port.cLon,
              departLat: port.cLat,
              flag: false
            } as any
          }
        } else {
          // null - 到
          this.voy = {
            arrivalId: port.portId,
            arrival: (port.portNameChs ? port.portNameChs : '') + (port.portNameEn ? '/' + port.portNameEn : ''),
            arrivalTime: port.inTime,
            arrivalLon: port.cLon,
            arrivalLat: port.cLat,
            flag: false
          } as any
        }
      } else { // 数组大于1
        let last = ports[0]
        let depart = ports[1]
        if (last.outTime) { // outTime != null
          if (ship.destPort) { // this.shipAis.destPort != null
            // 离 - 预
            let destPortName = ship.destPort
            let destPort = HttpApi.getDestPort({
              aisDestPort: ship.destPort,
              dynWeight: 100
            }).then((res: any) => {
              if (res) {
                destPortName = (res.nameCn ? res.nameCn : '') + (res.nameEn ? '/' + res.nameEn : '')
              }
            })

            this.voy = {
              depart: (last.portNameChs ? last.portNameChs : '') + (last.portNameEn ? '/' + last.portNameEn : ''),
              departTime: last.outTime,
              departLon: last.cLon,
              departLat: last.cLat,
              flag: false,
              arrival: destPortName,//this.shipAis.destPort
              arrivalTime: ship.eta
            } as any
          } else { // this.shipAis.destPort == null
            // 离 - null
            this.voy = {
              depart: (last.portNameChs ? last.portNameChs : '') + (last.portNameEn ? '/' + last.portNameEn : ''),
              departTime: last.outTime,
              departLon: last.cLon,
              departLat: last.cLat,
              flag: false
            } as any
          }
        } else { // outTime == null
          // 离 - 到
          this.voy = {
            voyageId: Number(ship.shipId + '' + depart.portId + '' + depart.outTime),//用时间和ID做唯一性
            departId: depart.portId,
            depart: (depart.portNameChs ? depart.portNameChs : '') + (depart.portNameEn ? '/' + depart.portNameEn : ''),
            departTime: depart.outTime,
            departLon: depart.cLon,
            departLat: depart.cLat,
            flag: false,
            arrivalId: last.portId,
            arrival: (last.portNameChs ? last.portNameChs : '') + (last.portNameEn ? '/' + last.portNameEn : ''),
            arrivalTime: last.inTime,
            arrivalLon: last.cLon,
            arrivalLat: last.cLat
          }
        }
      }
    } else { // 数组为0
      if (this.$props.shipData.destPort) { // this.shipAis.destPort != null
        // null - 预
        let destPortName = ship.destPort
        let destPort = HttpApi.getDestPort({
          aisDestPort: ship.destPort,
          dynWeight: 100
        }).then((res: any) => {
          if (res) {
            destPortName = (res.nameCn ? res.nameCn : '') + (res.nameEn ? '/' + res.nameEn : '')
          }
        })

        this.voy = {
          arrival: destPortName,//this.shipAis.destPort
          arrivalTime: ship.eta
        } as any
      }
    }
  }

  /**
   * 打开历史轨迹弹窗
   * @private
   */
  private openHistory() {
    DialogUtil.showDialog(TrackRecordTemp, DialogType2.TRACK_RECORD, {
      dialogData: {
        title: this.$props.shipData.shipnameCn,
        vueName: DialogType2.TRACK_RECORD
      },
      infoData: {
        shipData: this.$props.shipData,
        isHistory: false
      },
      show: true
    })
  }

  /**
   * 打开挂靠港记录
   * @private
   */
  private openPortOfCall() {
    DialogUtil.showDialog(PortOfCallTemp, DialogType2.PORT_OF_CALL, {
      dialogData: {
        title: this.$props.shipData.shipnameEn + `-${this.$t('message.shipInfo.portCalling')}`,
        vueName: DialogType2.PORT_OF_CALL
      },
      infoData: {
        shipData: this.$props.shipData
      },
      show: true
    })
  }

  /**
   * 打开船舶事件
   * @private
   */
  private openShipEvent() {
    DialogUtil.showDialog(ShipEventTemp, DialogType2.SHIP_EVENT, {
      dialogData: {
        title: this.$props.shipData.shipnameEn + `-${this.$t('message.shipEvent.shipEvent')}`,
        vueName: DialogType2.SHIP_EVENT
      },
      infoData: {
        data: this.$props.shipData
      },
      show: true
    })
  }

  /**
   * 船舶定位
   * @private
   */
  private posLocation() {
    const ship = this.$props.shipData
    const newshipmes = {
      y: ship.shiptype,
      m: ship.mmsi,
      h: ship.heading,
      g: ship.callsign,
      c: ship.cog,
      o: ship.imo,
      s: ship.sog,
      v: ship.aisNavStatus,
      l: ship.length,
      p: ship.destPort,
      b: ship.breadth,
      r: ship.eta,
      d: ship.draught,
      t: ship.posTime,
      i: ship.shipId,
      n: ship.lon,
      a: ship.lat,
      e: ship.shipnameEn,
      color: ship.color,
      isFleet: false
    }
    MapUtil.chooseShip(newshipmes)
  }

  /**
   * 隐藏船舶
   * @private
   */
  private hideShip() {
    if (!this.dialogData.data.isFleet) {
      this.ShipFun.hideShips(this.dialogData.data.shipId.toString())
    }
  }

  private filterCountryImg(data: any) {
    return ShipUtils.getShipCountryImg(data)
  }

  private formatDate(time: any, fmt: any) {
    return ShipUtils.formatDate(time, fmt)
  }

  private filterShipType(data: any, en?: boolean) {
    if (en) {
      return ShipUtils.getShipType(data, en)
    } else {
      return ShipUtils.getShipType(data)
    }

  }

  private filterShipStatus(data: any, en?: boolean) {
    if (en) {
      return ShipUtils.getShipStatus(data, en)
    } else {
      return ShipUtils.getShipStatus(data)
    }

  }

  private filterLon(data: any) {
    return ShipUtils.filterLon(data)
  }

  private filterLat(data: any) {
    return ShipUtils.filterLat(data)
  }

  private cancel() {
    this.ShipFun.delSelect()
  }
}
</script>

<style scoped lang="scss">
.ship-info-dialog {
  width: 100%;

  ::v-deep .el-dialog {
    position: absolute;
    top: 6.25rem;
  }

  ::v-deep .el-dialog__body {
    height: 22rem !important;
  }

  .info-footer-btn {
    display: flex;

    .el-button {
      min-width: 80px !important;
      height: 27px;
      background: #F1F3F9 !important;
      border-radius: 14px;
      padding: 0 10px !important;
      border: none !important;

      span {
        color: #2D469B !important;
      }

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

        span {
          color: #FFFFFF !important;
        }
      }
    }
  }

  .ship-info-content {
    width: 100%;
    overflow-y: hidden;

    .base-title {
      margin-left: 0 !important;
      font-weight: 400;
      color: #666666;
      line-height: 1.875rem;
      font-size: 1rem;
      flex-shrink: 0 !important;
      font-family: "Microsoft YaHei", serif;

      &:after {
        content: ":";
      }
    }

    span {
      margin-left: 0.625rem;
      font-weight: 400;
      color: #666666;
      line-height: 1.875rem;
      font-size: 0.875rem;
      flex-shrink: 0;
      font-family: "Microsoft YaHei", serif;
    }

    .hc-class {
      width: 100%;
      height: 6.25rem;
      background: rgba(255, 255, 255, 0.3);

      .item-hc {
        height: 6.25rem;
        display: flex;
        align-items: center;
        justify-content: center;

        .port-info {
          height: 4.5625rem;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          .port-name {
            text-align: center;
            font-family: "MicrosoftYaHei-Bold", serif;
            font-weight: bold;
            color: black;
          }

          .info-content {
            text-align: center;
            font-family: MicrosoftYaHei-Bold, serif;
            font-weight: bold;
            color: black;
          }
        }

        .fangxiang-box {
          width: 100%;
          height: 4.6525rem;
          display: flex;
          align-items: center;
          justify-content: center;

          .font-style {
            font-size: 6.25rem;
            color: black;
          }
        }
      }
    }
  }
}

.is-china {
  padding-bottom: 0.125rem;
  border-bottom: 0.0625rem solid;

  &:hover {
    cursor: pointer !important;
  }
}

@media (max-width: 1280px) {
  .ship-info-content {
    max-height: 480px;
    overflow-y: auto;
  }
}
</style>
