<!-- 拣货单 -->
<template>
	<view class="draw-all">
		<view class="draw-contain">
			<!-- 解决margin重叠问题 -->
			<view class="title-title">
				留置针敷贴(医用透明敷料)
			</view>
			<view class="draw-title" style="margin-top: 35rpx;margin-bottom: 10rpx;">
				<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-noral">
							<view class="swiper-all-flex">
								<view class="swiper-gray">
									货品名称:
								</view>
								<view class="swiper-black">
									留置针敷贴(医用透明敷料)
								</view>
							</view>
							<view class="swiper-all-flex" style="width: 45%;">
								<view class="swiper-gray">
									货品编码:
								</view>
								<view class="swiper-black">
									FLYP001
								</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">
									6cm*7cm
								</view>
							</view>
							<view class="swiper-all-flex" style="width: 45%;">
								<view class="swiper-gray">
									采购单位:
								</view>
								<view class="swiper-black">
									个
								</view>
							</view>
						</view>
						<view class="swiper-card-top-card-noral" style="margin-top: 15rpx;">
							<view class="swiper-all-flex" style="width: 30%;">
								<view class="swiper-gray">
									采购单价:
								</view>
								<view class="swiper-black">
									0.1
								</view>
							</view>
							<view class="swiper-all-flex" style="width: 30%;">
								<view class="swiper-gray">
									到货单价:
								</view>
								<view class="swiper-black">
									0.12
								</view>
							</view>
							<view class="swiper-all-flex" style="width: 30%;">
								<view class="swiper-gray">
									采购金额:
								</view>
								<view class="swiper-black">
									10.12
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="draw-title" style="margin-top: 35rpx;margin-bottom: 10rpx;">
				<view class="draw-flex">
					<view class="draw-title-gun"></view>
					<view class="draw-title-font">入库信息</view>
				</view>
			</view>
			<view class="color-father">
				<view class="color-pink" style="margin-left: 40rpx;">
					<view class="color-weight">
						10
					</view>
					<view class="color-font">
						采购数量
					</view>
				</view>
				<view class="color-green">
					<view class="color-weight">
						0
					</view>
					<view class="color-font">
						入库数量
					</view>
				</view>
				<!-- <view class="color-blue">
					<view class="color-weight">
						0
					</view>
					<view class="color-font">
						挂账数量
					</view>
				</view> -->
				<view class="color-red">
					<view class="color-weight">
						0
					</view>
					<view class="color-font">
						销账数量
					</view>
				</view>
			</view>
			<view class="draw-title" style="margin-top: 35rpx;margin-bottom: 10rpx;">
				<view class="draw-flex">
					<view class="draw-title-gun"></view>
					<view class="draw-title-font">拣货入库</view>
				</view>
			</view>
			<view class="swiper-card-once" style="height: 240rpx;">
				<view class="swiper-card-top">
					<view class="swiper-card-top-card">
						<view class="swiper-card-top-card-noral" style="margin-top: 15rpx;flex-direction: column;">
							<view v-for="(item, index) in shopArray" :key="index" class="plsbuy-card-heng">
								<view class="card-flex">
									<!-- <view class="plsbuy-weight">供应商：</view> -->
									<view class="plsbuy-font-right">{{ item.name }}</view>
								</view>
								<view class="card-flex">
									<view class="plsbuy-right-weight">{{index?`销账数量`:`入库数量`}}</view>
									<view :class="item.change===1?`plsbuy-jian-target`:`plsbuy-jian`"
										@click="subtractNumber(item)">
										-</view>
									<view class="plsbuy-number" @click="openIndex(index,item.many)">{{ item.many }}</view>
									<view :class="item.change===2?`plsbuy-jia-target`:`plsbuy-jia`"
										@click="addNumber(item)">+
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="dash-font">
				说明:采购改量=入库数量+销账数量+挂账改量，其中挂账致量由平台自动计算得出;平含根据入库致量、"销账致量和挂账致量分别生成对应的入库单销账中、挂账单。
			</view> -->
			<view class="draw-title" style="margin-top: 35rpx;margin-bottom: 25rpx;">
				<view class="draw-flex">
					<view class="draw-title-gun"></view>
					<view class="draw-title-font">拣货拍照</view>
				</view>
			</view>
			<view class="down-note">
				<image class="down-note-img" style="margin-left: 40rpx;" src="/static/index/Warehousing/zuo.png" />
				<scroll-view scroll-x style="height: 100%;width: 950rpx;" :show-scrollbar="false">
					<view style="display: flex;">
						<view v-for="(item,index) in photoArray" :key="index">
							<image class="down-note-photo" :src="item" @click="openPhoto(index)" />
						</view>
					</view>

				</scroll-view>
				<image class="down-note-img" src="/static/index/Warehousing/you.png" />

			</view>
			<view class="button-card">
				<view class="swiper-button-white" @click="closeIt">
					取消
				</view>
				<view class="swiper-button-blue" @click="closeIt">
					确定
				</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', "closehexiao","closepickingdrawer","openCal"])
	const props = defineProps({
		backnumber:{
			type:Number
		}
	});
	watch(
	() => props.backnumber,
	() => {
		shopArray.value[saveIndex.value].many = props.backnumber
	})
	const postItems = ref(0);
	// const stateArray = ['已作废', '未确认', '已确认', '未完结', '待结账', '已结账'];
	// 初始化左侧菜单列表
	const buttonList = ref([
		{ url: '/static/index/Warehousing/sousuo.png', name: '查询' },
		{ url: '/static/index/Warehousing/chongzhi.png', name: '重置' },

	]);
	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 shopArray = ref([{
		name: "入库数量",
		many: 9999,
		change: 0
	},
	{
		name: "销账数量",
		many: 0,
		change: 0
	},
		// {
		// 	name: "挂账数量",
		// 	many: 0,
		// 	change: 0
		// },
	]);
	const saveIndex = ref(0)
	const openIndex = (index:number,number:number) =>{
		saveIndex.value = index;
		emit("openCal",number)
	}
	const closeIt = () =>{
		emit("closepickingdrawer")
	}
	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")
			}
		});
	};
	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 subtractNumber = (item) => {
		item.many && item.many--
		item.change = 1
		setTimeout(() => {
			item.change = 0
		}, 300)
	}
	const addNumber = (item) => {
		item.many < 9999 && item.many++
		item.change = 2
		setTimeout(() => {
			item.change = 0
		}, 300)
	}
	const calendarchange = (e : any) => {
		stateTarget.value = e.result
	}
	const opensuixing = () => {
		emit('opensuixing')
	}
	const closehexiao = () => {
		emit('closehexiao')
	}
	// 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-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;
		}
	}


	.swiper-card-once {
		margin: 0rpx 0 30rpx 30rpx;
		width: 1100rpx;
		height: 180rpx;
		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: 17rpx;
					font-size: 25rpx;
				}
			}
		}
	}

	.title-title {
		margin-top: 70rpx;
		margin-bottom: 40rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		// align-items: center;
		font-weight: 700;
		font-size: 35rpx;
	}

	.swiper-all-flex {
		display: flex;
		margin-top: 5rpx;
	}

	.color-father {
		display: flex;
		margin-left: 30rpx;
	}

	.color-weight {
		font-size: 40rpx;
		font-weight: 700;
		margin-bottom: 15rpx;
		margin-left: 50rpx;
	}

	.color-font {
		margin-left: 50rpx;
	}

	.color-pink {
		width: 300rpx;
		height: 180rpx;
		border-radius: 25rpx;
		box-shadow: 4rpx 8rpx 16rpx 4rpx #839fcc;
		background: linear-gradient(to bottom right, #eae7fa, #dadbf9);
		margin-left: 50rpx;
		display: flex;
		justify-content: center;
		// align-items: center;
		flex-direction: column;
	}

	.color-green {
		width: 300rpx;
		height: 180rpx;
		border-radius: 25rpx;
		box-shadow: 4rpx 8rpx 16rpx 4rpx #839fcc;
		background: linear-gradient(to bottom right, #bcf3f1, #9de9ee);
		margin-left: 50rpx;
		display: flex;
		justify-content: center;
		// align-items: center;
		flex-direction: column;
	}


	.color-red {
		width: 300rpx;
		height: 180rpx;
		border-radius: 25rpx;
		box-shadow: 4rpx 8rpx 16rpx 4rpx #839fcc;
		background: linear-gradient(to bottom right, #ffcccc, #ffccff);
		margin-left: 50rpx;
		display: flex;
		justify-content: center;
		// align-items: center;
		flex-direction: column;
	}

	.plsbuy-card-heng {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;

		.plsbuy-card-img {
			width: 40rpx;
			height: 40rpx;
			margin: 0 20rpx;
		}
	}

	.plsbuy-right-weight {
		font-weight: 700;
		font-size: 35rpx;
		// margin-left: 140rpx;
	}

	.plsbuy-font-right {
		font-size: 30rpx;
		line-height: 30rpx;
	}

	.plsbuy-jian {
		background-color: #D3E7FF;
		width: 70rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		margin-left: 30rpx;
		border: 1rpx solid #313A4E;
		font-size: 35rpx;
	}

	.plsbuy-jian-target {
		background: linear-gradient(to bottom, #00C9FF, #0076FF);
		color: #fff;
		width: 70rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		margin-left: 30rpx;
		border: 1rpx solid #fff;
		font-size: 35rpx;
	}

	.plsbuy-number {
		border: 1rpx solid #313A4E;
		// padding: 10rpx 20rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 700;
		margin: 0 10rpx;
		// margin: 0 20rpx;
		width: 90rpx;
		height: 70rpx;
	}

	.plsbuy-number-target {
		color: #0076FF;
		border: 1rpx solid #0076FF;
		// padding: 10rpx 20rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 700;
		margin: 0 10rpx;
		// margin: 0 20rpx;
		width: 90rpx;
		height: 70rpx;
	}

	.plsbuy-jia {
		background-color: #D3E7FF;
		width: 70rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		border: 1rpx solid #313A4E;
		font-size: 35rpx;
		margin-right: 5rpx;
	}

	.plsbuy-jia-target {
		background: linear-gradient(to bottom, #00C9FF, #0076FF);
		color: #fff;
		width: 70rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		border: 1rpx solid #fff;
		font-size: 35rpx;
		margin-right: 5rpx;
	}

	.card-flex {
		display: flex;
		align-items: center;
	}

	.plsbuy-number {
		border: 1rpx solid #313A4E;
		// padding: 10rpx 20rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 700;
		margin: 0 10rpx;
		// margin: 0 20rpx;
		width: 90rpx;
		height: 70rpx;
	}

	.dash-font {
		margin: 10rpx 30rpx;
		padding: 10rpx;
		width: 1100rpx;
		// height: 60rpx;
		border-style: dashed;
		/* 定义虚线 */
		border-width: 2px;
		/* 线宽 */
		border-color: #FF6657;
		border-radius: 15rpx;
		color: #FF6657;
	}

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

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

	.swiper-button-blue {
		background: linear-gradient(to bottom, #00C9FF, #0076FF);
		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: 35rpx;
	}
	.swiper-button-white {
		background: #fff;
		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: 35rpx;
	}
</style>