<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <el-cascader
          v-model="query.person"
          filterable
          :options="optionsObj.Name"
          :props="{ checkStrictly: true, emitPath: false }"
          clearable
          size="small"
          placeholder="请选择人员"
          style="width: 200px"
          class="filter-item"
        />
        <date-range-picker
          type="datetimerange"
          v-model="query.datatimevalue"
          class="date-item"
          value-format=""
          :picker-options="pickerOptions"
          style="width: 400px !important"
        />
        <el-button
          class="filter-item"
          size="mini"
          type="success"
          icon="el-icon-search"
          @click="handleQuery"
        >
          搜索
        </el-button>
      </div>
    </div>
    <div>
      <history-map ref="historyMap" :query="query" />
    </div>
  </div>
</template>

<script>
import DateRangePicker from '@/components/DateRangePicker'
import HistoryMap from './historyMap.vue'
import { getOptions } from '@/api/positioning/public'

export default {
  name: 'History',
  components: { DateRangePicker, HistoryMap },
  data() {
    return {
      query: {},
      pickerOptions: {
        shortcuts: [
          {
            text: '最近十分钟',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 600 * 1000)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近半小时',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 1800 * 1000)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一小时',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近四小时',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 4)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近八小时',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 8)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近十二小时',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 12)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近十六小时',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 16)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      optionsObj: { Name: [] },
      options: [
        {
          value: 'changnei',
          label: '厂内员工',
          children: [
            {
              value: 'c1',
              label: '张三',
            },
            {
              value: 'c2',
              label: '王五',
            },
            {
              value: 'c3',
              label: '测试1',
            },
          ],
        },
        {
          value: 'waixie',
          label: '外协员工',
          children: [
            {
              value: 'w1',
              label: '李四',
            },
            {
              value: 'w2',
              label: '赵六',
            },
          ],
        },
      ],
    }
  },
  created() {
    this.getOptions()
  },
  methods: {
    handleQuery() {
      if (this.query.person) {
        //console.log(this.query.datatimevalue)
        if (this.query.datatimevalue[1].getTime() - this.query.datatimevalue[0].getTime() <= 3600 * 1000 * 24){
          this.$refs.historyMap.displayHistory(this.query.person, this.query.datatimevalue)
        }else {
          this.$message.warning('查询时间请不要超过一天')
        }
      } else {
        this.$message.warning('请先选择人员')
      }
    },
    getOptions() {
      Object.keys(this.optionsObj).forEach(async (key) => {
        try {
          let res = await getOptions(key)
          if (res.code === 20000) this.optionsObj[key] = res.data.content
        } catch (error) {
          console.log(error)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.app-main {
  height: 100vh;
}
.app-container {
  padding: 0;
}
.head-container {
  margin-top: 20px;
  margin-left: 20px;
}
</style>
