<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <el-cascader
          v-model="query.personId"
          filterable
          :options="optionsObj.Name"
          :props="{ checkStrictly: true, emitPath: false }"
          clearable
          size="small"
          placeholder="请选择人员"
          style="width: 200px;"
          class="filter-item"
        />
        <el-select
          v-model="query.enabled"
          clearable
          size="small"
          placeholder="是否显示其他人员"
          class="filter-item"
          style="width: 160px"
        >
          <el-option
            v-for="item in 2"
            :key="item"
            :label="item == '2' ? '是' : '否'"
            :value="item - 1 == 1 ? true : false"
          />
        </el-select>
        <el-button
          class="filter-item"
          size="mini"
          type="success"
          icon="el-icon-search"
          @click="handleQuery"
        >
          搜索
        </el-button>
      </div>
    </div>
    <div>
      <track-map ref="trackMap" :query="query" />
    </div>
  </div>
</template>

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

export default {
  name: 'History',
  components: { DateRangePicker, TrackMap },
  data() {
    return {
      query: { personId: '', enabled: undefined },
      optionsObj: { Name: [] }
    }
  },
  created() {
    this.getOptions()
  },
  methods: {
    async handleQuery() {
      this.$refs.trackMap.trackEnabled()
    },
    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>
