<!-- 访客详情页面 -->
<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" @click="showVideo=false">
        <img
          v-for="item in list"
          :id="item.id"
          :key="item.id"
          :src="item.imgUrl"
          :title="item.logtime"
          :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="showDetail(item, $event)" />
      </div>
    <div id="tabDiv" ref="video-block" style="height: 0px" v-show="showVideo">
      <el-image
        :src="photo"
        fit="cover"
        :preview-src-list="picList"
        style="width: 280px; height: 150px"/>
      <!--<div style="width: 300px;height: 150px;background-color: red"></div>-->
      <!--<iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>-->
      <!--<iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque" style="width: 400px;height: 300px"/>-->
      <!--<iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" style="z-index: 100000;width: 400px;height: 300px" v-show="showVideo"/>-->
    </div>
  </el-dialog>
</template>

<script>
import { formatDateTime, formatToString, oneDayTime } from '@/utils/calendarUtil'
import { getVisitorCarTrace,getVisitorTrace,getDetail } 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:[],
      showVideo:false,
      devListParams: {
        picture: '1',
        deviceTypes: '4,5,8,9,10,11,12,7'
      },
      photo:require('@/assets/global_images/photo.png'),
      bgImageSrc: tg_main,
      timeRange: [],
      timer: null,
      step: 0,
      picList: [],
      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: {
    showDetail(dev, event) {
        this.showVideo = false
        const targetDev = event.currentTarget // 取到点击到的设备图标div
        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
        let left = parseInt(targetDev.style.left.substring(0, targetDev.style.left.length - 2))
        this.$refs['video-block'].style.position = 'absolute'
        this.$refs['video-block'].style.top = top + 'px'
        this.$refs['video-block'].style.left = targetDev.style.left
        this.photo = dev.bkgPicture
        this.showVideo = true
        // getDetail(dev.devcode).then(response => {
        //   if (response.code === 200) {
        //     this.photo = response.data
        //     this.showVideo = true
        //   }
        // })
        // var time = new Date(dev.logtime)
        // var startTime = time.setSeconds(time.getSeconds() - 10)
        // var endTime = time.setSeconds(time.getSeconds() + 20)
        // startTime = formatDateTime(startTime)
        // endTime = formatDateTime(endTime)
        // window.frames['playHK'].initPlugin('trace',left,top)
      // window.frames['playHK'].play(dev.monitorPoint)
      // window.frames['playHK'].search(dev.monitorPoint, startTime, endTime)
        // window.frames['playHK'].search(dev.monitorPoint, startTime, endTime)
    },
    // 平面图就绪时执行函数
    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.showVideo = false
      this.picList = []
      // setTimeout(() => {
      //   window.frames['playHK'].initPlugin('real',document.getElementById("tabDiv").getBoundingClientRect().left)
      // }, 1000)
      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)
      }
      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")
              }
              this.picList.push(dev.bkgPicture)
            })
          } 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>