<template>
  <div >
    <div >
         <div style="width:100%;height:900px;display:inline-block;border:1px soild #eee;">
                     <iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height:100%;"></iframe>
                      <!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none" 
          ref="iframe"></iframe> -->
                </div>
      <el-dialog title="提示" :visible.sync="showUpdateCertificate" width="30%">
        <el-row>
          <el-col :span="6">
            文件选择：
          </el-col>
          <el-col :span="18">
            <el-upload action="https://jsonplaceholder.typicode.com/posts/">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-col>
        </el-row>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="showUpdateCertificate = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import mqtt from "mqtt"; // mqtt协议

export default {
  data() {
    return {
      form: {
        name1: '离线',
        name2: '重新配置',
        state: '关',
        endTime: '连接',
        blacklist: '-1x-1',
        autograph: '-1x-1',
        version: '0',
        version1: '0',
        version2: '0',
        version4: '',
         version5: '不受支持的',
        version6: '不受支持的',
        version7: '不受支持的',
        version8: '不受支持的',
      },
      showUpdateCertificate: false,
    }
  },
  created() {
    this.testMqtt()

  },
   methods: {
    // 测试：mqtt测试
    testMqtt() {
      this.getDataByMqtt()
    },
        // mqtt订阅（独立）
    getDataByMqtt(url, topic, cIdNum) {
       
      const clientId = "test_id_" + String(new Date().getTime()); // 用户名
      //   const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
      const host = 'ws://172.16.1.168:10087/';

      const options = {
        // 配置
        // 测试：订阅本机IP
        // host: host,
        // port: port,
        // host:"172.16.1.168:10086",
        keepalive: 60, // 心跳时间，默认60s，设置为0禁用
        username: 'admin',  // 用户名（可选）
        password: '123456',  // 密码（可选）
        clientId: clientId, // 客户端ID，默认随机生成
        protocolId: "MQTT",
        protocolVersion: 4,
        clean: true, // false在离线时接收QoS1和2的消息
        reconnectPeriod: 2000, // 重连间隔，默认1000毫秒
        connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间
        will: {
          // 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）
          topic: "img1", // 要发布的主题
          payload: "[MQTT-TEST] 遗嘱消息：连接异常断开！", // 要发布的消息
          qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次
          retain: false, // 保留标志
        },
      };
      if (this.mqttClient == undefined) {
        this.mqttClient = mqtt.connect(host, options); // 连接
        // const client = mqtt.connect(host, options); // 连接
        // const client = mqtt.connect(host)  // 连接
        // 错误回调
        // console.log("this.mqttClient", this.mqttClient)
        this.mqttClient.on("error", (err) => {
          console.log("[MQTT-TEST] 连接错误：", err);
          this.mqttClient.end();
        });
        // 重连回调
        this.mqttClient.on("reconnect", (reconnect) => {
        //   console.log("[MQTT-TEST] 重连中……", reconnect);
        });
        // 连接回调
        this.mqttClient.on("connect", (connect) => {
        //   console.log("[MQTT-TEST] 已连接的客户端ID: ", connect);
          // 订阅
          this.mqttClient.subscribe('img0', { qos: 0 });
          this.mqttClient.publish('aaa', '111');
          this.mqttClient.subscribe('img1', { qos: 0 });
          this.mqttClient.subscribe('img2', { qos: 0 });
          this.mqttClient.subscribe('img3', { qos: 0 });
          this.mqttClient.subscribe('img4', { qos: 0 });
          this.mqttClient.subscribe('img5', { qos: 0 });
          this.mqttClient.subscribe('img6', { qos: 0 });
          this.mqttClient.subscribe('img7', { qos: 0 });
          this.mqttClient.subscribe('stream0', { qos: 0 });
          this.mqttClient.subscribe('stream1', { qos: 0 });
          this.mqttClient.subscribe('stream2', { qos: 0 });
          this.mqttClient.subscribe('stream3', { qos: 0 });
          this.mqttClient.subscribe('stream4', { qos: 0 });
          this.mqttClient.subscribe('stream5', { qos: 0 });
          this.mqttClient.subscribe('stream6', { qos: 0 });
          this.mqttClient.subscribe('stream7', { qos: 0 });        
        });
         
        // 接收回调
        this.mqttClient.on("message", (topic, message, packet) => {            
          if (topic.indexOf("img0") != -1) {
            try {
              const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
            document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
            } catch {
              let imageType = 'arraybuffer';
              const blob = new Blob([message], { type: imageType })
              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
              console.log("imageUrl", imageUrl)
            }
          } else if (topic.indexOf("img1") != -1) {
            try {
              const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
            //   console.log("msg", msg)   //msg为转换后的JSON数据
             document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
            } catch {
              let imageType = 'arraybuffer';
              const blob = new Blob([message], { type: imageType })
              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
              console.log("imageUrl", imageUrl)
            }
          } else if (topic.indexOf("img2") != -1) {
            try {
              const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
              console.log("msg", msg)   //msg为转换后的JSON数据
              document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
            } catch {
              let imageType = 'arraybuffer';
              const blob = new Blob([message], { type: imageType })
              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
              console.log("imageUrl", imageUrl)
            }
          } else if (topic.indexOf("img3") != -1) {
            try {
              const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
              console.log("msg", msg)   //msg为转换后的JSON数据
              document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
            } catch {
              let imageType = 'arraybuffer';
              const blob = new Blob([message], { type: imageType })
              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
              console.log("imageUrl", imageUrl)
            }
          } else if (topic.indexOf("img4") != -1) {
            try {
              const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
              console.log("msg", msg)   //msg为转换后的JSON数据
              document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
            } catch {
              let imageType = 'arraybuffer';
              const blob = new Blob([message], { type: imageType })
              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
              console.log("imageUrl", imageUrl)
            }
          } else if (topic.indexOf("img5") != -1) {
            try {
              const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
              console.log("msg", msg)   //msg为转换后的JSON数据
             document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
            } catch {
              let imageType = 'arraybuffer';
              const blob = new Blob([message], { type: imageType })
              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
              console.log("imageUrl", imageUrl)
            }
          } else if (topic.indexOf("img6") != -1) {
            try {
              const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
              console.log("msg", msg)   //msg为转换后的JSON数据
             document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
            } catch {
              let imageType = 'arraybuffer';
              const blob = new Blob([message], { type: imageType })
              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
              console.log("imageUrl", imageUrl)
            }
          }else if (topic.indexOf("img7") != -1) {
            try {
              const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
              console.log("msg", msg)   //msg为转换后的JSON数据
             document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
            } catch {
              let imageType = 'arraybuffer';
              const blob = new Blob([message], { type: imageType })
              const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
              console.log("imageUrl", imageUrl)
            }
          }else if (topic.indexOf("stream0") != -1) {
            const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
              const msg = JSON.parse(temp)
                document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
          } else if (topic.indexOf("stream1") != -1) {
            const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
              const msg = JSON.parse(temp)
                document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
          } else if (topic.indexOf("stream2") != -1) {
            const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
              const msg = JSON.parse(temp)
                document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
          } else if (topic.indexOf("stream3") != -1) {
            const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
              const msg = JSON.parse(temp)
                document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
          } else if (topic.indexOf("stream4") != -1) {
           const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
              const msg = JSON.parse(temp)
            document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
          } else if (topic.indexOf("stream5") != -1) {
            const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
            const msg = JSON.parse(temp)
            document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
          }else if (topic.indexOf("stream6") != -1) {
            const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
            const msg = JSON.parse(temp)
            document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
          }else if (topic.indexOf("stream7") != -1) {
            const utf8decoder = new TextDecoder()
              const u8arr = new Uint8Array(message)
              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
            const msg = JSON.parse(temp)
            document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
          }

        });
      }


    },
   }
}
</script>

<style>
.test-div i {
  font-size: 25px;
}

.el-form-item {
  margin-bottom: 0px;
}
</style>