<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 style="height:40px; width:100%;padding-top:10px">
      <div style="width:80px; float:left; line-height:40px; padding-left:10px;">关联监控:</div>
      <div style="float:left">
        <el-select v-model="camera" placeholder="请选择" @change="cameraChange">
          <el-option v-for="item in dataForm.list" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
    </div>
    <div class='info-video'>
      <img v-if="video1 == 0" class="video" src="@/assets/images/videoImg.png" alt="">
      <video v-if="video1 == 1" class="video" ref="video" muted autoplay 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.status==1?'正常':'异常'}}</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 {
      video1: 0,
      stationId: localStorage.getItem('stationId'),
      //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,
      monitorList: [
        {
          value: '1',
          label: '监控1'
        },
        {
          value: '2',
          label: '监控2'
        }
      ],
      monitorValue: '监控1',
      videoSrc: '',
      clickFlag: false,
      camera: '',
      cameraCur: {},
      restaurants: [],
      dataForm: {
        id: 0,
        name: '',
        type: 1,
        lineId: '',
        lineName: '',
        stationId: '',
        stationName: '',
        tierId: '',
        subSystem: '',
        code: '',
        subCode: '',
        addressCode: '',
        port: '',
        username: '',
        password: '',
        remark: '',
        status: 1
      }
    }
  },
  created() {},
  methods: {
    init(id, stationId) {
      this.clickFlag = false
      this.dataForm.id = id
      // this.stationId = stationId
      this.cameraCur = {}
      this.camera = ''
      this.initResource()
      this.dataForm.operatorName = this.info.name
    },
    initResource() {
      this.video1 = 0 //初始化显示默认图片
      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 (this.dataForm.list && this.dataForm.list.length > 0) {
            this.cameraCur = this.dataForm.list[0]
            // console.log(this.cameraCur, '---------')
            this.camera = this.cameraCur.id
            this.video1 = 1
            this.$http({
              url: this.$http.adornUrlEq('/camera/camerasPlay'),
              method: 'post',
              data: {
                id: this.cameraCur.id,
                stationId: this.cameraCur.stationId,
                userId: localStorage.getItem('userId'),
                levelType: 1,
                controlType: 3
              }
            }).then((data) => {
              if (data && data.code === 0) {
                //视频直播
                var src = data.url
                //视频连接
                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: src
                  })
                  this.$nextTick(function() {
                    this.flvPlayer.attachMediaElement(this.$refs.video)
                    try {
                      this.flvPlayer.load()
                      // this.flvPlayer.play()
                    } catch (error) {
                      console.log(error)
                    }
                  })
                }
              }
            })
          }
        }
      })
    },
    closeQueryDetailVisible() {
      this.$emit('closeQ')
    },
    clickPTZControl(ptz, dwStop, img) {
      // console.log(this.camera)
      if (
        !this.camera ||
        (this.cameraCur.type !== 'ece0b8b2db27411886254e81134988a3' &&
          (ptz < 11 || ptz > 16))
      ) {
        return
      }
      if (!isAuth('ol:demo: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.cameraCur.id,
          stationId: this.cameraCur.stationId,
          userId: localStorage.getItem('userId'),
          levelType: 1,
          controlType: 3,
          ip: this.cameraCur.addressCode, //ip地址
          port: this.cameraCur.port, //端口
          username: this.cameraCur.username, //账号
          password: this.cameraCur.password, //密码
          channel: this.cameraCur.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.cameraCur.id,
          stationId: this.stationId,
          type: this.cameraCur.type,
          result: result
        }
      }).then((data) => {})
    },
    cameraChange(id) {
      if (id) {
        this.camera = id
        this.dataForm.list.forEach((res) => {
          if (res.id === id) {
            this.cameraCur = res
          }
        })
        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: this.cameraCur.id,
            stationId: this.cameraCur.stationId,
            userId: localStorage.getItem('userId'),
            levelType: 1,
            controlType: 3
          }
        }).then((data) => {
          if (data && data.code === 0) {
            //视频直播
            var src = data.url
            //视频连接
            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: src
              })
              this.$nextTick(function() {
                this.flvPlayer.attachMediaElement(this.$refs.video)
                try {
                  this.flvPlayer.load()
                  // this.flvPlayer.play()
                } catch (error) {
                  console.log(error)
                }
              })
            }
          }
        })
      }
    }
  }
}
</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: 160px;
}
.info-form {
  padding: 10px;
}
.info-block {
  border: 1px solid #cccccc;
}
.el-select {
  width: 100%;
}
.video {
  width: 100%;
  height: 180px;
}
.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%;
        }
      }
    }
  }
}

.el-icon-wq-r1 {
  background: url(~@/assets/images/r1.png) center no-repeat;
  background-size: 65%;
}
.el-icon-wq-r1:before {
  content: '';
  font-size: 16px;
}
.el-icon-wq-r2 {
  background: url(~@/assets/images/r2.png) center no-repeat;
  background-size: 65%;
}
.el-icon-wq-r2:before {
  content: '';
  font-size: 16px;
}
.el-icon-wq-r3 {
  background: url(~@/assets/images/r3.png) center no-repeat;
  background-size: 65%;
}
.el-icon-wq-r3:before {
  content: '';
  font-size: 16px;
}
.el-icon-wq-r5 {
  background: url(~@/assets/images/r5.png) center no-repeat;
  background-size: 65%;
}
.el-icon-wq-r5:before {
  content: '';
  font-size: 16px;
}
.el-icon-wq-r6 {
  background: url(~@/assets/images/r6.png) center no-repeat;
  background-size: 65%;
}
.el-icon-wq-r6:before {
  content: '';
  font-size: 16px;
}

.el-icon-wq-r1b {
  background: url(~@/assets/images/r1b.png) center no-repeat;
  height: 35px;
  width: 35px;
  background-size: 65%;
}
.el-icon-wq-r1b:before {
  content: '';
  font-size: 16px;
}
.el-icon-wq-r2b {
  background: url(~@/assets/images/r2b.png) center no-repeat;
  height: 35px;
  width: 35px;
  background-size: 65%;
}
.el-icon-wq-r2b:before {
  content: '';
  font-size: 16px;
}
.el-icon-wq-r3b {
  background: url(~@/assets/images/r3b.png) center no-repeat;
  height: 35px;
  width: 35px;
  background-size: 65%;
}
.el-icon-wq-r3b:before {
  content: '';
  font-size: 16px;
}
.el-icon-wq-r5b {
  background: url(~@/assets/images/r5b.png) center no-repeat;
  height: 35px;
  width: 35px;
  background-size: 65%;
}
.el-icon-wq-r5b:before {
  content: '';
  font-size: 16px;
}
.el-icon-wq-r6b {
  background: url(~@/assets/images/r6b.png) center no-repeat;
  height: 35px;
  width: 35px;
  background-size: 65%;
}
.el-icon-wq-r6b:before {
  content: '';
  font-size: 16px;
}
</style>
<style lang="scss">
.instuctions_content {
  table {
    th {
      background: #eef8ff !important;
      color: #333333 !important;
    }
  }
}
</style>