<!-- 动画页 -->
<template>
	<view>
		<view class="home">
			<image class="all-home" src="/static/index/warehouse/newindexhome/backdro.jpg" mode="aspectFit"></image>
		</view>
		<view class="store tp" @click="housactive(4)">
			<image class="all-home" src="/static/index/warehouse/newindexhome/store.png" mode="aspectFit"></image>
		</view>
		<view class="store-font" @click="housactive(4)">
			库房
			<view class="font-ball">
				<view class="ball-ball">
					<view class="fin-ball"></view>
				</view>
			</view>
		</view>
		<view class="unit-font" @click="housactive(0)">
			护理单元
			<view class="font-ball">
				<view class="ball-ball">
					<view class="fin-ball"></view>
				</view>
			</view>
		</view>
		<view class="back-font">
			后勤
			<view class="font-ball">
				<view class="ball-ball">
					<view class="fin-ball"></view>
				</view>
			</view>
		</view>
		<view class="office-font" @click="housactive(1)">
			行政办公室
			<view class="font-ball">
				<view class="ball-ball">
					<view class="fin-ball"></view>
				</view>
			</view>
		</view>
		<view class="fontroom-font">
			服务大厅
			<view class="font-ball">
				<view class="ball-ball">
					<view class="fin-ball"></view>
				</view>
			</view>
		</view>
		<view class="storeman tp">
			<donghua width="4vw" height="7vw" :interval="250"
				:links="[...storemanarray, ...storemanarray.slice().reverse()]" :playing="playall" :loop="true" />
		</view>
		<view class="worker tp">
			<donghua width="4.5vw" height="6vw" :interval="250"
				:links="[...workerarray, ...workerarray.slice().reverse()]" :playing="playall" :loop="true" />
		</view>
		<view class="line tp">
			<donghua width="100vw" height="100vh" :interval="500" :links="lamparray" :playing="playall" :loop="true" />
		</view>
		<view class="unit" @click="housactive(0)">
			<image class="all-home" src="/static/index/warehouse/newindexhome/un.png" mode="aspectFit"></image>
		</view>
		<view class="unit-text" :style="{ fontSize: fontSize }">
			{{ fontnumber }}
		</view>
		<view class="unit-image">
			<image class="all-home" src="/static/red.png" mode="aspectFit"></image>
		</view>
		<view class="office" @click="housactive(1)">
			<image class="all-home" src="/static/index/warehouse/newindexhome/office.png" mode="aspectFit"></image>
		</view>
		<view class="officer tp" @click="housactive(1)">
			<donghua width="14vw" height="13vw" :interval="250" :links="officerarray" :playing="playall" :loop="true" />
		</view>
		<view class="Print tp">
			<donghua width="5vw" height="5vw" :interval="300" :links="Printarray" :playing="playall" :loop="true" />
		</view>
		<view class="fontend tp">
			<image class="all-home" src="/static/index/warehouse/newindexhome/reception.png" mode="aspectFit"></image>
		</view>
		<view class="fontendtable tp">
			<image class="all-home" src="/static/index/warehouse/newindexhome/reception2.png" mode="aspectFit"></image>
		</view>
		<view class="peopleleft tp">
			<donghua width="7vw" height="8vw" :interval="550" :links="peopleleftarray" :playing="playall"
				:loop="true" />
		</view>
		<view class="peopleright tp">
			<donghua width="7vw" height="8vw" :interval="600" :links="peoplerightarray" :playing="playall"
				:loop="true" />
		</view>
		<view class="door tp">
			<donghua width="17vw" height="16vw" :interval="200" :links="[...doorarray, ...doorarray.slice().reverse()]"
				:playing="playall" :loop="true" />
		</view>
		<view class="ondoor tp">
			<donghua width="5vw" height="6vw" :interval="300" :links="ondoorarray" :playing="playall" :loop="true" />
		</view>
		<view class="fontroom tp">
			<image class="all-home" src="/static/index/warehouse/newindexhome/receive.png" mode="aspectFit"></image>
		</view>
		<view class="button-setting" @click="housactive(7)">
			<image class="button-img" src="/static/index/setting.png" mode="aspectFit"></image>
		</view>
		<view class="button-back" @click="housactive(8)">
			<image class="button-img" src="/static/index/back.png" mode="aspectFit"></image>
		</view>

		<exit :show="exitshow" @close="exitshow=false" />
		<!-- 自动更新组件  -->
		<zy-update ref="zyupgrade" :noticeflag="true" theme="blue" :h5preview="false" oldversion="1.0.0"
			:appstoreflag="true" :autocheckupdate="true"></zy-update>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick } from 'vue';
	import { getServiceTree0, getServiceTree1, getServiceTree2 } from '@/pages/NursingNew/component/nurse/api.js'
	import { onBackPress, onShow } from "@dcloudio/uni-app"
	import { queryPadPageList } from '@/pages/watch/api/lunpan.js'
	import ZyUpdate from '@/component/zy-upgrade/zy-upgrade.vue'
	import exit from "@/component/public/exit.vue"

	onBackPress(() => {
		return true; // 禁止返回手势返回
	})
	const zyupgrade = ref(null);
	const leftMenuArray = ref([])
	const exitshow = ref(false);
	const morerule = ref(false)
	const fontnumber = ref(uni.getStorageSync('orgListName'))
	const fontSize = computed(() => {
		const len = (fontnumber.value || '').length
		if (len === 10) return '1.3vw'      // 恰好10字
		if (len < 10) return '1.4vw'      // 少于10字
		if (len <= 15) return '1.2vw'      // 11~15字
		return '1.1vw'                      // 超过15字
	})
	// 生命周期钩子
	onShow(() => {
		zyupgrade.value?.check_update();
		queryPadPageList().then((res => {
			leftMenuArray.value = res.result.records;
			console.log("????", res)
		}))

	});
	const filteredMenu = (index : number) => {
		return leftMenuArray.value.filter(item => Number(item.areaFlag) - 1 == index);
	}
	const ondoorarray =
		genPaths(
			'/static/index/warehouse/newindexhome/',
			'gate',
			5,    // 张数
			'png',
			0,     // 起始索引为 1
			false  // 不补零
		)
	const doorarray =
		genPaths(
			'/static/index/warehouse/newindexhome/',
			'door',
			11,    // 张数
			'png',
			0,     // 起始索引为 1
			false  // 不补零
		)
	const peopleleftarray =
		genPaths(
			'/static/index/warehouse/newindexhome/',
			'Front',
			2,    // 张数
			'png',
			1,     // 起始索引为 1
			false  // 不补零
		)
	const peoplerightarray =
		genPaths(
			'/static/index/warehouse/newindexhome/',
			'Front',
			2,    // 张数
			'png',
			3,     // 起始索引为 1
			false  // 不补零
		)
	const storemanarray =
		genPaths(
			'/static/index/warehouse/newindexhome/',
			'Operator',
			8,    // 张数
			'png',
			1,     // 起始索引为 1
			false  // 不补零
		)
	const lamparray =
		genPaths(
			'/static/index/warehouse/newindexhome/',
			'lamp',
			2,    // 张数
			'png',
			1,     // 起始索引为 1
			false  // 不补零
		)
	const workerarray =
		genPaths(
			'/static/index/warehouse/newindexhome/',
			'service',
			8,    // 张数
			'png',
			0,     // 起始索引为 1
			false  // 不补零
		)

	const officerarray =
		genPaths(
			'/static/index/warehouse/newindexhome/cler',
			'cler1-',
			24,    // 张数
			'png',
			1,     // 起始索引为 1
			false  // 不补零
		)
	const Printarray =
		genPaths(
			'/static/index/warehouse/newindexhome/',
			'printer',
			13,    // 张数
			'png',
			1,     // 起始索引为 1
			false  // 不补零
		)

	const playall = ref(false);

	onMounted(() => {
		playall.value = true;
		// 矩阵的菜单大量数据
		getServiceTree0().then((res : any) => {
			//缓存护嘱菜单
			uni.setStorageSync("saveTree0", res)
			// console.log("????0", res)
			getServiceTree1().then((res : any) => {
				//缓存护嘱菜单
				uni.setStorageSync("saveTree1", res)
				// console.log("????1", res)
			})
			getServiceTree2().then((res : any) => {
				//缓存护嘱菜单
				uni.setStorageSync("saveTree2", res)
				// console.log("????2", res)
			})
		})
		

	})

	const housedex = ref(0);
	const navurl = ref('')
	const housactive = (index : number) => {

		housedex.value = index;
		if (index == 0) {
			let data = filteredMenu(0)[0]
			if(!data){
				uni.showToast({
				  title: '暂无单元数据', // 文案要短
				  icon: 'error',            // 不要用 success 的勾，错误要用 none
				  duration: 1500
				});
				return
			}
			
			uni.setStorageSync('nuId', data.nuId);
			uni.setStorageSync('nuName', data.nuName);
			uni.setStorageSync('elderId', data.elderInfo ? data.elderInfo?.id : null);
			uni.setStorageSync('NUall', data);
			uni.navigateTo({
				url: '/pages/NursingNew/index'
			})
		}
		if (index == 1) {
			// uni.navigateTo({
			// 	url: '/pages/recording/recorder'
			// })
		}

		// if (index == 2) {
		// 	navurl.value = 'pages/Warehouse/picking'
		// 	uni.navigateTo({
		// 		url: '/' + navurl.value
		// 	})
		// }

		if (index === 3) {
			uni.navigateTo({
				url: "/pages/controlroom/index"
			})
		}
		if (index == 4) {
			let data = filteredMenu(2)[0]
			if(!data){
				uni.showToast({
				  title: '暂无库房数据', // 文案要短
				  icon: 'error',            // 不要用 success 的勾，错误要用 none
				  duration: 1500
				});
				return
			}
			uni.setStorageSync('nuId', data.nuId);
			uni.setStorageSync('nuName', data.nuName);
			uni.setStorageSync('elderId', data.elderInfo ? data.elderInfo?.id : null);
			uni.setStorageSync('NUall', data);
			// uni.navigateTo({
			// 	url: '/pages/Warehouse/warehome',
			// })
			uni.navigateTo({
				url: '/pages/Warehouse/index/index',
			})
		}
		if (index == 6) {
			uni.navigateTo({
				url: '/pages/watch/settings/settings',
			})
		}
		if (index == 7) {
			uni.navigateTo({
				url: '/pages/watch/settings/settings',
			})
		}
		if (index == 8) {
			exitshow.value = true;
		}


	}


	function genPaths(base, prefix, count, ext = 'png', startIndex = 0, pad = false) {
		return Array.from({ length: count }, (_, i) => {
			const idx = pad
				? String(i + startIndex).padStart(2, '0')
				: i + startIndex
			return `${base}/${prefix}${idx}.${ext}`
		})
	}
</script>

<style scoped lang="less">
	.home {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		position: fixed;
		z-index: 0;
	}

	.line {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		position: fixed;
		z-index: 0;
		top: 10vw;
		left: 0;
	}

	.all-home {
		width: 100%;
		height: 100%;

	}

	.store {
		width: 50vw;
		height: 30vw;
		position: fixed;
		top: -4vw;
		left: -3vw;
		z-index: 2;
	}

	.unit-font {
		width: 9vw;
		height: 3vw;
		position: fixed;
		top: 7.5vw;
		left: 60vw;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(71, 188, 255, 0.2);
		font-size: 1.5vw;
		color: #0089FE;
		border-radius: 2vw;
		position: relative;
		z-index: 3;
		border: 2rpx solid rgba(255, 255, 255, 0.6);
	}

	.office-font {
		width: 10vw;
		height: 3vw;
		position: fixed;
		top: 22vw;
		left: 75.5vw;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(71, 188, 255, 0.2);
		font-size: 1.5vw;
		color: #0089FE;
		border-radius: 2vw;
		position: relative;
		z-index: 3;
		border: 2rpx solid rgba(255, 255, 255, 0.6);
	}

	.fontroom-font {
		width: 9vw;
		height: 3vw;
		position: fixed;
		top: 30.8vw;
		left: 49vw;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(71, 188, 255, 0.2);
		font-size: 1.5vw;
		color: #0089FE;
		border-radius: 2vw;
		position: relative;
		z-index: 3;
		border: 2rpx solid rgba(255, 255, 255, 0.6);
	}

	.back-font {
		width: 7vw;
		height: 3vw;
		position: fixed;
		top: 1vw;
		left: 81vw;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(71, 188, 255, 0.2);
		font-size: 1.5vw;
		color: #0089FE;
		border-radius: 2vw;
		position: relative;
		z-index: 3;
		border: 2rpx solid rgba(255, 255, 255, 0.6);
	}

	.store-font {
		width: 7vw;
		height: 3vw;
		position: fixed;
		top: 4vw;
		left: 20vw;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(71, 188, 255, 0.2);
		font-size: 1.5vw;
		color: #0089FE;
		border-radius: 2vw;
		position: relative;
		z-index: 3;
		border: 2rpx solid rgba(255, 255, 255, 0.6);
	}

	.font-ball {
		position: absolute;
		bottom: -2.8vw;
		left: 50%;
		transform: translateX(-50%);
		width: 2vw;
		height: 2vw;
		background-color: #C5DDF9;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;

		.ball-ball {
			width: 1vw;
			height: 1vw;
			border-radius: 50%;
			background-color: #43A0FD;
			display: flex;
			justify-content: center;
			align-items: center;

			.fin-ball {
				width: 0.5vw;
				height: 0.5vw;
				border-radius: 50%;
				background-color: #fff;
			}
		}
	}

	.fontend {
		width: 43vw;
		height: 43vw;
		position: fixed;
		bottom: 5vw;
		left: -1.5vw;
	}

	.fontendtable {
		width: 30vw;
		height: 30vw;
		position: fixed;
		bottom: 1.5vw;
		left: 0vw;
		z-index: 10;
	}

	.peopleleft {
		width: 7vw;
		height: 8vw;
		position: fixed;
		bottom: 11vw;
		left: 16vw;
	}

	.peopleright {
		width: 7vw;
		height: 8vw;
		position: fixed;
		bottom: 14vw;
		left: 10.5vw;
	}

	.fontroom {
		width: 40vw;
		height: 28vw;
		position: fixed;
		bottom: -7vw;
		right: 26vw;
	}

	.storeman {
		width: 3.8vw;
		height: 6.5vw;
		position: fixed;
		top: 12vw;
		left: 19vw;
		z-index: 3;
	}

	.worker {
		width: 4.5vw;
		height: 6vw;
		position: fixed;
		top: 13.5vw;
		right: 5vw;
		z-index: 1;
	}

	.unit {
		width: 53vw;
		height: 53vw;
		position: fixed;
		top: -4vw;
		left: 30vw;
		z-index: 2;
	}

	.unit-text {
		position: fixed;
		bottom: 28.5vw;
		left: 18vw;
		z-index: 12;
		display: inline-block;
		transform-origin: left top;
		/* 关键：左上角 */
		transform: skewX(29deg) rotate(35deg) scaleY(1.2);
		letter-spacing: -2px;
		/* 负值 = 缩小 */
		font-size: 1.2vw;
		color: #0089FE;
	}

	.unit-image {
		position: fixed;
		bottom: 29.3vw;
		left: 15.5vw;
		z-index: 12;
		display: inline-block;
		transform-origin: left top;
		/* 关键：左上角 */
		transform: skewX(29deg) rotate(35deg) scaleY(1.2);
		letter-spacing: -2px;
		width: 2vw;
		height: 2vw;
		/* 负值 = 缩小 */

		color: #0089FE;
	}

	.office {
		width: 50vw;
		height: 50vw;
		position: fixed;
		top: 18vw;
		right: -15vw;
	}

	.officer {
		width: 14vw;
		height: 13vw;
		position: fixed;
		bottom: 16vw;
		right: 2vw;
		z-index: 2;
	}

	.Print {
		width: 5vw;
		height: 5vw;
		position: fixed;
		bottom: 22vw;
		right: 13vw;
		z-index: 1;
	}

	.button-setting {
		width: 5vw;
		height: 5vw;
		border-radius: 50%;
		border: 1rpx solid #A3B2CF;
		position: fixed;
		bottom: 2vw;
		right: 9vw;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(to bottom, #E9EEF8, #D4DBE8);
		z-index: 10;
	}

	.button-back {
		width: 5vw;
		height: 5vw;
		border-radius: 50%;
		border: 1rpx solid #A3B2CF;
		position: fixed;
		bottom: 2vw;
		right: 3vw;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(to bottom, #E9EEF8, #D4DBE8);
		z-index: 10;
	}

	.button-img {
		width: 50%;
		height: 50%;
	}

	.door {
		width: 17vw;
		height: 16vw;
		position: fixed;
		bottom: 0vw;
		left: 0vw;
	}

	.ondoor {
		width: 5vw;
		height: 6vw;
		position: fixed;
		bottom: -0.5vw;
		left: 9vw;
	}
</style>