<template>
	<!-- 监控详情 -->
	<view>
		<uv-navbar title="实时监控" :placeholder="true" :titleStyle="{color:'#ffffff'}" leftIconColor="#ffffff"
			bgColor="#1d345e" @leftClick="leftClick"></uv-navbar>
		<!-- <image class="camera_img_video" :src="'/static/photograph.png'" mode="widthFix" /> -->
		<view style="width: 100%;height: 600rpx;">
			<iframe style="width: 100%;height: 100%;" :src="templateContent"></iframe>
		</view>
		<div class="control-wrapper">
			<div class="control-btn control-top" @click="goTop"></div>
			<div class="control-btn control-left" @click="goLeft"></div>
			<div class="control-btn control-bottom" @click="goBottom"></div>
			<div class="control-btn control-right" @click="goRight"></div>
			<div class="control-round">
				<div class="control-round-inner" @click="goStop"></div>
			</div>
		</div>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { GetMonitoring } from "@/api/monitoring";
	import { QUICK_API } from '@/utils/request';
	import { onShow, onReady, onLoad } from "@dcloudio/uni-app";
	onReady(() => {
		// #ifdef APP-PLUS
		plus.navigator.setStatusBarStyle("light");
		// #endif
	})
	onShow(() => {
		// #ifdef APP-PLUS
		plus.navigator.setStatusBarStyle("light");
		// #endif
	});
	const templateContent = ref('')
	const indexCode = ref('')
	onLoad((option : any) => {
		indexCode.value = option.indexCode
		templateContent.value = `${QUICK_API}/Hikvision/getMonitoring?cameraIndexCode=${option.indexCode}&control=false`
	})
	const title = ref('Hello')
	const disabled = ref(true)
	const command = ref('')
	// 向上
	function goTop() {
		console.log('向上')
		let arr = {
			action: 0,
			command: 'UP',
		}
		command.value = 'UP'
		sendControl(arr)
	};
	// 向左
	function goLeft() {
		console.log('向左')
		let arr = {
			action: 0,
			command: 'LEFT',
		}
		command.value = 'LEFT'
		sendControl(arr)
	};
	// 向下
	function goBottom() {
		console.log('向下')
		let arr = {
			action: 0,
			command: 'DOWN',
		}
		command.value = 'DOWN'
		sendControl(arr)
	};
	// 向右
	function goRight() {
		console.log('向右')
		let arr = {
			action: 0,
			command: 'RIGHT',
		}
		command.value = 'RIGHT'
		sendControl(arr)
	};
	// 停止
	function goStop() {
		let arr = {
			action: 1,
			command: command.value,
		}
		sendControl(arr)
	};
	// 发送云台控制
	function sendControl(value : any) {
		const url =
			`${QUICK_API}/Hikvision/controlling?cameraIndexCode=${indexCode.value}&action=${value.action}&command=${value.command}`
		uni.request({
			url: url, // 你的请求地址
			method: 'GET', // 请求方式
			success: (res) => {
				console.log('请求成功:', res.data);
				// 处理返回的数据
			},
			fail: (err) => {
				console.error('请求失败:', err);
				// 处理错误情况
			},
		});
	};
	function leftClick() {
		uni.navigateBack({
			delta: 1
		});
	}
</script>

<style lang="scss" scoped>
	.card_mine {
		width: 100%;
	}

	.camera_img_video {
		width: 100%;
	}

	.control-wrapper {
		position: relative;
		/* width:20%; */
		width: 400rpx;
		height: 400rpx;
		margin: 40rpx auto 0rpx auto;
		border-radius: 50%;
	}

	.control-btn {
		position: absolute;
		cursor: pointer;
		width: 38%;
		height: 38%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #78aee4;
		box-sizing: border-box;
		transition: all .3s linear;
	}

	.control-btn:after {
		content: '';
		position: absolute;
		width: 60%;
		height: 60%;
		background: #1d345e;
		z-index: 2;
	}

	.control-btn:before {
		content: '';
		position: relative;
		display: block;
		/* width: 16px; */
		/* height: 16px; */
		width: 14%;
		height: 14%;
		border-top: 6rpx solid #78aee4;
		border-right: 6rpx solid #78aee4;
		border-radius: 0 8rpx 0 0;
		box-sizing: border-box;
		z-index: 2;
	}

	.control-top {
		top: 0;
		left: 50%;
		transform: translateX(-50%) rotate(-45deg);
		border-radius: 8rpx 100% 8rpx 8rpx;
	}

	.control-top:before {
		transform: translate(30%, -25%);
	}

	.control-top:after {
		left: 0;
		bottom: 0;
		border-top: 2rpx solid #78aee4;
		border-right: 2rpx solid #78aee4;
		border-radius: 0 100% 0 0;
	}

	.control-bottom {
		left: 50%;
		bottom: 0;
		transform: translateX(-50%) rotate(45deg);
		border-radius: 8rpx 8rpx 100% 8rpx;
	}

	.control-bottom:before {
		transform: translate(25%, 25%) rotate(90deg);
	}

	.control-bottom:after {
		top: 0;
		left: 0;
		border-bottom: 2rpx solid #78aee4;
		border-right: 2rpx solid #78aee4;
		border-radius: 0 0 100% 0;
	}

	.control-left {
		top: 50%;
		left: 0;
		transform: translateY(-50%) rotate(45deg);
		border-radius: 8rpx 8rpx 8rpx 100%;
	}

	.control-left:before {
		transform: translate(-25%, 30%) rotate(180deg);
	}

	.control-left:after {
		right: 0;
		top: 0;
		border-bottom: 2rpx solid #78aee4;
		border-left: 2rpx solid #78aee4;
		border-radius: 0 0 0 100%;
	}

	.control-right {
		top: 50%;
		right: 0;
		transform: translateY(-50%) rotate(45deg);
		border-radius: 8rpx 100% 8rpx 8rpx;
	}

	.control-right:before {
		transform: translate(30%, -25%);
	}

	.control-right:after {
		left: 0;
		bottom: 0;
		border-top: 2rpx solid #78aee4;
		border-right: 2rpx solid #78aee4;
		border-radius: 0 100% 0 0;
	}

	.control-round {
		position: absolute;
		cursor: pointer;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 51.2%;
		height: 51.2%;
		background: #1d345e;
		border-radius: 50%;
	}

	.control-round-inner {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		justify-content: center;
		align-items: center;
		width: 66%;
		height: 66%;
		border: 2rpx solid #78aee4;
		border-radius: 50%;
	}

	.control-round-inner:after {
		content: "| |";
		display: flex;
		align-items: center;
		justify-content: center;
		width: 70%;
		height: 70%;
		font-size: 80%;
		text-align: center;
		background: #78aee4;
		font-weight: bolder;
		color: #fff;
		border-radius: 50%;
	}
</style>