<!--
 * @Author: zhangtq 2452618307@qq.com
 * @Date: 2024-11-15 14:26:52
 * @LastEditors: zhangtq 2452618307@qq.com
 * @LastEditTime: 2024-11-19 09:32:39
 * @FilePath: src/views/screen/components/video/components/VideoControls.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
<template>
  <div style="width: 100%;height: 100%">
    <div class="controls_top">
      <div class="direction_controls">
        <div class="directionBtn flex-row">
          <img
            class="image_5"
            ref="image_5"
            referrerpolicy="no-referrer"
            src="../../../../../assets/screen/video/controls/up.jpg"
            @mousedown="ptz('up')"
            @mouseup="ptz('stop')"
          />
        </div>
        <div class="directionBtn_2 flex-row">

          <div class="directionBtn_3 flex-col">
            <img
              class="image_6"
              ref="image_6"
              referrerpolicy="no-referrer"
              src="../../../../../assets/screen/video/controls/left.jpg"
              @mousedown="ptz('left')"
              @mouseup="ptz('stop')"
            /></div>
          <div class="directionBtn_3 flex-col">
            <img
              class="image_7"
              ref="image_7"
              referrerpolicy="no-referrer"
              src="../../../../../assets/screen/video/controls/right.jpg"
              @mousedown="ptz('right')"
              @mouseup="ptz('stop')"
            /></div>

        </div>
        <div class="directionBtn_4 flex-row">
          <img
            class="image_8"
            ref="image_8"
            referrerpolicy="no-referrer"
            src="../../../../../assets/screen/video/controls/down.jpg"
            @mousedown="ptz('down')"
            @mouseup="ptz('stop')"
          />
        </div>
      </div>
      <div class="video_container">
        <div class="video_controls">
          <div class="video_controls_content">
            <img ref="remoteCapture" src="../../../../../assets/screen/video/controls/no_yczp.png" title="远程抓拍"
                 alt="远程抓拍" style="float:left;"
                 @click="remoteCapture()"
            >
            <img ref="localCapture" src="../../../../../assets/screen/video/controls/no_bdzp.png" title="本地抓拍"
                 alt="本地抓拍" style="float:right;"
                 @click="localCapture()"
            >
          </div>
          <div class="video_controls_content">
            <img ref="zoomin" src="../../../../../assets/screen/video/controls/no_fd.png" title="放大" alt="放大"
                 style="float:left;"
                 @mousedown="zoom('zoomin')"
                 @mouseup="zoom('stop')"
            >
            <img ref="zoomout" src="../../../../../assets/screen/video/controls/no_sx.png" title="缩小" alt="缩小"
                 style="float:right;"
                 @mousedown="zoom('zoominout')"
                 @mouseup="zoom('stop')"
            >
          </div>
        </div>
      </div>
    </div>
<!--    #054D80-->
    <div class="voice_controls">
      <el-button type="text" style="color: white;background: #297ed7;padding: 10px" :disabled="true"
                 @click="WebClient.ButtonsOperation('startCall');"
      >开始喊话
      </el-button>
      <el-button type="text" style="color: white;background: #297ed7;padding: 10px" :disabled="true"
                 @click="WebClient.ButtonsOperation('startTalk');"
      >开始对讲
      </el-button>
    </div>
  </div>
</template>
<script>
import item from '@/layout/components/Sidebar/Item.vue'
import axios from 'axios'
import html2canvas from 'html2canvas'
import { getQxToken } from '@/api/video/camera'
import { selectVideoLoginInfo } from '@/api/screen/screen'

export default {
  name: 'VideoControls',
  props: {
    item: {
      type: Object,
      default: () => {
      }
    }
  },
  watch: {
    item: {
      handler: function(val) {
        console.log(val)
        console.log(val.token)
        this.getQxToken()
        this.selectVideoLoginInfo()
      },
      deep: true
    }
  },
  data() {
    return {
      token: '',
      errorTimeout: null,
      qxInfo: {}
    }
  },
  mounted() {
    this.fetchData()

  },
  methods: {
    fetchData() {

    },
    selectVideoLoginInfo() {
      selectVideoLoginInfo().then(res => {
        this.qxInfo = res.data
        console.log('selectVideoLoginInfo', res)
      })
    },
    getQxToken() {
      getQxToken().then(res => {
        console.log(res.msg + '----------------' + new Date())
        this.token = res.msg
      })
    },
    requestPost(url, data, callback) {
      console.log('requestPost----------------', JSON.stringify(data))
      url = this.qxInfo.q2Url + url
      axios.post(url, data).then(rv => {
        console.log(rv)
        console.log(JSON.stringify(rv))
        callback(rv)
      })
    },
    async ptz(option) {
      if (!this.$props.item.item) {
        if (!this.errorTimeout) {
          this.$message.error('请先选择正在播放的视频！！！')
          this.errorTimeout = setTimeout(() => {
            this.errorTimeout = null
          }, 1000)
        }
        return
      }else{
        let puid = this.$props.item.item.puid
        let idx = this.$props.item.item.idx
        console.log('ptz----------------')
        console.log(puid, idx, option)
        if (option === 'up') {
          if (this.$refs.image_5) {
            this.$refs.image_5.src = require('../../../../../assets/screen/video/controls/select_up.png')
          }
          await this.requestPost('PTZ/C_PTZ_Turn?token=' + this.token, {
            puid: puid,
            idx: idx,
            motion: 'up'
          }, async(rv) => {
          })
        } else if (option === 'down') {
          var number = 'down'
          if (this.$refs.image_8) {
            this.$refs.image_8.src = require('../../../../../assets/screen/video/controls/select_down.png')
          }
          await this.requestPost('PTZ/C_PTZ_Turn?token=' + this.token, {
            puid: puid,
            idx: idx,
            motion: 'down'
          }, rv => {
          })
        } else if (option === 'left') {
          if (this.$refs.image_6) {
            this.$refs.image_6.src = require('../../../../../assets/screen/video/controls/select_left.png')
          }
          await this.requestPost('PTZ/C_PTZ_Turn?token=' + this.token, {
            puid: puid,
            idx: idx,
            motion: 'left'
          }, rv => {
          })
        } else if (option === 'right') {
          if (this.$refs.image_7) {
            this.$refs.image_7.src = require('../../../../../assets/screen/video/controls/select_right.png')
          }
          await this.requestPost('PTZ/C_PTZ_Turn?token=' + this.token, {
            puid: puid,
            idx: idx,
            motion: 'right'
          }, rv => {
          })
        } else if (option === 'stop') {
          if (this.$refs.image_5) {
            this.$refs.image_5.src = require('../../../../../assets/screen/video/controls/up.jpg')
          }
          if (this.$refs.image_6) {
            this.$refs.image_6.src = require('../../../../../assets/screen/video/controls/left.jpg')
          }
          if (this.$refs.image_7) {
            this.$refs.image_7.src = require('../../../../../assets/screen/video/controls/right.jpg')
          }
          if (this.$refs.image_8) {
            this.$refs.image_8.src = require('../../../../../assets/screen/video/controls/down.jpg')
          }
          this.requestPost('PTZ/C_PTZ_Turn?token=' + this.token, {
            puid: puid,
            idx: idx,
            motion: 'stop'
          }, rv => {

          })
        }
      }

    },
    zoom(option) {
      if (!this.$props.item.item) {
        if (!this.errorTimeout) {
          this.$message.error('请先选择正在播放的视频！！！')
          this.errorTimeout = setTimeout(() => {
            this.errorTimeout = null
          }, 1000)
        }
        return
      }else{
        let puid = this.$props.item.item.puid
        let idx = this.$props.item.item.idx
        console.log('--=-=-==')
        const params = {
          puid: puid,
          idx: idx
        }
        if (option == 'stop') {
          if (this.$refs.zoomin) {
            this.$refs.zoomin.src = require('../../../../../assets/screen/video/controls/no_fd.png')
          }
          if (this.$refs.zoomout) {
            this.$refs.zoomout.src = require('../../../../../assets/screen/video/controls/no_sx.png')
          }
          //停止缩放接口
          this.requestPost('PTZ/C_PTZ_StopPictureZoom?token=' + this.token, params, rv => {
            var respJSON = rv.responseJSON
          })
        } else if (option == 'zoomin') {
          if (this.$refs.zoomin) {
            this.$refs.zoomin.src = require('../../../../../assets/screen/video/controls/fd.png')
          }
          //放大图像接口
          this.requestPost('PTZ/C_PTZ_ZoomInPicture?token=' + this.token, params, rv => {
          })
        } else {
          if (this.$refs.zoomout) {
            this.$refs.zoomout.src = require('../../../../../assets/screen/video/controls/sx.png')
          }
          //缩小图像接口
          this.requestPost('PTZ/C_PTZ_ZoomOutPicture?token=' + this.token, params, rv => {
          })
        }
      }

    },
    remoteCapture() {
      this.$refs.remoteCapture.src = require('../../../../../assets/screen/video/controls/bdzp.png')
      setTimeout(() => {
        this.$refs.remoteCapture.src = require('../../../../../assets/screen/video/controls/no_yczp.png')
      }, 500)
      if (!this.$props.item.item) {
        if (!this.errorTimeout) {
          this.$message.error('请先选择正在播放的视频！！！')
          this.errorTimeout = setTimeout(() => {
            this.errorTimeout = null
          }, 1000)
        }
        return
      }
      this.$emit('capture', 1)
    },
    localCapture() {
      this.$refs.localCapture.src = require('../../../../../assets/screen/video/controls/yczp.png')
      setTimeout(() => {
        this.$refs.localCapture.src = require('../../../../../assets/screen/video/controls/no_bdzp.png')
      }, 500)
      if (!this.$props.item.item) {
        if (!this.errorTimeout) {
          this.$message.error('请先选择正在播放的视频！！！')
          this.errorTimeout = setTimeout(() => {
            this.errorTimeout = null
          }, 1000)
        }
        return
      }
      this.$emit('capture', 2)
    }
  }
}
</script>
<style scoped lang="scss">

// 改变input里的字体颜色

::v-deep input::-webkit-input-placeholder {
  color: whitesmoke;
  font-size: 15px;
}

.controls_top {
  width: 100%;
  height: 80%;
  display: flex;
  flex-direction: row;

  .direction_controls {
    display: flex;
    flex-direction: column;
    width: 18vh;
    height: 18vh;
    margin-left: 5vh;
    margin-top: 3vh;
    background: url('../../../../../assets/screen/video/controls/fxp.png') 100% no-repeat;
    background-size: 100% 100%;

    .directionBtn {
      width: 2.9vh;
      height: 2vh;
      margin: 2.5vh 0 0 7.4vh;
    }

    .image_5 {
      width: 3.2vh;
      height: 2.2vh;
    }

    .directionBtn_2 {
      width: 8.2vh;
      height: 3vh;
      margin: 2.2vh 0 0 2.3vh;
    }

    .image_6 {
      width: 2.2vh;
      height: 3.15vh;
      margin-top: 7px;
    }

    .directionBtn_3 {
      width: 3.2vh;
      height: 2.2vh;
      margin: 0 0 -6.5vh 0;
    }

    .image_7 {
      width: 2.2vh;
      height: 3.15vh;
      margin: 5vh 0 0 11.2vh;
    }

    .directionBtn_4 {
      width: 3.2vh;
      height: 2.2vh;
      margin: 3.4vh 0 2.5vh 7.4vh;
    }

    .image_8 {
      width: 3.2vh;
      height: 2.2vh;
    }

  }


  .video_container {
    width: 30%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .video_controls {
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 36%;

    .video_controls_content {
      width: 100%;
      margin-left: 12%;

      display: flex;
      justify-content: space-around;
    }
  }
}

.voice_controls {
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

/**
  * 日历样式
 */

/**
  * 分页样式
 */

::v-deep .el-pagination.is-background .el-pager li {
  border: 1px solid #278996;
  background-color: transparent;
  color: whitesmoke;
  width: 50px;
  height: 40px;
  line-height: 37px;
  font-size: 20px;
  margin-right: 15px;
}

</style>
