<template>
	<view class="co">
		<view class="safe_box">
			<view>
				<text class="iconfont iconxuanzhong"></text>
				<text>支付安全有保障</text>
			</view>
			<view style="margin-top:20rpx;">
				<text class="iconfont iconxuanzhong"></text>
				<text>90天-366天不满意全额退款</text>
			</view>
			<view style="margin-top:20rpx;">
				<text class="iconfont iconxuanzhong"></text>
				<text>一次性购买满2套,在本店终身享受VIP价格</text>
			</view>
		</view>
		<view class="co_address flexB" @click="addressList">
			<view class="flexS">
				<text class="iconfont icondizhi1"></text>
				<text class="gray" v-if="!address && !defaultAds">添加地址信息</text>
				<view class="ads_info" v-else>
					<view class="shop_info">
						<text>{{ address ? address.name : defaultAds.name }}</text>
						<text v-if="address" class="area_code">{{ address&&address.area_code==='+86'?'':
							address.area_code }}</text>
						<text v-else class="area_code">{{ defaultAds&&defaultAds.area_code==='+86'?'':
							defaultAds.area_code}}</text>
						<text>{{ address ? address.phone : defaultAds.phone }}</text>
					</view>
					<view class="C_B">
						{{ address ? address.province : defaultAds.province }}
						{{ address ? address.city : defaultAds.city }} {{ address ? address.area : defaultAds.area }}
						{{ address ? address.address : defaultAds.address }}
					</view>
				</view>
			</view>
			<text class="iconfont iconiconfontjiantou2"></text>
		</view>
		<view class="order_detail">
			<view class="user_info flexS">
				<text>客户：</text>
				<text v-if="userInfo.nickname != userInfo.phone">{{ userInfo.nickname }}</text>
				<text>{{ userInfo.phone }}</text>
			</view>
			<view v-for="item in orderCon" :key="item.id" class="order_con">
				<view class="goods_con flexS">
					<image :src="item.img" class="goods_img"></image>
					<view>
						<text class="goods_name">{{ item.name }}</text>
						<view class="price_box">
							<view class="goods_price flexS" v-if="isVip == 1">
								<view class="flexS">
									<view class="vip_ident">VIP</view>
									<text class="vip_active">
										<text class="symbol">¥</text>
										<text>{{ item.vip_price }}</text>
									</text>
								</view>
								<view class="draw_off">
									<text>（</text>
									<text class="old_price">
										<text>¥</text>
										<text>{{ item.price }}</text>
									</text>
									<text>）</text>
								</view>
							</view>
							<view class="goods_price flexS" v-else>
								<text class="big_price">
									<text>¥</text>
									<text>{{ item.price }}</text>
								</text>
								<view class="save_box">VIP可省{{ Number(item.price) - Number(item.vip_price) || 0 }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="goods_info" v-for="temp in item.sku" :key="temp.id">
					<view class="flexB">
						<view>
							<text class="gray">款式：</text>
							<text>{{ temp.type }}</text>
						</view>
						<text>{{ isVip == 1 ? item.vip_price * temp.new_num : item.price * temp.new_num }}元</text>
					</view>
					<view class="flexB">
						<view>
							<text class="gray">尺码：</text>
							<text>{{ temp.size }}</text>
						</view>
						<text>X {{ temp.new_num }}套</text>
					</view>
				</view>
				<view class="goods_total flexE">
					<text class="gray">共{{ subNum(item) }}套，</text>
					<view class="price_box">
						<view class="goods_price flexS">
							<view class="flexS">
								<text>小计：</text>
								<text class="big_price">
									<text>¥</text>
									<text>{{ subtotal(item) }}</text>
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="remark">
				<view class="remark_title">订单备注</view>
				<view class="remark_box">
					<textarea placeholder="可将收货人姓名、电话和地址备注在这里" placeholder-class="place" v-model="remark" auto-height
						maxlength="240" />
				</view>
			</view>
		</view>
		<view class="fixed_box">
			<view class="all">
				<text class="gray">共{{ totalNum }}套，</text>
				<text>合计：</text>
				<text class="big_price">
					<text>￥</text>
					<text style="font-size:60rpx;">{{ isVip == 1 ? vipPrice : totalPrice }}</text>
				</text>
				<view class="one_year" style="margin-left:15rpx;" v-if="isVip == 1">已省{{ totalPrice - vipPrice }}</view>
			</view>
			<view class="btn_con flexC" @click="payMoney(1)">提交订单</view>
		</view>
	</view>
</template>

<script>
	import {
		getAds,
		replaceOrder,
		payMent,
		shareOrder,
		getUser,
		CheckOrder
	} from '@/apis/shop.js';
	import QR from '@/common/util/wxqrcode.js'; // 二维码生成器
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
	import hintPop from '../../components/hint-pop.vue'
	export default {
		data() {
			return {
				orderCon: '', //订单内容
				remark: '', //订单备注
				store: '', //店铺信息
				isPick: false, //是否自提
				isPay: true, //是否支付
				isShare: '', // 1代表从分享过来
				shareShow: false, //是否显示分享海报
				user_id: '', //用户id  判断是否选择了用户
				userInfo: '', //用户信息
				codeImg: '',
				goods: '', //要展示的海报商品信息
				storeAds: '', //店铺地址
				isVip: '', //是否享受vip待遇
				shareGoods: {}, //分享海报内容
				goods_img: '', //分享商品的图片
				address: '', //从下个页面选择的地址
				defaultAds: '', //获取的默认地址
			};
		},
		components: {
			tkiQrcode,
			hintPop
		},
		onLoad(ops) {
			//去掉没有被选中的值
			let list = uni.getStorageSync('order');
			let newArr = list.filter(i => {
				return i.sku && i.sku.length > 0;
			});
			newArr.forEach(item => {
				item.sku = item.sku.filter(j => {
					return j.new_num > 0;
				});
			});
			let arr = newArr.filter(i => {
				return i.sku && i.sku.length > 0;
			});
			this.orderCon = arr;
			//有isShare值代表从分享商品进来
			this.isShare = ops.isShare;
			this.user_id = ops.user_id;
			uni.getSystemInfo({
				success: res => {
					this.model = res.model;
					this.canvasWidth = res.windowWidth / 375;
					this.canvasHeight = res.windowHeight;
				}
			});
		},
		onShow() {
			this.store = uni.getStorageSync('store');
			this.otherFun();
			//如果没有从下个页面带来的地址，获取默认地址
			if (!this.address) {
				this.getAds();
			}
			this.getUserInfo(this.user_id);
		},
		computed: {
			//总数量
			totalNum() {
				let totalNum = 0;
				if (this.orderCon) {
					this.orderCon.map(i => {
						i.sku.map(j => {
							totalNum += j.new_num;
						});
					});
				}
				return totalNum;
			},
			//总金额
			totalPrice() {
				let totalPrice = 0;
				if (this.orderCon) {
					this.orderCon.map(i => {
						i.sku.map(j => {
							totalPrice += j.new_num * i.price;
						});
					});
				}

				return totalPrice;
			},
			vipPrice() {
				let vipPrice = 0;
				if (this.orderCon) {
					this.orderCon.map(i => {
						i.sku.map(j => {
							vipPrice += j.new_num * i.vip_price;
						});
					});
				}

				return vipPrice;
			}
		},
		methods: {
			//从下个页面获取的数据
			otherFun(object) {
				if (!!object) {
					this.address = object;
				}
			},
			/*添加地址*/
			addressList() {
				uni.navigateTo({
					url: '../../pagesA/pages/ads-list/ads-list?user_id=' + this.user_id
				});
			},
			getAds() {
				getAds({
					id: this.user_id
				}).then(res => {
					if (res.code == 200) {
						this.store = res.data.store;
						this.defaultAds = res.data.address;
					} else {
						uni.showModal({
							content: res.data,
							showCancel: false
						});
					}
				});
			},
			//获取代下单用户信息
			getUserInfo(user_id) {
				getUser({
					user_id
				}).then(res => {
					if (res.code == 200) {
						this.oldVip = this.isVip = res.data.is_vip;
						if (this.oldVip == 0) {
							this.checkVip();
						}
						this.userInfo = res.data;
					} else {
						uni.showModal({
							content: res.data || '获取客户信息失败',
							showCancel: fasle
						});
					}
				});
			},
			//关闭分享订单弹窗
			/*status  0 全部 1待付款 2待发货 3待收货  4已完成
			 */
			closeShare() {
				this.shareShow = false;
				uni.reLaunch({
					url: '../order-manage/order-manage?status=' + 1
				});
			},
			//是否是vip价格
			checkVip() {
				let arr = [];
				let list = this.orderCon;
				console.log(list, 'list');
				list.map(i => {
					i.sku.map(j => {
						arr.push(j);
					});
				});
				var num = 0;
				if (arr.length == 1) {
					num = arr[0].new_num;
				}
				if (arr.length >= 2 || num >= 2) {
					this.isVip = 1;
				} else {
					this.isVip = 0;
				}
			},
			//小计数量
			subNum(data) {
				let subNum = 0;
				data.sku.map(i => {
					subNum += i.new_num;
				});
				return subNum;
			},
			//小计金额
			subtotal(data) {
				let subtotal = 0;
				data.sku.map(j => {
					subtotal += this.isVip == 1 ? j.new_num * data.vip_price : j.new_num * data.price;
				});
				return subtotal;
			},
			/*将对象数组转为二维数组*/
			zh(data) {
				var arr = [];
				for (var i in data) {
					arr[i] = [];
					for (var j in data[i]) {
						arr[i].push(data[i][j]);
					}
				}
				return arr;
			},

			//代下单订单
			replaceOrder(sku, type) {
				let self_receive = this.isPick ? 1 : 0;
				uni.showLoading({
					title: '提交中...'
				})
				let data = {
					address_id: this.address.id || this.defaultAds.id,
					sku,
					remark: this.remark,
					user_id: this.user_id,
					self_receive,
					store_id: this.store.id
				}
				//判断两个月内是否相同顾客重复款式下单
				CheckOrder(data).then(res => {
					if (res.code === 200) {
						this.subOrder(data)
					}else{
						uni.showModal({
							content: res.message||res.msg,
							confirmText:'继续下单',
							success:re=>{
								if(re.confirm){
									this.subOrder(data)
								}else{
									this.isPay = true
								}
							}
							
						})
					}
				})
			},
			//提交订单
			subOrder(data) {
				replaceOrder(data)
					.then(res => {
						if (res.code == 200) {
							var order_no = res.data
							uni.showModal({
								content: '提交成功',
								showCancel: false,
								success: res => {
									if (res.confirm) {
										uni.reLaunch({
											url: '../order-info/order-info?order_no=' + order_no
										})
									}
								}
							})
						} else {
							uni.showModal({
								content: res.msg || '提交订单失败',
								showCancel: false
							});
						}
						uni.hideLoading();
					})
					.catch(err => {
						this.isPay = true;
						uni.hideLoading();
					})
					.finally(() => {
						uni.hideLoading();
						setTimeout(() => {
							this.isPay = true;
						}, 3000);
					});
			},
			/*提交订单后
			 * type 0 分享 1 立即付款
			 */
			payMoney(type) {
				if (!this.isPay) {
					uni.showModal({
						content: '操作频繁，请稍后再试~',
						showCancel: false
					});
					return false;
				}
				if (!this.address.id && !this.defaultAds.id) {
					uni.showModal({
						content: '地址不能为空',
						showCancel: false,
					});
					return
				};
				let list = this.orderCon;
				//获取选中的尺码id和数量
				let sku = [];
				let k = 0;
				for (var i in list) {
					for (var j in list[i].sku) {
						sku[k] = [list[i].sku[j].id, list[i].sku[j].new_num];
						k++;
					}
				}
				this.isPay = false;
				this.replaceOrder(sku, type);
				let goods = this.orderCon[0];
				this.goods = {
					img: goods.img,
					price: parseInt(goods.price),
					num: this.subNum(goods),
					name: goods.main_attr
				};
			},
		}
	};
</script>
<style>
	page {
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		width: 100%;
		height: 100%;
		background-color: #f9f9fb;
	}
</style>
<style scoped lang="scss">
	.goods_price {
		.vip_ident {
			width: 56rpx;
			height: 40rpx;
			background: linear-gradient(226deg, #66647a 0%, #404146 100%);
			border-radius: 4rpx;
			font-size: 28rpx;
			color: #fcf7c0;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 10rpx;
		}

		.old_price {
			text-decoration: line-through;
			font-size: 28rpx;
			font-weight: 500;
		}

		.draw_off {
			text {
				color: #999;
			}
		}

		.symbol {
			font-size: 28rpx;
		}

		.price {
			font-weight: 600;
			font-size: 36rpx;

			text {
				color: $base-color;
			}
		}

		.vip {
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
		}

		.vip_active {
			font-size: 36rpx;
			font-weight: bold;

			text {
				color: $base-color;
			}
		}

		.vip_img {
			width: 88rpx;
			height: 36rpx;
			vertical-align: -6rpx;
			margin-right: 10rpx;
		}
	}

	.qrimg {
		opacity: 0;
	}

	.fixed_box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		z-index: 999;

		.all {
			height: 98rpx;
			border-bottom: 1rpx solid #eee;
			padding: 0 30rpx 10rpx;
			display: flex;
			justify-content: flex-start;
			align-items: flex-end;
		}

		.btn_submit {
			padding: 0 20rpx;
			height: 120rpx;

			view {
				height: 88rpx;
				background: $base-line-bg;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
			}
		}

		.btn_con {
			background: $base-line-bg;
			height: 100rpx;
			font-size: 32rpx;
			color: #fff;
		}
	}

	.share_show {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 9999;

		.share_con {
			width: 80%;
			margin: 0 auto;
			height: 100%;
			z-index: 999999;

			.canvas {
				width: 540rpx;
				height: 960rpx;
				position: relative;

				#canvas {
					width: 540rpx;
					height: 960rpx;
					position: absolute;
					top: 0;
					left: 0;
				}

				.poster_img {
					-webkit-touch-callout: default;
					width: 100%;
					height: 100%;
					display: block;
				}

				img[src=''],
				img:not([src]) {
					opacity: 0;
				}

				// image {
				// 	width: 100%;
				// 	height: 100%;
				// 	border-radius: 24rpx;
				// }
			}

			.save_img {
				color: #fff;
				width: 100%;
				text-align: center;
				font-size: 40rpx;
				margin-top: 20rpx;
			}

			.iconfont {
				position: absolute;
				top: 4vh;
				right: 25rpx;
				color: #dedede;
				font-size: 60rpx;
				z-index: 999;
			}
		}

		.sub_btn {
			margin-top: 76rpx;
		}
	}

	.co {
		flex: 1;
		background-color: #f9f9fb;
		padding: 30rpx;

		.pick_up {
			background: #fff;
			margin-bottom: 30rpx;
			border-radius: 24rpx;
			padding: 15rpx 30rpx;

			.store_ads {
				font-size: 28rpx;
				margin: 10rpx 0 0 50rpx;
			}

			.iconfont {
				font-size: 40rpx;
				margin-right: 15rpx;
				color: #999;
				vertical-align: -4rpx;
			}

			.iconxuanzhong {
				color: $base-color;
			}

			text {
				font-size: 28rpx;
			}
		}

		.order_detail {
			padding-bottom: 30rpx;
			background: #fff;
			width: 690rpx;
			margin: 0 auto 240rpx;
			box-sizing: border-box;
			border-radius: 24rpx;

			.user_info {
				height: 112rpx;
				padding-left: 30rpx;
				line-height: 112rpx;
				border-bottom: 1rpx solid #eeeeee;

				text {
					font-size: 30rpx;
					font-weight: bold;
				}

				.store_avatar {
					width: 52rpx;
					height: 52rpx;
					border-radius: 50%;
					margin-right: 15rpx;
				}
			}

			.order_con {
				padding: 0 30rpx;
				margin-top: 30rpx;

				.goods_con {
					.goods_img {
						width: 200rpx;
						height: 160rpx;
						margin-right: 26rpx;
						border-radius: 8rpx;
						flex-shrink: 0;
					}

					.goods_name {
						font-size: 30rpx;
						font-weight: bold;
					}

					.goods_price {
						margin-top: 20rpx;
					}
				}

				.goods_info {
					margin: 30rpx 0;

					>view {
						margin-bottom: 10rpx;
					}
				}
			}

			.remark {
				padding: 0 30rpx;
				box-sizing: border-box;

				.remark_title {
					font-size: 30rpx;
					font-weight: bold;
					padding: 15rpx 0;
				}

				.remark_box {
					// width: 100%;
					padding: 20rpx 30rpx;
					min-height: 88rpx;
					border-radius: 15rpx;
					background: #f8f8f8;

					textarea {
						width: 100%;
					}
				}

				.place {
					font-size: 30rpx;
					color: #a7a7a7;
				}
			}
		}

		.co_address {
			padding: 30rpx;
			width: 100%;
			box-sizing: border-box;
			background-color: #ffffff;
			border-radius: 24rpx;
			margin-bottom: 30rpx;

			.icondizhi1 {
				color: $base-color;
				font-size: 50rpx;
				vertical-align: middle;
			}

			.gray {
				margin-left: 20rpx;
			}

			.iconiconfontjiantou2 {
				color: #999;
			}

			.ads_info {
				margin: 0 15rpx;

				.shop_info {
					font-size: 32rpx;
					font-weight: bold;

					.area_code {
						font-size: 28rpx;
						color: #999;
						margin: 0 10rpx;
					}

					text:last-child {
						font-size: 28rpx;
						color: #999;
					}
				}
			}
		}
	}
</style>