<template>
	<view>
		<!-- 收货地址 -->
		<!-- <view class="addr" @tap="selectAddress">
			<view class="icon">
				<image src="../../static/img/addricon.png" mode=""></image>
			</view>
			<view class="right" v-if="recinfo.address==''||recinfo.address=='-'">
				<view class="addres" style="line-height: 75upx;">点我去完善信息</view>
			</view>
			<view class="right" v-else>
				<view class="tel-name">
					<view class="name">
						{{recinfo.name}}
					</view>
					<view class="tel">
						{{recinfo.tel}}
					</view>
				</view>
				<view class="addres">
					{{recinfo.address}}
					{{recinfo.detail}}
				</view>
			</view>
		</view> -->
		<!-- 提示-备注 -->
				<lotusCalendar :calendarData="calendarData" @returnDate="calendarChange" @closeCalendar="closeCalendar"></lotusCalendar>
		<view class="order">
			<view class="row" style="height: 60upx;">
				<view class="left">
				送货日期 :
				</view>
				<view class="right" @click="clikcdate" style="border-radius: 10upx; font-size: 30upx; margin-top: -5upx; width: 70%; height: 55upx; line-height: 55upx; padding-left: 10upx;">
					{{form.businessDate}}
				</view>
			</view>
			<view style="color: #999; font-size: 20upx;">修改日期后商品价格可能会有浮动！</view>
			<!-- <view class="row">
				<view class="left">
					积分 :
				</view>
				<view class="right">
					已扣除{{int}}积分抵扣{{deduction|toFixed}}元
				</view>
			</view> -->
			<view class="row">
				<view class="left">
					备注 :
				</view>
				<view class="right">
					<input placeholder="选填,备注内容" v-model="note" />
				</view>
			</view>
		</view>
		<!-- 购买商品列表 -->
		<view class="buy-list">
			<view class="row" v-for="(row,index) in buylist" :key="index" v-if="row.num">
				<view class="goods-info">
					<view class="img">
						<image :src="row.img"></image>
					</view>
					<view class="info">
						<view class="title">{{row.mc}}{{row.dw}}</view>
						<view class="spec">{{row.gg}} <text style="color: red;margin-left: 15upx;">单价:￥{{row.price}}</text></view>
						<view class="spbz">备注：<view style="color: #41A863;text-align: left;">{{row.bz}}</view></view>
						<view class="spbz1">副单位：<view style="color: #41A863;text-align: left;">{{row.fudw}}</view></view>
						<view class="price-number">
							<view class="price">￥{{row.price*row.num|toFixed}}</view>
							<view class="number">
								数量:{{row.num}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 明细 -->
		<view class="detail">
			<!-- <view class="row">
				<view style="font-size: 26rpx; color: #999;">温馨提示:在线支付方可使用积分/优惠券!</view>
			</view> -->
			<view class="row">
				<view class="nominal">
					商品金额
				</view>
				<view class="content">
					￥{{goodsPrice|toFixed}}
				</view>
			</view>
			<!-- <view class="row">
				<view class="nominal">
					运费
				</view>
				<view class="content">
					￥+{{freight|toFixed}}
				</view>
			</view>-->
			<!-- <view class="row">
				<view class="nominal">
					优惠券
				</view>
				<view class="content">
					<span class="noyhq" @tap="chooseyhq">{{showyhq}}</span>
				</view>
			</view> -->
		</view>
		<view class="blck"></view>
		<view class="footer">
			<view class="settlement">
				<view class="sum">合计:<view class="money">￥{{sumPrice|toFixed}}</view></view>
				<!-- <view class="btn" @tap="toPay">提交订单</view> -->
				<view class="btn" v-if="jdyn==1" @click="xiad()">提交订单</view>
				<view class="btn" style="background-color: #999" v-else>{{jdtime}}</view>
			</view>
		</view>
		<!-- 选择支付方式 -->
		<uni-popup ref="popup" type="bottom" :maskClick="maskclose">
			<view class="dosure" @click="closeit">关闭</view>
			<view class="pay-type-list">
				<view class="type-item b-b" @click="changePayType(3)">
					<text class="icon yticon icon-erjiye-yucunkuan"></text>
					<view class="con">
						<text class="tit">账期</text>
					</view>
					<label class="radio">
						<radio value="1" color="#fa436a" :checked='payType ==3' />
						</radio>
					</label>
				</view>
				<!-- <view class="type-item b-b" @click="changePayType(1)">
					<text class="icon iconfont icon-huodaofukuan"></text>
					<view class="con">
						<text class="tit">货到付款</text>
					</view>
					<label class="radio">
						<radio value="1" color="#fa436a" :checked='payType == 1' />
						</radio>
					</label>
				</view>
				<view class="type-item b-b" @click="changePayType(2)">
					<text class="icon yticon icon-weixinzhifu"></text>
					<view class="con">
						<text class="tit">在线支付</text>
						<text>推荐在线支付</text>
					</view>
					<label class="radio">
						<radio value="1" color="#fa436a" :checked='payType == 2' />
						</radio>
					</label>
				</view> -->
				
				<!-- <view class="type-item b-b" @click="changePayType(4)">
					<text class="icon iconfont icon-xianjinzhifu"></text>
					<view class="con">
						<text class="tit">现付</text>
					</view>
					<label class="radio">
						<radio value="1" color="#fa436a" :checked='payType ==4' />
						</radio>
					</label>
				</view> -->
				<view class="type-item b-b"></view>
			</view>
			<view class="footer" style="padding-right: 40upx;">
				<view class="settlement">
					<view class="btn"  style="background-color:#fa436a;" @tap="toPay">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {throttle} from '@/common/util';  
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import lotusCalendar from "../../components/Winglau14-lotusCalendar/Winglau14-lotusCalendar.vue";
	export default {
		components: {
			lotusCalendar,
		},
		data() {
			return {
				maskclose:true,
				buylist:[],		//订单列表
				goodsPrice:0.0,	//商品合计价格
				sumPrice:0.0,	//用户付款价格
				freight:0.00,	//运费
				note:'',		//备注
				int:0,		//抵扣积分
				deduction:0,	//抵扣价格
				recinfo:[],
				oneprice:0,//单价
				cpids:'',
				cpnums:'',
				cpbeiz:'',
				cpfudw:'',
				showyhq:'选择优惠券',
				yid:0,//优惠券id
				payType:3,
				jdtime:'',//截单时间显示
				jdyn:2,//截单标识
				calendarData: {
					isShow: false,
					choseTime: '',
					Disablerq:'2023-08-21'
				},
				form: {
					businessDate: '2024-03-02'
				},
			};
		},
		onShow() {
			this.getdhrq();
			//页面显示时，加载订单信息
			uni.getStorage({
				key:'buylist',
				success: (ret) => {
					this.buylist = ret.data;
					this.goodsPrice=0;
					//合计
					let len = this.buylist.length;
					for(let i=0;i<len;i++){
						if(this.buylist[i].num>0){
							this.goodsPrice = this.goodsPrice + (this.buylist[i].num*this.buylist[i].price);
							this.cpids=this.cpids+','+this.buylist[i].id
							this.cpnums=this.cpnums+','+this.buylist[i].num
							this.cpbeiz=this.cpbeiz+'^'+this.buylist[i].bz;
							this.cpfudw=this.cpfudw+'^'+this.buylist[i].fudw;
						}
					}
					this.sumPrice = this.goodsPrice;
				}
			});
			uni.getStorage({
				key:'userinfo',
				success: (e) => {
					this.recinfo = e.data;
				}
			})
			this.yid = getApp().globalData.yid;
			let getyhjine = getApp().globalData.yhqjine;
			
			if (getyhjine > 0) {
				this.showyhq = '￥-' + getyhjine + '';
				let t = this;
				setTimeout(function() {
					t.sumPrice = parseFloat(t.sumPrice - getyhjine).toFixed(2);
				}, 500)
			}else{
				this.showyhq = '选择优惠券';
			}
			this.getendtime();
		},
		onHide() {
			
		},
		onBackPress() {
			//页面后退时候，清除订单信息
			this.clearOrder();
		},
		filters: {
			toFixed:function(x) {
				return parseFloat(x).toFixed(2);
			}
		},
		methods: {
			//点击选择日期
			clikcdate() {
				this.calendarData.isShow = true;
			},
			// 日期选择
			calendarChange(res) {
				if (res.time) {
					this.form.businessDate = res.time;
					this.calendarData.choseTime= res.time;
				}
				this.calendarData.isShow = res.isShow;
				this.checkorder();
			},
			// 关闭日期控件
			closeCalendar(res) {
				if (res.time) {
					this.form.businessDate = res.time;
					this.calendarData.choseTime= res.time;
				}
				this.calendarData.isShow = res.isShow;
			},
			//获取截单时间
			async getendtime(){
				let getuserinfo=uni.getStorageSync('userinfo');
				let getdata= await this.$api.endtime({action:'endtime',uid:getuserinfo.uid,aid:getuserinfo.aid});
				this.jdyn=getdata.code;
				if(getdata.code==2){
					this.jdtime=getdata.data;
					uni.showModal({
						title: '提醒',
						content: getdata.msg,
						showCancel: false,
						buttonText: '确定',
						success: (res) => {if (res.confirm) {}}
					})
				}
			},
			//获取截单时间
			async getdhrq(){
				let getuserinfo=uni.getStorageSync('userinfo');
				let getdata= await this.$api.getdhrq({action:'getdhrq',uid:getuserinfo.uid,aid:getuserinfo.aid});
				this.calendarData.Disablerq=getdata.data;
				this.form.businessDate=getdata.data;
				this.calendarData.choseTime=getdata.data;
				this.checkorder();
			},
			async checkorder(){
				uni.showLoading({
					title:'加载中...'
				})
				let getuserinfo=uni.getStorageSync('userinfo');
				let gids=this.cpids.substr(1);
				let getdata= await this.$api.checkorder({action:'checkorder',gids:gids,uid:getuserinfo.uid,aid:getuserinfo.aid,dhrq:this.form.businessDate});
				this.goodsPrice=0;
				let len = this.buylist.length;
				for(let i=0;i<len;i++){
					for(let y=0;y<getdata.data.length;y++){
						if(this.buylist[i].id==getdata.data[y].id){
							this.buylist[i].price=getdata.data[y].price;
							this.goodsPrice = this.goodsPrice + (this.buylist[i].num*this.buylist[i].price);
							this.cpids=this.cpids+','+this.buylist[i].id;
							this.cpnums=this.cpnums+','+this.buylist[i].num;
							this.cpbeiz=this.cpbeiz+'^'+this.buylist[i].bz;
							this.cpfudw=this.cpfudw+'^'+this.buylist[i].fudw;
						}	
					}
				}
				this.sumPrice = this.goodsPrice;
				uni.hideLoading();
			},
			//选择支付方式
			changePayType(type) {
				this.payType = type;
				// if(type==2){
				// 	let t=this;
					// uni.showModal({
					// 	title: '支付说明',
					// 	showCancel:false,
					// 	confirmText:'明白了',
					// 	content: t.zfsmtext,
					// 	success: function (res) {}
					// });
				// }
			},
			async getbaseinfo(key){
				let getdata= await this.$api.baseinfo({action:'baseinfo',key:key});
				if(getdata.data.info!=''){
					if(this.goodsPrice<getdata.data.info[0]){
						this.freight=getdata.data.info[1];
						this.sumPrice = this.goodsPrice;
					}
				}
			},
			//删除本地购物车列表对应商品
			deleteGoods(id){
				let getcartlist=uni.getStorageSync('cartlist');
				let len = getcartlist.length;
				for(let i=0;i<len;i++){
					if(id==getcartlist[i].id){
						getcartlist.splice(i, 1);
						break;
					}
				}
				//更新本地储存
				uni.setStorageSync('cartlist',getcartlist);
			},
			xiad(){
				this.$refs.popup.open()
			},
			closeit(){
				this.$refs.popup.close()
			},
			async postorder(paymentOrder) {
				let that=this;
				let getuserinfo=uni.getStorageSync('userinfo');
				//剔除前面多余的逗号
				let dealcpid=this.cpids.substr(1);
				let dealcpnum=this.cpnums.substr(1);
				let dealcpbeiz=this.cpbeiz.substr(1);
				let dealcpfudw=this.cpfudw.substr(1);
				
				let reinfo=await this.$api.postorder({action:'postorder',paytype:this.payType,dhrq:this.form.businessDate,
				uid:getuserinfo.uid,aid:getuserinfo.aid,name:getuserinfo.name,beiz:this.note,cpids:dealcpid,cpnums:dealcpnum,yhqid:this.yid,cpbeizs:dealcpbeiz,cpfudws:dealcpfudw,zjine:parseFloat(this.sumPrice)});
				if(reinfo.code==1){
					uni.hideLoading();
					let len = that.buylist.length;
					for(let i=0;i<len;i++){
						that.deleteGoods(that.buylist[i].id)
					}
					if(this.payType==2){
						let paymoney = parseFloat(this.sumPrice);
						getApp().globalData.yid = 0;
						getApp().globalData.yhqjine = 0;
						uni.showToast({title:'提交订单成功，立即去支付',icon:'none'});
						let t=this;
						setTimeout(function(){
							uni.hideToast();
							uni.redirectTo({
								//这里的价格是显示作用，实际支付价格后台计算
								url: "/pages/pay/pay?paymoney=" + paymoney + '&dhid=' + reinfo.data.dhid
							})
						},1500)	
					}else{
						uni.showModal({
							title: '下单成功',
							content: reinfo.msg,
							showCancel: false,
							success: (res) => {
								uni.switchTab({
									url: "/pages/cart/cart"
								})
							}
						});
					}
					
				}else if(reinfo.code==3){
					uni.hideLoading();
					uni.showModal({
						title: '提醒',
						content: reinfo.msg,
						showCancel: false,
						buttonText: '确定',
						success: (res) => {if (res.confirm) {}}
					})
				}else{
					uni.hideLoading();
					uni.showToast({title:reinfo.msg,icon:'none'});
					let t=this;
					setTimeout(function(){
						uni.hideToast();
					},1500)	
				}
			},
			clearOrder(){
				uni.removeStorage({
					key: 'buylist',
					success: (res)=>{
						this.buylist = [];
					}
				});
			},
			toPay:throttle(function(){
				// if(this.recinfo.address==''||this.recinfo.tel==''){
				// 	uni.showToast({title:'请先添加收货地址',icon:'none'});
				// 	return ;
				// }
				//商品列表
				let paymentOrder = [];
				let goodsid=[];
				let len = this.buylist.length;
				for(let i=0;i<len;i++){
					paymentOrder.push(this.buylist[i]);
					goodsid.push(this.buylist[i].id);
				}
				if(paymentOrder.length==0){
					uni.showToast({title:'订单信息有误，请重新购买',icon:'none'});
					return ;
				}
				//本地模拟订单提交UI效果
				uni.showLoading({
					title:'正在提交订单...'
				})
				//提交订单
				this.postorder(paymentOrder)
			}),
			//选择收货地址
			// selectAddress(){
			// 	let t=this;
			// 	uni.setStorage({
			// 		key:'address',
			// 		data:t.recinfo,
			// 		success() {
			// 			uni.navigateTo({
			// 				url:"../address/edit/edit?type=edit"
			// 			})
			// 		}
			// 	});
			// },
			chooseyhq() {
				uni.navigateTo({
					url: '/pages/coupon/coupon?fromchoose=1&allmoney=' + this.sumPrice
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.pay-type-list {
			margin-top: 20upx;
			background-color: #fff;
			padding-left: 60upx;
			
			.type-item{
				height: 120upx;
				padding: 20upx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-right: 60upx;
				font-size: 30upx;
				position:relative;
			}
			
			.icon{
				width: 100upx;
				font-size: 52upx;
			}
			.jifenicon{
				image{
					width: 60upx;
					height: 60upx;
				}
			}
			.icon-erjiye-yucunkuan {
				color: #fe8e2e;
			}
			.icon-weixinzhifu {
				color: #36cb59;
			}
			.icon-alipay {
				color: #01aaef;
			}
			.tit{
				font-size: $font-lg;
				color: $font-color-dark;
				margin-bottom: 4upx;
			}
			.con{
				flex: 1;
				display: flex;
				flex-direction: column;
				font-size: $font-sm;
				color: $font-color-light;
				.moreuse{
					margin-left: 5upx;
					font-size: 24upx;
					color: #909399;
				}
			}
		}
		.mix-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 630upx;
			height: 80upx;
			margin: 50upx auto 30upx;
			font-size: $font-lg;
			color: #fff;
			background-color: $base-color;
			border-radius: 10upx;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
		}
	.shuom{
		text-align: center;
		font-size: 28upx;
		color: #DD524D;
		padding: 15upx;
		}
		
		
.addr{
	width: 86%;
	padding: 20upx 3%;
	margin: 30upx auto 20upx auto;
	box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
	border-radius: 20upx;
	display: flex;
	.icon{
		width: 80upx;
		height: 80upx;
		display: flex;
		align-items: center;
		image{
			width: 60upx;
			height: 60upx;
		}
	}
	.tel-name{
		width: 100%;
		display: flex;
		font-size: 32upx;
		.tel{
			margin-left: 40upx;
		}
	}
	.addres{
		width: 100%;
		font-size: 26upx;
		color: #999;
	}
}
.buy-list{
	width: 86%;
	padding: 10upx 3%;
	margin: 30upx auto 20upx auto;
	box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
	border-radius: 20upx;
	.row{
		margin: 30upx 0;
		.goods-info{
			width: 100%;
			display: flex;
			.img{
				width: 25vw;
				height: 25vw;
				border-radius: 10upx;
				overflow: hidden;
				flex-shrink: 0;
				margin-right: 10upx;
				image{
					width: 22vw;
					height: 22vw;
				}
			}
			.info{
				width: 100%;
				height: 25vw;
				overflow: hidden;
				display: flex;
				flex-wrap: wrap;
				position: relative;
				.title{
					width: 100%;
					font-size: 28upx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					// text-align: justify;
					overflow: hidden;
				}
				.spec{
					font-size: 22upx;
					background-color: #f3f3f3;
					color: #a7a7a7;
					height: 40upx;
					display: flex;
					align-items: center;
					padding: 0 10upx;
					border-radius: 20upx;
					margin-bottom: 20vw;
				}
				.spbz{
					position: absolute;
					color: #999;
					width: 100%;
					bottom: 72upx;
					display: flex;
					align-items: flex-end;
					font-size: 25upx;
					height: 40upx;
				}
				.spbz1{
					position: absolute;
					width: 100%;
					color: #999;
					bottom: 38upx;
					display: flex;
					align-items: flex-end;
					font-size: 25upx;
					height: 40upx;
				}
				.price-number{
					position: absolute;
					width: 100%;
					bottom: 0upx;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					font-size: 28upx;
					height: 40upx;
					.price{
						color: #f06c7a;
					}
					.number{
						display: flex;
						justify-content: center;
						align-items: center;
						
					}
				}
				
			}
		}
	}
}
.order{
	width: 86%;
	padding: 10upx 3%;
	margin: 30upx auto 20upx auto;
	box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
	border-radius: 20upx;
	.row{
		margin: 20upx 0;
		height: 40upx;
		display: flex;
		.left{
			font-size: 28upx;
		}
		.right{
			margin-left: 40upx;
			font-size: 26upx;
			color: #999;
			input{
				font-size: 26upx;
				color: #999;
			}
		}
	}
}
.blck{
	width: 100%;
	height: 100upx;
}
.footer{
		width: 100%;
		padding: 0 4%;
		background-color: #fbfbfb;
		height: 100upx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 28upx;
		position: fixed;
		bottom: 0upx;
		z-index: 5;
		
		.settlement{
			width: 95%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.sum{
				width: 50%;
				font-size: 28upx;
				margin-right: 10upx;
				display: flex;
				justify-content: flex-end;
				.money{
					font-weight: 600;
				}
			}
			.btn{
				padding: 0 30upx;
				height: 60upx;
				background-color: #f06c7a;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30upx;
				border-radius: 40upx;
			}
		}
	}
.detail{
	width: 86%;
	padding: 10upx 3%;
	margin: 30upx auto 20upx auto;
	box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
	border-radius: 20upx;
	.row{
		height: 60upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.nominal{
			font-size: 28upx;
		}
		.content{
			font-size: 26upx;
			color: #f06c7a;
		}
	}
}
</style>
