<template>
  <div class="track-container">
    <div class="search-container">
      <div class="search-ctn">
        <div>
          <div class="input-rule">
            <t-date-picker v-model="rangeDate" limit-date="10" type="dateRange" style="width:250px" placeholder="选择时间段" @date-change="onChange"></t-date-picker>
          </div>
        </div>
        <div>
          <div class="label">姓名:</div>
          <div class="input-rule">
            <t-select v-model="queryCondition.alarmPerson" placeholder="请输入...">
              <t-option>张三</t-option>
              <t-option>李四</t-option>
            </t-select>
          </div>
        </div>
        <div class="btns">
          <t-button color="secondary" class="reset-btn" @click="onReset">重置</t-button>
          <t-button color="success" icon="search-outline" @click="onSearch">查询</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="name" label="姓名"></t-table-column>
        <t-table-column prop="job" label="职务"></t-table-column>
        <t-table-column prop="address" label="位置区域"></t-table-column>
        <t-table-column prop="stayTime" label="停留时长（h）"></t-table-column>
        <t-table-column prop="entryTime" label="进入时间"></t-table-column>
        <t-table-column prop="departureTime" 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="[20,50,100]"
               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'
export default {
  data() {
    return {
      table: {
        data: [
          {
            name: '王小明',
            job: '运维人员',
            address: '作业区域1',
            stayTime: '10小时39分钟',
            entryTime: '2020.7.10 08:21:43',
            departureTime: '2020.7.3 11:22:16'
          },
          {
            name: '王小明',
            job: '运维人员',
            address: '作业区域1',
            stayTime: '10小时39分钟',
            entryTime: '2020.7.10 08:21:43',
            departureTime: '2020.7.3 11:22:16'
          },
          {
            name: '王小明',
            job: '运维人员',
            address: '作业区域1',
            stayTime: '10小时39分钟',
            entryTime: '2020.7.10 08:21:43',
            departureTime: '2020.7.3 11:22:16'
          }
        ],
        pager: {
          currentPage: 1,
          size: 5,
          total: 0
        }
      },
      queryCondition: {
        type: '',
        alarmPerson: ''
      },
      rangeDate: ''
    }
  },
  mounted() {
  },
  methods: {
    onChange(value) {
      console.log('date change:' + value)
    },
    onReset() {

    },
    onSearch() {

    },
    toExport() {

    },
    onPagerChange(page) {

    },
    onSizeChange(number) {

    }
  }
}
</script>