<template>
  <div class="ship-in-berth-box">
    <el-table height="400" :data="newTableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
              :row-style="{ cursor: 'pointer'}"
              :header-cell-style="{'background-color': '#94A1CC',color: '#ffffff'}">
      <el-table-column prop="shipnameEn" width="150" show-overflow-tooltip :label="$t('message.shipInfo.shipName')"
                       align="center">
        <template slot-scope="scope">
          <div @click="posShip(scope.row)"><span>{{ scope.row.shipnameEn }}</span></div>
        </template>
      </el-table-column>
      <el-table-column prop="mmsi" width="100" show-overflow-tooltip :label="$t('message.shipInfo.mmsi')"
                       align="center">
      </el-table-column>
      <el-table-column prop="imo" width="100" show-overflow-tooltip :label="$t('message.shipInfo.imo')" align="center">
      </el-table-column>
      <el-table-column prop="callsign" width="100" show-overflow-tooltip :label="$t('message.shipInfo.callsign')"
                       align="center">
      </el-table-column>
      <el-table-column prop="arrivalTime" width="150" show-overflow-tooltip
                       :label="$t('message.arriveLeave.arrivalTime')"
                       align="center">
      </el-table-column>
      <el-table-column prop="berthTime" width="150" show-overflow-tooltip :label="$t('message.arriveLeave.berthTime')"
                       align="center">
      </el-table-column>
      <el-table-column prop="moorDuration" sortable width="170" show-overflow-tooltip
                       :label="$t('message.NumberOfBerthsTemp.mooringDuration')"
                       align="center">
        <template slot-scope="scope">
          {{ scope.row.moorDuration + 'h' }}
        </template>
      </el-table-column>
      <el-table-column prop="shiptype" width="100" show-overflow-tooltip :label="$t('message.shipInfo.shiptypeLevel3')"
                       align="center">
        <template slot-scope="scope">
          {{ language === 'zh' ? filterShipType(scope.row.shiptype) : filterShipType(scope.row.shiptype, true) }}
        </template>
      </el-table-column>
      <el-table-column prop="draught" width="100" show-overflow-tooltip :label="$t('message.shipInfo.draught')"
                       align="center">
        <template slot-scope="scope">
          {{ Number(scope.row.draught / 10) + 'm' }}
        </template>
      </el-table-column>
      <el-table-column prop="destPort" width="100" show-overflow-tooltip :label="$t('message.shipInfo.destination')"
                       align="center">
      </el-table-column>
      <el-table-column prop="eta" width="150" show-overflow-tooltip :label="$t('message.shipInfo.eta')" align="center">
        <template slot-scope="scope">
          {{ formData(scope.row.eta) }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[50, 100, 200, 400]"
                   :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="newTableData.length">
    </el-pagination>
  </div>
</template>

<script lang="ts">
import {Vue, Component, Watch} from "vue-property-decorator";
import {SearchLogUtil, ShipUtils} from "@/util/tool";
import {getTimeByLong} from "@/util/date";
import HttpApi from "@/api";
import DialogUtil from "@/util/new-dialog";
import ShipInfoTemp from "@/views/new-dialog/ShipInfoTemp.vue";
import {DialogType as DialogType2, DialogType} from "@/util/temp-interface";

@Component({
  props: {
    data: {
      type: Array,
      required: false
    }
  }
})
export default class ShipInBerth extends Vue {
  private language = window.localStorage.getItem('language')
  private tableData: any[] = []
  private newTableData: any[] = []
  private currentPage = 1
  private pageSize = 50

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

  private handleSizeChange(val: any) {
    this.pageSize = val
  }

  private handleCurrentChange(val: any) {
    this.currentPage = val
  }

  private formData(date: any) {
    return getTimeByLong(date * 1000)
  }

  private async posShip(data: any) {
    let shipData: any = {}
    let docData = {}
    await HttpApi.getShipMessage({shipId: data.shipId}).then((res: any) => {
      const SearchLog = (this as any).$SearchLog
      let flag = true
      if (SearchLog.length) {
        for (let i = 0; i < SearchLog.length; i++) {
          const item = SearchLog[i]
          if (item.shipId === res[0].shipId) {
            flag = false
            break
          }
        }
      }

      if (flag) {
        SearchLogUtil.addSearchLog(res[0])
      }
      shipData = res[0]
    })
    await HttpApi.getShipDoc({shipId: data.shipId}).then((res: any) => {
      if (res) {
        docData = res
      }
    })
    DialogUtil.showDialog(ShipInfoTemp, DialogType.SHIP_INFO, {
      dialogData: {
        title: shipData.shipnameEn,
        vueName: DialogType2.SHIP_INFO
      },
      infoData: {
        shipData: shipData,
        docData: docData
      },
      show: true
    })
  }

  private filterShipType(data: any, en?: boolean) {
    if (en) {
      return ShipUtils.newGetShipType(data, en)
    } else {
      return ShipUtils.newGetShipType(data)
    }
  }

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

<style lang="scss" scoped>

</style>
