<template>
	<view class="popup-detail-left">
		<view class="popup-detail-left-white">
			<image class="popup-detail-left-white-img" :src="`/static/index/project3.png`" />
		</view>
		<view class="popup-detail-left-bottom">
			<view class="popup-small-card">
				<view class="popup-small-circle">
					<image class="popup-small-circle-img" src="/static/index/saveUp.png" />
				</view>
				<view class="popup-small-number">1000</view>
				<view class="popup-small-font">库存上限</view>
			</view>
			<view class="popup-small-shu"></view>
			<view class="popup-small-card">
				<view class="popup-small-circle">
					<image class="popup-small-circle-img" src="/static/index/saveDown.png" />
				</view>
				<view class="popup-small-number">10</view>
				<view class="popup-small-font">库存下限</view>
			</view>
			<view class="popup-small-shu"></view>
			<view class="popup-small-card">
				<view class="popup-small-circle">
					<image class="popup-small-circle-img" src="/static/index/saveNumber.png" />
				</view>
				<view class="popup-small-number">50</view>
				<view class="popup-small-font">库存数量</view>
			</view>
		</view>
	</view>
	<view class="popup-detail-right">
		<view class="popup-detail-title">
			<view class="popup-detail-weight">
				纸尿裤-拉拉裤
			</view>
			<view class="popup-detail-gray">
				ZHYP044
			</view>
		</view>
		<view class="popup-weight">
			物料分类
		</view>
		<view class="popup-right-father">
			<view class="popup-right-font-contain">
				<view class="popup-font-left">
					物料类别：
				</view>
				<view class="popup-font-right">
					生活用品
				</view>
			</view>
			<view class="popup-right-font-contain">
				<view class="popup-font-left">
					物料类型：
				</view>
				<view class="popup-font-right">
					照护用品
				</view>
			</view>
			<view class="popup-right-font-contain">
				<view class="popup-font-left">
					物料类别：
				</view>
				<view class="popup-font-right">
					-
				</view>
			</view>
		</view>
		<view class="popup-weight">
			物料信息
		</view>
		<view class="popup-right-father">
			<view class="popup-right-font-contain">
				<view class="popup-font-left">
					物料品牌：
				</view>
				<view class="popup-font-right">
					洁奴
				</view>
			</view>
			<view class="popup-right-font-contain">
				<view class="popup-font-left">
					采购单位：
				</view>
				<view class="popup-font-right">
					片
				</view>
			</view>

			<view class="popup-right-font-contain">
				<view class="popup-font-left">
					参考单价：
				</view>
				<view class="popup-font-right">
					1.175
				</view>
			</view>
			<view class="popup-right-font-contain">
				<view class="popup-font-left">
					采购单价：
				</view>
				<view class="popup-font-right">
					2
				</view>
			</view>
			<view class="popup-right-font-contain" style="width: 100%;">
				<view class="popup-font-left">
					规格型号：
				</view>
				<view class="popup-font-right">
					800mm*690mm
				</view>
			</view>
			<view class="popup-right-font-contain" style="width: 100%;">
				<view class="popup-font-left">
					供 应 商 ：
				</view>
				<view class="popup-font-right">
					山东恒发卫生用品有限公司
				</view>
			</view>
		</view>
		<view class="popup-weight">
			优惠信息
		</view>
		<view class="popup-right-father">
			<view class="popup-right-font-contain">
				<view class="popup-font-left">
					医保报销：
				</view>
				<view class="popup-font-right">
					是
				</view>
			</view>
			<view class="popup-right-font-contain">
				<view class="popup-font-left">
					机构优惠：
				</view>
				<view class="popup-font-right">
					否
				</view>
			</view>

		</view>
		<view class="swiper-left-buttons-big">
			<view class="swiper-left-button-blue" @click="buttonclick(`qinggou`)" >
				请购
			</view>
			<view class="swiper-left-button" @click="buttonclick(`churuku`)" >
				出入库
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		onMounted,
		onBeforeUnmount,
		computed,
		nextTick,
		defineProps,
		watch
	} from 'vue';
	const emit = defineEmits(["qinggou","churuku"])
	const buttonclick = (res:any) =>{
		emit(res)
	}
</script>

<style lang="less" scoped>
	.popup-detail-left {
		height: 100%;
		width: 45%;

		.popup-detail-left-white {
			margin: 50rpx 0 0rpx 50rpx;
			width: 600rpx;
			height: 600rpx;
			// background-color: #fff;
			background-color: rgba(255, 255, 255, 0.3);
			display: flex;
			border-radius: 30rpx;
			justify-content: center;
			align-items: center;
			box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, 0.1);

			.popup-detail-left-white-img {
				width: 550rpx;
				height: 550rpx;
			}
		}

		.popup-detail-left-bottom {
			width: calc(100% - 70rpx);
			margin-left: 70rpx;
			height: 230rpx;
			display: flex;
		}
	}

	.popup-detail-right {
		height: 100%;
		width: 55%;
		padding: 0 50rpx;

		.popup-detail-title {
			margin-top: 70rpx;
			display: flex;
			justify-content: space-between;

			.popup-detail-weight {
				font-size: 45rpx;
				font-weight: 700;
			}

			.popup-detail-gray {
				padding: 10rpx 30rpx;
				background-color: #ceddff;
				border-radius: 30rpx;
			}
		}
	}

	.popup-small-card {
		width: 33%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.popup-small-circle {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			border: 3rpx solid #0FA2FF;
			display: flex;
			justify-content: center;
			align-items: center;

			.popup-small-circle-img {
				width: 30rpx;
				height: 30rpx;
				margin-top: -3rpx;
			}
		}

		.popup-small-number {
			color: #596278;
			font-weight: 700;
			font-size: 35rpx;
			margin-top: 10rpx;
		}

		.popup-small-font {
			color: #596278;
			font-size: 20rpx;
			margin-top: 5rpx;
		}
	}

	.popup-small-shu {
		width: 2rpx;
		height: 140rpx;
		margin-top: 50rpx;
		background-color: rgba(255, 255, 255, 0.4);
	}

	.popup-weight {
		font-size: 35rpx;
		font-weight: 700;
		margin: 15rpx 0;
	}

	.popup-right-father {
		display: flex;
		flex-wrap: wrap;

		.popup-right-font-contain {
			display: flex;
			width: 50%;
			margin-bottom: 10rpx;

			.popup-font-left {
				font-size: 32rpx;
			}

			.popup-font-right {
				font-size: 32rpx;
				color: #646464;
			}
		}

	}
	.swiper-left-buttons-big {
		display: flex;
		margin-top: 30rpx;
		font-size: 30rpx;
	
		.swiper-left-button {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 230rpx;
			height: 80rpx;
			border-radius: 20rpx;
			background: linear-gradient(to bottom, #D5E0F8, #ECF6FF);
			border: 1rpx #fff solid;
			color: #364464;
			box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);
		}
	
		.swiper-left-button-blue {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 230rpx;
			height: 80rpx;
			border-radius: 20rpx;
			background: linear-gradient(to right bottom, #00c9ff, #0076ff);
			color: #fff;
			border: 1rpx #fff solid;
			margin-right: 20rpx;
			box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);
		}
	}
</style>