<!-- 请购 -->
<template>
	<view class="draw-all">
		<view class="draw-contain">
			<!-- 解决margin重叠问题 -->
			<view class="index-right-height"></view>
			<view class="index-right-title">
				<view class="index-right-name">
					请购单号:
				</view>
				<input class="index-right-input" placeholder="请输入请购单号" />
				<view class="index-right-name">
					请购人:
				</view>
				<input class="index-right-input" placeholder="请输入请购人" />
				<view class="index-right-name">
					请购日期:
				</view>
				
				<view @click.stop="calendarShow=true">
					<view class="index-right-input" style="width: 300rpx;height: 66rpx;"
						:style="stateTarget?{}:{color:`#999`}">
						{{stateTarget ? stateTarget : `请输入请购日期`}}
					</view>
				</view>
				<u-calendar style="width: 40%;margin-left: 30%;" border-radius="40" v-model="calendarShow" mode="date"
					@change="calendarchange"></u-calendar>
				<view class="index-right-button-all">
					<view v-for="(item,index) in buttonList" :key="index">
						<view class="index-right-button">
							<image class="index-right-button-img" :src="item.url" />
							<view class="index-right-button-font">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="scroll-view">
				<scroll-view scroll-y style="height: 93%;margin-top: 2%;" :show-scrollbar="false">
					<view class="swiper-flex">
						<view v-for="(item,index) in [1,1,1,1,1,1,1,1,1,1,1,1,1]" :key="index">
							<view class="swiper-card">
								<!-- 卡片内容 -->
								<view class="swiper-card-top">
									<view class="swiper-card-top-card">
										<view class="swiper-card-top-card-weight">
											<view class="weight-left">
												<view class="">请购单号</view>
												<view class="blue-number">A0120250301001</view>
											</view>
											<view class="index-right-button-blue" @click="opendetail">
												详情
											</view>
										</view>
										<view class="swiper-card-top-card-noral">
											<view class="swiper-all-flex">
												<view class="swiper-gray">
													请购日期：
												</view>
												<view class="swiper-black">
													2025.03.01
												</view>
											</view>
											<view class="swiper-all-flex" style="width: 40%;">
												<view class="swiper-gray">
													请购人：
												</view>
												<view class="swiper-black">
													王法
												</view>
											</view>
										</view>
										
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-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 buttonList = ref([
		{ url: '/static/index/Warehousing/sousuo.png', name: '查询' },
		{ url: '/static/index/Warehousing/chongzhi.png', name: '重置' },
	
	]);
	const emit = defineEmits(['opendetail'])
	const calendarchange = (e : any) => {
		stateTarget.value = e.result
	}
	const opendetail = () =>{
		emit('opendetail')
	}
</script>

<style lang="less" scoped>
	// 抽屉的css
	.draw-all {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: url("/static/index/clearmountain.png") center/cover, rgba(255, 255, 255, 0.4);
		background-blend-mode: screen;
		isolation: isolate;
		border-top-left-radius: 80rpx;
		border-bottom-left-radius: 80rpx;
		overflow: hidden;

		.draw-flex {
			display: flex;
		}

		// position: relative;
		.draw-title {
			width: 100%;
			height: 140rpx;
			display: flex;
			justify-content: space-between;
			padding-top: 68rpx;

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

			.draw-title-font {
				font-size: 40rpx;
				font-weight: 700;
			}
		}

		.draw-contain {
			width: 100%;
			height: calc(100vh);
		}
	}

	.index-right-height {
		height: 80rpx;
	}

	.index-right-title {
		margin-left: 30rpx;
		width: calc(100% - 60rpx);
		height: 120rpx;
		background: linear-gradient(to right, #C4E0FD, #D5CDFF, #D9ECFF);
		border-radius: 35rpx;
		border: 2rpx solid #fff;
		display: flex;
		align-items: center;

		.index-right-name {
			margin-left: 20rpx;
			margin-right: 10rpx;
			color: #19233B;
			font-size: 30rpx;
		}

		.index-right-input {
			font-size: 27rpx;
			width: 240rpx;
			border: 2rpx #a0adc8 solid;
			padding: 15rpx 0 15rpx 20rpx;
			background-color: rgb(234, 243, 254);
			border-radius: 10rpx;
		}

		.index-right-button-all {
			height: 100%;
			margin-left: auto;
			display: flex;
			align-items: center;

			.index-right-button {
				height: 70rpx;
				background: linear-gradient(to right bottom, #00c9ff, #0076ff);
				color: #fff;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				border-radius: 10rpx;
				border: 1rpx solid #fff;
				margin-right: 10rpx;

				.index-right-button-img {
					width: 45rpx;
					height: 45rpx;
					margin: 0 5rpx 0 10rpx;
				}

				.index-right-button-font {
					margin-right: 20rpx;
				}
			}
		}
	}
	.scroll-view {
		margin-top: 20rpx;
		height: 1300rpx;
		width: calc(100% - 80rpx);
		margin-left: 40rpx;
		border-radius: 40rpx;
		border: 2rpx solid #fff;
		box-shadow: 4rpx 8rpx 16rpx 4rpx #839fcc;
		overflow: hidden;
	}
	.swiper-flex {
		display: flex;
		flex-wrap: wrap;
		margin-left: 0rpx;
	
		.swiper-card {
			margin: 0 0 30rpx 30rpx;
			width: 900rpx;
			height: 230rpx;
			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: 270rpx;
				display: flex;
	
				.swiper-card-top-card {
					// background-color: #fff;
					width: 100%;
					height: 100%;
					
					.swiper-card-top-card-weight {
						display: flex;
						justify-content: space-between;
						margin-top: 25rpx;
	
						.weight-left {
							// font-weight: 700;
							// font-size: 35rpx;
							.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 {
						display: flex;
						justify-content: space-between;
						margin-top: 35rpx;
					}
				}
			}
		}
	}
	.index-right-button-blue {
		height: 50rpx;
		width: 100rpx;
		background: linear-gradient(to right bottom, #00c9ff, #0076ff);
		color: #fff;
		// font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		border: 1rpx solid #fff;
		// margin-right: 10rpx;
	}
	.swiper-all-flex{
		display: flex;
	}
</style>