<template>
    <Row>
    <Card>
      <p slot="title">
        <Icon type="android-person"></Icon> 设备客户端测试
      </p>
      <div>
        <Row>
          <i-col span="8">
            <Select style="width:200px" placeholder="请选择设备">
              <Option v-for="(item,index) in deviceList" :value="item.sn" :key="index" @click.native="choseDevice(item)">{{ item.sn }}</Option>
            </Select>
            <Button type="success" @click="connectMq">连接</Button>
            <Button type="error"  @click="disConnectMq">断开</Button>
          </i-col>
          <i-col span="16">
            <Row>
              <i-col span="12">
                产品ID：{{curDevice.pid}}
              </i-col>
              <i-col span="12">
                产品TOKEN：{{curDevice.token}}
              </i-col>
            </Row>
            <Row>
              <i-col span="12">
                设备序列号：{{curDevice.sn}}
              </i-col>
              <i-col span="12">
                产品名称：{{curDevice.pname}}
              </i-col>
            </Row>
          </i-col>
        </Row>
      </div>
    </Card>
</template>
<script>
  const uuidv1 = require('uuid/v1');
  import mqtt from 'mqtt'
  const moment = require('moment');
  // 连接选项
  let options = {
    clean: true, // 保留回话
    connectTimeout: 4000, // 超时时间
    // 认证信息
    clientId: 'test_client_'+Math.random(),
    username: 'test',
    password: 'test',
  }
  const connectUrl = 'wss://www.etcloud.club:8084/mqtt'
    export default {
    name: 'mqtt-test',
        data() {
            return {
              client:{},//mqtt客户端
            }
        },
　　　　 created(){
            //页面刚进入时开启长连接
      //this.getDeviceList();
        },
　　　　 destroyed: function() {
　　　　   //页面销毁时关闭长连接
      this.client.end();
      this.$Message.success('断开成功');
　　　　 },
　　　　 methods: {
       connectMq(){
        if(JSON.stringify(this.curDevice) == "{}"){
          this.$Message.info('请先选择设备');
          return;
        }
        if(this.client.connected){
          return
        }
        options.clientId = this.curDevice.sn;
        options.username = this.curDevice.pid;
        options.password = this.curDevice.token;
         this.client = mqtt.connect(connectUrl, options)
         console.log(this.client)
         this.client.on('connect', (e) => {
           this.$Message.success('连接成功');
         })
         // this.client.subscribe('/World1234', { qos: 1 }, (error) => {
          //  if (!error) {
          //   console.log('订阅成功')
          //  } else {
          //   console.log('订阅失败')
          //  }
         // })
         // 接收消息处理
         this.client.on('message', (topic, message) => {
           console.log('收到来自', topic, '的消息', message.toString())
           var msgObj = {};
           new Promise((resolve, reject) => {/* executor函数 */
             msgObj = JSON.parse(message.toString());
             resolve(msgObj);
           }).catch(function (value) {
             console.log('JSON转化异常')
             return;
           });
           this.sdData.push({time:moment().format("YYYY-MM-DD HH:mm:ss"),topic:topic,content:msgObj})
         })
         // 断开发起重连
         this.client.on('reconnect', (error) => {
           console.log('正在重连:', error)
         })
         // 链接异常处理
         this.client.on('error', (error) => {
           console.log('连接失败:', error)
         })
       },
       disConnectMq(){
         this.sbData = [];
         this.sdData = [];
         this.curMsg={
           topic:'',
           obj:{}
         },
         this.subTopic={};
         this.subTopicList=[];
         if(this.client.connected){
           this.client.end();
         }
         // this.curMsg.topic = item.pid+'/'+item.sn+'/client'
         // this.subTopic.topic =  item.pid+'/'+item.sn+'/server'
         // this.subTopic.qos = 0
         this.$Message.success('断开成功');
       },
      //订阅主题
      subTopicHandle(){
        console.log(this.subTopic)
        console.log(this.subTopic.qos)
        console.log(this.subTopic.qos=='')
         if(JSON.stringify(this.curDevice) == "{}"){
           this.$Message.info('请先选择设备');
           return;
         }else if(!this.client.connected){
           this.$Message.info('请先选连接设备');
           return;
         }else if(this.subTopic.topic==''){
           this.$Message.info('订阅主题不能为空');
           return;
         }
         for(let i=0;i<this.subTopicList.length;i++){
          if(this.subTopic.topic ==  this.subTopicList[i].topic){
            this.$Message.info('相同的主题无法订阅两次');
            return;
          }
         }
         // else if(this.subTopic.qos==''){
          //  this.$Message.info('订阅消息质量不能为空');
          //  return;
         // }
        this.client.subscribe(this.subTopic.topic, { qos: this.subTopic.qos }, (error) => {
          if (!error) {
            this.$Message.success('订阅成功');
            this.subTopicList.push({time:moment().format("YYYY-MM-DD HH:mm:ss"),topic:this.subTopic.topic,qos:this.subTopic.qos})
          } else {
            this.$Message.error('订阅失败');
          }
        })
       },
  　　},
  }
</script>

<!--codemirror-json格式化-->
<template>
  <div class="json-editor">
    <textarea ref="textarea"/>
  </div>
</template>
<script>
  import CodeMirror from 'codemirror'
  import 'codemirror/addon/lint/lint.css'
  import 'codemirror/lib/codemirror.css'
  import 'codemirror/theme/rubyblue.css'
  // require('script-loader!jsonlint')
  import 'codemirror/mode/javascript/javascript'
  // import 'codemirror/addon/lint/lint'
  import 'codemirror/addon/lint/json-lint'
  export default {
    name: 'JsonEditor',
    /* eslint-disable vue/require-prop-types */
    props: ['value'],
    data () {
      return {
        jsonEditor: false
      }
    },
    watch: {
      value (value) {
        const editor_value = this.jsonEditor.getValue()
        if (value !== editor_value) {
          this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
        }
      }
    },
    mounted () {
      this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
        lineNumbers: true,
        mode: 'application/json',
        gutters: ['CodeMirror-lint-markers'],
        theme: 'rubyblue',
        autoRefresh: true,
        lint: true
      })
      this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
      this.jsonEditor.on('change', cm => {
        this.$emit('changed', cm.getValue())
        this.$emit('input', cm.getValue())
      })
    },
    methods: {
      getValue () {
        return this.jsonEditor.getValue()
      },
      refresh() {
        this.jsonEditor && this.jsonEditor.refresh();
      }
    }
  }
</script>
<style scoped>
  .json-editor {
    height: 100%;
    position: relative;
  }
  .json-editor >>> .CodeMirror {
    height: auto;
    min-height: 180px;
  }
  .json-editor >>> .CodeMirror-scroll {
    min-height: 180px;
  }
  .json-editor >>> .cm-s-rubyblue span.cm-string {
    color: #f08047;
  }
</style>

 <Tooltip placement="top">
  <span style="display:block;cursor:pointer;width:100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;height:12px;line-height: 15px;" class="tag-read2" :data-clipboard-text="productInfo.token" @click="copy(2)">{{productInfo.token}}</span>
  <div slot="content">
    点击复制
  </div>
</Tooltip>