<template>
	<view>
		<!-- 采购 -->
		<view class="box">
			<view class="lefts">
				<scroll-view   scroll-y="true" scroll-with-animation :scroll-top="scrolltop" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
						<view class="boxitem" v-for="(v,i) in 66" :key='i' :class="{'yujing':i==1,'active':i==0}">
							<view>纸尿裤-拉拉裤纸尿裤-拉拉裤</view>
							<view>规格型号:  800mm*680mm</view>
							<view>采购单位： 片</view>
							<view>
								<view class="carditem" :class="{'hl':i==0,'yl':i==1,'bj':i>=2}">
									<image src="/static/index/warehouse/procurement/hl.png" mode="aspectFill" v-if="i==0"></image>
									<image src="/static/index/warehouse/procurement/yl.png" mode="aspectFill" v-if="i==1"></image>
									<image src="/static/index/warehouse/procurement/bj.png" mode="aspectFill" v-if="i>=2"></image>
									保洁
								</view>
								<view class="znk">
									<image src="/static/index/warehouse/procurement/znk.png" mode="aspectFill"></image>
								</view>
								<view class="num">
									<view>500</view>
									<view>库存数量</view>
								</view>
							</view>
						</view>
						<view style="height: 23vw;"></view>
				</scroll-view>
				<view class="mblbg"> </view>
				<view class="fxj">
					<arrowkeys @movecard="movecard" :getblue="getblue" :moveleft="45" rightbuttonname="扫描"/>
				</view>
			</view>
			<view class="rights">
				<view class="shitem">
					<view class="shypk">
						<view>生活用品库</view>
						<view>
							 
							 <view class="swsh guodu" :class="shyp?'act':''" @click="switchshyp">
							 	<view class="guodu"></view>
							 </view>
							 <text>
								 {{shyp?'启用':'停用'}}
							 </text>
						</view>
					</view>
					<view class="jqry">
						<view class="left tp">
							<image src="/static/index/warehouse/procurement/jqr.png" mode="aspectFill"></image>
						</view>
						<view class="rigname">
							<view>李树奎</view>
							<view>
								<text>男</text>
								<text>50岁</text>
								<text>13358863266</text>
							</view>
						</view>
					</view>
					
				</view>
				<view class="typeitem">
					<view class="toptype">
						<view v-for="v in ['三','二','一']">{{v+'级分类'}}</view>
					</view>
					<view class="scroltype">
						<scroll-view   scroll-y="true" scroll-with-animation 
						:scroll-top="scroll.scrolltop3" class="scroll-Y"  >
							<view :class="scroll.act3==i?'act':''" v-for="(v,i) in ['活血化瘀止痛类','通络止痛类']"   @click="typescroll(3,i)">
								{{v}}
							</view>
						</scroll-view>
						
						<scroll-view   scroll-y="true" scroll-with-animation
						:scroll-top="scroll.scrolltop2" class="scroll-Y"  >
							<view :class="scroll.act2==i?'act':''" v-for="(v,i) in ['液体制剂','中药制剂','中医辩证']"   @click="typescroll(2,i)">
								{{v}}
							</view>
						</scroll-view>
						
						<scroll-view   scroll-y="true" scroll-with-animation
						:scroll-top="scroll.scrolltop1" class="scroll-Y">
							<view :class="scroll.act1==i?'act':''" 
							v-for="(v,i) in
							 ['中医中药','生活用品','医疗用品','医疗器械','耗材用品','食材用品','生活用品',
							 '中医中药','生活用品','医疗用品','医疗器械','耗材用品','食材用品','生活用品']"
								@click="typescroll(1,i)">
								{{v}}
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive,onBeforeUnmount, computed, nextTick,defineProps } from 'vue';
	 const navurl = ref('');
	 const scrolltop = ref(0)
	 const getblue = ref(false);
	 const shyp = ref(false);
	 const scroll = reactive({scrolltop1:0,scrolltop2:0,scrolltop3:0,act1:0,act2:0,act3:0});
	 
	 const switchshyp = ( )=>{
		 shyp.value = shyp.value?false:true;
	 }
	const typescroll = (e: number,i: number)=>{
		 scroll['act'+e] = i;
		 scroll['scrolltop'+e] = (i -2) * 50;
		 
		 console.log(scroll['scrolltop'+e]);
		 console.log(scroll['act'+e])
	 }
	 const movecard = (type : number) => {
	   console.log(type)
	   switch (type){
	   	case 0:
	 		// 上
	   		break;
	   	case 1:
	 		// →
	   		break;
	   	case 2:
	 		// 下
	   		break;
	   	case 3:
	 		// ←
	   		break;
	   	case 4:
	 		// 扫描
	 		 
	   		break;
	   	case 5:
	 		// 返回
	 		uni.navigateBack()
	   		break;
	   		
	   	default:
	   		break;
	   }
	 }
</script>

<style lang="less">
	.tp{
		image{
			width: 100%;
			height: 100%;
		}
	}
.box{
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0vw 2vw 0;
	.rights{
		width: 25vw;
		height:calc(100% - 4vw);
		margin-top: 4vw;
		.typeitem{
			width: 100%;
			height: 54vh;
			.scroltype{
				width: 100%;
				height:calc(54vh - 2vw);
				display: flex;
				justify-content: space-around;
				.scroll-Y{
					width: 7vw;
					height:calc(54vh - 2vw);
					view{
						width: 7vw;
						height: 3.8vw;
						background: rgba(255,255,255,.5);
						border-radius: 1.9vw;
						font-weight: 400;
						font-size: .9vw;
						color: #212327;
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 0 1.4vw;
						margin-bottom: .8vw;
						text-align: center;
					}
					.act{
						background: rgba(255,255,255,1) !important;
						color: #0385FA !important;
					}
				}
			}
			.toptype{
				width: 100%;
				height: 2vw;
				display: flex;
				justify-content: space-around;
				margin: .4vw 0 .4vw 0;
				>view{
					width: 7vw;
					height: 1.9vw;
					background: rgba(255,255,255,.5);
					border-radius: .9vw;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 400;
					font-size: .9vw;
					color: #333333;
				}
			}
		}
		.shitem{
			width: 24.0vw;
			height: 10.3vw;
			background: #E8E9ED;
			border-radius: 1.6vw;
			padding: 1.8vw;
			.jqry{
				width: 100%;
				display: flex;
				align-items: center;
				.left{
					width: 5vw;
					height: 5vw;
				}
				.rigname{
					height: 3vw;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					&:nth-child(1){
						font-weight: bold;
						font-size: 1.4vw;
						color: #212327;
					}
					&:nth-child(2){
						width: 11vw;
						font-weight: 400;
						font-size: 1vw;
						color: #212327;
						display: flex;
						justify-content: space-between;
					}
				}
			}
			.shypk{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				view{
					&:nth-child(1){
						font-weight: bold;
						font-size: 1.0vw;
						color: #333333;
					}
					&:nth-child(2){
						display: flex;
						flex-direction: column;
						align-items: center;
						text{
							font-weight: 400;
							font-size: .8vw;
							color: #666666;
						}
						.guodu{
							transition: .4s;
							-webkit-transform-style: preserve-3d;
							-webkit-overflow-scrolling: touch;
						}
						.swsh{
							width: 2.7vw;
							height: 1.5vw;
							background: #D6D8DC;
							border-radius: .75vw;
							border: 1px solid #D6D8DC;
							padding: 0.2vw;
							box-sizing: border-box;
							display: flex;
							align-items: center;
							>view{
								width: 1.1vw;
								height: 1.1vw;
								background: #FCFCFD;
								border-radius: 50%;
							}
						}
						.act{
							background: linear-gradient(-69deg, #E1EFFC, #CAE0F9, #D2E9FF) !important;
							border: 1px solid rgba(0, 130, 251, 0.34) !important;
							padding-left: 1.3vw;
							
							view{
								background: #0385FA;
								position: absolute;
							}
						}
						
					}
				}
			}
		}
	}
	.lefts{
		width: 70vw;
		margin-left: 1vw;
		height:calc(100%);
		position: relative;
		.fxj{
			width: 23vw;
			height: 22vw;
			position: absolute;
			left: 0;
			bottom: 2vw;
			z-index: 11;
			border-radius: 1.6vw;
		}
		.mblbg{
			width: 23vw;
			height: 21vw;
			position: absolute;
			left: -0.2vw;
			bottom: 0.5vw;
			border-radius: 1.6vw;
			  filter: blur(15rpx);
			background: RGBA(239, 240, 244, 1);
			z-index: 10;
		}
		.scroll-Y{
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			.boxitem{
				&:nth-child(1),&:nth-child(2),&:nth-child(3){
					margin-top: 4vw;
				}
			}
		}
		.boxitem{
			width: 22vw;
			height: 19.3vw;
			background: rgba(255,255,255,.7);
			border-radius: 1.6vw;
			margin: 0 1.3vw 1.2vw 0;
			border: 2px dashed #fff;
			display: inline-block;
			padding: 2.3vw;
			position: relative;
			>view{
				.hl{
					color: #0385FA;
					background: #E7F0FB;
				}
				.yl{
					background:#DCF6F3;
					color: #00C6A9;
				}
				.bj{
					background: #E9EBFC;
					color: #727BFF;
				}
				
				
				>&:nth-child(1){
					font-weight: bold;
					font-size: 1.3vw;
					color: #212327;
				}
				>&:nth-child(2){
					font-weight: 400;
					font-size: 10rpx;
					color: #555555;
					margin-top: .9vw;
				}
				>&:nth-child(3){
					font-weight: 400;
					font-size: 10rpx;
					color: #666666;
					margin-top: .6vw;
				}
				>&:nth-child(4){
					width: 100%;
					height: 10vw;
					position: absolute;
					left: 0;
					bottom: 0;
					
				}
				.num{
					position: absolute;
					bottom: 2vw;
					left: 2.5vw;
					display: flex;
					flex-direction: column;
					view{
						&:nth-child(1){
							font-weight: bold;
							font-size: 2.2vw;
							color: #333333;
							margin-bottom: .6vw;
						}
						&:nth-child(2){
							font-weight: 400;
							font-size: .9vw;
							color: #999999;
						}
					}
					
				}
				.znk{
					width: 12vw;
					height: 11.5vw;
					position: absolute;
					right: 0;
					bottom: 0;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.carditem{
					width: 5.8vw;
					height: 2.1vw;
					border-radius: 1.0vw;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 400;
					font-size: .9vw;
					margin-top: .8vw;
					image{
						width: 1.4vw;
						height: 1.4vw;
					}
				}
			}
		}
		.yujing{
			background:rgba(255, 87, 87, 0.095);
			border: 2px solid rgba(255, 102, 107, 0.51) !important;
			box-shadow: 0 0 8px rgba(255, 102, 107, 0.51);
			view{
				.num{
					view{
						&:nth-child(1){
							color: #FF5757 !important;
						}
					}
					
				}
			}
		}
		.active{
			border: 2px dashed #017DE9 !important;
		}
	}
	
}
</style>
<style>
	page{
		background: RGBA(239, 240, 244, 1);
	}
</style>