<template lang='pug'>
  div.infopage()
    div.content()
      div.left()
        div.spBox(ref="spbox")
          div(id="divPlugin" class="plugin")
      div.right()
        div.wanginfo()
          h3 预览
          div.mllx()
            span() 码流类型：
            el-select(size="small" id="streamtype" v-model="mllx" placeholder="请选择" style="width:69%")
              el-option(label="主码流" :value="1")
              el-option(label="子码流" :value="2")
          div.stopbtn()
            div.comBtn(@click='clickStartRealPlay') <i class="el-icon-video-play" style="margin-right:5px"></i>开始播放
            div.comBtn(@click="clickStopRealPlay") <i class="el-icon-video-pause" style="margin-right:5px"></i>停止播放

        div.operate()
          div.liand() 云台控制
          div.btns()
            img(src="@/assets/images/btns.png")
            div(class="fx") 方向
            div(class="zs")
              img(src="@/assets/images/zs.png" @mousedown="mouseDownPTZControl(5)" @mouseup="mouseUpPTZControl")
            div(class="s")
              img(src="@/assets/images/s.png" @mousedown="mouseDownPTZControl(1)" @mouseup="mouseUpPTZControl")
            div(class="ys")
              img(src="@/assets/images/ys.png" @mousedown="mouseDownPTZControl(7)" @mouseup="mouseUpPTZControl")
            div(class="y")
              img(src="@/assets/images/y.png"  @mousedown="mouseDownPTZControl(4)" @mouseup="mouseUpPTZControl")
            div(class="yx")
              img(src="@/assets/images/yx.png" @mousedown="mouseDownPTZControl(8)" @mouseup="mouseUpPTZControl")
            div(class="x")
              img(src="@/assets/images/x.png" @mousedown="mouseDownPTZControl(2)" @mouseup="mouseUpPTZControl")
            div(class="zx")
              img(src="@/assets/images/zx.png" @mousedown="mouseDownPTZControl(6)" @mouseup="mouseUpPTZControl")
            div(class="z")
              img(src="@/assets/images/z.png" @mousedown="mouseDownPTZControl(3)" @mouseup="mouseUpPTZControl")
          div.ytBox()
            div.mllx()
              span() 云台速度：
              el-select(size="small" id="ptzspeed" v-model="ytsd" placeholder="请选择" style="width:70%;height: 40px;background-color: transparent;")
                el-option(:label="1" :value="1")
                el-option(:label="2" :value="2")
                el-option(:label="3" :value="3")
                el-option(:label="4" :value="4")
            div.mllx()
              span() 预制点号：
              el-input(size="small" v-model="yzdh" style="width:70%;height: 40px;background-color: transparent;")
            div.setBtn()
              div.comBtn(style="border-right: 2px solid rgb(3, 38, 125)" @click='clickSetPreset') 设置
              div.comBtn(@click='clickGoPreset') 调用
            div.bbBtn()
              div.add(@mousedown="mouseDownPTZControl(10)" @mouseup="mouseUpPTZControl") +
              div.bb() 变倍
              div.jian(@mousedown="mouseDownPTZControl(11)" @mouseup="mouseUpPTZControl") -
</template>

<script>
  // import './jquery-1.7.1.min.js'
  // import { WebVideoCtrl } from './webVideoCtrl.js'

  export default {
    components: {},
    data() {
      return {
        mllx: 2,
        yzdh: 1,
        ytsd: 1,
        value: 1,
        g_iWndIndex: 0, //当前选中的窗口
        g_bPTZAuto: false,
        pumpRoomName: '',
        cameraArray: [],
        webVideo: {},
        iWidth: 600,
        iHeight: 400,
        iProtocol: 1,
        szIP: '10.20.72.43',
        szPort: '80',
        szUsername: 'admin',
        szPassword: 'hik12345',
        iStreamType: 1,
        bZeroChannel: false,
        maskData: {
          maskShow: false,
          title: '提示',
          content: '失败',
          cancel: false
        }

      }
    },
    created: function () {

    },
    mounted: function () {
      this.videoInitPlugin()
    },
    destroyed: function () {
      for (var i = 0; i < this.cameraArray.length; i++) {
        WebVideoCtrl.I_Stop({ iWndIndex: i })
      }
      var iRet = WebVideoCtrl.I_Logout(this.szIP)

      if (iRet !== 0) {
        console.log('WebVideoCtrl I_Logout failed')
      } else {
        console.log('WebVideoCtrl I_Logout success')
      }
    },
    methods: {
      init(){
        // 请求预制点号
        this.$http({
          url: this.$http.adornUrl('/eWarning/getConfig'),
          method: 'GET'
        }).then((data) => {
          this.yzdh = data.entity
        })
      },
      clickSetPreset() {
        // 设置预制点号
        this.$http({
          url: this.$http.adornUrl('/eWarning/setConfig/'+this.yzdh),
          method: 'GET'
        }).then((data) => {
           this.$message.success('设置预制点号成功')
        })

        WebVideoCtrl.I_SetPreset(this.yzdh, {
            success: function (xmlDoc) {
                console.log(' 设置预置点成功！')
            },
            error: function (status, xmlDoc) {
                console.log(' 设置预置点失败！', status)
            }
        })
      },
      //全屏
      clickFullScreen: function () {
        WebVideoCtrl.I_FullScreen(true)
      },
      //切换
      changeWndNum: function (iType) {
        console.log(iType)
        var iType = parseInt(iType, 10)

        WebVideoCtrl.I_ChangeWndNum(iType)
      },

      downLoadPlugin: function () {
        if (confirm(`是否下载该插件?`)) {
          window.location.href = process.env.BASE_API + `/dashboard/downloadPlug`
        }
      },
      videoInitPlugin: function () {
        // var _this = this;
        var iRet = WebVideoCtrl.I_CheckPluginInstall()

        if (iRet === -1) {
          alert('您还未安装过插件！')
          this.downLoadPlugin()
          return
        }
        this.initPlugin()
      },
      initPlugin: function () {
        var that = this
        let eWidth = this.$refs.spbox.offsetWidth
        let eHeight = this.$refs.spbox.offsetHeight
        this.iWidth = eWidth
        this.iHeight = eHeight
        WebVideoCtrl.I_InitPlugin(this.iWidth, this.iHeight, {
          bWndFull: true, //是否支持单窗口双击全屏，默I_CheckPluginInstall
          iWndowType: 1,
          // cbSelWnd: function (xmlDoc) {
          //   var giWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
          //   var szInfo = "当前选择的窗口编号：" + giWndIndex;
          //
          //   console.log(szInfo);
          // },
          cbInitPluginComplete: function () {
            WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin')
            var szIP = that.szIP
            WebVideoCtrl.I_Login(szIP, that.iProtocol, that.szPort, that.szUsername, that.szPassword, {
              async: false,
              success: function (xmlDoc) {
                that.clickStopRealPlay()
                // console.log(xmlDoc)//不能删除
                // 开始预览
                var szDeviceIdentify = szIP + '_' + that.szPort
                that.startRealPlay(szDeviceIdentify, 0, 1) //1为通道号,  i 为窗口
              },
              error: function () {
                console.log('login error')
              }
            })
          }
        })
      },
      startRealPlay: function (szDeviceIdentify, iWndIndex, iChannelID) {
        var that = this

        console.log('startRealPlay-ml: ' + that.mllx, szDeviceIdentify, iWndIndex, iChannelID)
        WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
          iWndIndex: 0,
          iStreamType: that.mllx,
          success: function () {
            console.log('开始预览成功 ')
          },
          error: function (status, xmlDoc2) {
            console.log(xmlDoc2)//不能删除
            if (status === 403) {
              console.log('szInfo 设备不支持Websocket取流！')
            } else {
              console.log('开始预览失败 ')
            }
          }
        })
      },
      clickStartRealPlay() {
        var szDeviceIdentify = this.szIP + '_' + this.szPort
        this.startRealPlay(szDeviceIdentify, 0, 1) //1为通道号,  i 为窗口
      },
      clickStopRealPlay() {
        WebVideoCtrl.I_Stop({ iWndIndex: 0 })
      },
      
      clickGoPreset() {
        WebVideoCtrl.I_GoPreset(this.yzdh, {
            success: function (xmlDoc) {
                console.log(' 调用预置点成功！')
            },
            error: function (status, xmlDoc) {
                console.log(' 调用预置点失败！', status)
            }
        })
      },
      mouseDownPTZControl: function (iPTZIndex) {
        var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0)
        if (oWndInfo !== null) {
          if (iPTZIndex === 9 && this.g_bPTZAuto) {
            iPTZSpeed = 0
          } else {
            this.g_bPTZAuto = false
          }

          WebVideoCtrl.I_PTZControl(iPTZIndex, false, {
            iPTZSpeed: 2,
            success: function (xmlDoc) {
              console.log(xmlDoc)
              if (iPTZIndex === 9 && this.g_bPTZAuto) {
                console.log(oWndInfo.szDeviceIdentify + ' 停止云台成功！')
              } else {
                console.log(oWndInfo.szDeviceIdentify + ' 开启云台成功！')
              }
              if (iPTZIndex === 9) {
                this.g_bPTZAuto = !this.g_bPTZAuto
              }
            },
            error: function (status, xmlDoc) {
              console.log(oWndInfo.szDeviceIdentify + ' 开启云台失败！', status, xmlDoc)
            }
          })
        }
      },
      mouseUpPTZControl: function () {
        var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0)
        if (oWndInfo !== null) {
          WebVideoCtrl.I_PTZControl(1, true, {
            success: function (xmlDoc) {
              console.log(oWndInfo.szDeviceIdentify + ' 停止云台成功！', xmlDoc)
            },
            error: function (status, xmlDoc) {
              console.log(oWndInfo.szDeviceIdentify + ' 停止云台失败！', status, xmlDoc)
            }
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .plugin {
    width: 500px;
    height: 300px;
  }

  .my-tag {
    margin-left: 3px;
  }

  .my-group-btn {
    margin-top: 5px;
  }
  .infopage{
  margin:0 20px 0 24px;
  overflow: auto;
  .backBtn{
    margin-left: 24px;
    width: 120px;
    height: 40px;
    background-color: #021B45;

    color: #fff;
    border: none;
  }
  .content {
    margin-top:24px;
    display:flex;
    justify-content: space-between;
    overflow: auto;
    .left{
      width: 70%;
      height: 774px;
      background-color:#041B41;
      display: flex;
      justify-content: space-around;
      align-items: center;
      opacity:0.5;
      border:2px solid;
      border-image:linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(213, 213, 213, 0.5), rgba(255, 255, 255, 0.5), rgba(218, 218, 218, 0.5), rgba(255, 255, 255, 0.5)) 2 2;
      border-radius:10px;
      overflow: hidden;
      .spBox{
        width: 95%;
        height: 93%;
        opacity:0.5;
        border:2px solid;
        border-image:linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(213, 213, 213, 0.5), rgba(255, 255, 255, 0.5), rgba(218, 218, 218, 0.5), rgba(255, 255, 255, 0.5)) 2 2;
        border-radius:10px;

      }
    }
    .right{
      width: 30%;
      margin-left:24px;
      color: #fff;
      .wanginfo{
        padding: 1px 20px 20px 20px;
        // height:200px;
        background-color:#041B41;
        font-size:16px;
        font-family:Microsoft YaHei;
        font-weight:400;

        border:2px solid;
        border-image:linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(213, 213, 213, 0.5), rgba(255, 255, 255, 0.5), rgba(218, 218, 218, 0.5), rgba(255, 255, 255, 0.5)) 2 2;
        opacity:0.5;
        border-radius:10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content:start;
        align-items: center;
        h3 {
          text-align:center;
          font-size:18px;
        }
        .mllx{
          // margin-left: 50px;
          width: 100%;
          margin-bottom: 24px;
          span{
              width: 35%;
            }
        }
        .stopbtn{
          margin-left: 7%;
          width: 70%;
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          .comBtn{
            cursor: pointer;
            width: 45%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: rgba(3, 42, 113, 0.521);
          }
        }
      }
      .operate{
        margin-top:24px;
        padding-bottom: 24px;
        background-color:#041B41;
        // height:590px;
        border:2px solid;
        border-image:linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(213, 213, 213, 0.5), rgba(255, 255, 255, 0.5), rgba(218, 218, 218, 0.5), rgba(255, 255, 255, 0.5)) 2 2;
        opacity:0.5;
        border-radius:10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        .liand {
          height: 30px;
          text-align: center;
          font-size: 18px;
          padding: 20px;
        }
        .btns{
          width:221px;
          height:221px;
          position:relative;
          img{
            width:100%;
            height:100%;
            cursor: pointer;
          }
          .s{
            position: absolute;
            top:20px;
            left: 100px;
            width: 24px;
            height: 24px;
          }
          .x{
            position: absolute;
            bottom:20px;
            left: 100px;
            width: 24px;
            height: 24px;
          }
          .z{
            position: absolute;
            top:100px;
            left: 20px;
            width: 24px;
            height: 24px;
          }
          .y{
            position: absolute;
            top:100px;
            right:20px;
            width: 24px;
            height: 24px;
          }
          .zs{
            position: absolute;
            top:42px;
            left: 42px;
            width: 24px;
            height: 24px;
          }
          .zx{
            position: absolute;
            bottom:42px;
            left: 42px;
            width: 24px;
            height: 24px;
          }
          .ys{
            position: absolute;
            top:42px;
            right:42px;
            width: 24px;
            height: 24px;
          }
          .yx{
            position: absolute;
            bottom:42px;
            right:42px;
            width: 24px;
            height: 24px;
          }
          .fx{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
          }
        }
        .ytBox{
          width: 90%;
          height: 230px;
          margin-top:24px;
          background-color: rgba(0, 0, 0, 0.493);
          font-size: 16px;
          padding: 10px 0 10px 0;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          .mllx{
            display: flex;
            justify-content: space-between;
            width: 90%;
            span{
              line-height: 40px;
              text-align: center;
              width: 35%;
            }
          }
          .setBtn{
            margin-left:30%;
            width: 60%;
            display: flex;
            justify-content: space-between;
            .comBtn{
              cursor: pointer;
              width: 50%;
              height: 40px;
              text-align: center;
              line-height: 40px;
              background-color: rgba(3, 42, 113, 0.521);
            }
          }
          .bbBtn{

            margin-left:30%;
            width: 60%;
            height: 40px;
            background-color: rgba(3, 42, 113, 0.521);
            display: flex;
            justify-content: start;
            div{
              text-align: center;
              line-height: 40px;
            }
            .add{
              width: 25%;
              height: 40px;
              cursor: pointer;
            }
            .bb{
              width: 50%;
              height: 40px;
              cursor: pointer;
              background-color: #0326639c;
            }
            .jian{
              width: 25%;
              height: 40px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>