<template>
	<view>
		<view class="box guodu" :style="!show?'width: 0;right:-6vw':'width: 67vw'">
			<view class="title">
				<view></view>
				随行单
			</view>
			<scroll-view scroll-y="true" class="scrolsxd">
				<view>
					<view class="cgz">
						<view class="left">
							<image src="/static/index/material/cgd.png" mode="aspectFill"></image>
							采购单
						</view>
						<view class="cd">
							采购中
						</view>
					</view>
					<view class="dz">
						<view>采购单号：</view>
						101C20251121006
						<view class="je">
							<text> ￥25</text>
							<text>订单金额</text>
						</view>
					</view>
					<view class="dz">
						<view>采购日期：</view>
						2025-10-12
					</view>

					<view class="cgz top1">
						<view class="left">
							<image src="/static/index/material/jg.png" mode="aspectFill"></image>
							机构信息
						</view>
					</view>

					<view class="dz">
						<view>机构名称：</view>
						吉林省久泰健康产业有限公司
					</view>
					<view class="dz">
						<view>收货地址：</view>
						吉林省长春市朝阳区开运街41号吉省长春市朝阳区开运街41号
					</view>
					<view class="dz">
						<view>联系人：</view>
						张某
					</view>
					<view class="dz">
						<view>电话：</view>
						13845337753
					</view>

					<view class="cgz top1">
						<view class="left">
							<image src="/static/index/material/gys.png" mode="aspectFill"></image>
							供应商信息
						</view>
					</view>

					<view class="dz">
						<view>供应商：</view>
						吉林天林商贸有限公司
					</view>
					<view class="dz">
						<view>联系人：</view>
						吕婧文
					</view>
					<view class="dz">
						<view>电话：</view>
						13356856633
					</view>

					<view class="conts">
						<view class="tittop">
							<text>纸尿裤-拉拉裤纸尿裤</text>
							<view>
								采购数量
								<text>155</text>
							</view>
						</view>
						<view class="dz">
							<view>规格型号：</view>
							800mm*680mm
						</view>
						<view class="dz">
							<view>品牌型号：</view>
							品牌型号名称
						</view>
						<view class="dz">
							<view>生产厂家：</view>
							吉林省捌零信创科技有限
						</view>

						<view class="jglb" style="margin-top: 2.5vw;">
							<view>
								<text>¥0.32</text>
								<text>采购价格</text>
							</view>
							<view>
								<text>片</text>
								<text>采购单位</text>
							</view>
							<view class="l beblue">
								<text>¥0.56</text>
								<text>销售价格</text>
							</view>
							<view class="l beblue">
								<text>片</text>
								<text>销售单位</text>
							</view>
						</view>
						<view class="jglb">
							<view>
								<text>350</text>
								<text>入库数量</text>
							</view>
							<view>
								<text>150</text>
								<text>挂账数量</text>
							</view>
							<view>
								<text>12</text>
								<text>销账数量</text>
							</view>
							<view>
								<text>￥0.56</text>
								<text>销售金额</text>
							</view>
						</view>
					</view>

				</view>
			</scroll-view>

		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent } from 'vue';
	const props = defineProps({
		show: {
			type: Boolean
		},
	})
</script>

<style lang="less" scoped>
	.conts {
		width: 57vw;
		height: 36vw;
		background: #FFFFFF;
		border-radius: 1.6vw;
		border: 1px solid #DCDCDC;
		padding: 1.8vw 3.3vw;
		margin-top: 2vw;

		.jglb {
			width: 100%;
			height: 9vw;
			border-top: 1px solid #E5E5E5;
			display: flex;
			justify-content: space-between;

			view {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #555555;

				text {
					&:nth-child(1) {
						font-size: 2.1vw;
						
						font-weight: bold;
					}

					&:nth-child(2) {
						font-size: 1.4vw;
						
					}
				}
			}

			.l {
				color: #0385FA;
			}
		}

		.tittop {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 4.5vw;
			border-bottom: 1px solid #E5E5E5;
			margin-bottom: 1.5vw;

			text {
				font-weight: bold;
				font-size: 2.1vw;
				color: #222222;
			}

			view {
				font-size: 1.3vw;
				color: #888888;

				text {
					font-weight: bold;
					font-size: 2.4vw;
					color: #333333;
					margin-left: 0.6vw;
				}
			}
		}
	}

	.box {
		width: 0;
		height: 100vh;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 1011;
		overflow: hidden;
		border-radius: 3vw 0 0 3vw;
		padding: 3vw;

		.scrolsxd {
			width: 100%;
			height: calc(100vh - 10vw);
			margin-top: 2vw;
			padding-left: 1.2vw;

			.dz {
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: 0.7vw;
				font-size: 1.4vw;
				color: #333333;
				position: relative;

				view {
					width: 7vw;
					display: flex;
					justify-content: flex-end;
					align-items: center;
				}

				.je {
					flex-direction: column;
					justify-content: center;
					position: absolute;
					right: 0;
					top: -0.5vw;

					text {
						&:nth-child(1) {
							font-weight: bold;
							font-size: 2.4vw;
							color: #333333;
						}

						&:nth-child(2) {
							font-size: 1.3vw;
							color: #888888;
						}
					}
				}
			}

			.top1 {
				margin-top: 1vw;
			}

			.cgz {
				width: 100%;
				height: 4.2vw;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #E5E5E5;
				margin-bottom: 2vw;

				.left {
					font-weight: bold;
					font-size: 1.7vw;
					color: #333333;
					display: flex;
					align-items: center;

					image {
						width: 2.1vw;
						height: 2.1vw;
						margin-right: 0.8vw;
					}
				}

				.cd {
					width: 7.9vw;
					height: 3.2vw;
					border-radius: 1.1vw;
					border: 1px solid #0385FA;
					font-size: 1.6vw;
					color: #0385FA;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.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;
	}

	.beblue {
		color: #0385FA;
	}
</style>