<template>
	<view>
		<view class="home tp"> <image src="/static/index/warehouse/home/Back2.jpg" mode="aspectFill"></image></view>
		<view class="contitem tp" @click="housedex++">
			<image src="/static/index/warehouse/home/warehouse.png" mode="aspectFill"></image>
		</view>
		<view class="route tp">
			<image src="/static/index/warehouse/home/carrhate.gif" mode="aspectFill" style="z-index: 4;"></image>
		</view>
		<view class="pulu1 tp">
			<image src="/static/index/warehouse/home/pu1.png" mode="aspectFill" ></image>
			<image src="/static/index/warehouse/home/pu1.gif" mode="aspectFill" ></image>
		</view>
		<view class="pulu2 tp">
			<image src="/static/index/warehouse/home/pu2.png" mode="aspectFill"  ></image>
			<image src="/static/index/warehouse/home/pu2.gif" mode="aspectFill"  ></image>
		</view>
		<view class="clikurlbox">
			<view class="tp" :class="'itemact'+(index+1)" v-for="(item,index) in animArray" :key='index'
				@click.stop="housactive(index)">
				<donghua :width="item.width" :height="item.height" :links="item.url" :playing="index == housedex" />
			</view>
		</view>
		<view class="cardtm">
			<view class="b" :class="{ 'actve':housedex == i}" v-for="(v,i) in ['采购','盘点','拣货','请领出库','退货入库','监控室']">
				<text></text>{{v}}
				<view class="tp">
					<image src="/static/index/warehouse/home/z.png" mode=""></image>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup lang="ts">
	 import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps } from 'vue';
	 
	 const housedex = ref(0);
	 const lastTap = ref(0)
	 const DOUBLE_TAP_DELAY = 300;
	 const setout = ref(null)
	 const navurl = ref('')
	 const housactive = (index : number) => {
	 	housedex.value = index;
	 	const now = Date.now()
	 	if (now - lastTap.value < DOUBLE_TAP_DELAY) {
	 		// 双击成立
	 		clearTimeout(setout.value)
	 		// if (index == 0) {
	 		// 	navurl.value = 'pages/Warehouse/paymoney'
	 		// 	uni.navigateTo({
	 		// 		url: '/' + navurl.value
	 		// 	})
	 		// }
	 		if (index == 0) {
	 			navurl.value = 'pages/procurement/material'
	 			uni.navigateTo({
	 				url: '/' + navurl.value
	 			})
	 		}
	 		if (index == 2) {
	 			navurl.value = 'pages/Warehouse/picking'
	 			uni.navigateTo({
	 				url: '/' + navurl.value
	 			})
	 		}
	 		 
	 		if (index === 3) {
	 			uni.navigateTo({
	 				url: "/pages/watch/full"
	 			})
	 		}
	 		if (index == 6) {
	 			navurl.value = 'pages/procurement/outbound?code=0'
	 			uni.navigateTo({
	 				url: '/' + navurl.value
	 			})
	 		}
	 		if (index == 7) {
	 			navurl.value = 'pages/procurement/outbound?code=1'
	 			uni.navigateTo({
	 				url: '/' + navurl.value
	 			})
	 		}
	 		// 重置，避免多次触发
	 		lastTap.value = 0
	 	} else {
	 		setout.value = setTimeout(() => {
	 			// console.log("点击哪个了", index)
	 			if (index === 5) {
	 				uni.navigateTo({
	 					url: "/pages/watch/full"
	 				})
	 			}
	 
	 		}, DOUBLE_TAP_DELAY)
	 		// 记录本次时间，等待下次点击
	 		lastTap.value = now
	 	}
	 
	 }
	 
	 
	 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}`
	 	})
	 }
	 const animArray = ref([
	 	{
	 		url: genPaths(
	 			'/static/index/warehouse/home/',
	 			'Procurement',
	 			5,    // 张数
	 			'png',
	 			0,     // 起始索引为 1
	 			false  // 不补零
	 		),
	 		width: '22.3vw',
	 		height: '13.6vw'
	 	},
		{
			url: genPaths(
				'/static/index/warehouse/home',
				'inventory',
				4,    // 张数
				'png',
				0,     // 起始索引为 1
				false  // 不补零
			),
			width: '11vw',
			height: '10vw'
		},
		{
			url: genPaths(
				'/static/index/warehouse/home',
				'pick',
				4,    // 张数
				'png',
				0,     // 起始索引为 1
				false  // 不补零
			),
			width: '11vw',
			height: '9vw'
		},
		{
			url: genPaths(
				'/static/index/warehouse/home',
				'unit1-',
				5,    // 张数
				'png',
				0,     // 起始索引为 1
				false  // 不补零
			),
			width: '14.3vw',
			height: '13vw'
		},
		{
			url: genPaths(
				'/static/index/warehouse/home',
				'unit1-',
				5,    // 张数
				'png',
				0,     // 起始索引为 1
				false  // 不补零
			),
			width: '14.3vw',
			height: '13vw'
		},
		])
</script>

<style scoped lang="less">
	.clikurlbox{
		position: fixed;
		width: 100vw;
		height: 100vw;
		top: 0;
		left: 0;
		overflow: hidden;
		z-index: 61;
		.itemact1 {
			width: 22.3vw;
			height: 13.6vw;
			bottom: 8.8vw;
			left: 11.6vw;
			z-index: 31;
		}
		
		.itemact2 {
			width: 9vw;
			height: 9vw;
			top: 22.5vw;
			left: 16.5vw;
			z-index: 57;
		}
		
		.itemact3 {
			width: 11vw;
			height: 9vw;
			top: 37vw;
			left: 48vw;
			z-index: 55;
		}
		.itemact4 {
			width: 14.4vw;
			height: 13vw;
			top: 35vw;
			right: 4.4vw;
			z-index: 65;
		}
		.itemact5 {
			width: 14.4vw;
			height: 10vw;
			bottom: 3vw;
			right: 21vw;
			z-index: 65;
		}
		view{
			position: fixed;
			z-index: 10;
		}
	}
	.cardtm{
		position: relative;
		z-index: 66;
		
		>view{
			position: fixed;
			min-width: 5vw;
			height: 2.7vw;
			border-radius: 1.35vw;
			box-shadow: 0rpx 0rpx 0.3vw 0rpx rgba(174,174,188,0.4);
			z-index: 66;
			display: flex;
			align-items: center;
			padding: 0 1vw;
			white-space: nowrap;
			&:nth-child(1){
				top: 38vw;
				left: 19.5vw;
			}
			&:nth-child(2){
				top: 28vw;
				left: 26.5vw;
			}
			&:nth-child(3){
				bottom: 21vw;
				left: 55vw;
			}
			&:nth-child(4){
				top: 35vw;
				right: 6.5vw;
			}
			&:nth-child(5){
				bottom: 11.5vw;
				right: 23.5vw;
			}
			&:nth-child(6){
				top: 6vw;
				left: 17vw;
			}
			
			text{
				width: 1vw;
				height: 1vw;
				border-radius: 50%;
				border: 1px solid rgba(0, 137, 254, 1);
				margin: 0 0.4vw 0 0;
			}
			view{
				width: 2.8vw;
				height: 4.4vw;
				position: absolute;
				top: 2vw;
				left: 25%;
			}
		}
		
		.actve{
			background: linear-gradient(-45deg, #0089FE, #97C1FF) !important;
			color: #fff !important;
			text{
				border: 1px solid #fff;
			}
		}
		.b{
			background: #EFF2F6;
		}
	}
	.pulu1{
		width: 28.2vw;
		height: 9.8vw;
		position: fixed;
		top: 30vw;
		right: 9.2vw;
		z-index: 60;
		image{
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	.pulu2{
		width: 16.8vw;
		height: 24vw;
		position: fixed;
		top: 30.7vw;
		right: 21.1vw;
		z-index: 60;
		image{
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	.route{
		width: 99.5vw;
		height: 51.2vw;
		position: fixed;
		top: 4.5vw;
		left: 0.3vw;
		z-index: 2;
		image{
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	.contitem{
		width: 48vw;
		height: 36vw;
		position: fixed;
		top: 5.3vw;
		left: 28.2vw;
		z-index: 50;
	}
.home{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: relative;
	z-index: 0;
}
.tp {
	image{
		width: 100%;
		height: 100%;
	}
}
</style>
