<template>
  <div>
    <el-dialog
      title="聊天"
      v-dialogDrag
      class="el-dialog-double el-dialog-noscroll"
      :visible.sync="visible"
      @close="cancle"
      :close-on-click-modal="false"
      :modal="false"
      :append-to-body="false"
      :fullscreen="isfullscreen"   
      ref="dialog"   
    >
      <template slot="title">
        <div class="el__dialog__header">
          <span class="el-dialog__title">聊天</span>
          <i
            :class="
              isfullscreen ? 'el-icon-copy-document' : 'el-icon-full-screen'
            "
            style="
              font-size: 10px;
              float: right;
              margin-right: 30px;
              margin-top: 5px;
              cursor: pointer;
            "
            @click="IsFullscreen"
          ></i>
        </div>
      </template>
      <div v-loading="loading"></div>
        <iframe
          ref="mainFrame"
          style="border: none"
          width="100%"
          height="90%"
          frameborder="0"
          allowtransparency="true"
          :src="vueChatSrc"
          allow="microphone;camera;midi;encrypted-media;" 
        ></iframe>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: this.showdialog,
      isfullscreen: false, // 全屏
      loading: true,
      formList:{},
      vueChatSrc:''
    };
  },
  props: {
    showdialog: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    showdialog() {
      this.visible = this.showdialog;
      if (this.visible) {
        let src;
        let token=localStorage.getItem('token')
        let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        let idNumber = localStorage.getItem('userName')
        if(location.href.indexOf("te")>-1||location.href.indexOf("localhost")>-1){
          // src=`http://localhost:8013/#/?userId=${userInfo.imIdentity}&idNumber=${idNumber}&displayName=${userInfo.name}&mobile=${userInfo.telephone}`
          src=`https://imweb.baibaodun.com.cn/#/?userId=${userInfo.imIdentity}&idNumber=${idNumber}&displayName=${userInfo.name}&mobile=${userInfo.telephone}`
        }else{
          src=`https://im.baibaodun.com.cn/#/?userId=${userInfo.imIdentity}&idNumber=${idNumber}&displayName=${userInfo.name}&mobile=${userInfo.telephone}`
        }
        this.vueChatSrc=`${src}`
      }
    },
  },
  methods: {
    getTableRow(obj, type) {
      this.formList = JSON.parse(JSON.stringify(obj));
      if (type == 0) {
        this.title = "聊天";
      } else {
        this.title = "聊天";
      }    
      //el-dialog监听iframe事件--点击，鼠标，键盘事件  this.$refs.dialog.rendered=true 必须
      this.$nextTick(()=>{  
        this.$refs.dialog.rendered=true //el-dialog的body部分的渲染是通过​rendered​参数来控制；rendered是el-dialog中的内部参数，在首次打开之后，el-dialog将rendered置为true,之后body内容就开始渲染。
        const { mainFrame } = this.$refs;
        // IE和非IE浏览器，监听iframe加载事件不一样，需要兼容
        const that = this;
        if (mainFrame.attachEvent) {
            // IE
            mainFrame.attachEvent('onload', () => {
                that.stateChange();
            });
        } else {
            // 非IE
            mainFrame.onload = function () {
                that.stateChange();                
            };
        }
      }) 
    },
    stateChange() {
      let that=this
      this.loading = false;
      const { mainFrame } = this.$refs;
      if(mainFrame.contentDocument){//同源有contentDocument，监听iframe页面点击，鼠标，键盘事件
        mainFrame.contentDocument.onclick=function(){
          // console.log('点击同源iframe onclick页面')
          that.$store.commit('SET_LASTTIME',new Date().getTime())//全局触发点击事件--获取最后一次时间
        }
        mainFrame.contentDocument.onkeyup=function(){
          // console.log('点击同源iframe onkeyup页面')
          that.$store.commit('SET_LASTTIME',new Date().getTime())//全局触发点击事件--获取最后一次时间
        }
        mainFrame.contentDocument.onmousemove=function(){
          // console.log('点击同源iframe onmousemove页面')
          that.$store.commit('SET_LASTTIME',new Date().getTime())//全局触发点击事件--获取最后一次时间
        }
      }
    },
    // 取消
    cancle() {
      this.$emit("update:showdialog", false);
    },
    // 全屏
    IsFullscreen() {
      this.isfullscreen = !this.isfullscreen;
    },
  },
};
</script>
<style lang="scss">
.el-dialog-double {
  .el-dialog {
    width: 880px;
    height: 624px;
    pointer-events: auto;
    .el-dialog__body {
      padding: 0px;
      height: 101.5%;
      border-top: 1px solid #e9e9e9;
      // border-bottom: 1px solid #e9e9e9;
    }
  }
  .is-fullscreen {
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0 !important;
    left: 0 !important;
    .el-dialog__body {
      padding: 0px;
      height: calc(100% - 54px);
      border-top: 1px solid #e9e9e9;
      border-bottom: 1px solid #e9e9e9;
      iframe {
        height: 100%;
      }
    }
  }
}
</style>
