<template>
    <el-dialog
        v-model="inviteDialog"
        title="远程协作"
        width="400px"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :show-close="false"
    > 

        <div style="width: 100%; margin-bottom: 30px; font-size: 20px">
            "
            {{
            socketInformation.room_name
                ? socketInformation.room_name
                : ''
            }}
            " 邀请您参加远程协作
        </div>
        <div style="text-align: center">
            <el-button
                size="large"
                type="danger"
                style="font-size: 16px"
                @click="clickRefuseJoin"
                >
                拒 绝
            </el-button>
            <el-button
                size="large"
                type="primary"
                style="font-size: 16px"
                @click="clickJoin"
                >
                加 入
            </el-button> 
        </div>
    </el-dialog>
</template>
  
  <script setup>
  import { ref ,onMounted} from 'vue'
  import { getStatusApi } from '@/api/conferencingRoom.js'
  import { ElMessage } from 'element-plus'
  import { useRouter } from 'vue-router'
  import { mqttClient } from "@/utils/mqtt.js"; 
  import { useUserStore } from '@/stores/modules/user.js'

  const router = useRouter()
  const userStore = useUserStore()

  const inviteDialog = ref(false) 
  const socketInformation = ref(null)
  

  /** 拒绝加入 */
const clickRefuseJoin = async () => {
    //status  1: 同意加入, 5: 拒绝加入
    try{ 
        const res = await getStatusApi(socketInformation.value.room_uid,{status:5}) 
        if(res.meta.code == 200){
            ElMessage({
                message: '已拒绝加入该协作',
                type: 'error',
            })
            inviteDialog.value = false
        }
    } catch (error) {
        console.log(error,'error')
        inviteDialog.value = false
    } finally { 
        inviteDialog.value = false
    }
}

const clickJoin = async () => { 
  const res = await getStatusApi(socketInformation.value.room_uid,{status:1}) 
    if(res.meta.code == 200){
        ElMessage({
            message: '成功加入该协作',
            type: 'success',
        })
        inviteDialog.value = false
        router.push({
        path: '/conferencingRoom', 
        query:{ 
            room_uid:socketInformation.value.room_uid
        }
    }) 
    }
  inviteDialog.value = false
 
}

/** 浏览器通知 */
const showNotification = (data) => { 
  if ('Notification' in window) {
    Notification.requestPermission().then((permission) => {
      if (permission === 'granted') {
        const notification = new Notification('协作邀请', {
        //   body: String(data.room_name) + '邀请您参加远程协作'
        body: '远程协作有新的邀请'
        //   icon: logo,
        })
        notification.onclick = () => { clickJoin() }
      }
    })
  }
}

/** 处理加入房间和拒接房间 mqtt 消息 */
const processingSocket = (message) => { 
    const res = JSON.parse(message)  
    console.log(res,'收到用户信息 邀请')  
  if (!res?.status) { 
    socketInformation.value = res  
    inviteDialog.value = true
    showNotification(socketInformation.value)
  }else if(res.status == 5){
    ElMessage({
        message: `${res?.display_name}拒绝加入该协作`,
        type: 'error',
    })
  }
}

defineExpose({
    processingSocket,
  });

// onMounted(async () => {   
//     await mqttClient.connect(`room${Math.random().toString(16).substr(2, 8)}`);
//     const res = await userStore.getInfo()
//     const topic = `xSynergy/ROOM/+/rooms/${res.uid}`;
//     mqttClient.subscribe(topic, async (shapeData) => { 
//         // console.log(shapeData.toString(),'shapeData发送邀请')
//         processingSocket(shapeData.toString())
//     }); 
// })



  </script>
  
  <style lang="scss" scoped>
 
  </style>
  