<script setup lang='ts'>
import { ref, nextTick, onMounted, shallowRef } from "vue"

const iframeSRC = ref("https://goview.lihaink.cn/#/chart/preview/62")
const MP4SRC = ref("")
const isVideo = ref(false)
const videoRef = ref(null)
import axios from "axios"

const loadStorage = ()=>{
	if(localStorage.getItem('scene')) iframeSRC.value = localStorage.getItem('scene');
}

onMounted(()=>{
	loadStorage();
})

const connection = new Push({
  url: 'wss://chat.lihaink.cn/zhanti/push', // websocket地址
  app_key: 'aaea61749929eb53a4bd75a1474c1d27',
  auth: '/plugin/webman/push/auth', // 订阅鉴权(仅限于私有频道)
})

const showIframe = ref(true)

// 假设用户uid为1
const uid = 1
// 浏览器监听user-1频道的消息，也就是用户uid为1的用户消息
const user_channel = connection.subscribe(`user-${uid}`)
console.log(user_channel)
// 当user-1频道有message事件的消息时
user_channel.on('message', (data: any) => {
	try {
		// data里是消息内容
		console.log('收到命令', data)
		if(!data.content.includes('scene--')&&!data.content.includes('mp4--')) data.content = atob(data.content);
		if(data.content.includes('scene--')){
			showIframe.value = false
			isVideo.value = false;
			console.log(data.content.substring(7));
			iframeSRC.value = data.content.substring(7);
			nextTick(()=>{
				showIframe.value = true;
			})
		}
		else if(data.content.includes('mp4--')){
			isVideo.value = false;
			showIframe.value = false;
			console.log(data.content.substring(5));
			MP4SRC.value = data.content.substring(5);
			isVideo.value = true;
			nextTick(()=>{
				videoRef.value.play();
			})
		}
	} catch (error) {
		console.log(error);
	}



})

const orderList = ref([]);

const loadOrderList = ()=>{
	axios.get('https://chat.lihaink.cn/index/demo1').then((res)=>{
		orderList.value = res.data.data;
		if(orderList.value[0].type==1){
			isVideo.value = false;
			showIframe.value = true;
			iframeSRC.value = orderList.value[0].uri;
		}else {
			isVideo.value = true;
			showIframe.value = false;
			MP4SRC.value = orderList.value[0].uri;
			nextTick(()=>{
				videoRef.value.play();
			})
		}
	})
}
loadOrderList()

</script>

<template>
  <div class="w-full h-full white">
		<iframe v-if="showIframe&&!isVideo" class="iframe" :src="iframeSRC"></iframe>
		<video ref="videoRef" v-else-if="!showIframe&&isVideo" class="iframe" :src="MP4SRC" loop controls/>
  </div>
</template>

<style lang="scss" scoped>
.white{
	background-color: #101014;
	color: #fff;
	.btn{
		margin-left: 20px;
		margin-bottom: 7px;
		border: 1px solid #51d6a9;
		border-radius: 3px;
		width: 50px;
		text-align: center;
		height: 28px;
		line-height: 28px;
	}
	.iframe{
		width: 100%;
		height: 100%;
	}
	.img-list{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		padding: 10px;
		.img-list-item{
			box-sizing: border-box;
			height: 50%;
			width: 50%;
			padding: 10px;
			overflow: hidden;
			img{
				width: 100%;
				height: 100%;
			}
			/* border: 1px solid darkblue; */
			/* background-color: aquamarine; */
		}
	}
}
</style>
