<template>
	<view class="container safe-area-inset-bottom" @click="onclick">
		<MessageNotification />
		<view class="imgs">
			<image class="img"
				:src="id==1?'https://p3.maiyaole.com/img/971/971752/org_org.jpg?v=1':'https://p2.maiyaole.com/img/item/202210/24/202210241042513.jpg'"
				mode=""></image>
			<text class="cf">{{drugDetailsList.is_otc=='0'?'处方药':'非处方药'}}</text>
		</view>

		<view class="card">
			<view class="name">
				{{id==1?'【日康】对乙酰氨基酚片0.3g*12片*2板/盒':'同仁堂 六味地黄丸(浓缩丸) 200丸/瓶'}}
			</view>
			<view class="info">
				<view class="price">￥{{id==1?'34':'22'}}</view>
				<!-- <text>已售:120件</text> -->
				<text>已售{{id==2?'100+':'100+'}}</text>
			</view>
			<view class="goods">药品说明</view>
			<view class="infos">功能主治:{{id==1?'清热解毒,咽喉肿痛,牙痛':'滋阴补肾。用于阴肾亏损，头晕耳鸣，腰膝酸软，骨蒸潮热，盗汗遗精'}}</view>
			<view class="infos">常见用法:口服。一次2支,一日3次;小儿酌减或遵医嘱。</view>
			<view class="infos">有效期:24个月</view>
			<view class="infos">贮存条件:密封,避光,置阴凉处</view>
		</view>

		<!-- 门店 -->
		<view class="card">
			<view class="store">
				<text>药房</text>
				萧康
			</view>
			<view class="store">
				<text>运费</text>
				运费3元·满30元包运费
			</view>
			<view class="store">
				<text>服务</text>
				正品保证 隐私发货 不支持无理由退款1
			</view>
		</view>

		<!-- 详情介绍 -->
		<view class="detail">
			<view class="tit">{{id==2?'清热解毒,咽喉肿痛,牙痛':'滋阴补肾。用于阴肾亏损，头晕耳鸣，腰膝酸软，骨蒸潮热，盗汗遗精'}}</view>
			<image
				:src="id==2?'https://p3.maiyaole.com/img/971/971752/org_org.jpg?v=1':'https://p2.maiyaole.com/img/item/202210/24/202210241042513.jpg'"
				mode=""></image>
		</view>

		<!-- 选择数量 -->
		<u-popup v-model="show" mode="bottom" border-radius="28" length="50%" :safe-area-inset-bottom="true"
			:closeable="true">
			<view class="popup">
				<view class="good">
					<image
						:src="id==2?'https://p3.maiyaole.com/img/971/971752/org_org.jpg?v=1':'https://p2.maiyaole.com/img/item/202210/24/202210241042513.jpg'"
						mode=""></image>
					<view class="good_">
						<text>1</text>
						<text class="price">34</text>
					</view>
				</view>

				<view class="good_num">
					<text>购买数量</text>
					<uni-number-box :min="0" :max="9" @change="changeValue()"></uni-number-box>
				</view>

				<view class="btn" @click="saveToCart()">
					保存
				</view>
			</view>
		</u-popup>


		<!-- 底部 -->
		<view class="footer">
			<view class="box">
				<image src="/static/shop/home.png" mode=""></image>
				<text>首页</text>
			</view>
			<view class="box" @click="toShop">
				<u-badge type="error" :count="gwcNum" size="mini" :offset="[0,16]"></u-badge>
				<image :src="gwcNum==0&&'/static/shop/gwc.png' || gwcNum>0&&'/static/shop/gwc_l.png'" mode=""></image>
				<text :class="gwcNum>0?'active':''">购物车</text>
			</view>
			<view class="to_btns" @click="toAdd(drugDetailsList.drug_store_relation.drug_id)">
				加入购物车
			</view>
			<view class="to_btn" @click="toPay">
				立即购买
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
			}
		},
		onLoad(e) {
			this.id = e.id
		},
		methods: {
			onclick() {
				uni.navigateBack({
					break: 2
				})
			}

		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 750rpx;
		max-height: 100%;
		min-height: 100vh;
		padding-bottom: env(safe-area-inset-bottom);
		background: #F5F5F5;

		.imgs {
			position: relative;

			.img {
				width: 100%;
				height: 564rpx;
				vertical-align: middle;
			}

			.cf {
				position: absolute;
				right: 20rpx;
				bottom: 0;
				display: inline-block;
				width: 100rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				border-radius: 8rpx;
				background: #D0E4FF;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #4175EE;
			}
		}

		.popup {
			padding: 76rpx 36rpx 0rpx;

			.good {
				width: 100%;
				height: 200rpx;
				display: flex;
				align-items: center;

				image {
					width: 180rpx;
					height: 180rpx;
					margin-right: 22rpx;
				}

				.good_ {
					flex: 1;
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #232323;
					display: flex;
					flex-direction: column;

					.price {
						font-size: 40rpx;
						color: #F93030;
						margin-top: 20rpx;
					}
				}
			}

			.good_num {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 70rpx 0;

				text {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #232323;
				}
			}

			.btn {
				margin: 0 auto;
				width: 528rpx;
				height: 86rpx;
				line-height: 80rpx;
				text-align: center;
				background: #1777FF;
				border-radius: 64rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.card {
			width: 750rpx;
			background: #FFFFFF;
			padding: 20rpx 40rpx;
			margin: 28rpx 0;
			background: #fff;

			.name {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #232323;
				line-height: 48rpx;
			}

			.info {
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				margin: 12rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 28rpx 0 32rpx;

				.price {
					font-size: 40rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #F93030;
					line-height: 36rpx;
				}

				text {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 36rpx;
				}

			}

			.goods {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 36rpx;
			}

			.infos {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #232323;
				line-height: 36rpx;
				margin: 10rpx 0;
			}


			.store {
				font-family: PingFang SC-Regular, PingFang SC;
				font-size: 24rpx;
				font-weight: 400;
				color: #232323;
				line-height: 36rpx;
				margin: 18rpx 0;

				text {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 36rpx;
					margin-right: 28rpx;
				}

			}
		}

		.detail {
			width: 750rpx;
			background: #FFFFFF;
			padding: 32rpx 40rpx;

			.tit {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #232323;
				line-height: 36rpx;
			}

			image {
				width: 670rpx;
				height: 184rpx;
			}
		}

		.footer {
			width: 750rpx;
			height: 104rpx;
			background: #fff;
			position: fixed;
			left: 0;
			bottom: env(safe-area-inset-bottom);
			display: flex;
			align-items: center;
			padding: 0 18rpx;

			.box {
				width: 100rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 84rpx;
				margin: 0rpx 8rpx;
				font-size: 22rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				position: relative;

				image {
					width: 63rpx;
					height: 88rpx;
				}

				.active {
					color: #4175EE;
				}
			}

			.to_btn {
				width: 240rpx;
				height: 76rpx;
				text-align: center;
				line-height: 74rpx;
				background: #4175EE;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;

			}

			.to_btns {
				width: 240rpx;
				height: 76rpx;
				line-height: 76rpx;
				text-align: center;
				background: #CBE0FF;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #4175EE;
				margin-right: 10rpx;
			}
		}
	}
</style>
