<template>
  <div class="port-query-box">
    <div class="flex">
      <el-button @click="openPortOther(port.portId,'arrive')">{{ $t('message.PortQuery.arrive') }}</el-button>
      <el-button @click="openPortOther(port.portId,'leave')">{{ $t('message.PortQuery.leave') }}</el-button>
      <el-button @click="openPortOther(port.portId,'yj')">{{ $t('message.PortQuery.yj') }}</el-button>
    </div>
    <el-tabs v-model="viewCon">
      <el-tab-pane :label="$t('message.PortQuery.portTitle')" name="port">
        <div class="info-item">
          <div class="title"><span>{{ $t('message.PortQuery.portNameC') }}：</span></div>
          <div class="info"><span>{{ port.nameCn }}</span></div>
        </div>
        <div class="info-item">
          <div class="title"><span>{{ $t('message.PortQuery.portNameE') }}：</span></div>
          <div class="info"><span>{{ port.nameEn }}</span></div>
        </div>
        <div class="info-item">
          <div class="title"><span>{{ $t('message.PortQuery.countryOfPort') }}：</span></div>
          <div class="info"><span>{{ port.continentName }}</span></div>
        </div>
        <div class="info-item">
          <div class="title"><span>{{ $t('message.PortQuery.areaOfPort') }}：</span></div>
          <div class="info"><span>{{ port.continentName }}</span></div>
        </div>
        <div class="info-item">
          <div class="title"><span>{{ $t('message.PortQuery.portTimeZone') }}：</span></div>
          <div class="info"><span>{{ port.timeZone }}</span></div>
        </div>
        <div class="info-item">
          <div class="title"><span>{{ $t('message.PortQuery.maximumDraftLimit') }}：</span></div>
          <div class="info"><span></span></div>
        </div>
        <div class="info-item">
          <div class="title"><span>{{ $t('message.PortQuery.maximumDWTLimit') }}：</span></div>
          <div class="info"><span>{{ Math.round(port.maxDwt) }}</span></div>
        </div>
        <div class="info-item">
          <div class="title"><span>{{ $t('message.PortQuery.maximumCaptainLimit') }}：</span></div>
          <div class="info"><span></span></div>
        </div>
        <div class="info-item">
          <div class="title"><span>{{ $t('message.PortQuery.dryBulkFacilities') }}：</span></div>
          <div class="info"><span>{{ port.dryBulkFacilities }}</span></div>
        </div>
        <div class="info-item">
          <div class="title"><span>{{ $t('message.PortQuery.breakBulkFacilities') }}：</span></div>
          <div class="info"><span>{{ port.breakbulkFacilities }}</span></div>
        </div>
        <div class="info-item">
          <div class="title"><span>{{ $t('message.PortQuery.containerFacilities') }}：</span></div>
          <div class="info"><span>{{ port.containerFacilities }}</span></div>
        </div>
        <div class="info-item">
          <div class="title"><span>{{ $t('message.PortQuery.roRoFacilities') }}：</span></div>
          <div class="info"><span>{{ port.roRoFacilities }}</span></div>
        </div>
        <div class="info-item">
          <div class="title"><span>{{ $t('message.PortQuery.passengerFacilities') }}：</span></div>
          <div class="info"><span>{{ port.passengerFacilities }}</span></div>
        </div>
        <div class="info-item">
          <div class="title"><span>{{ $t('message.PortQuery.liquidFacilities') }}：</span></div>
          <div class="info"><span>{{ port.liquidFacilities }}</span></div>
        </div>
        <div class="info-item">
          <div class="title"><span>{{ $t('message.PortQuery.lngFacilities') }}：</span></div>
          <div class="info"><span>{{ Math.round(port.lngFacilities) }}</span></div>
        </div>
        <div class="info-item">
          <div class="title"><span>{{ $t('message.PortQuery.lpgFacilities') }}：</span></div>
          <div class="info"><span>{{ Math.round(port.lpgFacilities) }}</span></div>
        </div>
        <div class="info-item">
          <div class="title"><span>{{ $t('message.PortQuery.dryDockFacilities') }}：</span></div>
          <div class="info"><span>{{ port.dryDockFacilities }}</span></div>
        </div>
        <div class="info-item">
          <div class="title"><span>{{ $t('message.PortQuery.freeTradeZone') }}：</span></div>
          <div class="info"><span>{{ port.freeTradeZone }}</span></div>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('message.PortQuery.berthTitle')" name="berth">
        <div class="berth-box">
          <div class="item">
            <el-select v-model="chooseBerth"
                       :placeholder="$t('message.PortQuery.chooseBerth')"
                       value-key="berthId" remote
                       :no-match-text="$t('message.PortQuery.noText')"
                       clearable
                       @change="chooseBerthFun"
                       filterable>
              <el-option v-for="(item,index) in port.portBerths"
                         :key="index"
                         :label="item.berthName"
                         :value="item"></el-option>
            </el-select>
          </div>
          <div class="item">
            <el-button @click="viewAllBerth">{{ $t('message.PortQuery.allShowBerth') }}
            </el-button>
          </div>
        </div>
        <div class="berth-info" v-if="chooseBerth">
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.berthName') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.berthName }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.berthOperator') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.berthOperator }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.berthType') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.berthType }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.berthStatus') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.berthStatus }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.facilityType') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.facilityType }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.nightBerthing') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.nightBerthing }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.nightBerthingNote') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.nightBerthingNote }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.nightUnberthing') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.nightUnberthing }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.shipLOAMax') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.shipLOAMax }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.shipLOAMin') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.shipLOAMin }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.shipLOANote') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.shipLOANote }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.shipDwtMax') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.shipDwtMax }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.shipDwtMin') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.shipDwtMin }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.shipDWTNote') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.shipDWTNote }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.shipDispMax') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.shipDispMax }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.shipDispMin') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.shipDispMin }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.shipDispNote') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.shipDispNote }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.shipBeamMax') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.shipBeamMax }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.berthDispMax') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.berthDispMax }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.gTMax') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.gtMax }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.TEU') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.teu }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.totalPBLMin') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.totalPBLMin }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.manifoldBCMMax') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.manifoldBCMMax }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.manifoldBCMMin') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.manifoldBCMMin }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.manifoldSCMMax') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.manifoldSCMMax }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.manifoldSCMMin') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.manifoldSCMMin }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.manifoldHeightMax') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.manifoldHeightMax }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.manifoldHeightMin') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.manifoldHeightMin }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.derrickSWLMin') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.derrickSWLMin }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.wLMastheadHeightMax') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.wLMastheadHeightMax }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.manifoldPBLMinFwd') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.manifoldPBLMinFwd }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.manifoldPBLMinAft') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.manifoldPblMinAft }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.manifoldUsed') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.manifoldUsed }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.roRo') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.roRo }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.passengerType') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.passenger }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.rampWidth') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.rampWidth }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.rampSWL') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.rampSwl }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.breakBulk') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.breakbulk }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.naval') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.naval }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.coastal') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.coastal }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.timberProducts') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.timberProducts }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.fishing') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.fishing }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.container') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.container }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.transhipment') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.transhipment }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.offshore') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.offshore }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.projectHeavy') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.projectHeavy }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.steelProducts') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.steelProducts }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.twinSpan') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.twinSpan }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.cranesNote') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.localTime }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.allWeatherBerth') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.allWeatherBerth }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.coldIroning') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.coldIroning }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.sideAlongside') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.sideAlongside }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.bunkersHFO') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.bunkersHfo }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.deliveryHFO') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.deliveryHfo }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.gangwayUsed') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.gangwayUsed }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.bunkersDOGO') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.bunkersDoGOo }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.mooringsFwd') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.mooringsFwd }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.mooringsAft') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.mooringsAft }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.bunkersLNG') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.bunkersLng }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.deliveryLNG') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.deliveryLng }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.freshWater') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.freshWater }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.deliveryFW') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.deliveryFw }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.cow') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.cow }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.berthAdditionalInfo') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.berthAdditionalInfo }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.reefer') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.reefer }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.waterLineHeightHWMaxDecimal') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.waterLineHeightHwMaxDecimal }}</span></div>
          </div>
          <div class="berth-item">
            <div class="title"><span>{{ $t('message.PortQuery.dryBulkCargo') }}：</span></div>
            <div class="info"><span>{{ chooseBerth.dryBulkCargo }}</span></div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane :label=" $t('message.PortQuery.weather')" v-if="funOpen.weather">
        <el-row>
          <el-col :span="12">
            <div class="base-title mb-10">
              <span>{{ $t('message.PortQuery.temperature') }}：</span>
              <span class="info-content">{{ weather && weather.temp ? weather.temp : '--' }}</span>
            </div>
            <div class="base-title mb-10">
              <span>{{ $t('message.PortQuery.windSpeed') }}：</span>
              <span class="info-content">
                  {{ weather && weather.windSpeed ? `${weather.windSpeed.toFixed(1)}` + `m/s` : '--' }}
                </span>
            </div>
            <div class="base-title mb-10">
              <span>{{ $t('message.PortQuery.waveHeight') }}：</span>
              <span class="info-content">
                  {{ weather && weather.seaWaveHeight ? weather.seaWaveHeight.toFixed(1) + 'm' : '--' }}
                </span>
            </div>
            <div class="base-title mb-10">
              <span>{{ $t('message.PortQuery.rush') }}：</span>
              <span class="info-content">{{
                  weather && weather.seaSwellDirection ? weather.seaSwellDirection.toFixed(1) + '°' : '--'
                }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="base-title mb-10">
              <span>{{ $t('message.PortQuery.windDirection') }}：</span>
              <span class="info-content">{{ weather && weather.windDirection ? weather.windDirection : '--' }}</span>
            </div>
            <div class="base-title mb-10">
              <span>{{ $t('message.PortQuery.surgeHeight') }}：</span>
              <span class="info-content">
                  {{ weather && weather.seaSwellHeight ? weather.seaSwellHeight.toFixed(1) + 'm' : '--' }}
                </span>
            </div>
            <div class="base-title mb-10">
              <span>{{ $t('message.PortQuery.visibility') }}：</span>
              <span class="info-content">
                  {{ weather && weather.visibility ? parseInt(weather.visibility) + 'km' : '--' }}
                </span>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane :label="$t('message.PortQuery.dongTai')" v-if="funOpen.dongTai">
        <el-radio-group v-model="radio" style="margin-bottom: 0.625rem">
          <el-radio label="d">{{ $t('message.PortQuery.day') }}</el-radio>
          <el-radio label="w">{{ $t('message.PortQuery.week') }}</el-radio>
          <el-radio label="m">{{ $t('message.PortQuery.month') }}</el-radio>
        </el-radio-group>
        <el-radio-group v-model="radio2" style="margin-bottom: 0.625" @change="changeEcharts">
          <el-radio label="m">{{ $t('message.PortQuery.mao') }}</el-radio>
          <el-radio label="b">{{ $t('message.PortQuery.berth') }}</el-radio>
          <el-radio label="p">{{ $t('message.PortQuery.port') }}</el-radio>
          <el-radio label="mt">{{ $t('message.PortQuery.maoTime') }}</el-radio>
          <el-radio label="dt">{{ $t('message.PortQuery.doTime') }}</el-radio>
        </el-radio-group>
        <div class="port-echarts">
          <div ref="on-mao" class="echarts-item"></div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Watch} from 'vue-property-decorator'
import store from '@/util/store'
import HttpApi from '@/api'
import * as ECharts from 'echarts'
import DialogUtil from "@/util/new-dialog";
import ArriveLeaveQueryTemp from "@/views/new-dialog/ArriveLeaveQueryTemp.vue";
import {DialogType} from "@/util/temp-interface";
import {portQuery} from "@/util/fun-switch";
import {getFullStrDate} from "@/util/date";
import DepartureInquiryTemp from "@/views/new-dialog/DepartureInquiryTemp.vue";
import ExpectedArrivalTemp from "@/views/new-dialog/ExpectedArrivalTemp.vue";

const echartsData = require('../../../public/config/echartTest.json')
@Component({
  props: {
    port: {
      type: Object,
      required: false
    }
  }
})
export default class PortQuery extends Vue {
  private viewCon = 'port'
  private chooseBerth: any = null
  private language: any
  private shipFun: any = store.getMapFun()
  private isShowBerth = false
  private weather: any = {}
  private radio = 'd' // 选择的统计条件
  private radio2 = 'm' // 选择的统计条件
  private echarts1: any
  private funOpen = portQuery

  @Watch('$store.state.language', {
    deep: true,
    immediate: true
  })
  languageChange(data: any) {
    this.language = data
    this.$forceUpdate()
  }

  @Watch('port', {
    immediate: true,
    deep: true
  })
  portChange(data: any) {
    if (data && this.funOpen.weather) this.getWeather(data)
  }

  @Watch('$store.state.isShowBerth', {
    deep: true,
    immediate: true
  })
  showBerth(data: boolean) {
    this.isShowBerth = data
  }

  public mounted() {
    if (this.funOpen.dongTai) {
      this.echarts1 = ECharts.init(this.$refs['on-mao'] as HTMLElement)
      setTimeout(() => {
        this.renderEcharts(this.echarts1, echartsData.data, '锚地情况')
      }, 1000)
    }

    this.shipFun.addClick((res: any) => {
      if (res.type === 'berth') {
        const id = res.berthId
        const berthOptions = this.$props.port.portBerths
        for (let i = 0; i < berthOptions.length; i++) {
          if (id === berthOptions[i].berthId) {
            this.chooseBerth = berthOptions[i]
            break
          }
        }
      }
    })
  }

  private changeEcharts(data: any) {
    this.echarts1.clear()
    switch (data) {
      case 'm':
        this.renderEcharts(this.echarts1, {}, '锚地情况')
        break
      case 'b':
        this.renderEcharts(this.echarts1, {}, '泊位情况')
        break
      case 'p':
        this.renderEcharts(this.echarts1, {}, '港口情况')
        break
      case 'mt':
        this.renderEcharts(this.echarts1, {}, '锚泊时长')
        break
      case 'dt':
        this.renderEcharts(this.echarts1, {}, '作业时长')
        break
    }
  }

  private renderEcharts(echarts: any, data: any, title: string) {
    const data0 = this.splitData()

    const options = {
      backgroundColor: '#232943',
      legend: {
        top: 35,
        left: 'center',
        data: ['k线', 'MA5', 'MA10', 'MA20'],
        textStyle: {
          color: '#D5D5D5'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      title: {
        text: title,
        left: '40%',
        textStyle: {
          color: '#D5D5D5'
        },
        top: 0
      },
      grid: [
        {
          left: '3%',
          top: '60',
          height: '40%'
        },
        {
          left: '3%',
          bottom: '5%',
          top: '60%',
          height: '25%'
        }
      ],
      xAxis: [
        {
          type: 'category',
          data: data0.categoryData,
          scale: false,
          boundaryGap: false,
          axisLine: {
            onZero: false,
            lineStyle: {
              color: '#D5D5D5'
            }
          },
          splitLine: {
            show: false
          },
          splitNumber: 20
        },
        {
          type: 'category',
          gridIndex: 1,
          data: data0.categoryData,
          axisLabel: {show: false}
        }
      ],
      yAxis: [
        {
          scale: true,
          splitArea: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#D5D5D5'
            }
          },
          position: 'right'
        },
        {
          gridIndex: 1,
          splitNumber: 3,
          axisLine: {
            lineStyle: {
              color: '#D5D5D5'
            }
          },
          axisTick: {show: true},
          splitLine: {show: false},
          axisLabel: {show: true},
          position: 'right'
        }
      ],
      dataZoom: [
        {
          type: 'inside',
          start: 100,
          end: 80
        },
        {
          show: false,
          type: 'slider',
          y: '90%',
          start: 50,
          end: 100
        },
        {
          show: false,
          xAxisIndex: [0, 1],
          type: 'slider',
          start: 20,
          end: 100
        }],
      series: [
        {
          name: 'k线',
          type: 'candlestick',
          data: data0.values
        },
        {
          name: 'MA5',
          type: 'line',
          data: this.calculateMA(5, data0),
          showSymbol: false,
          smooth: true,
          lineStyle: {
            normal: {
              opacity: 0.5
            }
          }
        },
        {
          name: 'MA10',
          type: 'line',
          data: this.calculateMA(10, data0),
          smooth: true,
          showSymbol: false,
          lineStyle: {
            normal: {
              opacity: 0.5
            }
          }
        },
        {
          name: 'MA20',
          type: 'line',
          data: this.calculateMA(20, data0),
          smooth: true,
          showSymbol: false,
          lineStyle: {
            normal: {
              opacity: 1
            }
          }
        },
        {
          name: '平均值',
          type: 'bar',
          xAxisIndex: 1,
          yAxisIndex: 1,
          data: data0.macds,
          itemStyle: {
            normal: {
              color: '#D5D5D5'
            }
          }
        }
      ]
    }
    echarts.setOption(options, true)
  }

  private splitData() {
    const resData = require('../../../public/config/echartTest.json')
    const data = JSON.parse(JSON.stringify(resData.data))
    let categoryData = []
    let values = []
    let macds = []
    let difs = []
    let deas = []
    for (let i = 0; i < data.length; i++) {
      categoryData.push(data[i].splice(0, 1)[0])
      values.push(data[i])
      if (data[i][6] > 0) {
        macds.push(data[i][6])
      } else {
        macds.push(0)
      }

      difs.push(data[i][7])
      deas.push(data[i][8])
    }
    return {
      categoryData: categoryData,
      values: values,
      macds: macds,
      difs: difs,
      deas: deas
    }
  }

  private calculateMA(data: any, data0: any) {
    let result = []
    for (let i = 0, len = data0.values.length; i < len; i++) {
      if (i < data) {
        result.push('-')
        continue
      }
      let sum = 0
      for (let j = 0; j < data; j++) {
        sum += data0.values[i - j][1]
      }
      result.push(sum / data)
    }
    return result
  }

  private getWeather(port: any) {
    HttpApi.getWeather({
      lon: port.cLon / 600000 || port.lon / 600000,
      lat: port.cLat / 600000 || port.lat / 600000,
      dateTime: getFullStrDate()
    }).then((res: any) => {
      this.weather = res
    })
  }

  /**
   * 切换泊位的方法
   * @param data
   * @private
   */
  private chooseBerthFun(data: any) {
    if (data) {
      this.shipFun.clearallBerth()
      this.shipFun.clearallPort()
      this.shipFun.showBerth(data)
      this.shipFun.setCenter([data.decLongitude, data.decLatitude])
    } else {
      this.shipFun.clearallBerth()
    }
  }

  /**
   * 显示全部泊位
   * @private
   */
  private viewAllBerth() {
    this.shipFun.clearallBerth()
    this.shipFun.clearallPort()
    this.shipFun.delSelect()
    this.chooseBerth = null
    this.isShowBerth = !this.isShowBerth
    if (this.isShowBerth) {
      this.$store.commit('setShowPort', false)
      const berths = this.$props.port.portBerths
      berths.forEach((berth: any) => {
        this.shipFun.showBerth(berth)
      })
    }
  }

  private openPortOther(portId: string, type: string) {
    const param = {
      dialogData: {
        title: '',
        vueName: DialogType.ARRIVE_LEAVE_QUERY
      },
      infoData: {
        type: type,
        portId: portId
      },
      show: true
    }
    if (type === 'arrive') {
      param.dialogData.vueName = DialogType.ARRIVE_LEAVE_QUERY
      DialogUtil.showDialog(ArriveLeaveQueryTemp, DialogType.ARRIVE_LEAVE_QUERY, param)
    } else if (type === 'leave') {
      param.dialogData.vueName = DialogType.DEPARTURE_INQUIRY
      DialogUtil.showDialog(DepartureInquiryTemp, DialogType.DEPARTURE_INQUIRY, param)
    } else if (type === 'yj') {
      param.dialogData.vueName = DialogType.EXPECTED_ARRIVAL
      DialogUtil.showDialog(ExpectedArrivalTemp, DialogType.EXPECTED_ARRIVAL, param)
    }
  }

  private cancel() {
    this.chooseBerth = null
    this.shipFun.clearallBerth()
  }
}
</script>

<style scoped lang="scss">
.port-query-box {
  .info-item {
    height: 1.875rem;
    display: flex;
    align-items: center;

    .title {
      width: 12.5rem;
      display: flex;
      justify-content: left;
      flex-shrink: 0;
    }
  }

  .berth-box {
    display: flex;

    .item {
      width: 50%;
      height: 3.75rem;
      display: flex;
      align-items: center;

      .el-select {
        ::v-deep .el-input__inner {
          height: 1.875rem !important;
        }
      }
    }
  }

  .berth-info {
    height: 31.25rem;
    overflow-y: auto;
  }
}

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

  .title {
    width: 18.75rem;
    flex-shrink: 0;
    display: flex;
    justify-content: left;
  }
}

.port-echarts {
  width: 100%;
  height: 37.5rem;
  overflow-y: auto;

  .echarts-item {
    width: 37.5rem;
    height: 31.25rem;
  }
}

</style>
