<script setup>
	import {
		watch
	} from "vue";
	import {
		onShow,
		onHide
	} from "@dcloudio/uni-app";
	import websocket from "@/websocket";
	import matchWebsocket from "@/matchWebsocket";
	import {
		getDeviceBatteryAPI
	} from "@/apis";
	import {
		MESSAGETYPES
	} from "@/constants";
	import useStore from "@/store";
	import {
		storeToRefs
	} from "pinia";
	import audioManager from "./audioManager";
	const store = useStore();
	const {
		user,
		device,
		online
	} = storeToRefs(store);
	const {
		updateUser,
		updateOnline,
		clearSessionState,
		clearDevice
	} = store;

	watch(
		() => user.value.id,
		(newVal) => {
			const token = uni.getStorageSync(
				`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
			);
			if (newVal && token) {
				websocket.createWebSocket(token, onShootWsMsg);
			}
			if (!newVal) {
				matchWebsocket.closeMatchWebSocket({
					reason: "logout"
				});
				websocket.closeWebSocket();
			}
		}, {
			deep: false, // 如果 user 是一个对象或数组，建议开启
			immediate: false, // 若想在初始化时立即执行一次回调，可开启。
		}
	);

	function emitUpdateUser(value) {
		updateUser(value);
	}

	function onSessionKickedOut() {
		const env = uni.getAccountInfoSync().miniProgram.envVersion;
		uni.removeStorageSync(`${env}_token`);
		clearSessionState();
		uni.showModal({
			title: "提示",
			content: "账号已在其他设备登录",
			showCancel: false,
		});
	}

	async function emitUpdateOnline() {
		const data = await getDeviceBatteryAPI();
		const wasOnline = Boolean(online.value);
		const nextOnline = Boolean(data.online);
		updateOnline(nextOnline);
		if (!device.value.deviceId || wasOnline === nextOnline) return;
		audioManager.play(nextOnline ? "设备已连接" : "设备连接已断开");
	}

	function onDeviceBindInvalid() {
		clearDevice();
		uni.setStorageSync("calibration", false);
	}

	function onDeviceShoot() {
		// audioManager.play("射箭声音")
	}

	function onNetworkStatusChange(status) {
		matchWebsocket.handleMatchNetworkStatusChange(status);
	}

	function connectMatchServerFromMessage(content) {
		const messages = Array.isArray(content) ? content : [content];
		messages.forEach((message) => {
			if (
				message?.constructor ===
				MESSAGETYPES.ShootSyncBattleCreateMatchLinkID
			) {
				matchWebsocket.connectMatchWebSocketFromNotice(
					message,
					user.value.id
				);
			}
		});
	}

	function onShootWsMsg(content) {
		if(content.type === 'shoot-trigger'){
			onDeviceShoot()
		}
		connectMatchServerFromMessage(content);
		uni.$emit("socket-inbox", content);
	}

	onShow(() => {
		void audioManager.warmButton();
		uni.$on("update-user", emitUpdateUser);
		uni.$on("update-online", emitUpdateOnline);
		uni.$on("session-kicked-out", onSessionKickedOut);
		uni.$on("device-bind-invalid", onDeviceBindInvalid);
		if (typeof uni.offNetworkStatusChange === "function") {
			uni.offNetworkStatusChange(onNetworkStatusChange);
		}
		if (typeof uni.onNetworkStatusChange === "function") {
			uni.onNetworkStatusChange(onNetworkStatusChange);
		}
		if (typeof uni.getNetworkType === "function") {
			uni.getNetworkType({
				success: onNetworkStatusChange
			});
		}
		const token = uni.getStorageSync(
			`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
		);
		if (user.value.id && token) {
			console.log("回到前台，重新连接 websocket");
			websocket.createWebSocket(token, onShootWsMsg);
		}
	});

	onHide(() => {
		uni.$off("update-user", emitUpdateUser);
		uni.$off("update-online", emitUpdateOnline);
		uni.$off("session-kicked-out", onSessionKickedOut);
		uni.$off("device-bind-invalid", onDeviceBindInvalid);
		if (typeof uni.offNetworkStatusChange === "function") {
			uni.offNetworkStatusChange(onNetworkStatusChange);
		}
		matchWebsocket.closeMatchWebSocket({
			reason: "app-hide"
		});
		websocket.closeWebSocket();
	});
</script>

<style>
	page {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		user-select: none;
		background-color: #000;
	}

	button {
		margin: 0;
		padding: 0;
		border: none;
		background: none;
		line-height: 1;
		outline: none;
		box-sizing: border-box;
	}

	view::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	button::after {
		border: none;
	}

	.guide-tips {
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
	}

	.guide-tips>text:first-child {
		color: #fed847;
	}

	.guide-tips>text:nth-child(2) {
		font-size: 24rpx;
	}

	@keyframes fadeInOut {
		0% {
			transform: translateY(20px);
			opacity: 0;
		}

		30% {
			transform: translateY(0);
			opacity: 1;
		}

		80% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	.fade-in-out {
		animation: fadeInOut 1.2s ease forwards;
	}

	@keyframes fadeOut {
		from {
			transform: translateY(0);
			opacity: 1;
		}

		to {
			transform: translateY(20px);
			opacity: 0;
		}
	}

	.fade-out {
		animation: fadeOut 0.3s ease forwards;
	}

	@keyframes scaleIn {
		from {
			transform: scale(0);
			opacity: 0;
		}

		to {
			transform: scale(1);
			opacity: 1;
		}
	}

	.scale-in {
		animation: scaleIn 0.3s ease-out forwards;
		transform-origin: center center;
	}

	@keyframes scaleOut {
		from {
			transform: scale(1);
			opacity: 1;
		}

		to {
			transform: scale(0);
			opacity: 0;
		}
	}

	.scale-out {
		animation: scaleOut 0.3s ease-out forwards;
		transform-origin: center center;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	@keyframes pumpIn {
		from {
			transform: scale(2);
		}

		to {
			transform: scale(1);
		}
	}

	.pump-in {
		animation: pumpIn 0.3s ease-out forwards;
		transform-origin: center center;
	}

	.share-canvas {
		width: 300px;
		height: 530px;
		position: absolute;
		top: -1000px;
		left: 0;
	}

	.truncate {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.member-nickname {
		position: relative;
		display: inline-flex;
		max-width: 100%;
		overflow: hidden;
	}

	.member-nickname__text,
	.member-nickname__shine {
		display: block;
		max-width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.member-nickname--vip .member-nickname__text {
		color: #E7BA80;
	}

	.member-nickname--svip .member-nickname__text {
		background: linear-gradient(90deg, #ffb86c, #ff4fd8, #7c5cff, #35d6ff);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	.member-nickname__shine {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(
			110deg,
			transparent 0%,
			transparent 38%,
			rgba(255, 255, 255, 0.15) 45%,
			rgba(255, 255, 255, 1) 50%,
			rgba(255, 255, 255, 0.15) 55%,
			transparent 62%,
			transparent 100%
		);
		background-size: 220% 100%;
		background-position: 120% 0;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		pointer-events: none;
		animation: memberNicknameShine 3.5s infinite ease-in-out;
	}

	@keyframes memberNicknameShine {
		0%,
		50% {
			background-position: 120% 0;
		}

		100% {
			background-position: -200% 0;
		}
	}

	.modal {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.user-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		padding-top: 7px;
		position: relative;
	}

	.half-time-tip {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.half-time-tip>text:last-child {
		margin-top: 20px;
		color: #fff9;
	}

	.see-more {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
	}

	.see-more>text {
		color: #39a8ff;
		font-size: 13px;
	}

	.see-more>image {
		width: 15px;
	}

	@font-face {
		font-family: "DINCondensed";
		src: url("https://static.shelingxingqiu.com/font/DIN-Condensed-Bold-2.ttf") format("truetype");
		font-weight: 700;
		font-style: normal;
		font-display: swap;
	}
</style>
