<template>
  <div class="ship-event">
    <div class="header-btn">
      <el-button @click="getData('7')">{{ $t('message.shipEvent.sevenDay') }}</el-button>
      <el-button @click="getData('1')">{{ $t('message.shipEvent.oneMonth') }}</el-button>
      <el-button @click="getData('3')">{{ $t('message.shipEvent.threeMonth') }}</el-button>
      <el-button @click="getData('6')">{{ $t('message.shipEvent.sixMonth') }}</el-button>
    </div>
    <div class="screen-box">
      <el-select v-model="screenEvent"
                 @change="screenEventM"
                 clearable
                 value-key="name"
                 :placeholder="$t('message.shipEvent.screenPlaceholder')">
        <el-option v-for="(item,index) in eventNameOptions"
                   :label="language === 'zh'?item.name: item.nameEn"
                   :value="item"
                   :key="index"></el-option>
      </el-select>
    </div>
    <div class="event-result">
      <el-table v-loading="serchLoading"
                ref="eventTable"
                :data="newTableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                :header-cell-style="{'background-color': '#94A1CC',color: '#ffffff'}"
                :row-style="{ cursor: 'pointer' }" :height="tableHeight">
        <el-table-column :prop="language === 'zh' ? 'name': 'nameEn'"
                         :label="$t('message.shipEvent.eventName')"
                         min-width="150"
                         align="center"
                         show-overflow-tooltip
                         sortable></el-table-column>
        <el-table-column prop="posTime"
                         :label="$t('message.shipEvent.time')"
                         min-width="150"
                         align="center"
                         show-overflow-tooltip
                         sortable>
          <template slot-scope="scope">
            <div>{{ formatTime(scope.row.posTime * 1000) }}</div>
          </template>
        </el-table-column>
        <el-table-column :prop="language === 'zh'? 'description': 'descriptionEn'"
                         :label="$t('message.shipEvent.describe')"
                         min-width="180"
                         align="center"
                         show-overflow-tooltip
                         sortable></el-table-column>
        <el-table-column :prop="language === 'zh'? 'seaArea' : 'seaAreaEn'"
                         :label="$t('message.shipEvent.seaArea')"
                         align="center"
                         min-width="150"
                         show-overflow-tooltip
                         sortable></el-table-column>
      </el-table>
      <el-pagination
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChange"
        @current-change="pageCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="newTableData.length">
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
import {getBeforeMonth2, getBeforeTime, getLongByTime, getNowTime, getTimeByLong} from "@/util/date";
import HttpApi from "@/api";

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

@Component({
  props: {
    shipId: {
      type: Number,
      required: true
    }
  }
})
export default class ShipEvent extends Vue {
  private currentPage = 1
  private pageSize = 7
  private eventNameOptions: any[] = []
  private screenEvent = ''
  private tableData: any[] = []
  private newTableData: any[] = []
  private serchLoading = false
  private language = window.localStorage.getItem('language')
  private tableHeight = 260

  public mounted() {
    this.$nextTick(() => {
      this.getData('7');
    })
    window.addEventListener('setItemEvent', (item: any) => {
      if (item.key === 'language') {
        this.language = item.newValue
      }
    })
    const erd = elementResizeDetectorMaker()
    erd.listenTo((this.$refs.eventTable as any).$parent.$el, () => {
      this.tableHeight = (this.$refs.eventTable as any).$parent.$el.clientHeight - 130
    })
  }

  private screenEventM(data: any) {
    this.newTableData = []
    if (data) {
      this.newTableData = this.tableData.filter((item: any) => {
        return item.name === data.name && item.eventType === data.eventType
      })
      this.$forceUpdate()
    } else {
      this.newTableData = this.tableData
    }
    this.currentPage = 1
  }

  private getData(val: string) {
    this.serchLoading = true
    let start: number
    let end = getLongByTime(getNowTime())
    if (val !== '7') {
      start = getLongByTime(getBeforeMonth2(getNowTime(), Number(val)))
    } else {
      start = getLongByTime(getBeforeTime(getNowTime(), Number(val)))
    }

    setTimeout(() => {
      this.query(start, end)
      this.serchLoading = false
    }, 100)

  }

  private formatTime(time: number) {
    return getTimeByLong(time)
  }

  private query(start: number, end: number) {
    this.tableData = []
    HttpApi.getShipEvent({
      shipId: this.$props.shipId,
      startTime: start,
      endTime: end
    }).then((res: any) => {
      this.tableData = res
      this.newTableData = res
      const options: Map<string, any> = new Map<string, any>()
      res.forEach((item: any) => {
        if (options.size === 0) {
          options.set(item.name, item)
        } else {
          if (!options.has(item.name)) {
            options.set(item.name, item)
          }
        }
      })
      options.forEach((item: any, key: string) => {
        this.eventNameOptions.push(item)
      })
    })
  }

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

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

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

<style scoped lang="scss">
.ship-event {
  width: 100%;
  height: 100%;
  min-height: 25rem;

  .header-btn {
    display: flex;
    height: 2.5rem;

    .el-button {
      height: 2.5rem;
    }
  }

  .screen-box {
    height: 2.5rem;
    margin: 0.625rem 0;
  }
}
</style>
