<!-- 入库单 -->
<template>
	<view class="draw-all">
		<view class="draw-contain">
			<view class="draw-title">
				<view class="draw-flex">
					<view class="draw-title-gun"></view>
					<view class="draw-title-font">入库单</view>
				</view>
			</view>
			<view class="swiper-card-once">
				<view class="swiper-card-top">
					<view class="swiper-card-top-card">
						<view class="swiper-card-top-card-weight">
							<view class="weight-left">
								<view class="green-font">采购单号：</view>
								<view class="green-font" style="font-weight: 700;">A0120250301001</view>
							</view>
							<!-- <view class="weight-left">
								<view class="">总金额：</view>
								<view class="" style="color: red;">100.00</view>
							</view> -->
						</view>
						<!-- <view class="weight-boom"> -->
						<view class="swiper-card-top-card-noral">
							<view class="swiper-all-flex">
								<view class="swiper-gray">
									采购人：
								</view>
								<view class="swiper-black">
									王法
								</view>
							</view>
							<view class="swiper-all-flex" style="width: 55%;">
								<view class="swiper-gray">
									采购日期：
								</view>
								<view class="swiper-black">
									2025.03.02
								</view>
							</view>
						</view>
						<view class="swiper-card-top-card-noral" style="margin-top: 15rpx;">
							<view class="swiper-all-flex">
								<view class="swiper-gray">
									付款方式：
								</view>
								<view class="swiper-black">
									月结
								</view>
							</view>
							<view class="swiper-all-flex" style="width: 55%;">
								<view class="swiper-gray">
									供应商：
								</view>
								<view class="swiper-black">
									宽城区珂爱个人卫生用品店
								</view>
							</view>
						</view>
						<!-- </view> -->
					</view>
				</view>
			</view>
			<view class="draw-title" style="margin-top: 50rpx;">
				<view class="draw-flex">
					<view class="draw-title-gun"></view>
					<view class="draw-title-font">随行单</view>
				</view>
			</view>

			<view class="scroll-view">
				<scroll-view scroll-y style="height: 100%;" :show-scrollbar="false">
					<view v-for="(item,index) in photoArray" :key="index">
						<view class="card-father" @click="openPhoto(index)">
							<view class="card-white">
								<image class="card-white-photo" :src="item" />
							</view>
							<view class="down-title" v-if="index!==photoArray.length-1">
								<view class="down-title-flex">
									<image class="down-title-photo"
										src="/static/index/Warehousing/shangchuanpeople.png" />
									<view style="margin-left: 10rpx;">上传人:</view>
									<view style="font-weight: 700;">王法</view>
								</view>
								<view class="down-title-flex">
									<image class="down-title-photo"
										src="/static/index/Warehousing/shangchuantime.png" />
									<view style="margin-left: 10rpx;">上传时间:</view>
									<view style="font-weight: 500;">2025.03.01 10:00:00</view>
								</view>
							</view>
						</view>
					</view>

				</scroll-view>
			</view>

			<view class="button-card">
				<!-- 	<view class="swiper-button-white" @click="closevoid">
					关闭
				</view> -->
				<!-- <view class="swiper-button-blue" @click="voidIt()">
					作废
				</view> -->
			</view>

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

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, defineEmits, watch } from 'vue';
	const note = ref("");
	const calendarShow = ref(false);
	const stateTarget = ref("");
	const emit = defineEmits(['opensuixing', "closevoid"])
	const props = defineProps({

	});
	const postItems = ref(0);
	const photoArray = ref([`https://img-s.msn.cn/tenant/amp/entityid/AA1ECZ6y.img?w=768&h=960&m=6&x=355&y=171&s=47&d=47`, `https://img-s.msn.cn/tenant/amp/entityid/AA1ECtEb.img?w=768&h=436&m=6&x=280&y=134&s=200&d=200`, "/static/index/addphoto.png"])
	// const stateArray = ['已作废', '未确认', '已确认', '未完结', '待结账', '已结账'];
	// 初始化左侧菜单列表
	const buttonList = ref([
		{ url: '/static/index/Warehousing/sousuo.png', name: '查询' },
		{ url: '/static/index/Warehousing/chongzhi.png', name: '重置' },

	]);
	const chooseImages = () => {
		uni.chooseImage({
			count: 9,                      // 最多可选9张
			sizeType: ['original', 'compressed'], // 原图或压缩图
			sourceType: ['album', 'camera'], // 从相册或相机
			success: (res) => {
				photoArray.value.pop()
				photoArray.value = [...photoArray.value, ...res.tempFilePaths];
				photoArray.value.push("/static/index/addphoto.png")
				// uni.uploadFile({
				// 	url: 'http://192.168.2.22:8080/nursing-unit/api/ocr/medicalCard',
				// 	filePath: res.tempFilePaths[0],
				// 	name: 'file',
				// 	header: {
				// 		'Authorization': 'Bearer ' 
				// 	},
					
				// 	success: (uploadRes) => {
				// 		console.log("!!!!!!!!",uploadRes)
				// 		const result = JSON.parse(uploadRes.data);
				// 		if (result.success) {
				// 			console.log('识别结果:', result.data);
				// 			// 处理识别结果
				// 			// this.idCardInfo = result.data;
				// 		} else {
				// 			uni.showToast({ title: result.message, icon: 'none' });
				// 		}
				// 	},
				// 	fail: (err) => {
				// 		console.log("????",err)
				// 		uni.showToast({ title: '识别失败', icon: 'none' });
				// 	},
				// 	complete: () => {
				// 		uni.hideLoading();
				// 	},
				// });
			}
		});
	};
	const openPhoto = (index : number) => {
		if (index == photoArray.value.length - 1) {
			chooseImages()
		} else {
			uni.previewImage({
				urls: photoArray.value.slice(0, -1),
				current: photoArray.value[index],
			})
		}
	}
	// const emit = defineEmits(['opendetail'])
	const calendarchange = (e : any) => {
		stateTarget.value = e.result
	}
	const opensuixing = () => {
		emit('opensuixing')
	}
	const closevoid = () => {
		emit('closevoid')
	}
	// const opendetail = () => {
	// 	emit('opendetail')
	// }
</script>

<style lang="less" scoped>
	.draw-all {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-top-left-radius: 80rpx;
		border-bottom-left-radius: 80rpx;
		overflow: hidden;

		.draw-flex {
			display: flex;
		}

		.draw-contain {
			width: 100%;
			height: calc(100vh);
			background-image: url("/static/index/fanpink.png");
			background-repeat: no-repeat;
			background-attachment: fixed;
			background-size: cover;
		}
	}

	.swiper-gray {
		color: #596278;
	}

	.draw-title {
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 80rpx;
		margin-left: 20rpx;

		.draw-flex {
			display: flex;
		}

		.draw-title-gun {
			margin-left: 20rpx;
			margin-right: 20rpx;
			width: 13rpx;
			height: 40rpx;
			background: linear-gradient(to bottom, #04BCED, #0160CE);
			border-radius: 10rpx;
		}

		.draw-title-font {
			font-size: 35rpx;
			font-weight: 700;
			margin-top: -3rpx;
		}

		.draw-title-blue {
			height: 50rpx;
			width: 120rpx;
			margin-right: 50rpx;
			background: linear-gradient(to right bottom, #00c9ff, #0076ff);
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			border: 1rpx solid #fff;
		}
	}

	.scroll-view {
		height: 980rpx;
		width: calc(100% - 80rpx);
		margin-left: 40rpx;
		border-radius: 40rpx;
		border: 2rpx solid #fff;
		box-shadow: 4rpx 8rpx 16rpx 4rpx #839fcc;
		overflow: hidden;

		.card-father {
			margin: 10rpx 0 20rpx 23rpx;
			width: 800rpx;
			height: 350rpx;
			border-radius: 30rpx;
			box-shadow: 4rpx 8rpx 16rpx 4rpx #839fcc;
			background: url("/static/index/blueMountain.png") center/cover, rgba(255, 255, 255, 0.7);
			background-blend-mode: screen;
			isolation: isolate;
			// justify-content: center;
			display: flex;
			flex-direction: column;

			.down-title {
				width: 100%;
				height: 80rpx;
				// background-color: red;
				padding: 0 50rpx;
				display: flex;
				justify-content: space-between;

				.down-title-flex {
					display: flex;
					align-items: center;
				}

				.down-title-photo {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.card-white {
				width: 740rpx;
				height: 250rpx;
				margin-top: 20rpx;
				margin-left: 30rpx;
				background-color: #fff;
				border-radius: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.card-white-photo {
					width: 260rpx;
					height: 180rpx;
				}
			}
		}
	}

	.swiper-card-once {
		margin: 20rpx 0 0rpx 30rpx;
		width: 870rpx;
		height: 220rpx;
		border: 2rpx solid #fff;
		border-radius: 30rpx;
		background: url("/static/index/blueMountain.png") center/cover, rgba(255, 255, 255, 0.5);
		background-blend-mode: screen;
		isolation: isolate;
		box-shadow: 5rpx 5rpx 10rpx 0rpx #839fcc;
		overflow: hidden;
		padding: 0 40rpx;

		.swiper-card-top {
			width: 100%;
			height: 220rpx;
			display: flex;

			.swiper-card-top-card {
				width: 100%;
				height: 100%;

				.swiper-card-top-card-weight {
					display: flex;
					justify-content: space-between;
					margin: 25rpx 0;
					font-size: 30rpx;
					font-weight: 500;

					.weight-left {
						display: flex;

						.blue-number {
							font-size: 32rpx;
							font-weight: 700;
							color: #017DE9;
							margin-top: 10rpx;
						}
					}

					.weight-right {
						color: #FF6000;
						font-weight: 500;
						font-size: 30rpx;
					}
				}



				.swiper-card-top-card-noral {
					// margin-left: 50rpx;
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;
					font-size: 25rpx;
				}
			}
		}
	}

	.swiper-flex {
		display: flex;
		flex-wrap: wrap;
		margin-left: 0rpx;

		.swiper-card {
			margin: 0 0 30rpx 30rpx;
			width: 1010rpx;
			height: 260rpx;
			border: 2rpx solid #fff;
			border-radius: 30rpx;
			background: url("/static/index/blueMountain.png") center/cover, rgba(255, 255, 255, 0.6);
			background-blend-mode: screen;
			isolation: isolate;
			box-shadow: 5rpx 5rpx 10rpx 0rpx #839fcc;
			overflow: hidden;
			padding: 0 40rpx;

			.swiper-card-top {
				width: 100%;
				height: 270rpx;

				.swiper-card-top-card {
					width: 100%;
					height: 100%;
					display: flex;
				}
			}
		}
	}

	.index-right-button-blue {
		height: 50rpx;
		width: 100rpx;
		background: linear-gradient(to right bottom, #00c9ff, #0076ff);
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		border: 1rpx solid #fff;
	}

	.swiper-all-flex {
		display: flex;
	}

	.card-img-father {
		height: 100%;
		width: 210rpx;

		// background-color: #fff;
		.card-img-bgc {
			// margin-top: -15rpx;
			// margin-top: 30rpx;
			margin-top: 20rpx;
			margin-left: -15rpx;
			display: flex;
			width: 200rpx;
			height: 220rpx;
			align-items: center;
			justify-content: center;
			background-color: rgb(238, 243, 253);
			border-radius: 25rpx;
			box-shadow: 2rpx 2rpx 4rpx 0rpx #839fcc;
		}

		.card-img {

			// 图片切的有问题
			width: 130rpx;
			height: 130rpx;
		}
	}

	.card-right {
		width: calc(100% - 230rpx);
		height: 100%;

		.card-right-title {
			width: 100%;
			display: flex;
			justify-content: space-between;
			font-weight: 700;
			// margin: 20rpx 0;
			margin-top: 20rpx;
			margin-bottom: 5rpx;

			.title-gray {
				color: #596278;
				font-size: 30rpx;
			}

			.title-black {
				font-size: 30rpx;
			}
		}

		.card-right-other {
			margin-top: 15rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			font-size: 25rpx;

			.title-gray {
				color: #596278;
			}

			.title-green {
				color: #647900;
			}

			.title-red {
				color: #FF4A27;
			}
		}
	}

	.swiper-button-white {
		background: linear-gradient(to bottom, #D5E0F8, #ECF6FF);
		border: 2rpx solid #fff;
		border-radius: 20rpx;
		width: 200rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// margin: 0 10rpx;
		margin-right: 20rpx;

	}

	.swiper-button-blue {
		background: linear-gradient(to bottom, #FF8251, #F52E2C);
		border: 2rpx solid #fff;
		border-radius: 20rpx;
		width: 200rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 10rpx;
		color: #fff;
		margin-right: 40rpx;
	}

	.button-card {
		margin-top: 30rpx;
		display: flex;
		justify-content: flex-end;
	}

	.down-note {
		width: 100%;
		overflow: hidden;
		height: 170rpx;
		display: flex;
		align-items: center;
		position: relative;
		margin-top: -10rpx;
		display: flex;

		.down-note-img {
			width: 60rpx;
			height: 60rpx;
		}

		.down-note-photo {
			height: 150rpx;
			width: 200rpx;
			margin: 0 10rpx;
		}
	}

	// .down-note-title-input {
	// 	width: calc(100% - 100rpx);
	// 	margin-left: 40rpx;
	// 	height: 120rpx;
	// 	font-size: 27rpx;
	// 	border: 2rpx #a0adc8 solid;
	// 	padding: 15rpx 0 15rpx 20rpx;
	// 	background-color: rgba(234, 243, 254, 0.6);
	// 	border-radius: 30rpx;
	// }

	// .char-count {
	// 	position: absolute;
	// 	bottom: 30rpx;
	// 	right: 70rpx;
	// 	color: #999;
	// 	font-size: 25rpx;
	// }

	// .draw-red {
	// 	color: red;
	// 	font-size: 40rpx;
	// 	margin-top: -10rpx;
	// }

	.green-font {
		// background-color: #28CFB3;
		color: #28CFB3;
	}

	.radio-circle-top-father {
		// overflow: auto;
		display: flex;
		margin: 0 0 0 80rpx;
		height: 50rpx;

		.radio-circle-top {
			// margin-top: 30rpx;
			// width: 2000rpx;
			display: flex;
		}

		.radio-circle {
			position: relative;
			margin-top: 2rpx;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			border: 2rpx solid rgb(2, 171, 254);
			background-color: transparent;
		}

		.radio-circle-target {
			position: relative;
			margin-top: 2rpx;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			border: 2rpx solid rgb(2, 171, 254);
			background-color: transparent;
		}

		.radio-circle-target::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 20rpx;
			height: 20rpx;
			background-color: rgb(2, 171, 254);
			border-radius: 50%;
		}

		.radio-font {
			margin-left: 15rpx;
			margin-right: 60rpx;
			width: 400rpx;
			font-size: 25rpx;
		}
	}

	.ruku-time {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 60rpx;

		.ruku-time-font {
			font-size: 30rpx;
			font-weight: 500;
		}

		.ruku-time-weight {
			font-size: 30rpx;
			font-weight: 700;
		}

		.button-first {
			width: 120rpx;
			height: 50rpx;
			border-radius: 20rpx;
			margin-right: 15rpx;
			background: linear-gradient(to bottom right, #00C3AC, #28CFB3);
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 40rpx;
			margin-top: -5rpx;
		}
	}

	.title-weight-red {
		color: #FF4A27;
	}

	.card-right-bgc {
		width: 730rpx;
		height: 175rpx;
		background-color: rgb(238, 243, 253);
		border-radius: 25rpx;
		// border: 2rpx solid #fff;
		border: 2rpx solid #fff;
	}

	.boom-other {
		width: 727rpx;
		height: 55rpx;
		// background-color: red;
		display: flex;

		.boom-other-card {
			width: 250rpx;
			display: flex;
			align-items: center;

			// background-color: #fff;
			.boom-other-img {
				width: 30rpx;
				height: 30rpx;
				margin-left: 15rpx;
				// margin-top: -5rpx;
			}

			.boom-other-font {
				margin-left: 5rpx;
				font-size: 25rpx;
			}

			.boom-other-weight {
				font-weight: 700;
				margin-left: 30rpx;
			}
		}
	}

	.card-boom {
		margin-top: -15rpx;
		width: 727rpx;
		height: 120rpx;
		border-radius: 25rpx;
		background-color: rgb(218, 226, 245);
	}

	.white-shu {
		width: 2rpx;
		// margin-top: 5rpx;
		height: 40rpx;
		background-color: #fff;
		margin: 8rpx 5rpx 0 5rpx;
	}
</style>