<template>
	<view :class="darkFans?`darkbackgroundContainer`:`backgroundContainer`" @touchmove="getxy" @touchend="cleanall">
		<view class="move-font" v-show="savename" :style="{ top: `${clientY}rpx`, left: `${clientX}rpx` }">
			{{savename}}
		</view>
		<view class="left-container">
			<view class="left-head">
				<image class="left-head-img" src="/static/index/oldman.png" />
				<text :class="darkFans?`left-head-font-dark`:`left-head-font`">
					王金凤
				</text>
			</view>
			<view class="left-img-container">
				<view v-for="(item,index) in iconList" :key="index" class="blue-circle-pos">
					<view class="blue-circle" v-show="index === menuIndex">
						<image class="blue-circle-size" :src="`/static/index/ray.png`" />
					</view>
					<image class="left-img" :src="index === menuIndex ? item.targetUrl : item.url"
						@click="changeMenu(index)" />
				</view>
			</view>
		</view>
		<!-- 主页 -->
		<rightItemsfirst :isshow="menuIndexshow" :darkFans="darkFans" v-show="!menuIndex" @darkchange="darkchange" />
		<!-- 超凶表格 -->
		<rightItemssecond ref="ruler" :liang="indexNumber" :isshow="menuIndexshowsecond" :canmove="canmove" :darkFans="darkFans" v-show="menuIndex==1" @darkchange="darkchange" @savename="openname" @cleanname="closename"/>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import type { Link } from "./index";
	import rightItemsfirst from "../../component/rightItemsindex/index.vue"
	import rightItemssecond from "../../component/rightItemssecond/index.vue"
	import { onShow } from '@dcloudio/uni-app';

	// 初始化左侧菜单列表
	const iconList = ref<Link[]>([
		{ url: '/static/index/lefticon/index.png', targetUrl: '/static/index/lefticontarget/blueindex.png' },
		{ url: '/static/index/lefticon/nurse.png', targetUrl: '/static/index/lefticontarget/bluenurse.png' },
		{ url: '/static/index/lefticon/doctor.png', targetUrl: '/static/index/lefticontarget/bluedoctor.png'},
		{ url: '/static/index/lefticon/give.png', targetUrl: '/static/index/lefticontarget/givedark.png' },
		{ url: '/static/index/lefticon/wifi.png', targetUrl: '/static/index/lefticontarget/bluewifi.png' },
		{ url: '/static/index/lefticon/back.png', targetUrl: '/static/index/lefticontarget/blueback.png' }
	]);

	// 当前选中的菜单索引
	const menuIndex = ref<number>(1);
	const menuIndexshow = ref<boolean>(false);
	const menuIndexshowsecond = ref<boolean>(false);
	// 暗黑模式
	const darkFans = ref<boolean>(false);
	// 当前选中的菜单索引
	const roomTar = ref<number[]>([]);
	//滑块按钮
	const firstcurrentIndex = ref<number>(0);
	const firstcurrentIndexup = ref<number>(0);
	const secondcurrentIndexup = ref<number>(0);
	const secondcurrentIndex = ref<number>(0);
	const thirdcurrentIndex = ref<number>(0);
	// 暗黑模式改变
	const darkchange = (res:boolean) =>{
		darkFans.value = res
	}
	// 变更菜单
	const changeMenu = (index : number) => {
		if(index===3){
			menuIndexshow.value = false;
			menuIndexshowsecond.value = false;
			uni.navigateTo({
			  url: `/pages/somethingmove/index?darkFans=${darkFans.value}`,
			  animationType: 'slide-in-right',
			  animationDuration: 400// 设置动画时长为300毫秒, // 动画持续时间，单位为毫秒
			});
			return
		}
		menuIndex.value = index;
		menuIndexshow.value = false
		menuIndexshowsecond.value = false
		setTimeout(()=>{
			switch (index) {
			  case 0 :
				menuIndexshow.value = true
			    break;
			  case 1:
			    menuIndexshowsecond.value = true
			    break;
			  default:
			}
		},50)
	};
	const clientX = ref(0);
	const clientY = ref(0);
	const savename = ref("")
	const canmove = ref(true)
	const indexNumber = ref({
		index0:999,
		index1:999,
	})
	//全局获得x轴和y轴
	const getxyrel = (event) => {
		// event.stopPropagation();
		// event.preventDefault();
		const touch = event.touches[0];
		clientX.value = 2*(Math.floor(touch.clientX) - 100);
		clientY.value = 2*(Math.floor(touch.clientY) - 55);
		// console.log("?????",clientX.value,clientY.value)
		// 遍历数组，找到点击区域所在的对象
		const translateX =  Math.floor(touch.clientX) - 50;
		const translateY =  Math.floor(touch.clientY) - 25;
		const clickedItem = fangkuaiValue.value.find(item => {
		  return translateX >= item.left && translateX <= item.right &&
		         translateY >= item.top && translateY <= item.bottom;
		});
		// 如果找到，则输出该对象的 index0 和 index1
		if (clickedItem) {
		  const { index0, index1 } = clickedItem.dataset;
		  indexNumber.value.index0 = index0
		  indexNumber.value.index1 = index1
		} else{
			indexNumber.value.index0 = 999
			indexNumber.value.index1 = 999
		}
	}
	//节流
	const getxy = throttle(getxyrel, 10);
	
	const fangkuaiValue = ref([])
	//所有适合的方块
	const openname = (res:string,fangkuai:Object) =>{
		savename.value = res;
		canmove.value = false;
		fangkuaiValue.value = fangkuai
	}
	//解决拖动bug
	const closename = () =>{
		savename.value = "";
		canmove.value = true;
		fangkuaiValue.value = []
	}
	const ruler = ref(null)
	//结束、禁止滑动
	const cleanall = () =>{
		clientX.value = 9999;
		clientY.value = 9999;
		canmove.value = true;
		indexNumber.value = {
			index0:999,
			index1:999,
		};
		ruler.value?.rulerEnd(savename.value);
		savename.value = "";
	}
	//节流函数
	function throttle(fn, delay) {
	  let lastExecutionTime = 0;
	  return function(...args) {
	    const now = Date.now();
	    if (now - lastExecutionTime >= delay) {
	      lastExecutionTime = now;
	      fn.apply(this, args);
	    }
	  };
	}
	// 生命周期钩子
	onShow(() => {
		//首次加载和跳转回来需要重新做个动画
		setTimeout(()=>{
			changeMenu(menuIndex.value)
		},50)
	});

</script>

<style lang="less" scoped>
	.backgroundContainer {
		display: flex;
		position: relative;
		width: 100%;
		height: 100vh;
		background-image: url('/static/index/lightbgcnew.png');
		background-size: cover;
		background-position: center center;
		overflow: hidden;
		z-index: 12;
	}

	//暗黑模式
	.darkbackgroundContainer {
		display: flex;
		position: relative;
		width: 100%;
		height: 100vh;
		background-image: url('/static/index/background.png');
		background-size: cover;
		background-position: center center;
		overflow: hidden;
		z-index: 11;
	}
	.move-font{
		position: absolute;
		font-size: 45rpx;
		font-weight: 700;
		z-index: 10;
		pointer-events: none;
	}
	.left-container {
		width: 235rpx;
		height: 100%;
	
		.blue-circle-pos {
			position: relative;
	
			.blue-circle {
				position: absolute;
				top: -50rpx;
				left: -68rpx;
	
				.blue-circle-size {
					width: 170rpx;
					height: 250rpx;
				}
			}
		}
	
		.left-head {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		
			.left-head-img {
				width: 150rpx;
				height: 150rpx;
				margin-top: 60rpx;
			}
	
			.left-head-font {
				font-weight: 700;
				font-size: 40rpx;
			}
	
			.left-head-font-dark {
				font-weight: 700;
				font-size: 40rpx;
				background: linear-gradient(to right, #EBF4FF, #ADC4E0);
				-webkit-background-clip: text;
				color: transparent;
			}
		}
	
		.left-img-container {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			// margin-top: 30rpx;
	
			.left-img {
				width: 93rpx;
				height: 93rpx;
				margin: 50rpx 0;
				z-index: 100;
			}
		}
	}

</style>