<template lang="pug">
  <div class="animation">
    <div class='info-title'>当前摄像头
      <el-button icon="el-icon-close" style="float:right;" type="text" @click="closeQueryDetailVisible"></el-button>
    </div>
    <div class='info-video'>
      <video class="video" ref="video" muted autoplay controls></video>
      //- <video class="video" :src="videoSrc" controls="controls"></video>
    </div>
    <div class="info-form">
      <div class="operate">
        <div class="btns">
          <img v-show="imgUrl == ''" src="@/assets/images/btns.png" alt="">
          <img v-show="imgUrl == 's'" src="@/assets/images/s.png" alt="">
          <img v-show="imgUrl == 'x'" src="@/assets/images/x.png" alt="">
          <img v-show="imgUrl == 'z'" src="@/assets/images/z.png" alt="">
          <img v-show="imgUrl == 'y'" src="@/assets/images/y.png" alt="">
          <img v-show="imgUrl == 'ys'" src="@/assets/images/ys.png" alt="">
          <img v-show="imgUrl == 'yx'" src="@/assets/images/yx.png" alt="">
          <img v-show="imgUrl == 'zs'" src="@/assets/images/zs.png" alt="">
          <img v-show="imgUrl == 'zx'" src="@/assets/images/zx.png" alt="">
          <div class="fx">方向</div>
          <div class="zs" @mousedown="clickPTZControl(25,0,'zs')" @mouseup="clickPTZControl(25,1)" title="云台左上">
          </div>
          <div class="s" @mousedown="clickPTZControl(21,0,'s')" @mouseup="clickPTZControl(21,1)" title="云台上仰">
          </div>
          <div class="ys" @mousedown="clickPTZControl(26,0,'ys')" @mouseup="clickPTZControl(26,1)" title="云台右上">
          </div>
          <div class="y" @mousedown="clickPTZControl(24,0,'y')" @mouseup="clickPTZControl(24,1)" title="云台右转">
          </div>
          <div class="yx" @mousedown="clickPTZControl(28,0,'yx')" @mouseup="clickPTZControl(24,1)" title="云台右下">
          </div>
          <div class="x" @mousedown="clickPTZControl(22,0,'x')" @mouseup="clickPTZControl(22,1)" title="云台下转">
          </div>
          <div class="zx" @mousedown="clickPTZControl(27,0,'zx')" @mouseup="clickPTZControl(27,1)" title="云台左下">
          </div>
          <div class="z" @mousedown="clickPTZControl(23,0,'z')" @mouseup="clickPTZControl(23,1)" title="云台左转">
          </div>
        </div>
        <div class="ytBox ytBox2">
          <div class="bbBtn">
            <div @mousedown="clickPTZControl(11,0,'right')" @mouseup="clickPTZControl(11,1,'right')" title="变倍+">
              <img v-show="imgRightUrl11" src="@/assets/images/r1.png" alt="">
              <img v-show="!imgRightUrl11" src="@/assets/images/r1b.png" alt="">
            </div>
            <div @mousedown="clickPTZControl(12,0,'right')" @mouseup="clickPTZControl(12,1,'right')" title="变倍-">
              <img v-show="imgRightUrl12" src="@/assets/images/r2.png" alt="">
              <img v-show="!imgRightUrl12" src="@/assets/images/r2b.png" alt="">
            </div>
          </div>
          <div class="bbBtn">
            <div @mousedown="clickPTZControl(13,0,'right')" @mouseup="clickPTZControl(13,1,'right')" title="变焦+">
              <img v-show="imgRightUrl13" src="@/assets/images/r3.png" alt="">
              <img v-show="!imgRightUrl13" src="@/assets/images/r3b.png" alt="">
            </div>
            <div @mousedown="clickPTZControl(14,0,'right')" @mouseup="clickPTZControl(14,1,'right')" title="变焦-">
              <img v-show="imgRightUrl14" src="@/assets/images/r4.png" alt="">
              <img v-show="!imgRightUrl14" src="@/assets/images/r4b.png" alt="">
            </div>
          </div>
          <div class="bbBtn">
            <div @mousedown="clickPTZControl(15,0,'right')" @mouseup="clickPTZControl(15,1,'right')" title="光圈+">
              <img v-show="imgRightUrl15" src="@/assets/images/r5.png" alt="">
              <img v-show="!imgRightUrl15" src="@/assets/images/r5b.png" alt="">
            </div>
            <div @mousedown="clickPTZControl(16,0,'right')" @mouseup="clickPTZControl(16,1,'right')" title="光圈-">
              <img v-show="imgRightUrl16" src="@/assets/images/r6.png" alt="">
              <img v-show="!imgRightUrl16" src="@/assets/images/r6b.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class='info-title'>资源点信息</div>
    <div class='info-form'>
      <div class="quDetailM">
        <p class="leftP">线路站点&nbsp;:&nbsp;&nbsp;<span>{{dataForm.lineStation}}</span></p>
      </div>
      <div class="quDetailM">
        <p class="leftP">资源点名称&nbsp;:&nbsp;&nbsp;{{dataForm.name}}</p>
      </div>
      <div class="quDetailM">
        <p class="leftP">资源点类型&nbsp;:&nbsp;&nbsp;{{dataForm.typeName}}</p>
      </div>
      <div class="quDetailM">
        <p class="leftP">资源点编码&nbsp;:&nbsp;&nbsp;{{dataForm.code}}</p>
      </div>
      <div class="quDetailM">
        <p class="leftP">部署位置&nbsp;:&nbsp;&nbsp;{{dataForm.deployLocation}}</p>
      </div>
    </div>
  </div>

</template>

<script>
import { mapState } from 'vuex'
import { isAuth } from '../../../util'
export default {
  computed: {
    ...mapState('d2admin/user', [
      'info'
    ])
  },
  data () {
    return {
      flvPlayer: null,
      //11=焦距变大，12=焦距变小，13=焦点前调，14=焦点后调，15=光圈扩大，16=光圈扩小
      //21=上仰，22=下俯，23=左转，24=右转，25=左上，26=右上，27=左下，28=右下，29=自动扫描
      actionList: ['', '', '', '', '', '', '', '', '', '', '', '变倍+', '变倍-', '变焦+', '变焦-', '光圈+', '光圈-', '', '', '', '',
        '上仰', '下俯', '左转', '右转', '左上', '右上', '左下', '右下', '自动扫描'],
      imgUrl: '',
      imgRightUrl11: false,
      imgRightUrl12: false,
      imgRightUrl13: false,
      imgRightUrl14: false,
      imgRightUrl15: false,
      imgRightUrl16: false,
      videoSrc: '',
      clickFlag: false,
      visible: false,
      sysOrgList: [],
      dataListSelections: [],
      lineList: [],
      stationList: [],
      typeList: [],
      systemList: [],
      tierList: [],
      dataForm: {
        id: 0,
        name: '',
        type: 1,
        lineId: '',
        lineName: '',
        stationId: '',
        stationName: '',
        tierId: '',
        subSystem: '',
        code: '',
        subCode: '',
        addressCode: '',
        port: '',
        username: '',
        password: '',
        remark: '',
        status: 1
      }
      // ontclick: 'pointer-events: none;'
    }
  },
  created () {

  },
  methods: {
    init (id, stationId) {
      this.visible = true
      this.clickFlag = false
      this.dataForm.id = id
      this.dataForm.stationId = stationId
      this.initResource()
      this.dataForm.operatorName = this.info.name
    },
    initResource () {
      // console.log(this.$refs.video);
      this.$http({
        url: this.$http.adornUrlEq(`/liResource/getResourceDetails/${this.dataForm.id}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(data => {
        if (data && data.code === 0) {
          this.dataForm = data.bean
          //如果当前设备摄像头为离线状态，则不加载画面
          if(data.bean.byx2 == 0 && this.flvPlayer){//资源点状态(0=离线，1=在线)
            this.flvPlayer.pause()
            this.flvPlayer.unload()
            this.flvPlayer.detachMediaElement()
            this.flvPlayer.destroy()
            this.flvPlayer = null
            return
          }else if(data.bean.byx2 == 0 && !this.flvPlayer){
            return
          }else if(this.flvPlayer){
            this.flvPlayer.pause()
            this.flvPlayer.unload()
            this.flvPlayer.detachMediaElement()
            this.flvPlayer.destroy()
            this.flvPlayer = null
          }
          this.$http({
            url: this.$http.adornUrlEq('/camera/camerasPlay'),
            method: 'post',
            data: {
              id: data.bean.id,
              stationId: data.bean.stationId,
              userId: localStorage.getItem('userId'),
              levelType: 1,
              controlType: 3
            }
          }).then(data => {
            if (data && data.code === 0) {
              this.videoSrc = data.url
              //视频连接
              this.flvPlayer = null
              if (flvjs.isSupported()) {
                this.flvPlayer = flvjs.createPlayer({
                  type: 'flv',
                  enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
                  isLive: true, //直播模式
                  hasAudio: false, //关闭音频
                  hasVideo: true,
                  stashInitialSize: 128,
                  enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
                  url: this.videoSrc
                })
                this.$nextTick(function () {
                  this.flvPlayer.attachMediaElement(this.$refs.video)
                  this.flvPlayer.load()
                })
              }
            }
          })
        }
      })
    },
    closeQueryDetailVisible () {
      this.$emit('closeQ')
    },
    clickPTZControl (ptz, dwStop, img) {
      if (this.dataForm.type !== 'ece0b8b2db27411886254e81134988a3' && (ptz < 11 || ptz > 16)) {
        return
      }
      if (!isAuth('monitor:point:corona')) {
        this.$message({
          type: 'warning',
          message: '没有操作权限，请联系管理员',
          duration: 1000
        })
        return
      }
      if (img && img != 'right') {
        this.imgUrl = img
      }
      if (dwStop) {
        this.imgUrl = ''
      }
      if (img && img == 'right') {
        this['imgRightUrl' + ptz] = true
      }
      if (dwStop && img == 'right') {
        this['imgRightUrl' + ptz] = false
      }
      this.$http({
        url: this.$http.adornUrlEq('/camera/ptzControl'),
        method: 'post',
        data: {
          resourceId: this.dataForm.id,
          stationId: this.dataForm.stationId,
          userId: localStorage.getItem('userId'),
          levelType: 1,
          controlType: 3,
          ip: this.dataForm.addressCode, //ip地址
          port: this.dataForm.port, //端口
          username: this.dataForm.username, //账号
          password: this.dataForm.password, //密码
          brand: this.dataForm.brand, //品牌
          channel: this.dataForm.byx1, //通道
          stream: 'main', //主码流
          dwPtzCommand: ptz, //云台控制命令
          dwStop: dwStop //云台控制0开始和1结束
        }
      }).then(data => {
        if (data && data.code === 0) {
          if (dwStop == 0) { //云台控制0开始和1结束
            this.saveLog(1, ptz)// 执行结果 成功 1  失败 2
            this.$message.success(data.msg)
          }
        } else {
          if (dwStop == 0) { //云台控制0开始和1结束
            this.saveLog(2, ptz)// 执行结果 成功 1  失败 2
            this.$message.error(data.msg)
          }
        }
      })
    },
    //调用日志保存记录操作指令
    saveLog (result, ptz) {
      this.$http({
        url: this.$http.adornUrlEq('/orVideoMonitor/save'),
        method: 'post',
        data: {
          source: 1,
          actionName: this.actionList[ptz],
          resourceId: this.dataForm.id,
          stationId: this.dataForm.stationId,
          type: this.dataForm.type,
          result: result
        }
      }).then(data => {

      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-table__header {
  width: 100% !important;
}
.el-table__body {
  width: 100% !important;
}
.info-title {
  line-height: 40px;
  height: 40px;
  padding: 0 20px;
  background-color: #e1edf4;
  border-bottom: 1px solid #cccccc;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
}
.info-video {
  padding: 10px;
  height: 175px;
}
.info-form {
  padding: 10px;
}
.info-block {
  border: 1px solid #cccccc;
}
.el-select {
  width: 100%;
}
.video {
  width: 310px;
  height: 175px;
}
.animation {
  animation: myfirst 1s;
  position: absolute;
  top: 50px;
  right: 0;
  width: 330px;
  background-color: #f4f4f4;
  z-index: 11;
  border: 1px solid rgba(195, 195, 195, 1);
  box-shadow: 0 2px 8px 8px rgba(0, 0, 0, 0.2);
}
@keyframes myfirst {
  from {
    right: -500px;
  }
  to {
    right: 0;
  }
}
.quDetailM {
  width: 100%;
}
.leftP {
  height: 30px;
  line-height: 30px;
  margin: 0;
  width: 100%;
  font-size: 14px;
  span {
    color: #46b6f9;
  }
}
.operate {
  padding: 5px 0;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  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;
  display: flex;
  justify-content: flex-start;
  .btns {
    width: 194px;
    height: 194px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    div {
      cursor: pointer;
      padding: 10px;
    }
    .s {
      position: absolute;
      top: 10px;
      left: 75px;
      width: 24px;
      height: 24px;
    }
    .x {
      position: absolute;
      bottom: 10px;
      left: 75px;
      width: 24px;
      height: 24px;
    }
    .z {
      position: absolute;
      top: 75px;
      left: 10px;
      width: 24px;
      height: 24px;
    }
    .y {
      position: absolute;
      top: 75px;
      right: 10px;
      width: 24px;
      height: 24px;
    }
    .zs {
      position: absolute;
      top: 32px;
      left: 32px;
      width: 24px;
      height: 24px;
    }
    .zx {
      position: absolute;
      bottom: 32px;
      left: 32px;
      width: 24px;
      height: 24px;
    }
    .ys {
      position: absolute;
      top: 32px;
      right: 32px;
      width: 24px;
      height: 24px;
    }
    .yx {
      position: absolute;
      bottom: 32px;
      right: 32px;
      width: 24px;
      height: 24px;
    }
    .fx {
      position: absolute;
      padding: 0;
      cursor: default;
      top: 50%;
      left: 50%;
      width: 65px;
      height: 65px;
      background: #ececec;
      border-radius: 50%;
      line-height: 65px;
      text-align: center;
      color: #969696;
      transform: translate(-50%, -50%);
    }
  }
  .ytBox {
    width: 90px;
    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%;
      }
    }
    .bbBtn {
      height: 40px;
      display: flex;
      margin-left: 10px;
      justify-content: flex-start;
      div {
        width: 40px;
        height: 40px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
