<template>
  <div id="betthTable" class="">
    <el-tabs v-model="tabVal">
      <el-tab-pane :label="$t('message.NumberOfBerthsTemp.numberOfBerth')" name="1" style="height: 100%">
        <el-table :data="tableData1" ref="berth-table-1" :height="tableHeight" v-loading="searchLoading">
          <el-table-column :label="$t('message.NumberOfBerthsTemp.portName')"
                           align="center"
                           prop="portName"></el-table-column>
          <el-table-column :label="$t('message.NumberOfBerthsTemp.numberOfBerth')"
                           align="center"
                           prop="number"></el-table-column>
          <el-table-column :label="$t('message.NumberOfBerthsTemp.mooringDuration')"
                           align="center"
                           prop="time"></el-table-column>
          <el-table-column width="80" :label="$t('message.NumberOfBerthsTemp.operate')"
                           align="center">
            <template slot-scope="scope">
              <el-button style="width: 60px" @click="getShips(scope.row,shipInfo1)">{{
                  $t('message.messageList.details')
                }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane :label="$t('message.NumberOfBerthsTemp.numberOfMao')" name="2">
        <el-table :data="tableData2" ref="berth-table-2" :height="tableHeight">
          <el-table-column :label="$t('message.NumberOfBerthsTemp.portName')"
                           align="center"
                           prop="portName"></el-table-column>
          <el-table-column :label="$t('message.NumberOfBerthsTemp.numberOfMao')"
                           align="center"
                           prop="number"></el-table-column>
          <el-table-column :label="$t('message.NumberOfBerthsTemp.mooringDuration')"
                           align="center"
                           prop="time"></el-table-column>
          <!--          <el-table-column width="80" :label="$t('message.NumberOfBerthsTemp.operate')"-->
          <!--                           align="center">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-button style="width: 60px" @click="getShips(scope.row,shipInfo2)">详情</el-button>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
        </el-table>
      </el-tab-pane>
      <el-tab-pane :label="$t('message.NumberOfBerthsTemp.numberOfLeave')" name="3">
        <el-table :data="tableData3" ref="berth-table-3" :height="tableHeight">
          <el-table-column :label="$t('message.NumberOfBerthsTemp.portName')"
                           align="center"
                           prop="portName"></el-table-column>
          <el-table-column :label="$t('message.NumberOfBerthsTemp.numberOfLeave')"
                           align="center"
                           prop="number"></el-table-column>
          <el-table-column :label="$t('message.NumberOfBerthsTemp.operationDuration')"
                           align="center"
                           prop="time"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import HttpApi from '@/api'
import {Component, Vue} from 'vue-property-decorator'
import {getNowTime, getYMD} from "@/util/date";
import DialogUtil from "@/util/new-dialog";
import {DialogType} from "@/util/temp-interface";
import ShipInBerthTemp from "@/views/new-dialog/ShipInBerthTemp.vue";

const elementResizeDetectorMaker = require('element-resize-detector')
@Component({})
export default class NumberOfBerths extends Vue {
  private tableData1: any[] = []
  private tableData2: any[] = []
  private tableData3: any[] = []
  private portList: any[] = []
  private tabVal = '1'
  private searchLoading = false
  private shipInfo1: any = {}
  private shipInfo2: any = {}
  private shipInfo3: any = {}
  private tableHeight = 300

  public mounted() {
    setTimeout(() => {
      this.getPortList()
    }, 100)

    const erd = elementResizeDetectorMaker()
    erd.listenTo((this.$refs['berth-table-1'] as any).$parent.$el, () => {
      this.tableHeight = (this.$refs['berth-table-1'] as any).$parent.$el.clientHeight - 60
    })
  }

  private initData() {
    HttpApi.getBerthsOfNumber({staticDate: getYMD(getNowTime())}).then((res: any) => {
      const MoorData: Map<string, any> = new Map()
      const shipInPort: { portName: string, ships: any[] }[] = []
      res.forEach((item: any) => {
        if (!MoorData.get(item.portNameCn)) {
          MoorData.set(item.portNameCn, {
            number: 1,
            nameEn: item.portNameEn,
            time: item.moorDuration,
            arrivalTime: item.arrivalTime,
            berthTime: item.berthTime,
            moorDuration: item.moorDuration
          })
          shipInPort.push({
            portName: item.portNameEn,
            ships: []
          })
          shipInPort[shipInPort.length - 1].ships.push({
            arrivalTime: item.arrivalTime,
            berthTime: item.berthTime,
            moorDuration: item.moorDuration ? item.moorDuration : 0,
            mmsi: item.mmsi
          })
        } else {
          MoorData.set(item.portNameCn, {
            number: MoorData.get(item.portNameCn).number + 1,
            nameEn: item.portNameEn,
            time: MoorData.get(item.portNameCn).time + item.moorDuration
          })
          shipInPort.forEach((item2: any) => {
            if (item2.portName === item.portNameEn) {
              item2.ships.push({
                arrivalTime: item.arrivalTime,
                berthTime: item.berthTime,
                moorDuration: item.moorDuration ? item.moorDuration : 0,
                mmsi: item.mmsi
              })
            }
          })
        }
      })
      this.shipInfo1 = shipInPort;
      MoorData.forEach((item: any, key: string) => {
        this.tableData1.push({
          portName: key + `(${item.nameEn})`,
          sourceName: item.nameEn,
          number: item.number,
          time: (item.time / item.number).toFixed(2)
        })
      })
    })

    HttpApi.getMoorsOfNumber({staticDate: getYMD(getNowTime())}).then((res: any) => {
      const MoorData: Map<string, any> = new Map()
      const shipInPort: { portName: string, ships: string[] }[] = []
      res.forEach((item: any) => {
        for (let i = 0; i < this.portList.length; i++) {
          if (item.portNameCn.indexOf(this.portList[i].nameCn) !== -1) {
            item.portNameEn = this.portList[i].nameEn
            break
          }
        }
        if (!MoorData.get(item.portNameCn)) {
          MoorData.set(item.portNameCn, {
            number: item.waitBerthNum,
            nameEn: item.portNameEn,
            time: item.moorDuration
          })
          shipInPort.push({
            portName: item.portNameEn,
            ships: []
          })
          shipInPort[shipInPort.length - 1].ships.push(item.mmsi)
        } else {
          MoorData.set(item.portNameCn, {
            number: MoorData.get(item.portNameCn).number + item.waitBerthNum,
            nameEn: item.portNameEn,
            time: MoorData.get(item.portNameCn).time + item.moorDuration
          })
          shipInPort.forEach((item2: any) => {
            if (item2.portName === item.portNameEn) {
              item2.ships.push(item.mmsi)
            }
          })
        }
      })
      this.shipInfo2 = shipInPort;
      MoorData.forEach((item: any, key: string) => {
        this.tableData2.push({
          portName: key + `(${item.nameEn})`,
          number: item.number,
          time: (item.time / item.number).toFixed(2)
        })
      })
    })

    HttpApi.getLeaveBerth({staticDate: getYMD(getNowTime())}).then((res: any) => {
      const MoorData: Map<string, any> = new Map()
      const shipInPort: { portName: string, ships: string[] }[] = []
      res.forEach((item: any) => {
        for (let i = 0; i < this.portList.length; i++) {
          if (item.portNameCn.indexOf(this.portList[i].nameCn) !== -1) {
            item.portNameEn = this.portList[i].nameEn
            break
          }
        }
        if (!MoorData.get(item.portNameCn)) {
          MoorData.set(item.portNameCn, {
            number: item.unberthNum,
            nameEn: item.portNameEn,
            time: item.berthDuration
          })
          shipInPort.push({
            portName: item.portNameEn,
            ships: []
          })
          shipInPort[shipInPort.length - 1].ships.push(item.mmsi)
        } else {
          MoorData.set(item.portNameCn, {
            number: MoorData.get(item.portNameCn).number + item.unberthNum,
            nameEn: item.portNameEn,
            time: MoorData.get(item.portNameCn).time + item.berthDuration
          })
          shipInPort.forEach((item2: any) => {
            if (item2.portName === item.portNameEn) {
              item2.ships.push(item.mmsi)
            }
          })
        }
      })
      this.shipInfo3 = shipInPort;
      MoorData.forEach((item: any, key: string) => {
        this.tableData3.push({
          portName: key + `(${item.nameEn})`,
          number: item.number,
          time: (item.time / item.number).toFixed(2)
        })
      })
    })
  }

  private getShips(e: any, data: any) {
    data.forEach((item: any) => {
      if (item.portName === e.sourceName) {
        let mmsi: string[] = []
        item.ships.forEach((ship: any) => {
          mmsi.push(ship.mmsi)
        })
        HttpApi.getShipBymmsi(mmsi.join(',')).then((res: any) => {
          res.data.forEach((item2: any) => {
            for (let i = 0; i < item.ships.length; i++) {
              const s = item.ships[i];
              if (item2.mmsi + '' === s.mmsi + '') {
                item2.arrivalTime = s.arrivalTime;
                item2.berthTime = s.berthTime;
                item2.moorDuration = s.moorDuration;
              }
            }
          })
          DialogUtil.showDialog(ShipInBerthTemp, DialogType.SHIP_IN_BERTH, {
            dialogData: {
              title: `${this.$t('message.areaList.shipList')}`,
              vueName: DialogType.SHIP_IN_BERTH
            },
            infoData: {
              data: res.data
            },
            show: true
          })
        })
      }
    })
  }

  private getPortList() {
    this.searchLoading = true
    HttpApi.getPortList({}).then((res: any) => {
      this.portList = res
      this.initData()
      this.searchLoading = false
    })
  }

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

<style lang="scss" scoped>
#betthTable {
  height: 100%;
  min-height: 300px !important;
}

::v-deep .el-table__header-wrapper {
  height: 2.5rem;
}

::v-deep .el-table__body-wrapper {
  height: calc(100% - 2.5rem) !important;
}

::v-deep .el-tabs__content {
  height: 100% !important;
  overflow-y: hidden !important;
}

::v-deep .el-tabs {
  height: 100% !important;
  overflow-y: hidden !important;
}
</style>
