<template>
  <div id="arae" style="height: 100%;">
    <div id="screen" style="height: 100%;"></div>
  </div>
</template>

<script>
import RFB from '@novnc/novnc/core/rfb'

export default {
  name: 'Novnc',
  data () {
    return {
      url: '',
      rfb: null
    }
  },
  methods: {
    getUrl (host) {
      let protocol = ''
      if (window.location.protocol === 'https:') {
        protocol = 'wss://'
      } else {
        protocol = 'ws://'
      }
      // 加window.location.host可以走vue.config.js的代理，ws://localhost:8081/vnc/192.168.18.57:5900
      const wsUrl = `${protocol}${window.location.host}/vnc/${host}`
      console.log(wsUrl)
      return wsUrl
    },
    // vnc连接断开的回调函数
    disconnectedFromServer (msg) {
      console.log('断开连接', msg)
      // clean是boolean指示终止是否干净。在发生意外终止或错误时 clean将设置为 false。
      if (msg.detail.clean) {
        // 根据 断开信息的msg.detail.clean 来判断是否可以重新连接
      } else {
        // 这里做不可重新连接的一些操作
        console.log('连接不可用（可能需要密码）')
      }
      this.rfb = null
      this.connectVnc()
    },
    // 连接成功的回调函数
    // connectedToServer(event) {

    // },
    // 连接vnc的函数
    connectVnc () {
      const PASSWORD = 'ywh940509'
      const rfb = new RFB(document.getElementById('screen'), this.url, {
        credentials: { password: PASSWORD }
      })
      rfb.addEventListener('connect', () => {
        // var viewer = document.getElementsByTagName('canvas')[0];
        console.info('我链接了')
        // console.info(navigator.clipboard.readText())
        // const  a=async()=>{
        //   const m=await navigator.clipboard.readText()
        //   console.info(m)
        // }
        // a()
        // document.getElementById('arae').addEventListener('paste', async function (e) {
        //   console.log(await navigator.clipboard.readText())
        //   rfb.clipboardPasteFrom(await navigator.clipboard.readText());
        // });
        // document.getElementById('arae').addEventListener('keyup', function (e) {
        //   console.log(navigator.clipboard.readText())
        //   e.keyCode == 86 && rfb.clipboardPasteFrom(navigator.clipboard.readText());

        // });
      })
      rfb.addEventListener('disconnect', this.disconnectedFromServer)

      // 复制粘贴
      // var clipboard = document.getElementById('clipboard');
      // rfb.addEventListener('clipboard', function (e) {
      //   clipboard.value = e.detail.text;
      // });

      // rfb.addEventListener('connect', function (e) {
      //   var viewer = document.getElementsByTagName('canvas')[0];

      // document.body.addEventListener('paste', function (e) {
      //   rfb.clipboardPasteFrom(e.clipboardData.getData('text'));
      // });

      // });

      // scaleViewport指示是否应在本地扩展远程会话以使其适合其容器。禁用时，如果远程会话小于其容器，则它将居中，或者根据clipViewport它是否更大来处理。默认情况下禁用。
      rfb.scaleViewport = true
      // 是一个boolean指示是否每当容器改变尺寸应被发送到调整远程会话的请求。默认情况下禁用
      rfb.resizeSession = true
      this.rfb = rfb
    }
  },
  mounted () {
    // console.log(this.$route)
    this.url = this.getUrl('172.19.153.14')
    this.connectVnc()
  }
}
</script>
