<!-- 访客详情页面 -->
<template>
  <el-dialog title="轨迹回放" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body width="900px">
    <div class="search-div">
        <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
          <el-row>
            <el-col :span="12">
              <el-form-item class="selectForm-container-item">
                <el-date-picker
                  v-model="timeRange"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间" />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="search-right">
              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
              <el-button class="filter-item" type="primary" @click="play" :disabled="list.length===0">开始回放</el-button>
            </el-col>
          </el-row>
        </el-form>
    </div>
    <!-- 中间平面图区域 -->
    <div class="map-overview" style="top: 0px;position: relative" >
      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
        <img
          v-for="item in list"
          :id="item.id"
          :key="item.id"
          :src="item.imgUrl"
          :style="{ position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height-40 + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width)-25 + 'px' }"
          class="point-img"
          @click="detailDev(item, $event)" />
      </div>
  </el-dialog>
</template>

<script>
import { getVisitorCarTrace,getVisitorTrace } from '@/api/visitor'
import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
export default {
  name: 'visitorTrace',
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      list:[],
      devListParams: {
        picture: '1',
        deviceTypes: '4,5,8,9,10,11,12,7'
      },
      bgImageSrc: tg_main,
      timeRange: [],
      timer: null,
      step: 0,
      imgSize: {
        width: 2245,
        height: 1586
      }, // 图片显示尺寸
      imgSizeOriginal: { width: 2245, height: 1586 },
      listQuery: {
        id: '',
        startTime: '',
        endTime: ''
      },
      type: ''
    }
  },
  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 = ''
      }
    },
    step(val){
      if(val === this.list.length){
        clearInterval(this.timer)
        this.timer = null
      }
    }
  },
  methods: {
    // 平面图就绪时执行函数
    backgroundImageReady() {
      this.imgSize = {
        width: this.$refs['bgImg'].width,
        height: this.$refs['bgImg'].height
      }
    },

    // 初始化对话框
    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
      this.type = dialogStatus
      this.dialogFormVisible = dialogFormVisible

      this.list = []
      this.listQuery.id = row.id
      this.listQuery.startTime = ''
      this.listQuery.endTime = ''
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate() // 日
      this.timeRange = [year + '-' + month + '-' + day + ' 00:00:00', year + '-' + month + '-' + day + ' 23:59:59']
      this.search()
    },
    play(){
      this.step = 0
      var that = this
      if(this.timer!==null){
        clearInterval(this.timer)
      }
      const pointImg = document.querySelectorAll('.point-img')
      pointImg.forEach(dev=>{
        dev.setAttribute("src", require("../../assets/overview_images/point-green.png"))
      })
      this.timer = setInterval(() => {
        pointImg[that.step].setAttribute("src", require("../../assets/overview_images/point-orange.png"))
        that.step++
      }, 1000)
    },
    search() {
      this.list = []
      var that = this
      if(this.timer!==null){
        clearInterval(this.timer)
      }
      // overviewDeviceList(this.devListParams).then(response => {
      //   if (response.code === 200) {
      //     that.list = response.data
      //     that.list.forEach(dev => {
      //       if (dev.x !== '' && dev.y !== '') {
      //         dev.imgUrl = require("../../assets/overview_images/point-green.png")
      //       }
      //     })
      //   }
      // })


      this.list = []
      if(this.type === 'person'){
        getVisitorTrace(this.listQuery).then(response => {
          if (response.code === 200) {
            that.list = response.data
            that.list.forEach(dev => {
              if (dev.x !== '' && dev.y !== '') {
                dev.imgUrl = require("../../assets/overview_images/point-green.png")
              }
            })
          } else {
            this.$message.error(response.message)
          }
        })
      }else if(this.type === 'car'){
        getVisitorCarTrace(this.listQuery).then(response => {
          if (response.code === 200) {
            that.list = response.data
            that.list.forEach(dev => {
              if (dev.x !== '' && dev.y !== '') {
                dev.imgUrl = require("../../assets/overview_images/point-green.png")
              }
            })
          } else {
            this.$message.error(response.message)
          }
        })
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-select{
    width: 100%;
  }
  .el-date-editor{
    width: 100%;
  }
  .dialog-footer {
    margin-top: -20px;
    text-align: center;
  }
  .map-overview {
    height: 605px;
  }
  .point-img{}
</style>