<template>
	<view>
		<view class="mengban" @click="emit('fill')" v-if="show"> </view>
		<view class="qinglingdetails" :class="show?'':'unclass'" :style="showbox?'z-index:220':'z-index:-2'">
			<view class="tit">
				<view>退货详情</view>
			</view>
			<view class="itemcan">
				<text>退货区域:{{ uni.getStorageSync('nuName')}}</text>
				<text>退货人:{{uni.getStorageSync('realname')}}</text>
				<text>退货日期:{{times}}</text>
			</view>
			<view class="qlwl">
				退货物料
			</view>
			<scroll-view scroll-y="true" class="wuliaolist">
				<view class="list">
					<view class="card" v-for="(v,i) in list" :key='i'>
						<view class="speitem guodu">
							<image
								:src="v.materialInfo?.materialImg?serverUrl+v.materialInfo?.materialImg:'/static/index/procurement/k.png'"
								mode="aspectFill">
							</image>
							<view class="cardp">
								<view v-if="v.materialInfo?.categoryName">{{v.materialInfo?.categoryName}}</view>
								<view v-if="v.materialInfo?.typeName">{{v.materialInfo?.typeName}}</view>
							</view>
						</view>
						<view class="msitem guodu">
							<view>
								<view>{{v.materialInfo?.materialName}}</view>
							</view>
							<view>
								<text style="white-space: nowrap;"> 规格型号: </text>
								<view>{{v.materialInfo?.specificationModel}}</view>
							</view>
							<view>
								<view>
									<text>{{v.thNum?v.thNum:'--'}}</text>
									<text>退货数量</text>
								</view>
								<view>
									<text>{{v.materialInfo?.materialUnits}}</text>
									<text>退货单位</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="plsbuy-bottom">
				<view class="quxiao" @click="emit('fill')">
					取消
				</view>
				<view class="plsbuy-bottom-blue" @click="emit('config')">
					入库退货单
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
	import defaultr from '../components/default.vue'
	const props = defineProps({
		list: {
			type: Array,
			required: true
		},
		show: {
			type: Boolean
		},
		thdt: {
			type: Object
		}
	})
	const times = ref('')
	onMounted(() => {
		const now = new Date();
		const year = now.getFullYear();
		const month = String(now.getMonth() + 1).padStart(2, '0');
		const day = String(now.getDate()).padStart(2, '0');
		times.value = `${year}.${month}.${day}`;


	})
	const wuobj = ref({})
	const serverUrl = ref(uni.getStorageSync('serverUrl') + '/sys/common/static/')
	const emit = defineEmits(['fill', 'submit', 'config'])
	const showbox = ref(false)
	watch(() => props.show,
		() => {
			console.log(props.list)
			if (props.show == true) {

				setTimeout(() => {
					showbox.value = true
				}, 50)
			} else {
				showbox.value = false;
			}
		})
</script>

<style scoped lang="less">
	.qinglingdetails {
		width: 60vw;
		height: 49vw;
		background: rgba(255, 255, 255, 0.98);
		box-shadow: 0rpx 0rpx 1.3vw 0rpx rgba(163, 167, 182, 0.16);
		border-radius: 1.6vw;
		position: fixed;
		top: 8vw;
		left: 20vw;
		z-index: 200;
		padding: 1vw 2vw;

		.wuliaolist {
			width: 100%;
			height: 27vw;

			.list {
				width: 100%;
				height: 100%;
				display: grid;
				grid-template-columns: 1fr 1fr;
				padding-left: 0.6vw;

				.card {
					width: 27.5vw;
					height: 13vw;
					background: rgba(247, 247, 247, 0.5);
					border-radius: 1.1vw;
					position: relative;
					overflow: hidden;
					margin-bottom: 1.1vw;
					padding: 1vw;

					.msitem {
						width: 11.5vw;
						height: 100%;
						position: absolute;
						top: 0;
						left: 10vw;

						>view {
							margin-top: 0.25vw;

							&:nth-child(3) {
								width: 100%;
								height: 3.4vw;
								display: flex;
								justify-content: space-between;

								>view {
									width: 50%;
									height: 100%;
									display: flex;
									flex-direction: column;
									position: relative;
									margin-top: 1vw;
									white-space: nowrap;

									&:nth-child(1) {
										padding-right: 1.7vw;
										align-items: flex-start;
									}

									&:nth-child(2) {
										padding-left: 1.7vw;
										align-items: flex-start;
									}

									&:nth-child(1)::after {
										content: '';
										position: absolute;
										right: 0;
										width: 100%;
										height: 2.2vw;
										border-right: 1px solid #C9C9C9;
										top: 0.6vw;
									}

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

										&:nth-child(2) {
											font-weight: 400;
											font-size: 1.1vw;
											color: #999999;
											white-space: nowrap;
										}
									}
								}
							}

							&:nth-child(2) {
								display: flex;
								justify-content: space-between;
								flex-direction: column;
								margin-top: 0.1vw;

								view {
									font-size: 1.4vw;
									color: #888888;
									text-overflow: ellipsis;
									overflow: hidden;
									white-space: nowrap;
								}

								text {
									font-weight: 400;
									font-size: 1.1vw;
									color: #777777;
									margin-top: 0.25vw;
								}
							}

							&:nth-child(1) {
								view {
									display: inline-block;
									width: 10vw;
									font-weight: bold;
									font-size: 1.6vw;
									color: #222222;
									height: 3.1vw;
									padding-top: 1.3vw;
									text-overflow: ellipsis;
									overflow: hidden;
									white-space: nowrap;
								}
							}
						}
					}

					.speitem {
						width: 10vw;
						height: 100%;
						display: inline-flex;
						flex-direction: column;
						position: absolute;
						top: 0;
						left: 0;

						.cardp {
							width: 8vw;
							height: 4vw;
							display: flex;
							margin: 0 auto;
							align-items: center;
							justify-content: center;
							flex-direction: column;

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

						>image {
							width: 8.5vw;
							height: 7.5vw;
							margin: 0.7vw auto 0.25vw;
						}
					}
				}
			}
		}

		.qlwl {
			width: 100%;
			height: 3vw;
			font-weight: 400;
			font-size: 1.4vw;
			color: #555555;
		}

		.itemcan {
			width: 100%;
			height: 6.6vw;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				font-weight: 400;
				font-size: 1.4vw;
				color: #888888;
			}
		}

		.tit {
			width: 100%;
			height: 3.5vw;
			line-height: 6vw;
			font-weight: 400;
			font-size: 1.6vw;
			color: #333333;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #E5E5E5;
		}
	}

	.mengban {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 20;
		top: 0;
		left: 0;
		background: RGBA(239, 240, 244, 0.55);
	}

	.hei0 {
		height: 0 !important;

		view {
			height: 0 !important;
		}
	}

	.unclass {
		opacity: 0 !important;
	}

	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}

	.plsbuy-bottom {
		width: 100%;
		margin-top: 2vw;
		height: 7vw;
		display: flex;
		justify-content: flex-end;
		font-size: 35rpx;
		padding-right: 1vw;

		view {
			display: flex;
			justify-content: center;
			align-items: center;
			min-width: 9.1vw;
			height: 3.8vw;
			color: rgba(92, 121, 146, 1);
			border-radius: 1.9vw;
			font-size: 1.8vw;
			border: 1px solid #EDEDEF;
			margin-left: 1vw;
			padding: 0 2vw;
		}

		.quxiao {
			background: #EDEDEF;
			color: #999999;
		}

		.plsbuy-bottom-blue {
			background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
			border: 1px solid rgba(3, 133, 250, 0.34);
			color: #0385FA;
		}
	}
</style>