<template>
  <el-dialog :title="textMap" :visible.sync="dialogFormVisible" append-to-body width="1200px">
    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData()" @clear="clearInput" style="margin-top: -20px">
      <search-item>
        <el-date-picker
          v-model="timeRange"
          type="datetimerange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="起始时间"
          end-placeholder="终止时间"
          size="small"
          clearable="false"
        />
      </search-item>
      <search-item style="width: 300px;margin-left: 20px;">
        <div style="display: flex">
          <span style="margin-top: 8px;font-size: 15px;margin-right: 18px">相似度: </span>
          <el-slider
            v-model="listQuery.minSimilarity"
            style="width: 70%;margin-top: -5px"
            :marks="marks"/>
        </div>
      </search-item>
    </search-area>
    <div style="display: flex;flex-wrap: wrap;margin-top: 10px;height: 500px;overflow-y: scroll;margin-bottom: 10px">
      <trail-item v-for="item in list" :key="item.id" :item="item" style="height: 200px;width: 20%"/>
    </div>
  </el-dialog>
</template>

<script>
import { hikPic } from '@/api/person'
import SearchArea from '@/components/SearchArea/SearchArea'
import SearchItem from '@/components/SearchArea/SearchItem'
import TrailItem from '@/views/common/trailItem'
import { getDate } from '@/utils/calendarUtil'

export default {
  name: 'TrailDialog',
  components: { TrailItem, SearchItem, SearchArea },
  data() {
    return {
      marks: {
        25: '25%',
        50: {
          style: {
            color: '#1989FA'
          },
          label: this.$createElement('strong', '50%')
        },
        75: '75%'
      },
      listQuery: {
        staffCode: '',
        personName: '',
        facePicUrl: '',
        startTime: '',
        endTime: '',
        minSimilarity: 50
      },
      timeRange: [], // 时间范围
      dialogFormVisible: false, // 对话框是否显示
      isEditMode: true,
      textMap: '轨迹追踪', // 表头显示标题
      list: []
    }
  },
  watch: {
    timeRange(val) {
      if (val && val.length > 0) {
        this.listQuery.startTime = val[0]
        this.listQuery.endTime = val[1]
      } else {
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      }
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
    // 初始化对话框
    initDialog: function(row) {
      this.textMap = '轨迹追踪 — ' + row.staffName
      this.list = []
      this.clearInput()
      this.dialogFormVisible = true
      this.listQuery.facePicUrl = row.picture
      this.listQuery.staffCode = row.staffCode
      this.listQuery.personName = row.staffName
      this.fetchData()
    },
    fetchData() {
      hikPic(this.listQuery).then(response => {
        if (response.code === 200) {
          this.list = response.data
        }
      })
    },
    clearInput() {
      this.listQuery.startTime = getDate(0, 'DATE') + ' 00:00:00'
      this.listQuery.endTime = getDate(0, 'SECOND')
      this.listQuery.minSimilarity = 50
      this.timeRange = [getDate(0, 'DATE') + ' 00:00:00', getDate(0, 'SECOND')]
    },
    cancel: function() {
      this.dialogFormVisible = false
      this.$emit('watchChild')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

  .el-dialog{
    width:700px
  }
  .el-select{
    width: 100%;
  }
</style>