<template>
  <div class="arrive-leave-query-box">
    <div class="header-box flex-column-center" v-if="!((tableType === 'yj') && !isShowPortSelect )"
         :style="tableType === 'yj'? 'justify-content: left;': ''">
      <div class="header-item" v-if="isShowPortSelect">
        <el-select clearable
                   v-model="choosePort"
                   value-key="id"
                   filterable
                   remote
                   reserve-keyword
                   :remote-method="remoteMethod"
                   :placeholder="$t('message.arriveLeave.choosePort')">
          <el-option v-for="(port) in portOptions"
                     :label="language === 'zh' ? port.label: port.enLabel"
                     :value="port.data"
                     :key="port.id">
            <template>
              <span style="float: left;margin-right: 0.625rem">{{
                  $t('message.arriveLeave.port')
                }}：{{ getPortName(port.data) }}</span>
              <span style="float: left;margin-right: 0.625rem">{{
                  $t('message.arriveLeave.portCountry')
                }}：{{ getCountryName(port.data) }}</span>
            </template>
          </el-option>
        </el-select>
      </div>
      <div class="header-item-date" v-if="tableType !== 'yj'">
        <el-date-picker v-model="queryTime"
                        type="datetimerange"
                        align="right"
                        :range-separator="language === 'zh'?'至': 'to'"
                        :start-placeholder="$t('message.arriveLeave.startTime')"
                        :end-placeholder="$t('message.arriveLeave.endTime')">
        </el-date-picker>
      </div>
      <div class="header-item" style="margin-left: 0.625rem">
        <el-button @click="query">{{ $t('message.arriveLeave.search') }}</el-button>
      </div>
      <div class="header-item" v-if="tableType !== 'yj'">
        <el-select v-model="shipLengthChoose" clearable :placeholder="$t('message.shipInfo.shipLength')">
          <el-option v-for="(item,index) in shipLengthChooseOption" :key="index"
                     :label="language === 'Chinese' ?item.label : item.labelEn"
                     :value="item.value"></el-option>
        </el-select>
      </div>

      <div class="header-item">
        <el-select v-model="shipCountryChoose" clearable :placeholder="$t('message.areaList.nationality')">
          <el-option v-for="(item,index) in shipCountryChooseOption" :key="index"
                     :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="header-item">
        <el-select v-model="shipTypeChoose" value-key="value" clearable :placeholder="$t('message.areaList.shipType')">
          <el-option v-for="(item,index) in shipTypeChooseOption" :key="index"
                     :label="language === 'Chinese' ?item.label : item.labelEn"
                     :value="item"></el-option>
        </el-select>
      </div>
      <div class="header-item">
        <el-button @click="flitership">{{ $t('message.arriveLeave.screen') }}</el-button>
      </div>
    </div>
    <div class="choose-box">
      <div class="flex" style="height: 32px!important;">
        <el-input clearable
                  v-model="selectShip"
                  :placeholder="$t('message.arriveLeave.chooseShip')"
                  @clear="clearSelect('type')"
                  @input="remoteMethodShipFormTable">
        </el-input>
        <div class="choose-time" v-if="tableType === 'yj'">
          <el-select v-model="chooseETAStart" @clear="clearSelect('start')" @change="screenETA" clearable
                     :placeholder="$t('message.arriveLeave.etaStartChoose')">
            <el-option v-for="(item) in chooseETAOptions"
                       :label="item"
                       :value="item"
                       :key="item">
            </el-option>
          </el-select>
          <div class="seq">
            <span>-</span>
          </div>
          <el-select v-model="chooseETAEnd" @clear="clearSelect('end')" @change="screenETA" clearable
                     :placeholder="$t('message.arriveLeave.etaEndChoose')">
            <el-option v-for="(item) in chooseETAOptions"
                       :label="item"
                       :value="item"
                       :key="item">
            </el-option>
          </el-select>
        </div>
      </div>
      <el-button @click="exportExcel">{{ $t('message.arriveLeave.export') }}</el-button>
    </div>
    <el-table :data="newTableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
              style="width: 100%;"
              ref="arriveTable"
              id="arriveTable"
              :row-style="{ cursor: 'pointer'}"
              :height="tableHeight"
              :header-cell-style="{'background-color': '#94A1CC',color: '#ffffff'}">
      <el-table-column prop="shipNameEn"
                       :label="$t('message.arriveLeave.shipName')"
                       min-width="150"
                       align="center"
                       show-overflow-tooltip
                       sortable>
        <template slot-scope="scope">
          <div @click="posShip(scope.row)"><span>{{ scope.row.shipNameEn || scope.row.shipName }}</span></div>
        </template>
      </el-table-column>
      <el-table-column prop="imo"
                       label="IMO"
                       width="100"
                       align="center"
                       show-overflow-tooltip
                       sortable>
      </el-table-column>
      <el-table-column prop="mmsi"
                       label="MMSI"
                       width="100"
                       align="center"
                       show-overflow-tooltip
                       sortable>
      </el-table-column>

      <el-table-column prop="shipType"
                       :label="$t('message.arriveLeave.shipType')"
                       width="120"
                       align="center"
                       show-overflow-tooltip
                       sortable>
        <template slot-scope="scope">
          {{ language === 'zh' ? filterShipType(scope.row.shipType) : filterShipType(scope.row.shipType, true) }}
        </template>
      </el-table-column>
      <el-table-column prop="draught"
                       v-if="tableType !== 'yj'"
                       :label="$t('message.arriveLeave.draught')"
                       width="100"
                       align="center"
                       show-overflow-tooltip
                       sortable>
        <template slot-scope="scope">
          {{ (Number(scope.row.inDraught / 10) || Number(scope.row.outDraught / 10)) + 'm' }}
        </template>
      </el-table-column>
      <el-table-column prop="draught"
                       v-if="tableType === 'yj'"
                       :label="$t('message.arriveLeave.draught')"
                       width="100"
                       align="center"
                       show-overflow-tooltip
                       sortable>
        <template slot-scope="scope">
          {{ Number(scope.row.draught / 10) + 'm' }}
        </template>
      </el-table-column>
      <el-table-column prop="sog"
                       v-if="tableType === 'yj'"
                       :label="$t('message.arriveLeave.sog')"
                       width="100"
                       align="center"
                       show-overflow-tooltip
                       sortable>
        <template slot-scope="scope">
          {{ Number(scope.row.sog / 10) + 'kn' }}
        </template>
      </el-table-column>
      <el-table-column prop="destPort"
                       v-if="tableType === 'yj'"
                       :label="$t('message.arriveLeave.destPort')"
                       width="120"
                       align="center"
                       show-overflow-tooltip
                       sortable>
      </el-table-column>
      <el-table-column prop="expectedArrivalTime"
                       v-if="tableType === 'yj'"
                       :label="$t('message.arriveLeave.eta')"
                       width="150"
                       align="center"
                       show-overflow-tooltip
                       sortable>
      </el-table-column>
      <el-table-column prop="latestTime"
                       v-if="tableType === 'yj'"
                       :label="$t('message.arriveLeave.latestTime')"
                       width="150"
                       align="center"
                       show-overflow-tooltip
                       sortable>
      </el-table-column>
      <el-table-column prop="time"
                       v-if="tableType === 'arrive'"
                       :label="$t('message.arriveLeave.arrivalTime')"
                       width="150"
                       align="center"
                       show-overflow-tooltip
                       sortable>
        <template slot-scope="scope">
          {{ dateFormat(Number(scope.row.time)) }}
        </template>
      </el-table-column>
      <el-table-column prop="time"
                       v-if="tableType === 'leave'"
                       :label="$t('message.arriveLeave.leaveTime')"
                       width="150"
                       align="center"
                       show-overflow-tooltip
                       sortable>
        <template slot-scope="scope">
          {{ dateFormat(Number(scope.row.time)) }}
        </template>
      </el-table-column>
      <el-table-column prop="shipLength"
                       v-if="tableType !== 'yj'"
                       :label="$t('message.arriveLeave.shipLength')"
                       width="120"
                       align="center"
                       show-overflow-tooltip
                       sortable>
        <template slot-scope="scope">
          {{ Number(scope.row.shipLength) + 'm' }}
        </template>
      </el-table-column>
      <el-table-column prop="nationality"
                       v-if="tableType !== 'yj'"
                       :label="$t('message.arriveLeave.flag')"
                       width="150"
                       align="center"
                       show-overflow-tooltip
                       sortable>
        <template slot-scope="scope">
          <img v-if="scope.row.mmsi" :src="getAisShipUrl(scope.row.mmsi.substring(0,3))" alt=""
               style="width: 2.5rem;height:1.875rem">
        </template>
      </el-table-column>
      <el-table-column prop="lastPortName"
                       v-if="tableType === 'arrive'"
                       :label="$t('message.arriveLeave.lastPortName')"
                       width="150"
                       align="center"
                       show-overflow-tooltip
                       sortable>
      </el-table-column>
      <el-table-column prop="nextPortName"
                       v-if="tableType === 'leave'"
                       :label="$t('message.arriveLeave.nextPortName')"
                       width="150"
                       align="center"
                       show-overflow-tooltip
                       sortable>
      </el-table-column>
      <el-table-column prop="lastOutTime"
                       v-if="tableType === 'arrive'"
                       :label="$t('message.arriveLeave.lastOutTime')"
                       width="150"
                       align="center"
                       show-overflow-tooltip
                       sortable>
        <template slot-scope="scope">
          {{ dateFormat(Number(scope.row.lastOutTime)) }}
        </template>
      </el-table-column>
      <el-table-column prop="nextInTime"
                       v-if="tableType === 'leave'"
                       :label="$t('message.arriveLeave.nextInTime')"
                       width="200"
                       align="center"
                       show-overflow-tooltip
                       sortable>
        <template slot-scope="scope">
          {{ dateFormat(Number(scope.row.nextInTime)) }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[50, 100, 200, 400]"
                   :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="newTableData.length">
    </el-pagination>
  </div>

</template>

<script lang="ts">
import {Component, Vue, Watch} from 'vue-property-decorator'
import Table from '@/components/table/index.vue'
import HttpApi from "@/api";
import MessageUtil from "@/util/message";
import {SearchLogUtil, ShipUtils} from "@/util/tool";
import {Loading} from 'element-ui';
import StoreUtil from '@/util/store'
import DialogUtil from "@/util/new-dialog";
import ShipInfoTemp from "@/views/new-dialog/ShipInfoTemp.vue";
import {DialogType as DialogType2, DialogType} from "@/util/temp-interface";
import {getBeforeTime, getLongByTime, getNowTime, getTimeByLong2} from '@/util/date';
import {exportTableAsXLSX} from '@/util/excel/exporeExcel'
import dayjs from "dayjs";

const elementResizeDetectorMaker = require('element-resize-detector')

@Component({
  components: {
    Table
  },
  props: {
    portId: {
      required: false,
      type: Number
    },
    type: {
      type: String,
      required: true
    }
  }
})
export default class ArriveLeaveQuery extends Vue {
  private language = window.localStorage.getItem('language')
  private choosePort: any = null
  private portOptions: any[] = []
  private queryTime: any[] = []
  private tableData: any[] = []
  private newTableData: any[] = []
  private currentPage = 1
  private pageSize = 50
  private isShowPortSelect = true
  private tableType = 'arrive'
  private selectShip = null
  private customLoading: any = {}
  private mapFun: any = StoreUtil.getMapFun()
  private map: any = StoreUtil.getMapInstance()
  private chooseETAStart = '';
  private chooseETAEnd = '';
  private chooseETAOptions: any[] = []
  private shipLengthChoose: any = null
  private shipLengthChooseOption: any[] = []
  private shipCountryChoose: any = null
  private shipCountryChooseOption: any[] = []
  private shipTypeChoose: any = null
  private shipTypeChooseOption: any[] = []
  private shipFilterTempData: any[] = []
  private tableHeight = 260

  @Watch('portId', {deep: true, immediate: true})
  portChange(data: string) {
    if (data) {
      this.choosePort = {
        portId: data
      }
      this.isShowPortSelect = false
    }
  }

  @Watch('type', {deep: true, immediate: true})
  typeChange(type: string) {
    if (type) {
      this.tableType = type;
      this.$nextTick(() => {
        // (this.$refs.arriveTable as any).doLayout()
        this.tableData = []
        this.newTableData = []
        this.portOptions = []
        if (type === 'yj' && !this.isShowPortSelect) {
          this.query()
        }
      })
    }
  }

  private flitership() {
    let type: any = this.shipTypeChoose
    let length: any = this.shipLengthChoose
    let country: any = this.shipCountryChoose
    let resultData: any[] = []
    if (type || length || country) {
      if (type) {
        resultData = this.tableData.filter((item: any) => {
          return item.customTypeName === type.labelEn;
        })
      }
      if (length) {
        if (resultData.length > 0) {
          switch (length) {
            case '1': {
              const temp: any[] = resultData.filter((item: any) => {
                return item.shipLength < 50
              })
              resultData = temp
            }
              break
            case '2': {
              const temp: any[] = resultData.filter((item: any) => {
                return item.shipLength >= 50 && item.shipLength < 100
              })
              resultData = temp
            }
              break
            case '3': {
              const temp: any[] = resultData.filter((item: any) => {
                return item.shipLength >= 100 && item.shipLength < 200
              })
              resultData = temp
            }
              break
            case '4': {
              const temp: any[] = resultData.filter((item: any) => {
                return item.shipLength >= 200
              })
              resultData = temp
            }
              break
          }
        } else {
          switch (length) {
            case '1':
              resultData = this.tableData.filter((item: any) => {
                return item.shipLength < 50
              })
              break
            case '2':
              resultData = this.tableData.filter((item: any) => {
                return item.shipLength >= 50 && item.shipLength < 100
              })
              break
            case '3':
              resultData = this.tableData.filter((item: any) => {
                return item.shipLength >= 100 && item.shipLength < 200
              })
              break
            case '4':
              resultData = this.tableData.filter((item: any) => {
                return item.shipLength >= 200
              })
              break
          }
        }
      }
      if (country) {
        if (!resultData.length && !(type || length)) {
          resultData = this.tableData.filter((item: any) => {
            return item.nationality === country
          })
        } else {
          const temp: any[] = resultData.filter((item: any) => {
            return item.nationality === country
          })
          resultData = temp
        }
      }
      this.newTableData = resultData
    } else {
      this.newTableData = this.tableData
    }
  }

  private exportExcel() {
    const exportTableData: any[] = []
    let header: string[] = []
    if (this.tableType === 'yj') {
      for (let i = 0; i < this.tableData.length; i++) {
        const data = this.tableData[i];
        exportTableData.push({
          'Ship name': data.shipNameEn || data.shipName,
          IMO: data.imo,
          MMSI: data.mmsi,
          'Ship type': this.language === 'zh' ? this.filterShipType(data.shipType) : this.filterShipType(data.shipType, true),
          Draught: Number(data.draught / 10) + 'm',
          Sog: Number(data.sog / 10) + 'kn',
          'Dest port': data.destPort,
          ETA: data.expectedArrivalTime,
          'Update time': data.latestTime
        })
      }
      Object.keys(exportTableData[0]).forEach((key: string) => {
        header.push(key)
      })
    } else if (this.tableType === 'arrive') {
      for (let i = 0; i < this.tableData.length; i++) {
        const data = this.tableData[i];
        exportTableData.push({
          'Ship name': data.shipNameEn || data.shipName,
          IMO: data.imo,
          MMSI: data.mmsi,
          'Ship type': this.language === 'zh' ? this.filterShipType(data.shipType) : this.filterShipType(data.shipType, true),
          Draught: (Number(data.inDraught / 10) || Number(data.outDraught / 10)) + 'm',
          'Arrival time': this.dateFormat(Number(data.time)),
          'Ship length': Number(data.shipLength) + 'm',
          Flag: this.getAisShipFlagName(data.mmsi.substring(0, 3)),
          'Last port name': data.lastPortName,
          'Last port Dep': dayjs(data.lastOutTime * 1000).format('YYYY-MM-DD HH:mm:ss')
        })
      }
      Object.keys(exportTableData[0]).forEach((key: string) => {
        header.push(key)
      })
    } else if (this.tableType === 'leave') {
      for (let i = 0; i < this.tableData.length; i++) {
        const data = this.tableData[i];
        exportTableData.push({
          'Ship name': data.shipNameEn || data.shipName,
          IMO: data.imo,
          MMSI: data.mmsi,
          'Ship type': this.language === 'zh' ? this.filterShipType(data.shipType) : this.filterShipType(data.shipType, true),
          Draught: (Number(data.inDraught / 10) || Number(data.outDraught / 10)) + 'm',
          'Leave time': this.dateFormat(Number(data.time)),
          'Ship length': Number(data.shipLength) + 'm',
          Flag: this.getAisShipFlagName(data.mmsi.substring(0, 3)),
          'Next port name': data.nextPortName,
          'Next in time': dayjs(data.nextInTime * 1000).format('YYYY-MM-DD HH:mm:ss')
        })
      }
      Object.keys(exportTableData[0]).forEach((key: string) => {
        header.push(key)
      })
    }
    let name = '';
    if (this.tableType === 'yj') {
      name = this.language === 'zh' ? '预计到港-' : 'Arriving-' + this.choosePort.nameEn
    } else if (this.tableType === 'arrive') {
      name = this.language === 'zh' ? '到港-' : 'Arrived-' + this.choosePort.nameEn
    } else {
      name = this.language === 'zh' ? '离港-' : 'Departured-' + this.choosePort.nameEn
    }
    exportTableAsXLSX(exportTableData, header, name)
  }

  private remoteMethodShipFormTable(data: any) {
    let result: any[] = []
    if (this.tableData.length) {
      this.tableData.forEach((item: any) => {
        if (this.$props.type !== 'yj') {
          if (item.shipNameEn.indexOf(data.toUpperCase()) !== -1) {
            result.push(item)
          }
        } else {
          if (item.shipName.indexOf(data.toUpperCase()) !== -1) {
            result.push(item)
          }
        }

      })
      this.newTableData = result
    }
  }

  private async query() {
    const type = this.$props.type
    if (!this.choosePort) {
      MessageUtil.error('请输入港口')
      return
    }
    if (!this.queryTime && this.tableType !== 'yj') {
      MessageUtil.error('请选择查询时间')
      return
    }
    const startTime = getLongByTime(this.queryTime[0])
    const endTime = getLongByTime(this.queryTime[1])
    if ((endTime - startTime) > (60 * 60 * 24 * 7)) {
      MessageUtil.error('只能查询七天内的数据')
      return
    }
    this.customLoading = Loading.service({
      target: document.getElementById('arriveTable') as HTMLElement
    })
    const param = {
      portId: this.choosePort.portId,
      startTime: startTime,
      endTime: endTime
    }
    this.mapFun.clearallship()
    let portInfo: any = {
      id: this.choosePort.portId,
      nameCn: this.choosePort.nameChs,
      nameEn: this.choosePort.nameEn,
      code: this.choosePort.unlocode,
      latLonStr: this.choosePort.lon / 600000 + ' ' + this.choosePort.lat / 600000,
      lon: this.choosePort.lon / 600000,
      lat: this.choosePort.lat / 600000
    };
    this.mapFun.showPort(portInfo)
    this.mapFun.addSelectByCoor([this.choosePort.lon / 600000, this.choosePort.lat / 600000])
    this.mapFun.setCenter([this.choosePort.lon / 600000, this.choosePort.lat / 600000])
    let result: any[] = []
    if (type === 'arrive') {
      await HttpApi.getArrivePortQuery(param).then((res: any) => {
        result = res
      }).catch((err) => {
        MessageUtil.info(err)
        this.customLoading.close()
      })
    } else if (type === 'leave') {
      await HttpApi.getLeavePortQuery(param).then((res: any) => {
        result = res
      }).catch((err) => {
        MessageUtil.info(err)
        this.customLoading.close()
      })
    } else if (type === 'yj') {
      await HttpApi.getYjPortQuery({portId: param.portId}).then((res: any) => {
        if (!res) {
          this.customLoading.close()
          return
        }
        res.forEach((ship: any) => {
          ship.shipType += ''
        })
        result = res
        result.forEach((ship: any) => {
          const date = ship.expectedArrivalTime
          this.chooseETAOptions.push(getTimeByLong2(new Date(date).getTime()))
        })
        this.chooseETAOptions = Array.from(new Set(this.chooseETAOptions))
      }).catch((err) => {
        MessageUtil.info(err)
        this.customLoading.close()
      })
    }
    result.forEach((ship: any) => {
      ship.customTypeName = this.filterShipType(ship.shipType, true)
      this.shipTypeChooseOption.push({
        label: this.filterShipType(ship.shipType),
        labelEn: this.filterShipType(ship.shipType, true),
        value: ship.shipType
      })
      const country: any = this.getAisShipCountry(ship.mmsi.substring(0, 3))
      this.shipCountryChooseOption.push({
        label: `${country.valueEn ? country.valueEn + '/' : ''}${country.valueChs ? country.valueChs : ''}`,
        value: country.valueAbbr
      })
    })
    this.shipTypeChooseOption = this.uniqueFunc2(this.shipTypeChooseOption, 'label')
    this.shipCountryChooseOption = this.uniqueFunc2(this.shipCountryChooseOption, 'value')
    this.shipCountryChooseOption.forEach((item: any, index: number) => {
      if (!(item.label && item.value)) {
        this.shipCountryChooseOption.splice(index, 1)
      }
    });
    this.newTableData = result
    this.tableData = result
    this.customLoading.close()
    const resultShips: any[] = []
    result.forEach((ship: any) => {
      const item = {
        y: ship.shipType || 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 || ''
      }
      resultShips.push(item)
    })

    this.mapFun.addShip(resultShips, this.map.getView().getZoom())
  }

  private screenETA() {
    let result: any[] = []
    if (this.chooseETAEnd && this.chooseETAStart) {
      const startTime = new Date(this.chooseETAStart).getTime()
      const endTime = new Date(this.chooseETAEnd).getTime()
      if (startTime >= endTime) {
        MessageUtil.error('预计到港截至日期筛选 开始时间必须小于结束时间')
        return
      }
      if (this.selectShip) {
        this.newTableData.forEach((item: any) => {
          const date = new Date(item.expectedArrivalTime).getTime()
          if (date >= startTime && date <= endTime) {
            result.push(item)
          }
        })
      } else {
        this.tableData.forEach((item: any) => {
          const date = new Date(item.expectedArrivalTime).getTime()
          if (date >= startTime && date <= endTime) {
            result.push(item)
          }
        })
      }
      this.newTableData = result
    } else if (this.chooseETAStart && !this.chooseETAEnd) {
      const startTime = new Date(this.chooseETAStart).getTime()
      if (this.selectShip) {
        this.newTableData.forEach((item: any) => {
          const date = new Date(item.expectedArrivalTime).getTime()
          if (date >= startTime) {
            result.push(item)
          }
        })
      } else {
        this.tableData.forEach((item: any) => {
          const date = new Date(item.expectedArrivalTime).getTime()
          if (date >= startTime) {
            result.push(item)
          }
        })
      }
      this.newTableData = result
    } else if (this.chooseETAEnd && !this.chooseETAStart) {
      const endTime = new Date(this.chooseETAEnd).getTime()
      if (this.selectShip) {
        this.newTableData.forEach((item: any) => {
          const date = new Date(item.expectedArrivalTime).getTime()
          if (endTime <= date) {
            result.push(item)
          }
        })
      } else {
        this.tableData.forEach((item: any) => {
          const date = new Date(item.expectedArrivalTime).getTime()
          if (endTime <= date) {
            result.push(item)
          }
        })
      }
      this.newTableData = result
    } else if (!(this.chooseETAEnd && this.chooseETAStart)) {
      if (this.selectShip) {
        this.filterShip()
      } else {
        this.newTableData = this.tableData
      }
    }
  }

  private async posShip(data: any) {
    let shipData: any = {}
    let docData = {}
    await HttpApi.getShipMessage({shipId: data.shipId}).then((res: any) => {
      const SearchLog = (this as any).$SearchLog
      let flag = true
      if (SearchLog.length) {
        for (let i = 0; i < SearchLog.length; i++) {
          const item = SearchLog[i]
          if (item.shipId === res[0].shipId) {
            flag = false
            break
          }
        }
      }

      if (flag) {
        SearchLogUtil.addSearchLog(res[0])
      }
      shipData = res[0]
    })
    await HttpApi.getShipDoc({shipId: data.shipId}).then((res: any) => {
      if (res) {
        docData = res
      }
    })
    DialogUtil.showDialog(ShipInfoTemp, DialogType.SHIP_INFO, {
      dialogData: {
        title: shipData.shipnameEn,
        vueName: DialogType2.SHIP_INFO
      },
      infoData: {
        shipData: shipData,
        docData: docData
      },
      show: true
    })
  }

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

  }

  // 日期格式化
  private dateFormat(val: number) {
    let a: number = val * 1000;
    let date = new Date(a);//date.getFullYear() + "-" +   //s+ ":" + date.getSeconds()
    let str = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes();
    str = val ? str : "";
    return str;
  }

  private uniqueFunc2(arr: any, uniId: any) {
    const res = new Map();
    return arr.filter((item: any) => !res.has(item[uniId]) && res.set(item[uniId], 1));
  }

  public cancel() {
    const shipIds: any[] = [];
    this.tableData.forEach((ship: any) => {
      shipIds.push(ship.shipId)
    })
    this.mapFun.hideShips(shipIds)
    this.mapFun.delSelect()
  }

  //查询船旗
  private getAisShipUrl(val: string): string {
    // let url = val ? `/assets/countryFlag/${val}.png` : "";
    return ShipUtils.getShipCountryImg(val);
  }

  //查询船旗
  private getAisShipFlagName(val: string): string {
    // let url = val ? `/assets/countryFlag/${val}.png` : "";
    return ShipUtils.getShipCountryImgName(val);
  }

  //查询船旗国家名称
  private getAisShipCountry(val: string): string {
    return ShipUtils.getShipCountry(val) as any;
  }

  private clearSelect(flag: string) {
    this.newTableData = this.tableData
    if (flag === 'type') {
      this.selectShip = null
    } else if (flag === 'start') {
      this.chooseETAStart = ''
    } else if (flag === 'end') {
      this.chooseETAEnd = ''
    }
    this.screenETA()
  }

  private handleSizeChange(val: any) {
    this.pageSize = val
  }

  private handleCurrentChange(val: any) {
    this.currentPage = val
  }

  private filterShip() {
    const result: any[] = [];
    if (this.selectShip) {
      this.tableData.forEach((item: any) => {
        if (((item.shipType + '') === (this.selectShip + '')) || ((item.shiptype + '') === (this.selectShip + ''))) {
          result.push(item)
        }
      })
    }
    if (this.chooseETAEnd || this.chooseETAStart) {
      this.screenETA()
    }
    this.newTableData = result
  }

  private remoteMethod(word: string) {
    this.portOptions = []
    HttpApi.getPort(word).then((res: any) => {
      res.forEach((port: any) => {
        this.portOptions.push({
          id: 'port-' + port.portId,
          data: port,
          label: `港口名称：${this.getPortName(port)} 国家：${this.getCountryName(port)}`,
          enLabel: `Port：${this.getPortName(port)} Country：${this.getCountryName(port)}`
        })
      })
    })
  }

  private getPortName(data: any) {
    if (data) {
      let name = ''
      if (data.nameEn && data.nameChs) {
        name += `${data.nameChs}(${data.nameEn})`
      } else if (data.nameChs || data.nameEn) {
        name += `${data.nameChs || data.nameEn}`
      }
      return name
    }
  }

  private getCountryName(data: any) {
    if (data) {
      let name = ''
      if (data.countryEn && data.countryChs) {
        name += `${data.countryChs}(${data.countryEn})`
      } else if (data.countryChs || data.countryEn) {
        name += `${data.countryChs || data.countryEn}`
      }
      return name
    }
  }

  public mounted() {
    if (this.isShowPortSelect) {
      for (let i = 0; i < this.portOptions.length; i++) {
        if (this.$props.portId === this.portOptions[i].id) {
          this.choosePort = this.portOptions[i]
          break
        }
      }
    }

    window.addEventListener("setItemEvent", (e: any) => {
      if (e.key === 'language') {
        this.language = e.newValue
      }
    });

    const erd = elementResizeDetectorMaker()
    erd.listenTo((this.$refs.arriveTable as any).$parent.$el, () => {
      this.tableHeight = (this.$refs.arriveTable as any).$parent.$el.clientHeight - 120
    })
  }

  public created() {
    const endTime = `${getNowTime()}`
    const startTime = getBeforeTime(endTime, 3)
    this.queryTime[0] = new Date(startTime)
    this.queryTime[1] = new Date(endTime)

    this.shipLengthChooseOption = [
      {label: '50米以下', labelEn: 'Below 50m', value: '1'},
      {label: '50~100米', labelEn: '50~100m', value: '2'},
      {label: '100~200米', labelEn: '100~200m', value: '3'},
      {label: '200米以上', labelEn: 'Above 200m', value: '4'}
    ]
  }
}
</script>

<style scoped lang="scss">
.arrive-leave-query-box {
  width: 100%;
  overflow-y: hidden;
  min-height: 300px;
  height: 100%;

  .header-box {
    width: 100%;
    height: 32px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .header-item {
      display: flex;
      align-items: center;

      .el-select:first-child {
        flex-shrink: 1;
      }
    }

    .header-item-date {
      width: 18.75rem !important;

      ::v-deep .el-date-editor {
        width: 100% !important;
      }
    }

    .el-button {
      height: 32px !important;
      width: auto !important;
    }
  }

  .choose-box {
    margin-top: 10px !important;
    display: flex;
    height: 32px !important;
    margin-bottom: 10px;
    align-items: center;
    justify-content: space-between;

    &:first-child {
      height: 32px !important;
    }

    ::v-deep .el-input__inner {
      height: 32px !important;
      border: 1px solid #CCCCCC !important;
    }

    .el-button {
      width: 86px !important;
      background: transparent !important;
      border: none !important;
      color: #6C7DB9 !important;
      font-weight: 500;

      &:hover {
        background: #D9DEED !important;
      }
    }

    .choose-time {
      display: flex;
      align-items: center;
      margin-left: 10px;

      .el-select {
        border: none !important;

        .el-input__inner {
          height: 32px !important;
        }
      }

      .seq {
        width: 1.25rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .el-select {
        width: 9.375rem;
      }
    }
  }
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 0.5rem;
}

::v-deep .el-table__column-filter-trigger {
  i {
    color: #FFFFFF !important;
  }
}

.el-select {
  border: 1px solid #CCCCCC !important;
  max-width: 190px !important;

  ::v-deep .el-input__inner {
    height: 32px !important;
    border: none !important;
  }
}

.el-date-editor {
  height: 32px !important;
}
</style>
