<template>
  <div style="width: 100%;height: 100%;">
    <el-table @row-click="selectTableDataCell"
              :data="tableData"
              ref="logTable"
              :empty-text="$t('message.trackRecord.noData')"
              style="width: 100%"
              :height="tableHeight"
              :header-cell-style="{'background-color': '#94A1CC',color: '#ffffff'}"
              :row-style="{ cursor: 'pointer', padding: '0' }">
      <el-table-column prop="shipnameEn"
                       :label="$t('message.trackRecord.voyageList')"
                       width="120"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="startTime"
                       :label="$t('message.trackRecord.startTime')"
                       width="160"
                       align="center">
      </el-table-column>
      <el-table-column prop="endTime"
                       :label="$t('message.trackRecord.endTime')"
                       align="center"
                       width="160">
      </el-table-column>
      <el-table-column align="center">
        <template slot="header">
          <el-button
            style="background: rgba(238, 44, 44,0.7)!important;color: #FFFFFF!important;border: none!important;width: 5rem"
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click.native.stop="deleteTableData">
            <span>{{ $t('message.trackRecord.delete') }}</span>
          </el-button>
        </template>
        <template slot-scope="scope">
          <el-button style="color: red; cursor: pointer;border: none"
                     @click.native.stop="delectShipLocus(scope.$index, tableData)">
            <span>{{ $t('message.trackRecord.delete') }}</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Watch} from 'vue-property-decorator'
import storeUtil from '@/util/store'

const elementResizeDetectorMaker = require('element-resize-detector')
@Component({})
export default class TrackRecordLog extends Vue {
  private tableData: any[] = []
  private shipPathList: any[] = []
  private isShowPath = false
  private shipFun: any = storeUtil.getMapFun()
  private tableHeight = 250

  @Watch('$HistoryLog', {
    deep: true,
    immediate: true
  })
  historyChange(data: any) {
    const history = (this as any).$HistoryLog
    if (history) {
      this.tableData = history
    } else {
      this.tableData = []
    }
  }

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

  /**
   * 显示轨迹路径
   * @param value
   * @param num
   * @private
   */
  private showShipPath(value: any, num?: any) {
    let start = value[0]
    let Startposition = num ? [start.lon, start.lat] : [start.lon / 600000, start.lat / 600000]
    if (!num) {
      value.forEach((e: any) => {
        e.lon = e.lon / 600000
        e.lat = e.lat / 600000
      })
    }
    this.shipPathList = value
    this.isShowPath = true
    this.shipFun.delSelect()

    if (this.isShowPath) {
      this.shipFun.delPath()
      return this.shipFun.addPath(this.shipPathList, storeUtil.getMapInstance())
    }
  }

  private selectTableDataCell(row: any) {
    this.shipFun.delPath()
    this.showShipPath(row.points, 1)
  }

  private delectShipLocus(index: any, data: any) {
    if (this.tableData.length) {
      this.tableData.splice(index, 1)
      this.shipFun.delPath()
    }
  }

  private deleteTableData() {
    if (this.tableData.length) {
      this.tableData = []
      this.shipFun.delPath()
    }
  }

  private cancel() {
    this.shipFun.delPath()
  }

}
</script>

<style scoped lang="scss">

::v-deep .track-btn {
  display: flex;
  align-items: center;
  width: 97%;

  ::v-deep .el-date-editor {
    width: 13.75rem !important;

    input {
      width: 100%;
    }
  }

  .el-button {
    width: 6.25rem;
    height: 2.1875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--aside-gbc);
    color: var(--aside-font-color);
  }
}

.el-table {
  ::v-deep.el-table__header-wrapper {
    th {
      padding: 0;
      border: none;

      .cell {
        height: 2.8125rem !important;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  ::v-deep .el-table__body-wrapper {
    tbody {
      tr {
        td {
          height: 2.5rem !important;
          padding: 0 !important;
        }
      }
    }
  }
}

</style>
