<template>
  <div class="search-list">
    <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
              ref="searchTable"
              :header-cell-style="{'background-color': '#94A1CC',color: '#ffffff'}"
              :row-style="{ cursor: 'pointer' }" :height="tableHeight" @row-click="selectCell">
      <el-table-column prop="shipnameEn" :label="$t('message.searchList.shipName')" min-width="150" align="center"
                       show-overflow-tooltip
                       sortable>
      </el-table-column>
      <el-table-column prop="imo" :label="$t('message.searchList.imo')" min-width="120" align="center" sortable>
      </el-table-column>
      <el-table-column prop="mmsi" :label="$t('message.searchList.mmsi')" min-width="120" align="center" sortable>
      </el-table-column>
      <el-table-column prop="shiptype" :label="$t('message.searchList.type')" min-width="120" align="center"
                       show-overflow-tooltip>
        <template slot-scope="scope">
          {{ language === 'zh' ? filterShipType(scope.row.shiptype) : filterShipType(scope.row.shiptype, true) }}
        </template>
      </el-table-column>
      <el-table-column prop="length" :label="$t('message.searchList.shipLength')" min-width="120" align="center" sortable>
        <template slot-scope="scope"> {{ scope.row.length }}m</template>
      </el-table-column>
      <el-table-column prop="mmsi" :label="$t('message.searchList.countryFlag')" min-width="120" align="center">
        <template slot-scope="scope">
          <img style="width: 3.75rem; height: 1.4375rem; border: none"
               :src="filterShipCountry(scope.row.mmsi.slice(0,3))"
               alt="">
        </template>
      </el-table-column>
      <el-table-column prop="draught" :label="$t('message.searchList.draught')" min-width="120" align="center" sortable>
        <template slot-scope="scope"> {{ scope.row.draught / 10 }}m</template>
      </el-table-column>
      <el-table-column prop="sog" :label="$t('message.searchList.speed')" min-width="120" align="center" sortable>
        <template slot-scope="scope"> {{ scope.row.sog / 10 }}节</template>
      </el-table-column>
      <el-table-column prop="destPort" :label="$t('message.searchList.destination')" min-width="120" show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="pageSizeChange"
      @current-change="pageCurrentChange"
      :current-page="currentPage"
      :page-sizes="[7, 8, 9, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>
  </div>
</template>

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

const elementResizeDetectorMaker = require('element-resize-detector')

@Component({})
export default class SearchList extends Vue {
  private currentPage = 1
  private pageSize = 7
  private tableData: any[] = (this as any).$SearchLog
  private language = localStorage.getItem('language')
  private tableHeight = 300

  @Watch('$SearchLog', {
    deep: true,
    immediate: true
  })
  searchLogChange() {
    let log = (this as any).$SearchLog
    if (log) {
      this.tableData = Array.from(new Set(log))
    } else {
      this.tableData = []
    }
  }

  public mounted() {
    this.tableData = (this as any).$SearchLog
    window.addEventListener('setItemEvent', (e: any) => {
      if (e.key === 'language') {
        this.language = e.newValue
      }
    })

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

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

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

  private async selectCell(item: any) {
    if (item) {
      let shipData: any = {}
      let docData = {}
      await HttpApi.getShipMessage({shipId: item.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])
        }
        storeUtil.setShipData(res[0])
        shipData = res[0]
      })
      await HttpApi.getShipDoc({shipId: item.shipId}).then((res: any) => {
        if (res) {
          docData = res
        }
      })

      DialogUtil.showDialog(ShipInfoTemp, DialogType2.SHIP_INFO, {
        dialogData: {
          title: shipData.shipnameEn,
          vueName: DialogType2.SHIP_INFO
        },
        infoData: {
          shipData: shipData,
          docData: docData
        },
        show: true
      })
    }
  }

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

  private filterShipCountry(data: any) {
    return ShipUtils.getShipCountryImg(data)
  }

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

<style lang="scss" scoped>
.search-list {
  width: 100%;
  min-height: 350px;
  height: 100%;

  ::v-deep .el-pagination {
    margin-top: 0.625rem;
    height: 25px;
  }
}

::v-deep .el-table__header-wrapper {
  height: 3.1875rem;
}
</style>
