<template>
	<view class="container safe-area-inset-bottom">
		<MessageNotification />
		<view class="imgs">
			<image class="img" :src="drugDetailsList.image" mode=""></image>
			<text class="cf">{{drugDetailsList.is_otc=='0'?'处方药':'非处方药'}}</text>
		</view>

		<view class="card">
			<view class="name">
				{{drugDetailsList.drug_name}}
			</view>
			<view class="info">
				<view class="price">￥{{drugDetailsList.drugstore_drug.price}}</view>
				<!-- <text>已售:120件</text> -->
				<text>已售{{drugDetailsList.drugstore_drug.stock}}</text>
			</view>
			<view class="goods">药品说明</view>
			<!-- <view class="infos">功能主治:外感风热所致的感冒,症见发热,咳嗽,咽痛。</view>
			<view class="infos">常见用法:口服。一次2支,一日3次;小儿酌减或遵医嘱。</view>
			<view class="infos">有效期:24个月</view>
			<view class="infos">贮存条件:密封,避光,置阴凉处</view> -->
			<view class="infos">
				{{drugDetailsList.info}}
			</view>
		</view>

		<!-- 门店 -->
		<view class="card">
			<view class="store">
				<text>药房</text>
				{{drugDetailsList.drug_store_relation.store.name}}
			</view>
			<view class="store">
				<text>运费</text>
				运费{{drugFee.data.base_express_fee}}元·满{{drugFee.data.free_express_fee}}元包运费
			</view>
			<view class="store">
				<text>服务</text>
				正品保证 隐私发货 不支持无理由退款1
			</view>
		</view>

		<!-- 详情介绍 -->
		<view class="detail">
			<view class="tit">{{drugDetailsList.content}}</view>
			<image src="/static/empty/yhq.png" 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="drugDetailsList.image" mode=""></image>
					<view class="good_">
						<text>{{drugDetailsList.drug_name}}</text>
						<text class="price">{{drugDetailsList.drugstore_drug.price}}</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(drugDetailsList.drug_store_relation.drug_id)">
				立即购买
			</view>
		</view>

	</view>
</template>

<script>
	import {
		vShow
	} from "vue"
	import {
		drugFee,
		drugDetails,
		addCart
	
	} from '../../request/api/api'
	export default {
		data() {
			return {
				id:'',
				gwcNum: 1,
				show: false,
				drugDetailsList:{},
				drugFee:{},
				drug_id:'',
				qty:1
			}
		},
		onLoad(op) {
			this.id=op.id
		},
		methods: {
			
			toShop() {
				uni.navigateTo({
					url: '/subPackages/shop/shop-cate?id='
				})
			},
			toAdd(e) {
				this.show = true
				this.drug_id=e
			},
			toPay(e) {
				// this.show = true

				if (this.show == false) {
					uni.navigateTo({
						url: '/subPackages/shop/shop-pay?id='+e
					})
				}
			},
			
			changeValue(value) {
				this.qty=value
				// console.log('返回数值：', value);
			},
			//保存到购物车
			saveToCart(){
				this.show=false
				this.addToCart()
			},
			//请求药品详情数据
			getDrugDetailList() {
					drugDetails({
						method: "post",
						data: {
							store_id: uni.getStorageSync('store_id') || '11001',
							id:this.id
						}
					}).then((res) => {
						// console.log(res, 'list');
						if (res.data.code == 0){
							this.drugDetailsList=res.data.data
							console.log(res.data)
						}
					
					})
				},
				//药品运费
				getDrugfee() {
						drugFee({
							method: "post",
							data: {
								store_id: uni.getStorageSync('store_id') || '11001',
								// id:this.id
							}
						}).then((res) => {
							// console.log(res, 'list');
							if (res.data.code == 0){
								this.drugFee=res.data
								// console.log(res.data)
							}
						
						})
					},
					//加入购物车
					addToCart() {
							addCart({
								method: "post",
								data: {
									store_id: uni.getStorageSync('store_id') || '11001',
									drug_id:this.drug_id,
									change_qty:this.qty
									// id:this.id
								}
							}).then((res) => {
								// console.log(res, 'list');
								if (res.data.code == 0){
									console.log(res);
									
								}
							
							})
						},
						
					
		},
		mounted() {
		this.getDrugDetailList()
		this.getDrugfee()
		}
	}
</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>
