<template>
	<view>
		<view class="mengban" @click="emit('fill')" v-if="show"> </view>
		<view class="card" :class="show?'':'unclass'" :style="showbox?'z-index:220':'z-index:-2'">
			<view class="tit">物料详情</view>
			<view class="cont">
				<view class="leftbox">
					<view class="img">
						<image :src="objtake?.materialImg?serverUrl+objtake?.materialImg:'/static/index/procurement/k.png'" mode="aspectFill"/>
					</view>
					<view class="cardfa">
						<view>{{ objtake?.categoryId_dictText }}</view>
						<view>{{ objtake?.typeId_dictText }}</view>
						<view v-if="objtake?.medicationId_dictText">{{objtake?.medicationId_dictText}}</view>
					</view>
				</view>
				<view class="youcont">
					<view>{{objtake?.materialName}}</view>
					<view>
						<view>
							物料编码
							<text>{{objtake?.materialNo}}</text>
						</view>
						<view>
							规格型号
							<text style="white-space: nowrap;">{{objtake?.specificationModel}}</text>
						</view>
					</view>
					<view>
						<view>
							请领数量
							<text>{{wuobj.qlNum?wuobj.qlNum:'0'}}</text>
						</view>
						<view>
							请领单位
							<text>{{objtake?.materialUnits}}</text>
						</view>
						<view>
							累计请领
							<text>{{wuobj.wlNum?wuobj.wlNum:0}}</text>
						</view>
					</view>
					
				</view>
			</view>
			<view class="plsbuy-bottom">
				<view class="quxiao"  @click="emit('fill')">
					关闭
				</view>
				<!-- <view class="plsbuy-bottom-blue" @click="closeIt">
					确定
				</view> -->
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed, nextTick,  watch, reactive } from 'vue';
	import { queryMaterialInfo} from '../api/api.js'
	const props = defineProps({
		objtake: {
			type: Object,
			required: true 
		},
		show: {
			type: Boolean
		} 
	})
	const wuobj = ref({})
	const serverUrl = ref(uni.getStorageSync('serverUrl') + '/sys/common/static/')
	const emit = defineEmits([ 'fill' ,'qingling'])
	const showbox = ref(false)
	watch(()=>props.show,
		()=>{
			// console.log(`11111111111`,props.objtake)
			if(props.show==true){
				let obj = {
					nuId:uni.getStorageSync('nuId'),
					elderId:uni.getStorageSync('NUall').elderId,
					wlId:props.objtake.wlId
				}
				queryMaterialInfo(obj).then(res=>{
					console.log(`wuobj`,res)
					wuobj.value = res.result
				})
				setTimeout(()=>{
					showbox.value = true
				},50)
			}else{
				showbox.value = false
			}
		})
</script>

<style scoped lang="less">
	.plsbuy-bottom {
		width: 100%;
		margin-top: 3vw;
		height: 7vw;
		display: flex;
		justify-content: flex-end;
		font-size: 35rpx;
		padding-right: 3vw;
		view{
			display: flex;
			justify-content: center;
			align-items: center;
			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;
		}
		.quxiao{
			background: #EDEDEF;
			color: #888888;
		}
		.plsbuy-bottom-blue {
			background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
			border: 1px solid rgba(3,133,250,0.34);
			color: #0385FA;
		}
	}
	.card {
		width: 53vw;
		height: 29vw;
		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: 16vw;
		left: 23vw;
		z-index: 200;

		.cont {
			width: 100%;
			height: 14vw;
			padding: 0 3vw;
			display: flex;
			justify-content: flex-start;

			.leftbox {
				width: 14.2vw;
				height: 100%;
				border-right: 2px solid #E5E5E5;
				.cardfa {
					width: 100%;
					margin-top: 0.6vw;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					view {
						width: 6.5vw;
						height: 2vw;
						border-radius: 1vw;
						border: 1px solid #D2D2D2;
						font-weight: 400;
						font-size: 1.1vw;
						color: #555555;
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 0.25vw 0 0 0.3vw;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}
				.img{
					padding: 0.3vw;
					background: #f8f8f8;
					width: 10.2vw;
					height: 9.2vw;
					padding: 0.2vw;
					margin: 0.3vw auto;
					border-radius: 1.6vw;
					>image {
						width: 100%;
						height: 100%;
						margin: 0.3vw auto;
						display: block;
					}
				}
				
			}

			.youcont {
				width: 32vw;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				>view {
					padding: 0 1.8vw;
					&:nth-child(2),
					&:nth-child(3) {
						width: 100%;
						height: 3.6vw;
						display: flex;
						justify-content: flex-start;
						margin-top: 1.8vw;

						>view {
							width: 33.3%;
							font-weight: 400;
							font-size: 1.1vw;
							color: #888888;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

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

					&:nth-child(1) {
						width: 100%;
						height: 1.8vw;
						font-weight: bold;
						font-size: 1.6vw;
						color: #222222;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						line-height: 1.8vw;
					}
				}
			}
		}

		.tit {
			width: 100%;
			height: 6vw;
			line-height: 6vw;
			padding-left: 2.2vw;
			font-weight: 400;
			font-size: 1.6vw;
			color: #333333;
		}
	}
	.hei0 {
		height: 0 !important;
		view{
			height: 0 !important;
		}
	}
	.unclass {
		opacity: 0 !important;
	}
	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}
	.mengban{
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 20;
		top: 0;
		left: 0;
		background: RGBA(239, 240, 244, 0.55);
	}
</style>