<template>
	<view class="pageContent">
		<view class="content">
			<u-gap height="10"></u-gap>
			<view class="myTab">
				<u-cell-group :border="false">
					<u-cell title="收货方式" @click="changegetGoodway" :value="getGoodsWay" :border="false"
						:isLink="true"></u-cell>
				</u-cell-group>
			</view>
			<u-picker :show="getGoodsWayShow" @click="getGoodsWayShow = false" @cancel="getGoodsWayShow = false"
				:defaultIndex='[getGoodsWayIndex]' @confirm="changegetWay" :columns="columns"></u-picker>
			<view class="userAddress" @click="gotoaddress" v-if="getGoodsWay == '快递代收点' && baseaddress.id">
				<view class="navigationModel" style="margin-left: 0;margin-right: 20rpx;">
					<view class="navigationIcon">
						<image class="init_image" src="http://amy.yyinhong.cn/uploads/wximg/dh.png" mode=""></image>
					</view>
				</view>
				<view class="addressInfo">
					<view class="addressName">
						{{baseaddress.address}}
					</view>
					<view class="userInfo">
						<span>{{baseaddress.contacts}}</span>
						<span>{{baseaddress.phone}}</span>
						<span class="active">快递代收点</span>
					</view>
				</view>
				<view class="navigationModel">
					<view class="navigationIcon">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="evaluationModel" v-if="getGoodsWay == '送货上门'">
				<view class="evaluationTitle" style="margin-top: 30rpx;">
					收货人姓名
				</view>
				<view class="evaluationInitModel">
					<u--input placeholder="请输入" v-model="consignee" border="none"></u--input>
				</view>
				<view class="evaluationTitle" style="margin-top: 30rpx;">
					收货人电话
				</view>
				<view class="evaluationInitModel">
					<u--input placeholder="请输入" v-model="phone" border="none"></u--input>
				</view>
				<view class="evaluationTitle" style="margin-top: 30rpx;">
					收货地址
				</view>
				<view class="evaluationInitModel" @click="getLocation"
					style="padding-top: 20rpx;padding-bottom: 20rpx;">
					<u-cell-group :border="false">
						<u-cell :title="area" :border="false" :isLink="true"></u-cell>
					</u-cell-group>
				</view>
				<view class="evaluationTitle" style="margin-top: 30rpx;">
					详细地址
				</view>
				<view class="evaluationInitModel">
					<u--input placeholder="请输入" v-model="address" border="none"></u--input>
				</view>

			</view>
			<view class="orderModel" v-for="(item,index) in OrderInfo" :key="index"
				@click="$utils.goProductDetails(item.goods_id)">
				<view class="orderImg">
					<image class="init_image" :src="item.goods_img" mode=""></image>
				</view>
				<view class="orderProductInfo">
					<view class="orderName">
						{{item.goods_name}}
					</view>
					<view class="orderNorms">
						<span>{{item.attr_name}}</span>
						<span>x{{item.num}}</span>
					</view>
					<view class="orderPrice">
						<span>¥</span>{{item.goods_price}}
					</view>
				</view>
			</view>

			<view class="orderInfo">
				<view class="orderLine">
					<span>合计金额</span>
					<span class="active">{{allprice}}</span>
				</view>
			</view>
			<view class="orderInfo" style="margin-bottom: 150rpx;">
				<view class="orderLine_pay" @click="changePayType(1)">
					<view class="pay_left">
						<image class="init_image" :src="urlToBase64('/static/wxp.png')" mode="">
						</image>
						微信支付
					</view>
					<span class="active">
						<view class="checkModel">
							<image class="init_image" v-show="payType != 1"
								src="http://amy.yyinhong.cn/uploads/wximg/no_check.png" mode="">
							</image>
							<image class="init_image" v-show="payType == 1"
								src="http://amy.yyinhong.cn/uploads/wximg/check.png" mode="">
							</image>
						</view>
					</span>
				</view>
				<view class="orderLine_pay" @click="changePayType(2)">
					<view class="pay_left">
						<image class="init_image" :src="urlToBase64('/static/jfp.png')" mode="">
						</image>
						积分支付
					</view>
					<span class="active">
						<view class="checkModel">
							<image class="init_image" v-show="payType != 2"
								src="http://amy.yyinhong.cn/uploads/wximg/no_check.png" mode="">
							</image>
							<image class="init_image" v-show="payType == 2"
								src="http://amy.yyinhong.cn/uploads/wximg/check.png" mode="">
							</image>
						</view>
					</span>
				</view>
				<view class="orderLine_pay" @click="changePayType(3)">
					<view class="pay_left">
						<image class="init_image" :src="urlToBase64('/static/wxp.png')" mode="">
						</image>
						+
						<image class="init_image" :src="urlToBase64('/static/jfp.png')" mode="">
						</image>
						组合支付
					</view>
					<span class="active">
						<view class="checkModel">
							<image class="init_image" v-show="payType != 3"
								src="http://amy.yyinhong.cn/uploads/wximg/no_check.png" mode="">
							</image>
							<image class="init_image" v-show="payType == 3"
								src="http://amy.yyinhong.cn/uploads/wximg/check.png" mode="">
							</image>
						</view>
					</span>
				</view>
			</view>
			<view class="orderBtnList">
				<view class="orderBtn" @click="befor_create_buy_order">
					去支付
				</view>
				<span style="color: #D61A62;font-size: 32rpx;">{{allprice}}</span>
				<span style="color: #D61A62;">￥</span><span>共{{goodsnum}}件，合计：</span>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				consignee: '',
				phone: "",
				getGoodsWayShow: false,
				columns: [
					['送货上门', '快递代收点']
				],
				area: '',
				address: '',
				getGoodsWay: '快递代收点',
				getGoodsWayIndex: 1,
				allprice: 0,
				OrderInfo: [],
				confirOrderObj: null,
				navBarHeight: getApp().globalData.navBarHeight,
				baseaddress: null,
				userInfo: null,
				isbuycode: false,
				delivery_store_id: 0,
				flag: false,
				payType: 1,
				goodsnum: 0
			}
		},
		onShow() {
			this.flag = false
			this.getUserInfo();
			let getGoodsWayIndex = uni.getStorageSync('getGoodsWayIndex');
			this.getGoodsWayIndex = getGoodsWayIndex | 1;
			this.confirOrderObj = uni.getStorageSync('confirOrderObj');
			if (this.confirOrderObj.type == 'goods') {
				this.checkout_buy_order()
			} else {
				this.checkout_buy_carorder()
			}
			if (!uni.getStorageSync('address')) {
				this.getuserlocation()
			} else {
				this.baseaddress = uni.getStorageSync('address');
			}
			this.getUserInfo();

		},
		methods: {
			urlToBase64(img) {
				let imgBase64 = '';
				let base64Url = ''
				// #ifdef MP-WEIXIN
				imgBase64 = wx.getFileSystemManager().readFileSync(img, 'base64')
				base64Url = `data:image/png;base64,${imgBase64}`
				// #endif
				return base64Url || img
			},
			changePayType(type) {
				let _this = this;
				if (type == 3 && this.userInfo.balance > this.allprice) {
					uni.showToast({
						icon: 'none',
						title: '该笔订单不支持混合支付'
					})
					this.payType = 2;
					this.allprice = 0;
					return
				} else if (type == 2 && this.userInfo.balance < this.allprice) {
					uni.showToast({
						icon: 'none',
						title: '积分不足'
					})
					return
				} else {
					this.allprice = 0;
					for (let i in this.OrderInfo) {
						let addNum = _this.$utils.amend(_this.OrderInfo[i].goods_price, _this.OrderInfo[i].num,
							"*");
						_this.allprice = _this.$utils.amend(_this.allprice, addNum, "+")
					}
					if (type == 3) {
						this.allprice = this.$utils.amend(this.allprice, this.userInfo.balance, "-")
					}
					if (type == 2) {
						this.allprice = 0;
					}
					this.payType = type;
				}
			},
			changegetGoodway() {
				if (this.isbuycode) {
					this.getGoodsWayShow = true
				}
			},
			check_distance(lat, lng) {
				this.$request('/check-distance', 'POST', {
					lat,
					lng
				}).then(res => {
					console.log('请求成功');
					if (!res.data.flag) {
						this.getGoodsWayIndex = 1;
						this.getGoodsWayShow = false;
						uni.setStorageSync('getGoodsWayIndex', 1);
						this.$refs.uToast.show({
							type: 'error',
							message: '超出配送范围，请选择快递待收点',
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
						})
					} else {
						this.delivery_store_id = res.data.delivery_store_id;
					}
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})
			},
			//获取用户信息
			getUserInfo() {
				this.$request('/user-info', 'GET', {}).then(res => {
					console.log('请求成功');
					this.userInfo = res.data;
					this.isbuycode = res.data.buycode == '' ? false : true;
					if (!this.isbuycode) {
						this.getGoodsWay = '送货上门'
						this.getGoodsWayIndex = 0;
						this.getGoodsWayShow = false;
						this.columns = ['送货上门']
					}
					console.log(res.data)
				}).catch(err => {})
			},
			getLocation() {
				let _this = this
				console.log(1111);
				uni.chooseLocation({
					success: (res) => {
						if (res.errMsg === 'chooseLocation:ok') {
							// console.log('位置名称：' + res.name);
							console.log('详细地址：' + res);
							_this.area = res.address;
							_this.check_distance(res.latitude + '', res.longitude + '')
							// console.log('纬度：' + res.latitude);
							// console.log('经度：' + res.longitude);
						}
					},
					fail: function(error) {
						_this.getaddress_list('error');
						console.error('获取位置失败：', error);
					}
				});
			},
			changegetWay(e) {
				console.log(e.value[0]);
				this.getGoodsWay = e.value[0];
				if (this.getGoodsWay == '送货上门') {
					this.getGoodsWayIndex = 0;
					this.getGoodsWayShow = false;
					uni.setStorageSync('getGoodsWayIndex', 0);
				} else if (this.getGoodsWay == '快递代收点') {
					this.getGoodsWayIndex = 1;
					this.getGoodsWayShow = false;
					uni.setStorageSync('getGoodsWayIndex', 1);
				}
			},
			//获取确定订单详情-商品详情
			checkout_buy_order() {
				let _this = this;
				this.$request('/checkout-buy-order', 'POST', this.confirOrderObj).then(res => {
					this.OrderInfo = [];
					this.allprice = 0;
					_this.goodsnum = 0;
					let baseData = res.data;
					this.OrderInfo.push(res.data)
					for (let i in this.OrderInfo) {
						let addNum = _this.$utils.amend(_this.OrderInfo[i].goods_price, _this.OrderInfo[i].num,
							"*");
						_this.allprice = _this.$utils.amend(_this.allprice, addNum, "+")
						// this.allprice = this.allprice + (Number(this.OrderInfo[i].goods_price) * this.OrderInfo[i]
						// 	.num)
						_this.goodsnum += _this.OrderInfo[i].num
					}
				}).catch(err => {})
			},
			//获取确定订单详情-购物车
			checkout_buy_carorder() {
				let _this = this;
				this.$request('/checkout-cart-order', 'POST', this.confirOrderObj).then(res => {
					this.OrderInfo = [];
					this.allprice = 0;
					_this.goodsnum = 0;
					this.OrderInfo = res.data;
					for (let i in this.OrderInfo) {
						console.log(this.allpriceallprice)
						// this.allprice = this.allprice + (Number(this.OrderInfo[i].goods_price) * this.OrderInfo[i]
						// 	.num)
						let addNum = _this.$utils.amend(_this.OrderInfo[i].goods_price, _this.OrderInfo[i].num,
							"*");
						_this.allprice = _this.$utils.amend(_this.allprice, addNum, "+")
						_this.goodsnum += _this.OrderInfo[i].num
					}
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})
			},
			getuserlocation() {
				let _this = this;
				uni.getLocation({
					success: function(res) {
						console.log(res);
						_this.getaddress_list(res.latitude, res.longitude);
					},
					fail: function(error) {
						_this.getaddress_list('', '');
						console.error('获取位置失败：', error);
					}
				});
			},
			//获取地址列表
			getaddress_list(lat, lng) {
				this.$request('/express-collection', 'POST', {
					lat,
					lng
				}).then(res => {
					console.log(res.data);
					if (res.data.length == 0) {
						this.baseaddress = ""
						return
					}
					this.baseaddress = res.data[0];
				}).catch(err => {
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '' + err.message
					// })
				})
			},
			gotoaddress() {
				uni.navigateTo({
					url: '/pageSub-product/pages/addressList/addressList'
				})
			},
			befor_create_buy_order() {
				if (this.flag) {
					return;
				}
				let pramra = null;
				let goods_id = null;
				null;
				let attr_id = null;
				let num = null;
				if (this.confirOrderObj.type == 'goods') {
					goods_id = this.OrderInfo[0].goods_id;
					attr_id = this.OrderInfo[0].attr_id;
					num = this.OrderInfo[0].num;
					if (this.getGoodsWay == '送货上门') {
						if (!uni.$u.test.mobile(this.phone)) {
							this.$refs.uToast.show({
								type: 'error',
								message: '请输入正确的手机号！',
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
							})
							return
						}
						pramra = {
							goods_id,
							attr_id,
							store_id: this.delivery_store_id,
							delivery_type: 2,
							consignee: this.consignee,
							phone: this.phone,
							area: this.area,
							address: this.address,
							num,
						}
					} else if (this.getGoodsWay == '快递代收点') {
						pramra = {
							goods_id,
							attr_id,
							store_id: this.baseaddress.id | "",
							delivery_type: 1,
							num,
						}
					}
					this.flag = true;
					this.create_buy_order(pramra)
				}
				if (this.confirOrderObj.type == 'shopcar') {
					if (this.getGoodsWay == '送货上门') {
						if (!uni.$u.test.mobile(this.phone)) {
							this.$refs.uToast.show({
								type: 'error',
								message: '请输入正确的手机号！',
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
							})
							return
						}
						pramra = {
							catKey: this.confirOrderObj.cartKey,
							delivery_type: 2,
							store_id: this.delivery_store_id,
							consignee: this.consignee,
							phone: this.phone,
							area: this.area,
							address: this.address,
						}
					} else if (this.getGoodsWay == '快递代收点') {
						pramra = {
							catKey: this.confirOrderObj.cartKey,
							store_id: this.baseaddress.id | '',
							delivery_type: 1,
						}
					}
					this.flag = true;
					this.create_buy_carorder(pramra)
				}

			},
			create_buy_order(pramra) {
				let _this = this
				pramra.buycode = this.userInfo.buycode;
				setTimeout(() => {
					this.flag = false
				}, 10000)
				this.$request('/create-buy-order', 'POST', pramra).then(res => {
					console.log(res.data);
					this.$utils.payOrder(res.data.order_id, _this.payType)
				}).catch(err => {
					this.flag = false;
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})
			},
			create_buy_carorder(pramra) {
				let _this = this
				pramra.buycode = this.userInfo.buycode;
				setTimeout(() => {
					this.flag = false
				}, 10000)
				this.$request('/create-order', 'POST', pramra).then(res => {
					console.log(res.data);
					this.$utils.payOrder(res.data.order_id, _this.payType)
				}).catch(err => {
					this.flag = false;
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})
			}
		},


	}
</script>

<style lang="scss" scoped>
	.pageContent {
		position: relative;
	}

	/* 其他样式 */
	.content {
		width: 100vw;
		height: calc(100vh - 80rpx);
		padding-top: 30rpx;
		overflow-y: scroll;
		background: linear-gradient(to bottom, #f3d4d7, #f8f8f8, #f8f8f8);
	}

	.checkModel {
		height: 36rpx;
		width: 36rpx;
		border-radius: 36rpx;
	}

	.orderStatusline {
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		color: #333333;
		font-weight: 600;
	}

	.userAddress {
		width: calc(100% - 120rpx);
		margin: 30rpx;
		padding: 30rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;
	}

	.addressInfo {
		flex: 1;
	}

	.addressName {
		width: 100%;
		font-size: 30rpx;
		color: #333333;
		line-height: 44rpx;
		display: -webkit-box;
		/* 使用弹性盒模型 */
		-webkit-box-orient: vertical;
		/* 垂直方向的弹性盒 */
		-webkit-line-clamp: 2;
		/* 显示两行 */
		overflow: hidden;
		/* 隐藏超出部分 */
		text-overflow: ellipsis;
	}

	.userInfo {
		line-height: 34rpx;
		font-size: 24rpx;
		color: #999999;

		span {
			margin-right: 20rpx;
		}

		.active {
			color: #D3195E;
		}
	}

	.navigationModel {
		width: 40rpx;
		margin-left: 20rpx;
		font-size: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.navigationIcon {
			width: 44rpx;
			height: 44rpx;
			margin-bottom: 10rpx;
			// background-color: #D3195E;
			border-radius: 44rpx;
		}
	}

	.orderModel {
		width: calc(100% - 120rpx);
		margin: 30rpx;
		padding: 30rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;
	}

	.orderImg {
		background-color: #f3d4d7;
		width: 180rpx;
		height: 180rpx;
		margin-right: 30rpx;
	}

	.orderProductInfo {
		height: 180rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.orderName {
		font-size: 30rpx;
		color: #333333;
		line-height: 36rpx;
		display: -webkit-box;
		/* 使用弹性盒模型 */
		-webkit-box-orient: vertical;
		/* 垂直方向的弹性盒 */
		-webkit-line-clamp: 2;
		/* 显示两行 */
		overflow: hidden;
		/* 隐藏超出部分 */
		text-overflow: ellipsis;
		/* 使用省略号 */
	}

	.pay_left {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		font-size: 28rpx;
		color: #333;

		image {
			height: 40rpx;
			width: 40rpx;
			margin: 0 10rpx;
		}
	}

	.orderNorms {
		line-height: 58rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		color: #999999;
		font-size: 24rpx;
	}

	.orderPrice {
		height: 50rpx;
		display: flex;
		flex-direction: row;
		align-items: baseline;
		color: #D61A62;
		font-size: 36rpx;

		span {
			font-size: 24rpx;
			margin-right: 10rpx;
		}
	}

	.orderInfo {
		width: calc(100% - 120rpx);
		margin: 30rpx;
		padding: 30rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;
	}

	.orderLine {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		color: #333333;

		.active {
			color: #D61A62;
		}
	}

	.orderLine_pay {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		color: #333333;
		height: 70rpx;

		.active {
			color: #D61A62;
		}
	}

	.orderBtnList {
		position: fixed;
		bottom: 0;
		left: 0;
		width: calc(100% - 60rpx);
		padding: 60rpx 30rpx;
		padding-top: 30rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		height: 60rpx;
		line-height: 58rpx;

		span {
			font-size: 24rpx;
		}
	}

	.orderBtn {
		height: 58rpx;
		width: 160rpx;
		text-align: center;
		border-radius: 58rpx;
		border: 1rpx solid #D3195E;
		background-color: #D3195E;
		color: #ffffff;
		margin-left: 20rpx;
		font-size: 28rpx;
	}

	.orderOtherBtn {
		height: 58rpx;
		width: 160rpx;
		text-align: center;
		border-radius: 58rpx;
		border: 1rpx solid #777777;
		background-color: #ffffff;
		color: #777777;
		margin-left: 20rpx;
		font-size: 28rpx;
	}

	.myTab {
		width: calc(100% - 100rpx);
		min-height: 10rpx;
		margin: 0 30rpx;
		padding: 20rpx;
		border-radius: 24rpx;
		background-color: #ffffff;
	}

	.nickName {
		font-size: 28rpx;
	}

	.evaluationModel {
		width: calc(100% - 120rpx);
		margin: 30rpx;
		padding: 30rpx;
		height: auto;
		overflow-y: scroll;
		background-color: #ffffff;
		border-radius: 20rpx;

		.evaluationTitle {
			font-size: 28rpx;
			color: #333333;
			height: 60rpx;
		}

		.evaluationInitModel {
			width: calc(100% - 60rpx);
			padding: 30rpx;
			background-color: #F6F7F8;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			min-height: 60rpx;
			line-height: 40rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}

	}
</style>