<!--
 * @Author: hisense.wuhongjian
 * @Date: 2021-05-21 17:43:34
 * @LastEditors: hisense.wuhongjian
 * @LastEditTime: 2021-12-01 13:32:53
 * @Description: 告诉大家这是什么
-->
<template>
  <div class="dh-view" />
</template>

<script>
  const DHWsInstance = DHWs.getInstance({
    reConnectCount: 2,
    connectionTimeout: 30 * 1000,
    messageEvents: {
      loginState() {
        console.log('aaaa')
      },
    },
  }) // 获取对象实例，使用单例模式，唯一
  DHWsInstance.detectConnectQt().then((res) => {
    if (res) {
      console.info('登陆成功')
    } else {
      console.info('登陆失败,重新登录')
      DHWsInstance.login({
        loginIp: _global.config.loginInfo.loginIp,
        loginPort: _global.config.loginInfo.loginPort,
        userName: _global.config.loginInfo.userName,
        userPwd: _global.config.loginInfo.userPwd,
      })
      // this.$Message.info('登录中...');
      DHWsInstance.on('loginState', (res) => {
        // this.isLogin = res;
        if (res) {
          // this.$Message.success('登录成功');
          // this.activePanel = 'key2'
        } else {
          // this.$Message.info('登录失败');
        }
      })
    }
  })
  import mybus from '@/myplugins/mybus'
  export default {
    props: {
      isDestroyed: {
        type: Boolean,
        default: true,
      },
      width: {
        type: Number,
        default: 0,
      },
      posX: {
        type: Number,
        default: 0,
      },
      posY: {
        type: Number,
        default: 0,
      },
      channelId: {
        type: Array,
        default: [],
      },
      count: {
        type: Number,
        default: 0,
      },
      // ws: {
      //   type: Object,
      //   default: () => {
      //     return {};
      //   }
      // }
    },
    data() {
      return {
        ws: DHWsInstance,
        activePanel: 'key12580',
        isLogin: false,
        loginType: '1',
        loginIp: _global.config.loginInfo.loginIp,
        loginPort: _global.config.loginInfo.loginPort,
        userName: _global.config.loginInfo.userName,
        userPwd: _global.config.loginInfo.userPwd,
        ctrlType: 'playerWin',
        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: '播放器回放模式',
          },
        ],
        ctrl: 'ctrl133',
        splitNum: 1,
        displayMode: 1,
        displayTimeRange: [],
        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: '否',
          },
        ],
        // posX: 650,
        // posY: 120,
        // width: 1250,
        height: 800,
        ratio: 100,
        scrollX: 0,
        scrollXH: 0,
        scrollY: 0,
        scrollYW: 0,
        cutPosX: 0,
        cutPosY: 0,
        cutWidth: 100,
        cutHeight: 100,
      }
    },
    watch: {
      channelId() {
        console.log('监测到了节点的变化', this.channelId)
        // mybus.$emit('destroyVideoSur', true);
        // this.login();

        this.realTimeVideo()
      },
      count() {
        // this.setVisible();
      },
    },
    created() {
      // this.destroy();
      // this.login();
    },
    mounted() {
      this.realTimeVideo()
      // mybus.$emit('destroyVideoSur', true);
      // this.loginOut();
      // this.login();
      // mybus.$off('destroyDHView');
      // mybus.$on('destroyDHView', val =>{
      //   console.log('销毁弹窗插件', val);
      //   if(!val) {
      //     this.destroy();
      //     this.loginOut();
      //   } else {
      //     this.login();
      //   }
      // });
    },
    methods: {
      loginOut() {
        this.ws.logout({
          loginIp: _global.config.loginInfo.loginIp,
        })
      },
      create() {
        // 调用创建控件接口
        if (!this.isLogin) {
          // this.$Message.info('正在登陆客户端，请稍等......');
          return false
        }
        const params = [
          {
            ctrlType: this.ctrlType,
            ctrlCode: this.ctrl,
            ctrlProperty: {
              displayMode: this.displayMode,
              splitNum: this.splitNum,
              channelList: [{ channelId: this.channelId }],
            },
            visible: true,
            posX: this.posX,
            posY: this.posY,
            width: this.width,
            height: this.height,
            ratio: this.ratio,
            scrollX: this.scrollX,
            scrollY: this.scrollY,
            scrollXH: this.scrollXH,
            scrollYW: this.scrollYW,
            cutList: [
              {
                posX: 0,
                posY: 0,
                width: 0,
                height: 0,
              },
            ],
          },
        ]
        this.ws.createCtrl(params)
        this.ws.on('createCtrlResult', (res) => {
          console.info('插件返回信息', res)
        })
      },
      login() {
        // 调用登录接口
        this.ws.detectConnectQt().then((res) => {
          if (res) {
            // 连接客户端成功
            this.ws.login({
              loginIp: _global.config.loginInfo.loginIp,
              loginPort: _global.config.loginInfo.loginPort,
              userName: _global.config.loginInfo.userName,
              userPwd: _global.config.loginInfo.userPwd,
              https: 1,
            })
            // this.$Message.info('登录中...');
            this.ws.on('loginState', (res) => {
              this.isLogin = res
              if (res) {
                this.$Message.success('登录成功')
                // this.activePanel = 'key2';
              } else {
                this.$Message.info('登录失败')
              }
            })
          } else {
            // 连接客户端失败
            // this.$Message.info('请重新安装客户端');
            this.$confirm('未检测到相关视频插件，是否进行下载？', '提示', {
              confirmButtonText: '下载',
              cancelButtonText: '取消',
              type: 'warning',
            })
              .then(() => {
                const agent = this.getPCNum()
                if (agent === 32) {
                  // 64位操作系统
                  this.downloadFile(
                    _global.config.loginInfo.name_32,
                    _global.config.loginInfo.url_32
                  )
                } else {
                  // 32位操作系统
                  this.downloadFile(
                    _global.config.loginInfo.name_64,
                    _global.config.loginInfo.url_64
                  )
                }
              })
              .catch(() => {})
          }
        })
      },
      downloadFile(name, url) {
        const alink = document.createElement('a')
        alink.download = name // 文件名,大部分浏览器兼容,IE10及以下不兼容
        alink.href = url // 创建 url地址
        alink.click() // 自动点击
      },
      getPCNum() {
        const agent = navigator.userAgent.toLowerCase()
        if (agent.indexOf('win32') >= 0 || agent.indexOf('wow32') >= 0) {
          return 32
        }
        if (agent.indexOf('win64') >= 0 || agent.indexOf('wow64') >= 0) {
          return 64
        }
      },
      setVisible() {
        // 调用设置控件显隐接口
        if (!this.isLogin) {
          // this.$Message.info("正在登陆客户端，请稍等......");
          return false
        }
        const params = [
          {
            ctrlCode: this.ctrl,
            visible: !this.ws.ctrls.find((i) => {
              if (i.ctrlCode === this.ctrl) {
                return i
              }
            }).visible,
          },
        ]
        this.ws.setCtrlVisible(params)
      },
      realTimeVideo() {
        // // 调用控件实时播放接口
        // if (!this.isLogin) {
        //   console.log("正在登陆客户端，请稍等......");
        //   // this.$Message.info("正在登陆客户端，请稍等......");
        //   return false;
        // }
        // this.displayMode = 1;
        // if (this.ws.ctrls.length === 0) {
        //   console.log("请先创建控件！");
        //   // this.$Message.info("请先创建控件！");
        // }
        // const params = {
        //   ctrlCode: this.ctrl,
        //   channelIds: [this.channelId],
        // };
        // this.ws.openCtrlPreview(params);
        console.log('播放', this.channelId)
        if (!this.isLogin) {
          // this.$Message.info('正在登陆客户端，请稍等......');
          // return false;
          this.login()
        }
        // const params = [this.channelId];
        console.log('播放', this.channelId)
        this.ws.openVideo(this.channelId)
      },
      destroy() {
        // 调用销毁控件接口
        if (!this.isLogin) {
          // this.login();
          // this.$Message.info("正在登陆客户端，请稍等......");
          return false
        }
        console.log('销毁插件', this.ws.ctrls)
        const ctrls = this.ws.ctrls.map((i) => {
          if (i.ctrlCode === this.ctrl) {
            return i.ctrlCode
          }
        })
        console.log('销毁的插件名称', ctrls)
        this.ws.destroyCtrl(ctrls)
      },
    },
    // beforeDestroyed() {
    //   this.destroy()
    // }
  }
</script>
