<template>
	<view class="container safe-area-inset-bottom">
		<MessageNotification />
		<!-- 收货地址 未添加地址 -->
		<view class="area" @click="toArea" v-if="addList.length==0">
			<view class="state">
				<text>收货地址</text>
				请添加收货人信息
			</view>
			<text class="iconfont icon-jiantou1"></text>
		</view>

		<!-- 收货地址 已添加地址 -->
		<view class="head" v-else @click="toArea">
			<view class="state"><text>收货地址</text></view>
			<view class="name">{{addList[0].name}} {{addList[0].mobile}}</view>
			<view class="choose_area">{{addList[0].region}}{{addList[0].detail_address}}</view>
		</view>

		<!-- 商品列表 -->
		<view class="card">
			<!-- 门店 -->
			<view class="store">
				<text class="iconfont icon-mendian"></text>
				{{ previewList.store_name }}
			</view>

			<!-- 商品 -->
			<!-- <u-checkbox-group @change="checkboxGroupChange"> -->
			<view class="list" v-for="item in previewList.data">
				<!-- <u-checkbox shape="circle" @change="checkboxChange(item)" v-model="item.checked"></u-checkbox> -->

				<view class="img">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="it">
					<view class="it_name">{{ item.drug_name }}</view>
					<view class="it_info">{{ item.drug_name.usage }}</view>
					<view class="it_price">
						<text>{{ item.drugstore_drug.price }}</text>
						<view class="it_num">
							<uni-number-box :min="0" @change="changeNum($event, item)" :value="item.qty" disabled>
							</uni-number-box>
						</view>
						<!-- 		<view class="it_num" v-if='qty'>
								<uni-number-box :min="0" @change="changeNum($event, item)" :value="qty" disabled>
								</uni-number-box>
							</view> -->
					</view>
				</view>
			</view>
			<!-- 	</u-checkbox-group> -->
			<!-- 数量 -->
			<view class="goods">
				<view class="good_">
					<text>商品总价</text>
					<text class="price">￥{{ totalPrice }}</text>
				</view>
				<view class="good_">
					<text>快递费</text>
					<text class="price">￥{{ Number(previewList.express_fee).toFixed(2) }}</text>
				</view>
				<view class="good_">
					<text>共{{totalCount}}件</text>
					<view class="total">
						合计:
						<!-- <text
							class="price">￥{{ (Number(totalPrice)+Number(previewList.express_fee==true?previewList.express_fee:'0')).toFixed(2) }}</text> -->
						<text class="price">￥{{previewList.fee_total.toFixed(2) }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 买家留言 -->
		<view class="b-row" @click="toNext">
			<text>买家留言</text>
			<view class="info">选填：填写内容已和商家协商</view>
		</view>

		<!-- 支付方式 -->
		<view class="b-row">
			<text>支付方式</text>
			<view class="info">
				<image src="/static/shop/qian.png" mode=""></image>
				微信
			</view>
		</view>

		<!-- 底部 -->
		<view class="footer">
			<text class="nums">共{{totalCount}}件</text>
			<view class="total">
				合计：
				<!-- <text
					class="price">￥{{(Number(totalPrice)+Number(previewList.is_free==true?previewList.express_fee:'0')).toFixed(2) }}</text> -->
				<text class="price">￥{{previewList.fee_total.toFixed(2) }}</text>

			</view>

			<view class="to_btn" @click="toPay">提交订单</view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import {
		OrderPreview,
		chooseAddress,
		PayList,
		getPayConfig,
		drugFee,
		addCart

	} from '../../request/api/api';
	export default {
		data() {
			return {
				isshow: false,
				allcheck: false,
				value: 1,
				numberValue: 0,
				vModelValue: 3,
				drug_id: '',
				drug_ids: [],
				cart_ids: [],
				numbers:[],
				previewList: {},
				addList: [],
				list: [{
					checked: true,
					disabled: false
				}],
				// numbers: '',
				order_id: '',
				base_express_fee: '', //基础运费,
				free_express_fee: '', //免运费门槛
				// qty:''
			};
		},
		onLoad(op) {
			console.log(op, 'op')
			// console.log(JSON.parse(op.list),'opopp')
			// this.listData=JSON.parse(op.list)
			this.drug_ids = op.id
			// this.qty=op.qty
			if (op.list) {
				this.drug_ids = JSON.parse(op.list).map(item => item.drug_id);
				this.cart_ids = JSON.parse(op.list).map(item => item.id);
				this.numbers = JSON.parse(op.list).map(item => item.numbers);
				this.getOrderPreviewTopay()
			}
			this.getOrderPreview();




			// this.getPay()
		},
		onShow() {
			// uni.$on('addressList', function(data) {
			// 	// console.log('监听到事件来自返回的参数：' + data);
			// 	this.addList=data
			// 	this.isshow=true
			// 	console.log(this.addList);
			// });
			this.getDrugFee()
			this.addList = uni.getStorageSync('addList')
			this.isshow = true
		},
		computed: {
			//全部价格
			totalPrice: function() {
				var totalPrice = 0;
				// console.log(this.previewList.data)
				if (!this.previewList.data) {
					return totalPrice.toFixed(2);
				}
				// for (var i = 0; i < this.previewList.data.filter(item => item.checked).length; i++) {
				// 	totalPrice += this.previewList.data[i].drugstore_drug.price * this.previewList.data[i].qty;
				// }
				for (var i = 0; i < this.previewList.data.length; i++) {
					totalPrice += this.previewList.data[i].drugstore_drug.price * this.previewList.data[i].qty;
				}
				return totalPrice.toFixed(2);
			},
			//全部件数

			totalCount: function() {
				var totalCount = 0;

				if (!this.previewList.data) {
					return totalCount;
				}
				for (var i = 0; i < this.previewList.data.length; i++) {
					totalCount += this.previewList.data[i].qty;
				}
				return totalCount;
			}
		},
		methods: {
			changeValue(value) {
				console.log('返回数值：', value);
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(item) {
				console.log(item);
				// 	item.checked = !item.checked
				// 	if (this.cartLists.valid.filter(e => !e.checked).length) {
				// 		this.checked = false

				// 	} else {
				// 		this.checked = true
				// 	}
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				// console.log(e);
			},
			// 添加地址
			toArea() {
				uni.getStorageSync('addList')
				uni.navigateTo({
					url: '/subPackages/setup/area-list?type=' + 1
				});
			},
			// 支付
			toPay() {
				// uni.navigateTo({
				// 	url: '/subPackages/shop/paied?id='
				// });
				this.getPay()
			},
			// 买家留言
			toNext() {
				uni.navigateTo({
					url: '/subPackages/shop/written?id='
				});
			},
			//加减法
			changeNum(e, current) {
				console.log(e, current);
				this.previewList.data.forEach(item => {
					if (item.id == current.id) {
						item.qty = e;
					}
				});
			
				console.log(e, 77);
				this.numbers = e
				
				// this.previewList.data.qty=value
				// this.cartLists.valid[1].qty=value
			},
			//请求
			getOrderPreview() {
				OrderPreview({
					method: 'post',
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
						drug_ids: [...this.drug_ids],
						cart_ids: [...this.cart_ids],
						numbers:[...this.numbers]
					}
				}).then(res => {
					// console.log(res, 'list');
					if (res.data.code == 0) {
						console.log(res.data.data);
						this.previewList = res.data.data;
						this.numbers = this.previewList.data.map(item => item.qty)
					}
				}).catch(err => console.log(err, 'err'));
			},


			//立即购买
			getOrderPreviewTopay() {
				OrderPreview({
					method: 'post',
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
						drug_ids: this.drug_id,
						cart_ids: ''
					}
				}).then(res => {
					// console.log(res, 'list');
					if (res.data.code == 0) {
						this.previewList = res.data.data;
						this.numbers = this.previewList.data.map(item => item.qty)
						console.log(res.data.data);

					}
				});
			},
			// drugFee
			getDrugFee() {
				drugFee({
					method: 'post',
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
					}
				}).then(res => {
					// console.log(res, 'list');
					if (res.data.code == 0) {
						console.log(res.data);
						this.base_express_fee = res.data.data.base_express_fee
						this.free_express_fee = res.data.data.free_express_fee
					}
				});
			},
			

			getPay() {
				PayList({
					method: 'post',
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
						drug_ids: [...this.drug_ids],
						cart_ids: [...this.cart_ids],
						address_id: this.addList[0].id,
						numbers:[...this.numbers]

					}
				}).then(res => {
					// console.log(res, 'list');
					if (res.data.code == 0) {
						console.log(res.data.data.order_no);
						this.order_id = res.data.data.order_id
						uni.setStorageSync('order_no', res.data.data.order_no)
						this.getPayConfig()
						// this.previewList = res.data.data;
					}
				});
			},
			getPayConfig() {
				getPayConfig({
					method: 'post',
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
						order_id: this.order_id
					}
				}).then(res => {
					console.log(res, 'list');
					if (res.data.code == 0) {
						// console.log(res.data.data.order_no);
						console.log(res.data.data.appId);




						uni.requestPayment({
							// provider: 'wxpay',
							appId: res.data.data.appId,
							timeStamp: res.data.data.timeStamp,
							nonceStr: res.data.data.nonceStr,
							package: res.data.data.package,
							signType: res.data.data.signType,
							paySign: res.data.data.paySign,
							success: (res) => {
								console.log('success:' + JSON.stringify(res));
								setTimeout(() => {

									uni.navigateTo({
										url: '/subPackages/shop/paied'
									})
									uni.hideLoading();
								}, 300)
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								// console.log(res.data.data.timestamp,666)
								uni.showToast({
									title: '支付失败',
									duration: 1500,
									mask: false,
									icon: 'error'
								})
							}
						})






						// let data = JSON.parse(res.data.data)
						// let appId = data.appId;
						// let timeStamp = data.timeStamp;
						// let nonceStr = data.nonceStr;
						// let packageX = data.package;
						// let signType = data.signType;
						// let paySign = data.paySign;



						// uni.requestPayment({
						// 	provider: 'wxpay', //支付类型
						// 	appId: appId, //小程序Appid
						// 	timeStamp: timeStamp, //创建订单时间戳
						// 	nonceStr: nonceStr,
						// 	package: packageX, // 订单包
						// 	signType: signType, // 加密方式统一'MD5'
						// 	paySign: paySign,
						// 	success: function(res) {
						// 		console.log('支付成功', res);
						// 		// 业务逻辑。。。
						// 	},
						// 	fail: function(err) {
						// 		console.log('支付失败', err);
						// 	}
						// });




					}
				});
			}
		}
	};
</script>

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

		.area {
			width: 750rpx;
			height: 168rpx;
			margin: 20rpx auto;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx;

			.state {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #232323;
				line-height: 0rpx;

				text {
					display: inline-block;
					width: 116rpx;
					height: 38rpx;
					line-height: 36rpx;
					text-align: center;
					background: #1777ff;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					font-size: 20rpx;
					color: #ffffff;
					margin-right: 14rpx;
				}
			}

			.iconfont {
				font-size: 32rpx;
			}
		}

		.head {
			width: 750rpx;
			height: 168rpx;
			margin: 20rpx auto;
			background: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 0 40rpx;

			.state {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #232323;
				line-height: 0rpx;

				text {
					display: inline-block;
					width: 116rpx;
					height: 38rpx;
					line-height: 38rpx;
					text-align: center;
					background: #1777ff;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					font-size: 20rpx;
					color: #ffffff;
					margin-right: 14rpx;
				}
			}

			.name {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #232323;
				margin: 10rpx 0;
			}

			.choose_area {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #232323;
			}
		}

		.card {
			width: 750rpx;
			margin: 0 auto;
			padding: 20rpx 12rpx 20rpx 20rpx;
			background: #ffffff;

			.store {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 500;
				color: #232323;
				margin-left: 20rpx;

				.iconfont {
					font-size: 39rpx;
					color: #666666;
					vertical-align: middle;
					margin-right: 10rpx;
				}
			}

			.list {
				display: flex;
				justify-content: space-around;
				width: 100%;
				height: 254rpx;
				display: flex;
				align-items: center;

				.checkbox {
					width: 44rpx;
					height: 44rpx;
					background: #1777ff;
					border-radius: 50%;
				}

				.img {
					width: 200rpx;
					height: 200rpx;
					margin-right: 10rpx;

					image {
						width: 200rpx;
						height: 200rpx;
						border-radius: 8rpx;
					}
				}

				.it {
					flex: 1;
					padding: 16rpx 10rpx;
					font-family: PingFang SC-Bold, PingFang SC;

					.it_name {
						font-size: 28rpx;
						font-weight: bold;
						color: #232323;
					}

					.it_info {
						font-size: 24rpx;
						font-weight: 400;
						color: #666666;
						margin: 20rpx 0 48rpx 10rpx;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.it_price {
						display: flex;
						align-items: center;
						justify-content: space-between;

						text {
							font-size: 28rpx;
							font-weight: 400;
							color: #232323;
						}
					}
				}
			}

			.goods {
				margin-top: 20rpx;
				padding: 0 30rpx;

				.good_ {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 88rpx;

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

					.total {
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;

						.price {
							font-size: 34rpx;
							font-weight: 500;
						}
					}

					.price {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}
			}
		}

		.b-row {
			width: 750rpx;
			height: 120rpx;
			margin: 20rpx auto;
			padding: 0 40rpx;
			background: #ffffff;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #232323;
			}

			.info {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;

				image {
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;
					margin-right: 10rpx;
				}
			}
		}

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

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

			.total {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #232323;
				margin: 0 16rpx;

				.price {
					font-size: 36rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #4175ee;
				}
			}

			.to_btn {
				width: 196rpx;
				height: 64rpx;
				border-radius: 64rpx;
				text-align: center;
				line-height: 62rpx;
				background: #4175ee;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
			}
		}
	}
</style>
