<template>
  <div class="port-call-box">
    <div class="port-report">
      <el-button
        :class="queryMonth === 1 ? 'active-month' : ''"
        @click="getShipPortReport(1)">{{ $t('message.portOfCall.oneMonth') }}
      </el-button>
      <el-button
        :class="queryMonth === 2 ? 'active-month' : ''"
        @click="getShipPortReport(2)">{{ $t('message.portOfCall.threeMonth') }}
      </el-button>
      <el-button
        :class="queryMonth === 3 ? 'active-month' : ''"
        @click="getShipPortReport(3)">{{ $t('message.portOfCall.sixMonth') }}
      </el-button>
      <el-button
        :class="queryMonth === 4 ? 'active-month' : ''"
        @click="getShipPortReport(4)">{{ $t('message.portOfCall.twelveMonth') }}
      </el-button>
    </div>
    <el-table :height="tableHeight"
              ref="portCallTable"
              :data="portTableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)">
      <el-table-column :label="$t('message.portOfCall.port')" align="center" min-width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <span style="font-size: 0.75rem">{{ scope.row.portNameChs }}({{ scope.row.portNameEn }})</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('message.portOfCall.arriveTime')" align="center"  min-width="140">
        <template slot-scope="scope">
                  <span v-if="scope.row.inTime" style="font-size: 0.75rem">
                    {{ formDate(scope.row.inTime, 'yyyy/MM/dd hh:mm:ss') }}
                  </span>
          <span v-else></span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('message.portOfCall.departureTime')" align="center"  min-width="140" show-overflow-tooltip>
        <template slot-scope="scope">
                  <span v-if="scope.row.outTime" style="font-size: 0.75rem">
                     {{ formDate(scope.row.outTime, 'yyyy/MM/dd hh:mm:ss') }}
                  </span>
          <span v-else></span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('message.portOfCall.stopTime')" align="center"  min-width="110" show-overflow-tooltip>
        <template slot-scope="scope">
                  <span v-if="scope.row.outTime && scope.row.inTime" style="font-size: 0.75rem">
                    {{ ((scope.row.outTime - scope.row.inTime) / 3600).toFixed(2) }}{{
                      getNowLanguage() === 'zh' ? '时' : 'h'
                    }}
                  </span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :pager-count="5"
      :small="true"
      :current-page="currentPage4"
      :page-sizes="[10, 20, 30,50]"
      :page-size="pageSize4"
      layout="total, sizes, prev, pager, next, jumper"
      :total="portTableData.length">
    </el-pagination>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Watch} from 'vue-property-decorator'
import {ShipUtils} from '@/util/tool'
import HttpApi from '@/api'
import {getBeforeMonth2, getLongByTime, getNowTime} from '@/util/date'
const elementResizeDetectorMaker = require('element-resize-detector')
@Component({
  props: {
    shipData: {
      type: Object,
      required: true
    }
  }
})
export default class PortOfCall extends Vue {
  private visible = false
  private queryMonth = 1
  private portTableData: any = []
  private currentPage4 = 1
  private pageSize4 = 10
  private tableHeight = 200

  @Watch('shipData', {
    deep: true,
    immediate: true
  })
  shipChange(data: any) {
    if (data) {
      this.getShipPortReport(1)
    }
  }

  public mounted() {
    this.getShipPortReport(1);

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

  private getShipPortReport(month: number) {
    this.queryMonth = month
    this.portTableData = []
    const nowTime = getNowTime()
    let startTime: any = ''
    let endTime: any = getLongByTime(nowTime)
    switch (month) {
      case 1: {
        startTime = getLongByTime(getBeforeMonth2(nowTime, 1))
        break
      }
      case 2: {
        startTime = getLongByTime(getBeforeMonth2(nowTime, 3))
        break
      }
      case 3: {
        startTime = getLongByTime(getBeforeMonth2(nowTime, 6))
        break
      }
      case 4: {
        startTime = getLongByTime(getBeforeMonth2(nowTime, 12))
        break
      }
    }
    const param = {
      shipId: this.$props.shipData.shipId,
      startTime: startTime,
      endTime: endTime
    }
    HttpApi.getPortReport(param).then((result: any) => {
      if (result.portHisItems.length) {
        this.portTableData = result.portHisItems.reverse()
      } else {
        this.portTableData = []
      }
    })
  }

  private handleSizeChange(item: any) {
    this.pageSize4 = item
  }

  private handleCurrentChange(item: any) {
    this.currentPage4 = item
  }

  private formDate(data1: any, data2: any) {
    return ShipUtils.formatDate(data1, data2)
  }

  private getNowLanguage() {
    return window.localStorage.getItem('language')
  }

  private cancel() {
    console.log('取消')
  }
}
</script>

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

  .port-report {
    display: flex;
    height: 2.5rem;

    .el-button {
      color: #2c469b;
      width: 6.25rem;
      border: #2c469b 0.01rem solid;
      display: flex;
      justify-content: center;
    }

    .active-month {
      background-color: var(--aside-gbc);
      color: var(--aside-font-color);
    }
  }
}
</style>
