<template>
  <div class="point-result-box">
    <div class="time-box">
      <span>{{ $t('message.typhoon.start') }}</span>：&nbsp;
      <el-date-picker
        v-model="startTime"
        type="datetime"
        placeholder="选择日期时间">
      </el-date-picker>
    </div>
    <el-table :data="tableData" :show-summary="true" :summary-method="getSummaries"
              :header-cell-style="{'background-color': '#8392C5',color: '#ffffff',height: '40px'}">
      <el-table-column
        :label="$t('message.routeQuery.route')"
        align="center"
        width="220">
        <template slot-scope="scope">
          <div><span>form:</span>&nbsp;<span style="color: #2c469b">{{
              cacuLonLat(scope.row.startPoint.lon, 'lon')
            }}</span>&nbsp;
            <span style="color: #2c469b">{{ cacuLonLat(scope.row.startPoint.lat, 'lat') }}</span></div>
          <div><span>to:</span>&nbsp;<span style="color: #2c469b">{{ cacuLonLat(scope.row.endPoint.lon, 'lon') }}</span>&nbsp;
            <span style="color: #2c469b">{{ cacuLonLat(scope.row.endPoint.lat, 'lat') }}</span></div>
        </template>
      </el-table-column>
      <el-table-column
        width="200"
        prop="distance"
        align="center"
        :label="$t('message.routeQuery.voyageDistance')">
      </el-table-column>
      <el-table-column
        width="80"
        prop="sog"
        align="center"
        :label="$t('message.TrackHoverView.Speed')">
        <template slot-scope="scope">
          <el-input v-model="scope.row.sog"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        width="150"
        prop="hours"
        align="center"
        :label="$t('message.routeQuery.duration')">
        <template slot-scope="scope">
          <span>{{ getDayAndHour(scope.row.distance / scope.row.sog, scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="120"
        prop="inPortTime"
        align="center"
        :label="$t('message.routeQuery.timeInPort')">
        <template slot-scope="scope">
          <el-input v-model.number="scope.row.inPortTime"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="arriveTime"
        width="150"
        :label="$t('message.routeQuery.arrivePortTime')">
        <template slot-scope="scope">
          <span>{{ countTime(scope) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="220"
        prop="leaveTime"
        :label="$t('message.portOfCall.departureTime')">
        <template slot-scope="scope">
          <span>{{ countLeaveTime(scope) }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Watch} from 'vue-property-decorator'
import {getTimeByLong} from "@/util/date";
import {and} from "ol/format/filter";
import storeUtil from '@/util/store/index'

@Component({
  props: {
    data: {}
  }
})
export default class PointToPointRes extends Vue {
  private tableData: any[] = []
  private startTime: any = ''
  private sog = 12
  private mapFun: any = storeUtil.getMapFun()
  private map = storeUtil.getMapInstance()

  @Watch('data', {deep: true, immediate: true})
  dataChange(d: any) {
    this.tableData = []
    this.mapFun.delPath()
    const data = JSON.parse(JSON.stringify(d))
    if (data.length) {
      for (let i = 0; i < data.length; i++) {
        let data2 = data[i].data;
        data2.sog = 12; // 航速
        data2.inPortTime = 0; // 在港时间
        data2.hours = 0; // 航时
        data2.arriveTime = ''; // 到港时间
        data2.leaveTime = ''; // 离港时间
        this.tableData.push(data2)
        const tracks = data2.tracks
        this.mapFun.addPath(tracks, this.map)
      }
    }
  }

  public mounted() {
    this.startTime = new Date()
  }

  private getDayAndHour(data: number, row?: any) {
    const hours = data // 小时
    let day = 0
    if (hours > 24) {
      day = parseInt(data / 24 + '') // 天
      const h = parseInt(hours - (day * 24) + '') // 小时
      if (row) {
        row.hours = hours
      }
      return day + 'd' + h + 'h'
    } else {
      if (row) {
        row.hours = hours
      }
      return parseInt(hours + '') + 'h'
    }
  }

  private countTime(scope: any) {
    let arriveTime = 0
    if (scope.$index === 0) {
      const startTime = new Date(this.startTime).getTime()
      const ss = scope.row.hours * 60 * 60 * 1000
      arriveTime = startTime + ss
      scope.row.arriveTime = getTimeByLong(arriveTime)
      return getTimeByLong(arriveTime)
    } else {
      const time = new Date(this.tableData[scope.$index - 1].leaveTime).getTime() + scope.row.hours * 60 * 60 * 1000
      scope.row.arriveTime = getTimeByLong(time)
      return getTimeByLong(time)
    }
  }

  private countLeaveTime(scope: any) {
    const s = scope.row.inPortTime * 60 * 60 * 1000
    const arTime = new Date(scope.row.arriveTime).getTime()
    scope.row.leaveTime = getTimeByLong(arTime + s)
    return getTimeByLong(arTime + s)
  }

  private cacuLonLat(num: any, dir: any) {
    let degree = parseInt(num)
    let direction = null
    if (dir === 'lon') {
      if (degree >= 0) {
        direction = 'E'
      } else {
        direction = 'W'
      }
    } else if (dir === 'lat') {
      if (degree >= 0) {
        direction = 'N'
      } else {
        direction = 'S'
      }
    }
    let min = parseInt((num - degree) * 60 + '')
    let sec = parseInt((num - degree) * 3600 - min * 60 + '')

    degree = Math.abs(degree)
    min = Math.abs(min)
    sec = Math.abs(sec)

    let array = direction as string + ' ' + degree + '°' + min + '′' + sec + '″' //这个得到的是方向 度 分 秒
    return array
  }

  private getSummaries(param: any) {
    const {columns, data} = param;
    const sums: any = [];

    columns.forEach((column: any, index: any) => {
      if (index === 0) {
        sums[index] = `${this.$t('message.routeQuery.amount')}`;
      } else if (index === 1) {
        let dis = 0
        data.forEach((item: any) => {
          dis += item.distance;
        })
        sums[index] = dis + 'nm';
      } else if (index === 3) {
        let dis = 0
        data.forEach((item: any) => {
          dis += item.distance / item.sog;
        })
        sums[index] = this.getDayAndHour(dis);
      } else if (index === 4) {
        let dis = 0
        data.forEach((item: any) => {
          dis += item.inPortTime;
        })
        sums[index] = dis + 'h';
      } else if (index === 5) {
        let dis = 0
        data.forEach((item: any) => {
          dis += item.distance / item.sog;
        })
        sums[index] = `${this.$t('message.routeQuery.totalTime')}` + this.getDayAndHour(dis);
      } else if (index === 6) {
        const d = data[data.length - 1];
        sums[index] = `${this.$t('message.trackRecord.endTime')}` + data[data.length - 1].leaveTime
      }
    });

    return sums;
  }

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

<style scoped lang="scss">
.point-result-box {
  .time-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    margin-bottom: 10px;

    .el-date-editor {
      width: 200px !important;

      ::v-deep .el-input__inner {
        height: 32px !important;
        display: flex;
        align-items: center;
      }
    }
  }
}

::v-deep .el-input__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

::v-deep .el-table__footer {
  height: 40px !important;

  td {
    background: rgba(131, 146, 197, 0.31) !important;
    color: #333333 !important;
    text-align: left !important;
  }
}
</style>
