<template>
	<view class="cont">
		<view class="topcon">
			<view class="title" >
				<view></view>
				采购单
			</view>
			<view class="zuofei"  @click="emit(`link`,0)">
				<image src="/static/index/procurement/bk.png" mode="aspectFill"></image>
				返回
			</view>
		</view>
		<view class="cgdh" >
			<view class="conts">
				<text>采购单号： </text>101C20251121006
			</view>
			<view class="conts">
				<text>采购日期： </text>2025-10-12
			</view>
			<view class="jiage">
				<view>
					<text>￥</text>0.35 
				</view>
				<text>采购价格 </text>
			</view>
		</view>
		<scroll-view scroll-y="true" class="caigoulist" scroll-with-animation @scrolltolower="scrolltolower()" lower-threshold="300"
			:enhanced="true" :bounce="true" enable-back-to-top>
				<view class="fler" v-for="(v,index) in InvoicingList" :key="index">
					<view class="fler-view" >
						<view class="carditem guodu" >
							<view class="speitem guodu">
								<view class="imghs">
									<image style="border-radius: 1vw;"
										:src="v.materialImg?serverUrl+v.materialImg:'/static/index/procurement/k.png'"
										mode="aspectFill">
									</image>
								</view>
								<view class="cardp">
									<view>复健用品</view>
									<view>复健用品</view>
								</view>
								<!-- <view class="cardp">
									<view v-if="v.categoryId_dictText">{{v.categoryId_dictText}}</view>
									<view v-if="v.typeId_dictText">{{v.typeId_dictText}}</view>
									<view v-if="v.medicationId_dictText">{{v.medicationId_dictText}}</view>
								</view> -->
							</view>
							<view class="msitem guodu">
								<view style="margin-top: 1.4vw;">
									<view>纸尿裤-拉拉裤纸尿裤拉拉裤纸尿裤</view>
								</view>
								<view>
									<text style="white-space: nowrap;"> 规格型号: 800mm*680mm</text>
								</view>
								<view>
									<text style="white-space: nowrap;"> 品牌型号：品牌型号名称</text>
								</view>
								<view>
									<text style="white-space: nowrap;"> 生产厂家：吉林省捌零信创科技有限...</text>
								</view>
							</view>
							
						</view>
						<view class="dibu">
							<view>
								<view><text>￥</text>0.32</view>
								<text>采购价格</text>
							</view>
							<view>
								<view>片</view>
								<text>采购单位</text>
							</view>
							<view>
								<view><text>￥</text>0.58</view>
								<text>销售金额</text>
							</view>
						</view>
					</view>
				</view>
			<view style="height:3vw;width: 100%;display: flex;align-items: center;justify-content: center;">
				<u-loadmore :status="status" :loadText="{nomore:'暂无更多数据'}" v-if="InvoicingList.length>6" />
			</view>
		</scroll-view>
		 
		
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent, inject, watch } from 'vue';
	 const InvoicingList = ref([{},{},{},{},{},])
	 const emit = defineEmits(['link' ])
	 const ification = ref(false)
	 const carnum = ref(2)
</script>

<style lang="less" scoped>
	.caigoulist{
		width: 100%;
		height: 47vw;
		padding: 0 1.4vw;
		
		.fler {
			width: 59.5vw;
			position: relative;
			.fler-view {
				width: 59vw;
				height: 22.5vw;
				border: 1px solid #E5E5E5;
				border-radius: 1.6vw;
				position: relative;
				margin-bottom: 1.1vw;
				overflow: hidden;
				white-space: nowrap;
				.dibu{
					width: 100%;
					height: 10vw;
					display: flex;
					justify-content: space-around;
					align-items: center;
					>view{
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						text{
							font-size: 1.4vw;
							color: #555555;
						}
						view{
							font-size: 2.1vw;
							color: #555555;
							font-weight: bold;
							display: flex;
							align-items: center;
							justify-content: center;
							text{
								font-size: 1.6vw;
								font-weight: 600;
							}
						}
					}
				}
				
				.carditem {
					height: 13vw;
					display: flex;
					transition: transform 500ms cubic-bezier(.2, .8, .2, 1);
					will-change: transform;
					width: 59vw;
				
					.add {
						width: 6.5vw;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						>view {
							width: 5.5vw;
							height: 2.2vw;
							background: #fff;
							border-radius: 0.9vw;
							border: 1px solid #1083F8;
							font-weight: 400;
							font-size: 1.4vw;
							color: #1083F8;
							display: flex;
							justify-content: center;
							align-items: center;
							position: absolute;
							top: 2.3vw;
							right: 0.8vw;
						}
				
						image {
							width: 2.5vw;
							height: 2.5vw;
						}
					}
				
					.msitem {
						 width: 38vw;
						 margin-left: 2vw;
						>view {
							&:nth-child(2),
							&:nth-child(3),
							&:nth-child(4),
							&:nth-child(6),
							&:nth-child(5) {
								margin-top: 1.25vw;
								max-width: 25vw;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
				
								text {
									font-weight: 400;
									font-size: 1.3vw;
									color: #777777;
									margin-top: 0.25vw;
								}
							}
				
							&:nth-child(1) {
								display: flex;
								justify-content: space-between;
								align-items: center;
								height: 2vw;
								margin-top:2.4vw;
				
								>view {
									width: 100%;
									height: 2vw;
									font-weight: bold;
									font-size: 1.8vw;
									color: #222222;
									text-overflow: ellipsis;
									overflow: hidden;
									white-space: nowrap;
								}
				
								text {
									width: 6vw;
									font-weight: 300;
									font-size: 1.4vw;
									color: #222222;
								}
							}
						}
				
					}
					.speitem {
						width: 16.8vw;
						height: 14vw;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
				
						.cardp {
							width: 12.5vw;
							height: 4vw;
							display: flex;
							flex-wrap: wrap;
							margin: 0 auto;
							align-items: center;
				
							view {
								min-width: 5.5vw;
								height: 1.8vw;
								border-radius: 0.9vw;
								border: 1px solid #D2D2D2;
								margin: 0.5vw 0 0 0.5vw;
								display: flex;
								justify-content: center;
								align-items: center;
								font-weight: 400;
								font-size: 1vw;
								color: #555555;
								padding: 0 0.25vw;
				
								&:nth-child(1),
								&:nth-child(2) {
									max-width: 6vw;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									display: block;
									line-height: 1.8vw;
									text-align: center;
								}
				
								&:nth-child(3) {
									max-width: 11.5vw;
									padding: 0 0.8vw;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									display: block;
									line-height: 1.8vw;
									text-align: center;
								}
							}
						}
				
						.imghs {
							width: 10vw;
							height: 9.1vw;
							margin: 3vw auto 1.25vw;
							padding: 0.2vw;
							background: #fff;
							border-radius: 1.1vw;
							
							>image {
								width: 100%;
								height: 100%;
								border-radius: 1.1vw;
							}
						}
				
					}
				}
			}
		}
	}
.cont{
	width: 100%;
	height: 60.4vw;
	position: relative;
	.gys{
		width: 100%;
		text-align: right;
		position: absolute;
		right: 3.2vw;
		bottom: 3.2vw;
		font-size: 1.4vw;
		color: #555555;
	}
	.jiage{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: absolute;
		align-items: center;
		top:0vw;
		right:5.9vw;
		text{
			font-size: 1.3vw;
			color: #888888;
		}
		view{
			font-size: 2.3vw;
			color: #333333;
			font-weight: bold;
			>text{
				font-size: 1.4vw
			}
		}
	}
	.cgdh{
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 3.8vw;
		position: relative;
		font-size: 1.4vw;
		padding:0 2.3vw;
		margin: 2.2vw auto 2vw;
		.conts{
			color: #333333;
			text{
				font-weight: 500;
			}
		}
		
	}
	.topcon{
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 3.6vw;
		padding: 0 2.3vw;
		align-items: center;
		margin-top: 1.7vw;
		.zuofei{
			width: 9vw;
			height: 3.6vw;
			background: #FFFFFF;
			border-radius: 1.6vw;
			border: 1px solid #DCDCDC;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 1.3vw;
			color: #555555;
			image{
				width: 1.4vw;
				height: 1.4vw;
				margin: 0 0.5vw;
			}
		}
		.title{
			font-size: 1.7vw;
			color: #222222;
			display: flex;
			align-items: center;
			view{
				width: 0.5vw;
				height: 1.4vw;
				background: radial-gradient( 0% 0% at 0% 0%, #006DC9 7.25%, #0385FA 100%), #F7F7F7;
				border-radius: 0.2vw;
				margin-right: 1vw;
			}
		}
	}
	
}
.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}
</style>
