<template>
	<div class="cjmscon">
		<div class="cjmscon-btn">
			<a><i class="iconfont yj-icon-fengsu"></i>风速&nbsp;8.0m/s</a>
			<a><i class="iconfont yj-icon-fengxiang"></i>风向&nbsp;东南风</a>
			<a><i class="iconfont yj-icon-jiangyuliang"></i>降雨量&nbsp;10mm</a>
			<a><i class="iconfont yj-icon-huoxiandengji"></i>风险等级&nbsp;4</a>
			<a><i class="iconfont yj-icon-fengxiantishi"></i>风险&nbsp;1</a>
		</div>
		<div class="cjmscon-map">
			<!--<img src="../assets/images/yj-cjmsimg2.png" />-->
<!--			<img :src="mainPicSrc" />-->
      <div id="dom1" class="dom1"></div>
		</div>
	</div>
</template>
<script>

import DHWs from '@/dahua/lib/DHWs';
export default {
  name: 'Cjmsbtm',
  data() {
    return {
      tvListJson: [
        {
          switchTab: "2",
          treeLabels: [
            {
              id: null,
              labelCode: "999",
              labelName: "电视墙",
              cameraType: null,
              parentLabelCode: "",
            },
            {
              id: "spcamera00010",
              labelCode: '22030300001321000023',
              labelName: "四平市铁东区城东乡立业村",
              cameraType: "1",
              parentLabelCode: "999",
            },
          ],
          labelChannels: [
            {
              labelCode: '22030300001321000023',
              channelDates: [
                {
                  channelCode: '22030300001321000023',
                  channelName: "四平市铁东区城东乡立业村",
                  channelSn: null,
                  cameraType: "1",
                  online: "1",
                  cameraCode: "1",
                },
              ],
            },
          ],
        },
      ],
      autoList:[{"channelId":"22030300001321000023"}],
      TVWallVisible: false,
      activeName: 'tv',
      channelId: ['ZgVzqsjwA1DTF561VHG69F'],
      /** ----------------------------------摄像头预览开始------------------------------------- */
      showModal: true,
      activePanel: 'key1',
      isLogin: false,
      loginType: '1',
      token: '',
      ctrlType: 'playerWin',
      https: 1,
      httpsList: [
        {
          value: 0,
          label: 0
        },
        {
          value: 1,
          label: 1
        }
      ],
      ctrlTypeList: [{
        value: 'playerWin',
        label: '播放控件'
      }, {
        value: 'realMonitorUI',
        label: '带设备树实时预览控件'
      }, {
        value: 'playbackUI',
        label: '带设备树视频回放控件'
      }, {
        value: 'TVWallUI',
        label: '视频上墙'
      }],
      ctrlList: [
        {
          value: 'ctrl1',
          label: '控件1'
        },
        {
          value: 'ctrl2',
          label: '控件2'
        },
        {
          value: 'ctrl3',
          label: '控件3'
        }
      ],
      splitList: [
        {
          value: 1,
          label: '1 * 1'
        },
        {
          value: 4,
          label: '2 * 2'
        },
        {
          value: 9,
          label: '3 * 3'
        }
      ],
      displayModeList: [
        {
          value: 1,
          label: '播放器预览模式'
        },
        {
          value: 2,
          label: '播放器回放模式'
        }
      ],
      mixedVideoDisplayModeList: [
        {
          value: 1,
          label: '播放实时视频'
        },
        {
          value: 2,
          label: '播放回放视频'
        }
      ],
      ctrl: 'ctrl1',
      splitNum: 1,
      displayMode: 1,
      displayTimeRange: [],
      modalDisplayTimeRange: [],
      mixedVideoTime: null,
      recordPath: 'C:\\DSS LightWeight\\DSS LightWeight Client\\Record\\',
      downloadName: '',
      downTimeRange: [],
      downloadFormat: 0,
      downloadFormatList: [{
        value: 0,
        label: 'dav'
      },
        {
          value: 1,
          label: 'avi'
        }, {
          value: 2,
          label: 'mp4'
        }],
      downloadSource: 3,
      downloadSourceList: [
        {
          value: 3,
          label: '中心录像'
        }, {
          value: 2,
          label: '设备录像'
        }],
      showDownloadStreamType: false,
      downloadStreamType: 1,
      downloadStreamTypeList: [{
        value: 1,
        label: '主码流'
      },
        {
          value: 2,
          label: '辅码流'
        },
        {
          value: 3,
          label: '三码流'
        }],
      downloadIsShow: true,
      downloadIsShowList: [{
        value: true,
        label: '是'
      },
        {
          value: false,
          label: '否'
        }],
      crtPosX: 0,
      crtPosY: 0,
      crtWidth: 1100,
      crtHeight: 640,
      domId: 'dom1',
      mixedVideoDisplayMode: 2,
      isShowTipe: true,
      /** ----------------------------------摄像头预览结束------------------------------------- */
      cameraList:[],
      initCount: 0,
      pubKey: '',
      oWebControl: null
    }
  },
  created() {
    const DHWsInstance = DHWs.getInstance()
    this.ws = DHWsInstance
  },
  mounted(){
    this.info();
  },
  methods: {
    cancelEventLocationShow() {
      this.TVWallVisible = false
      this.destroy()

      if (this.oWebControl != null) {
        this.oWebControl.JS_HideWnd()   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
        this.oWebControl.JS_Disconnect().then(function() {  // 断开与插件服务连接成功
            },
            function() {  // 断开与插件服务连接失败
            })
      }
    },
    info(){
        this.ws.detectConnectQt().then(res => {
          if (res) { // 连接客户端成功
            this.ws.login({
              loginIp: '202.98.7.130',
              loginPort: 7905,
              userName: 'system',
              userPwd: 'Admin123',
              token: '',
              https: 1
            })
            this.ws.on('loginState', (res) => {
              this.isLogin = res
              console.log('---res-----', res)
              if (res) {
                this.activePanel = 'key2'
                this.create()
              }
            })
          }
        })
    },
    /** ----------------------------------大华摄像头预览开始------------------------------------- */
    create() { // 调用创建控件接口
      const params = [
        {
          'ctrlType': 'realMonitorUI',
          'ctrlCode': 'ctrl1',
          'ctrlProperty': {
            'displayMode': 1,
            'splitNum': 1,
            'channelList': [
              {
                'channelId': ''
              }
            ]
          },
          'visible': true,
          'domId': 'dom1'
        }
      ]
      this.setPos()
      this.customizeTree(this.tvListJson);
      this.ws.createCtrl(params);
      this.playRealMonitorVideo();
    },
    playRealMonitorVideo() { // 自定义设备树自动播放指定通道编码视频
      const config = this.ws.config
      const {loginIp, userCode} = config
      this.ws.postMessage('playRealMonitorVideo', {
        loginIp,
        userCode,
        params: {
          ctrlCode: "ctrl1",
          array: this.autoList
        }
      })
    },
    setPos() {
      let target = document.getElementById(this.domId)
      console.log(target, 'target')
      target.style.right = `${this.crtPosX}px`
      target.style.top = `${this.crtPosY}px`
      target.style.width = `${this.crtWidth}px`
      target.style.height = `${this.crtHeight}px`
      if (document.createEvent) {
        var event = document.createEvent('HTMLEvents')
        event.initEvent('resize', true, true)
        window.dispatchEvent(event)
      } else if (document.createEventObject) {
        window.fireEvent('onresize')
      }
    },
    destroy() { // 调用销毁控件接口
      if (!this.isLogin) {
        return false
      }
      const ctrls = this.ws.ctrls.map(i => {
        if (i.ctrlCode === this.ctrl) {
          return i.ctrlCode
        }
      })
      this.ws.destroyCtrl(ctrls)
    },
    customizeTree(tvListJson) { // 调用控件接口树
      const config = this.ws.config
      const { loginIp, userCode } = config
      this.ws.postMessage('customizeTree', {
        loginIp,
        userCode,
        params: {
          array: tvListJson
        }
      })
    },
    /** ----------------------------------大华摄像头预览结束------------------------------------- */
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.cjmscon{
		position: absolute;
		top: 90px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 3;
		}
	.cjmscon-btn{
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-bottom: 15px;
	}
	.cjmscon-btn a{
		display: flex;
		flex-direction: row;
		color: #fff;
		background: url("../assets/images/yj-cjmsbtnbg3.png") no-repeat center;
		width: 189px;
		height: 38px;
		align-items: center;
		font-size: 14px;
	}
	.cjmscon-btn a:hover{
		text-shadow: 0px 0px 5px #00ffff;
	}
	.cjmscon-btn a i{
		margin-left: 20px;
		margin-right: 10px;
	}
	.cjmscon-map{
		width: 1100px;
		height: 650px;
	}
	.cjmscon-map img{
		width: 100%;
		height: 100%;
	}
</style>
