<template>
  <div class="track-container">
    <div class="search-container">
      <div class="search-ctn">
        <div>
          <div class="input-rule">
            <t-date-picker v-model="queryCondition.rangeDate"
                           align-right
                           style="width:250px;"
                           type="dateRange"
                           placeholder="选择时间段"
                           @date-change="onChange"></t-date-picker>
          </div>
        </div>
        <div>
          <div class="label">姓名:</div>
          <div class="input-rule">
            <t-input v-model="queryCondition.alarmPerson" placeholder="请输入..."></t-input>
          </div>
        </div>
        <div class="btns">
          <t-button color="success" icon="search-outline" @click="onSearch">查询</t-button>
          <t-button color="secondary" icon="loading" class="reset-btn" @click="onReset">重置</t-button>
          <t-button color="secondary" icon="upload-outline" @click="toExport">导出至Excel</t-button>
        </div>
      </div>
    </div>
    <div>
      <t-table :data="table.data">
        <t-table-column type="selection" width="70"></t-table-column>
        <t-table-column prop="userName" label="姓名"></t-table-column>
        <t-table-column prop="duty" label="职务"></t-table-column>
        <t-table-column prop="RECORD_LOCATION" label="位置区域"></t-table-column>
        <t-table-column prop="stayTime" label="停留时长（h）"></t-table-column>
        <t-table-column :formatter="timestampToTime" prop="IN_DATE" label="进入时间"></t-table-column>
        <t-table-column :formatter="timestampToTime" prop="OUT_DATE" label="离开时间"></t-table-column>
      </t-table>
      <t-pager :total="table.pager.total" :current.sync="table.pager.currentPage"
               :page-size.sync="table.pager.size"
               :sizer-range="[10,20,50]"
               class="px-24 pt-16 float-right"
               show-elevator show-sizer
               @on-size-change="onSizeChange"
               @on-change="onPagerChange">
      </t-pager>
    </div>
  </div>
</template>
<script>
import './track.scss'
import services from "../../conf/services";
export default {
  data() {
    return {
      table: {
        data: [],
        pager: {
          currentPage: 1,
          size: 10,
          total: 0
        }
      },
      queryCondition: {
        rangeDate: [],
        alarmPerson: ''
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      var start = ''
      var end = ''
      if (this.queryCondition.rangeDate.length > 0) {
        start = this.queryCondition.rangeDate[0]
        end = this.queryCondition.rangeDate[1]
      }
      var params = new FormData()
      params.append(
        'data',
        JSON.stringify({
          pageNum: this.table.pager.currentPage,
          pageSize: this.table.pager.size,
          queryStartDate: start,
          queryEndDate: end
        })
      )
      this.$test
        .post(services.trackAnalysis.GET_TRACKANALYSIS, params)
        .then((res) => {
        // 请求成功处理...
          this.table.data = res.data.result.list
          this.table.pager.total = res.data.result.total
        })
        .catch((res) => {
        // 请求失败处理...
        })
    },
    onChange(value) {
      console.log('date change:' + value)
      this.getList()
    },
    onReset() {
      this.queryCondition = {
        rangeDate: [],
        alarmPerson: ''
      }
      this.getList()
    },
    onSearch() {

    },
    toExport() {

    },
    onPagerChange(page) {
      this.table.pager.currentPage = page
      this.getList()
    },
    onSizeChange(number) {
      this.table.pager.currentPage = 1
      this.table.pager.size = number
      this.getList()
    },
    timestampToTime(cjsj, column, cellValue, index) {
      if (cellValue === '' || cellValue == null) {
        return ''
      }
      var date = new Date(cellValue) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-'
      var M =
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '-'
      var D = date.getDate()
      var h = date.getHours()
      var m = date.getMinutes()
      var s = date.getSeconds()
      D = D < 10 ? '0' + D : D
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      return Y + M + D + ' ' + h + ':' + m + ':' + s
    }
  }
}
</script>