<template>
  <div class="yc-box">
    <div class="flex-column-center des-box">
      <div class="title-box">{{$t('message.routeCalculate.destination')}}</div>
      <el-select clearable
                 v-model="choosePort"
                 value-key="portId"
                 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.data.portId">
        </el-option>
      </el-select>
    </div>
    <div class="flex-column-center des-box">
      <div class="title-box">{{$t('message.routeCalculate.speed')}}</div>
      <el-input v-model.number="speek">
      </el-input>
    </div>
    <div>
      <el-button class="btn" v-loading="searchLoading" @click="search">{{this.$t('message.routeCalculate.search')}}</el-button>
    </div>
    <div class="yc-result-box" v-if="ycResult">
      <div><span>{{$t('message.routeCalculate.rd')}}：</span><span>{{ ycResult && ycResult.restDistance }}</span></div>
      <div><span>{{$t('message.routeCalculate.td')}}：</span><span>{{ ycResult && ycResult.pastDistance }}</span></div>
      <div><span>{{$t('message.routeCalculate.remainder')}}：</span><span>{{ ycResult && ycResult.restTime }}</span></div>
      <div><span>{{$t('message.routeCalculate.tt')}}：</span><span>{{ ycResult && ycResult.sailTime }}</span></div>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Watch} from 'vue-property-decorator'
import HttpApi from "@/api";
import storeUtil from '@/util/store'
import MessageUtil from '@/util/message';

@Component({
  props: {
    data: {}
  }
})
export default class RouteYc extends Vue {
  private choosePort: any = null
  private portOptions: any[] = []
  private language = window.localStorage.getItem('language')
  private speek: any = 15
  private ship: any = null
  private searchLoading = false
  private mapFun: any = storeUtil.getMapFun()
  private map: any = storeUtil.getMapInstance()
  private ycResult: any = null

  @Watch('data', {deep: true, immediate: true})
  dataChange(d: any) {
    this.ship = d;
  }

  private changePort(data: any) {
    console.log(data)
  }

  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
    }
  }

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

  private search() {
    if (!this.choosePort) {
      MessageUtil.info('目的地不能为空')
      return
    }
    this.searchLoading = true
    this.mapFun.delPath()
    this.ycResult = null
    HttpApi.getPredictTime({mmsi: this.ship.mmsi, destId: this.choosePort.portId, speed: this.speek}).then((res) => {
      if (res) {
        if (res.code === '0') {
          this.searchLoading = false
          const data: any = res.data;
          this.ycResult = {
            pastDistance: data.pastDistance,
            restDistance: data.restDistance,
            restTime: data.restTime,
            sailTime: data.sailTime
          }
          const point: any[] = data.restRoutePoints;
          point.unshift({lon: this.ship.lon / 600000, lat: this.ship.lat / 600000})
          this.mapFun.addPath(point, this.map)
        }
      } else {
        MessageUtil.info('未找到航线')
      }
      this.searchLoading = false
    })
  }

  private cancel() {
    this.mapFun.delPath()
  }
}
</script>

<style lang="scss" scoped>
.yc-box {
  width: 100%;

  .des-box {
    height: 50px;

    .title-box {
      width: 80px;
      flex-shrink: 0;
    }

    .el-select {
      width: 100%;
    }

  }

  .btn {
    width: 100%;
  }

  .yc-result-box {

  }
}

</style>
