<template>
	<view class="educationsubmit">
		
		
		<view class="goods" v-for="(x, i) in mchs" :key="i">
			<view class="store">
				<u-icon name="shop-o" size="30" color="#232323"></u-icon>
				<text style="margin-left: 10px;">{{ x.mch.name }}</text>
			</view>
			<view class="store-list">
				<template v-if="x.goods_list.length == 1">
					<view class="goodbox" v-for="(y, yi) in x.goods_list" :key="yi">
						<image :src="y.cover_pic" mode="aspectFill" class="image" />
						<view class="goodinfo">
							<view class="name">
								<view v-if="y.marketingLogo.iswords && y.marketingLogo.iswords==1&& y.marketingLogo.words!=''" class="Logo"
								 :style="{color: y.marketingLogo.wordsColor,
											background:y.marketingLogo.wordsBack ,}">
									{{y.marketingLogo.words}}
								</view>
								<image v-if="y.marketingLogo.iswords&&y.marketingLogo.iswords==2&& y.marketingLogo.ico!=''" mode="heightFix"
								 :src="y.marketingLogo.ico" style=" height: 12px;margin-right: 5px" />
								{{ y.name }}
							</view>
							<view class="attr">已选择：
								<span v-for="(item,index3) in y.specificationNameList" :ket="index3">
									{{item}}
								</span>
							</view>
							<view v-if="y.freeShipping_Use==true && y.freeShippingDescription!=null && y.freeShippingDescription !=''" style="height: 22px;line-height: 22px;font-size: 11px;color: #FF4048;background: #fdf6ec;padding: 0 5px;margin-bottom: 5px;display: inline-block;">
								<text>{{y.freeShippingDescription}}</text>
							</view>
							<view v-if="y.freeShipping_Use==false  && y.freeShippingDescription!=null && y.freeShippingDescription !=''"
							 style="height: 22px;line-height: 22px;font-size: 11px;color: #909399;background: #f4f4f5;padding: 0 5px;margin-bottom: 5px;display: inline-block;">
								<text>{{y.freeShippingDescription}}</text>
							</view>
							<view class="price">
								<view class="left" :style="{ color: mc }">
									<text class="small">￥</text>
									<text>{{ y.goods_attr.price }}</text>
								</view>
								<view class="right">x{{ y.num }}</view>
							</view>
							
						</view>
					</view>
				</template>
				<template v-else>
					<view class="goodboxmore">
						<view class="good-list">
							<view style="white-space: nowrap;display: flex;flex-direction: row;">
								<view v-for="(y, yi) in x.goods_list" :key="yi" class="item" style="position: relative;">
									<image :src="y.cover_pic" mode="aspectFill" class="item" />
									
								</view>
							</view>
						</view>
						<view class="infos">
							<view class="text">共{{ x.goods_list.length }}件</view>
							<u-icon name="ellipsis" size="36" @click="showGoodListHandler(i)"></u-icon>
						</view>
					</view>
				</template>
				
				
			</view>
		</view>
		<view class="discountbox" style="padding: 15px 10px 5px;">
		
			<view class="liuyan">
				<u-field padding="0px"
				 label-width="120" 
				 input-align='right'
				  v-model="adressInfo.Consignee" 
				  label="联系人" placeholder="姓名"></u-field>
			</view>
			<view class="liuyan">
				<u-field padding="0px" 
				label-width="120" 
				input-align='right'
				 v-model="adressInfo.Mobile" 
				 label="联系电话" 
				 placeholder="电话"></u-field>
			</view>
			<view class="liuyan">
				<u-field padding="0px" type="textarea" label-width="80" input-align='right' v-model="BuyerMessage" label="留言" placeholder="备注信息"></u-field>
			</view>
		</view>
		
		

		<view class="btton-box">
			<view class="left" :style="{ color: mc }">
			
			</view>
			<view class="right">
				<u-button :disabled="!address_enable" size="80" :ripple="true" shape="circle" @click="ds.promptNoSuperiorFY== true ? submitModel():submitOrderHandler()"
				 :custom-style="{
						backgroundColor: mc,
						height: '80rpx',
						color: '#FFF',
						fontSize: '14px'
					}">
					<u-loading mode="circle" style="margin-right: 5px;" v-if="submitOrder"></u-loading>
					立即报名
				</u-button>
			</view>
		</view>
		<coupon v-if="couponList.length > 0 && showCoupon" :list="couponList" :current="formData.list[0].user_coupon_id"
		 @close="closeCouponHandler"></coupon>
		<view class="notOption" v-if="submitOrder"></view>
		<good-list :list="goodData" v-if="showGoodList" @close="closeGoodListHandler"></good-list>
		<payCom v-if="payBtn" :payInfo="payInfo" @closePay="closePay"></payCom>
		<u-toast ref="uToast" />
		<u-popup v-model="payExit" mode="center" :mask-close-able="false">
			<view style="background:#fff;width:500rpx">
				<view style="padding:10px 0 0 10px">提交失败</view>
				<view style="text-align:center;padding-bottom:40rpx">
					<view style="margin:80rpx 0">支付取消</view>
					<span @click="exitPay" style="padding:10rpx 50rpx;color:#fff;background:#19be6b;border-radius: 12px;">确定</span>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="zhaoren" mode="center" :mask-close-able="false">
			<view style="background:#fff;width:500rpx;font-family: aa;border-radius: 10px;">
				<view style="width: 88%;height: 35px;display: flex;flex-direction: row;align-items: flex-end;justify-content: flex-end;margin-left: 6%;"
				 @click="exitPay">
					<u-icon name="close" size="40"></u-icon>
				</view>
				<view style="padding:10px 0 0 10px;text-align:center;">代付金额</view>
				<view style="text-align:center;padding-bottom:40rpx;">
					<view class="daif" :style="{'color': mc}">
						<text style="margin-bottom: 2px;">
							￥
						</text>
						<span :style="{'font-size': '30px','color': mc}">{{ds.total_price}}</span>
					</view>
					<u-button :disabled="!address_enable" size="30" :ripple="true" shape="circle" open-type="share" :custom-style="{
							backgroundColor: mc,
							width:'350rpx',
							height: '80rpx',
							color: '#FFF',
							fontSize: '14px'
						}">
						发送给微信好友
					</u-button>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="showReviceModal" content="您的上级不存在，当前订单不会返佣，是否继续？" :show-cancel-button="true" :show-title="false"
		 @confirm="submitOrderHandler" :border-radius="20"></u-modal>
	</view>
</template>

<script>
	import payCom from '@/components/pay/pay';
	import peisong from '@/components/peisong/index';
	import coupon from '@/components/coupon/index';
	import goodList from '@/components/goods/order-good-list';
	export default {
		components: {
			payCom,
			peisong,
			coupon,
			goodList
		},
		data() {
			return {
				address_enable: '',
				payExit: false,
				payBtn: false,
				checked: false,
				btntext: '提交订单',
				zhaoren: false,
				zrName: '是好友就帮忙代付',
				zrimg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/zhaoren.png',
				formData: {
					list: [{
						mch_id: 0,
						goods_list: [],
						distance: 0,
						remark: '',
						order_form: [],
						use_integral: 0,
						user_coupon_id: 0
					}],
					address_id: 0
				},
				formdata: {},
				DeliveryMethod: '',
				pageTitle: '填写订单',
				address: {},
				mchs: [],
				mc: '',
				ds: {
					total_price: '0.00'
				},
				expressPrice: 0.0,
				goodPrice: 0.0,
				couponPrice: 0.0,
				integral: {
					can_use: false,
					use: false,
					use_num: 0,
					deduction_price: 0
				},
				path: '',
				secondary: '',
				userInt: false,
				loading: true,
				couponList: [],
				showCoupon: false,
				submitOrder: false,
				isLeave: false,
				goodData: [],
				showGoodList: false,
				DetailList: [],
				IsFormShoppingCart: 2,
				adressInfo: {
					Consignee:'',
					Mobile:'',
				},
				payInfo: {
					OpenId: 'ow_7I5XC1-RGwwk8QANBmWKYKmOc',
					OrderId: '',
					OrderPayType: 1,
					GoodsName: ''
				},
				ShoppingCartIdList: [],
				BuyerMessage: '',
				showReviceModal: false,
				//抵扣金额
				deduction_commission:0
			};
		},
		onLoad(option) {
			if (option.goods) {
				this.formData.list[0].goods_list = JSON.parse(decodeURIComponent(option.goods));
			}
			if (option.formData) {
				this.formData = JSON.parse(decodeURIComponent(option.formData));
				this.formdata = JSON.parse(decodeURIComponent(option.formData));
			}
			if (option.IsFormShoppingCart) {
				this.IsFormShoppingCart = option.IsFormShoppingCart;
			}
			if (option.ShoppingCartIdList) {
				this.ShoppingCartIdList = JSON.parse(option.ShoppingCartIdList);
			}
			this.payInfo.OpenId = uni.getStorageSync('mall_UserInfo').OpenId;
			this.initPage();
			this.mc = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
		},
		onShow() {
			this.init();
			if (this.isLeave) {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		methods: {
			onShareAppMessage() {
				return {
					title: this.zrName,
					path: this.path,
					imageUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/zhaoren.png'
				};
			},
			exitPay() {
				this.payExit = false;
				uni.redirectTo({
					url: "/pages/order/index/index?status=0",
				});
			},
			closePay() {
				this.payBtn = false;
				this.payExit = true;
			},
			closeGoodListHandler() {
				this.goodData = [];
				this.showGoodList = false;
			},
			showGoodListHandler(i) {
				this.goodData = this.mchs[i].goods_list;
				this.showGoodList = true;
			},
			submitModel() {
				this.showReviceModal = true;
			},
			// 提交订单
			submitOrderHandler() {
		
				let that = this;
				if (that.adressInfo.Consignee == '') {
					this.$refs.uToast.show({
						title: '请输入联系人！',
						type: 'warning'
					});
					return;
				}
				if (that.adressInfo.Mobile == '') {
					this.$refs.uToast.show({
						title: '请输入联系电话！',
						type: 'warning'
					});
					return;
				}
				if (!this.submitOrder) {
					this.submitOrder = true;
					uni.requestSubscribeMessage({
						tmplIds: this.ds.template_message_list,
						complete(res) {
							that.submitOrder = false;
							let form = {};
							form.Consignee = that.adressInfo.Consignee;
							form.Mobile = that.adressInfo.Mobile;
							form.VersionSource = 1;
							form.Province = 0;
							form.City = 0;
							form.District = 0;
							form.ShoppingAddress = '';
							form.BuyerMessage = that.BuyerMessage;
							form.DeliveryMethod = 2;
							form.DetailList = that.DetailList;
							form.User_Coupon_Id = that.formdata.User_Coupon_Id;
							form.CouponMoney = that.couponPrice;
							form.FreightMoney = that.expressPrice;
							form.Income = that.ds.total_price;
							form.IsFormShoppingCart = that.IsFormShoppingCart;
							form.Use_Integral = that.formdata.Use_Integral;
							form.ShoppingCartIdList = that.ShoppingCartIdList;
							form.AnchorName = uni.getStorageSync("AnchorName") ? uni.getStorageSync("AnchorName").AnchorName : ''; //直播名称
							if(that.mchs&&that.mchs.length>0){
								that.deduction_commission = that.mchs[0].deduction_commission;
							}
							form.DeductionCommission = that.deduction_commission;
							that.request2({
									url: '/api/AppletOrder/SetAppletGoodsOrderInfo',
									data: form
								},
								res => {
									if (res.resultCode == 1) {
											uni.navigateTo({
												url: '/pages/order-submit/education-success' 
											})

									} else {
										that.$refs.uToast.show({
											title: res.data.message,
											type: 'warning'
										});
									}
									uni.hideNavigationBarLoading();
								}
							);

						}
					});
				}
			},
			closeCouponHandler(e) {
				if (e != -1) {
					this.formdata.User_Coupon_Id = e;
					this.init();
				}
				this.showCoupon = false;
			},
			showCouponHandler() {
				this.showCoupon = true;
			},
			initCoupon() {
				let ProductList = [];
				this.DetailList = [];

				this.mchs.forEach(item => {
					item.goods_list.forEach(list => {
						let obj = {
							GoodsClassId: list.categoryIdList,
							GoodsPrice: list.total_price,
							ProductId: list.id
						};
						let obj1 = {
							SpecificationSort: list.goods_attr.sign_id,
							Number: list.num,
							GoodsId: list.id,
							SpecificationList: list.specificationNameList
						};
						ProductList.push(obj);
						this.DetailList.push(obj1);
					});
				});
				this.request2({
						url: '/api/AppletCoupon/GetNoUseCouponList',
						data: {
							ProductList: ProductList
						}
					},
					res => {
						if (res.resultCode == 1) {
							this.couponList = res.data;
						}
					}
				);
			},
			changeSendTypeHandler(e) {
				let i = e.index;

				let obj = this.mchs[i];
				obj.delivery.showDelivery = false;
				this.$set(this.mchs, i, obj);
				this.$forceUpdate();
				if (e && e.val) {
					if (this.mchs[i].delivery.send_type != e.val) {
						this.formdata.DeliveryMethod = e.val;
						this.init();
					}
				}
			},
			showPeisongHandler(x) {
				let obj = this.mchs[x];
				obj.delivery.showDelivery = true;
				this.$set(this.mchs, x, obj);
				this.$forceUpdate();
			},
			chosenAddress(id) {
				uni.navigateTo({
					url: '/pages/address/address?form=educationsubmit&id=' + id
				});
			},
			changeUseInt(e) {
				this.userInt = e.value;
				this.formdata.Use_Integral = this.userInt ? 1 : 0;
				this.init();
			},
			initPage() {
				let currentPages = getCurrentPages();
				let u = '/' + currentPages[currentPages.length - 1].route;
				let pages = uni.getStorageSync('basedata') ? uni.getStorageSync('basedata').bar_title : [];
				pages.forEach(x => {
					if (x.value == u) {
						this.pageTitle = x.new_name ? x.new_name : x.name;
					}
				});
				uni.setNavigationBarTitle({
					title: this.pageTitle
				});
			},
			init() {
				this.loading = true;
				this.request2({
						url: '/api/AppletOrder/GetAppletGoodsSettlementInfoForZY',
						data: this.formdata
					},
					res => {
						this.loading = false;
						if (res.resultCode == 1) {
							console.log(res,'数据来了');
							this.address = res.data.address;
							this.address_enable = res.data.address_enable;
							this.mchs = res.data.mch_list;
							this.mchs.forEach(x => {
								x.goods_list.forEach(j => {
									j.marketingLogo = JSON.parse(j.marketingLogo)
								})
							})
							this.payInfo.GoodsName = this.mchs[0].goods_list[0].name.slice(0, 10);
							this.formdata.DeliveryMethod = this.mchs[0].delivery.send_type;
							this.ds = res.data;
							this.expressPrice = 0.0;
							this.goodPrice = 0.0;
							this.couponPrice = 0.0;
							if (res.data.total_price < 0) {
								this.ds.total_price = 0
							}
							this.integral = {
								can_use: false,
								use: false,
								use_num: 0,
								deduction_price: 0
							};
							this.formatPrice();
							this.initCoupon();
							// this.formatAttr();
							// this.adressInfo = {
							// 	Consignee: this.address.name,
							// 	Mobile: this.address.mobile,
							// 	Province: this.address.province_id,
							// 	City: this.address.city_id,
							// 	District: this.address.district_id,
							// 	ShoppingAddress: this.address.detail
							// };
						}

						uni.hideNavigationBarLoading();
					}
				);
			},
			formatPrice() {
				this.mchs.forEach(x => {
					x.delivery.showDelivery = false;
					x.delivery.send_type_list.forEach(y => {
						if (y.value == x.delivery.send_type) {
							x.delivery.send_type_name = y.name;
						}
					});
					this.goodPrice += parseFloat(x.total_goods_price);
					this.expressPrice += parseFloat(x.express_price);
					this.couponPrice += parseFloat(x.coupon.coupon_discount || 0.0);
					if (x.integral.can_use) {
						this.integral.can_use = true;
						this.integral.use = false;
						this.integral.use_num += x.integral.use_num;
						this.integral.deduction_price += parseFloat(x.integral.deduction_price);
					}
				});
			},
			formatAttr() {
				this.mchs.forEach(x => {
					this.userInt = x.integral.use;
					x.goods_list.forEach(y => {
						let attrStr = '';
						y.attr_list.forEach((z, i) => {
							if (i > 0) {
								attrStr += ' ';
							}
							attrStr += z.attr_group_name + ' ' + z.attr_name;
						});
						y.attrStr = attrStr;
					});
				});
			},
			checkboxChange(val) {
				console.log(val)
				if (val.value == true) {
					this.btntext = '找人代付'
				} else {
					this.btntext = '提交订单'
				}
			},
		}
	};
</script>

<style>
	button[disabled] {
		color: rgba(0, 0, 0, .3) !important;
		background-color: #f7f7f7 !important;

	}

	.educationsubmit {
		min-height: 100vh;
		padding: 0 5px;
		background: #f6f6f6;
		padding-bottom: 40px;
		font-family: 'oswald';
	}

	.educationsubmit .add-box {
		padding: 10px;
		background: #fff;
		display: flex;
		align-items: center;
		position: relative;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 12px;
	}

	.educationsubmit .add-box .arrow {
		width: 16px;
		height: 16px;
	}

	.educationsubmit .add-box .add-info {
		width: 1px;
		flex: 1;
		min-height: 60px;
		display: block;
		padding: 10px 0;
	}

	.educationsubmit .add-box .add-info .address {
		font-size: 13px;
		color: #333;
		margin-bottom: 5px;
	}

	.educationsubmit .add-box .add-info .area {
		font-size: 18px;
		color: #000;
		margin-bottom: 5px;
		font-weight: 600;
	}

	.educationsubmit .daif {
		margin: 40rpx 0;
		font-size: 20px;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		width: 100%;
		justify-content: center;
	}

	.educationsubmit .add-box::before {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 2px;
		background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
		background-size: 80px;
		content: '';
	}

	.educationsubmit .pay {
		margin-bottom: 12px;
		background: #fff;
		border-radius: 10px;
		padding: 10px;
		align-items: center;
		height: 50px;
		color: #232323;
		display: flex;
	}

	.educationsubmit .pay view {
		flex: 1;
	}

	.educationsubmit .goods {
		padding: 20px 10px;
		margin-bottom: 12px;
		background: #fff;
		border-radius: 10px;
	}

	.educationsubmit .goods .store {
		color: #000;
		margin-bottom: 20px;
		display: flex;
	}

	.educationsubmit .goodbox {
		margin-bottom: 20px;
		display: flex;
	}

	.educationsubmit .goodbox .image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 5px;
		margin-right: 10px;
	}

	.educationsubmit .goodbox .goodinfo {
		width: 1px;
		flex: 1;
	}

	.educationsubmit .goodbox .goodinfo .name {
		height: 18px;
		font-size: 14px;
		color: #232323;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 15px;
	}

	.educationsubmit .goodbox .goodinfo .attr {
		height: 16px;
		font-size: 12px;
		color: #999;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 10px;
	}

	.educationsubmit .goodbox .goodinfo .price {
		display: flex;
		align-items: center;
	}

	.educationsubmit .goodbox .goodinfo .price .left {
		font-size: 20px;
		font-family: 'oswald';
		width: 1px;
		flex: 1;
	}

	.educationsubmit .goodbox .goodinfo .price .left .small {
		font-size: 13px;
	}

	.educationsubmit .goodbox .goodinfo .price .right {
		color: #444;
		font-size: 13px;
	}

	.educationsubmit .goodboxmore {
		margin-bottom: 20px;
		display: flex;
	}

	.educationsubmit .goodboxmore .good-list {
		display: flex;
		flex: 1;
		overflow-x: auto;
	}

	.educationsubmit .goodboxmore .good-list .item {
		width: 70px;
		height: 70px;
		border-radius: 5px;
		margin-right: 10px;
	}

	.educationsubmit .goodboxmore .infos {
		display: flex;
		width: 80px;
	}

	.educationsubmit .goodboxmore .infos .text {
		text-align: center;
		font-size: 13px;
		width: 57px;
		margin-right: 5px;
		line-height: 70px;
	}

	.educationsubmit .store-list .peisong {
		margin-bottom: 20px;
		display: flex;
		align-items: center;
		color: #333;
	}

	.educationsubmit .store-list .peisong view {
		flex: 1;
	}

	.educationsubmit .store-list .peisong view:last-child {
		text-align: right;
	}

	.educationsubmit .discountbox {
		padding: 20px 0;
		margin-bottom: 20px;
		background: #fff;
		border-radius: 10px;
		display: block;
	}

	.educationsubmit .filed {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20px;
		padding: 0 10px;
	}

	.educationsubmit .filed:last-child {
		margin-bottom: 0;
	}

	.educationsubmit .filed .left,
	.educationsubmit .filed .right {
		flex: 1;
		color: #232323;
	}

	.educationsubmit .filed .left {
		width: 120px;
	}

	.educationsubmit .filed .right {
		text-align: right;
		display: flex;
	}

	.educationsubmit .filed .right .icon {
		width: 18px;
		height: 18px;
	}

	.educationsubmit .filed .right .content {
		flex: 1;
		text-align: right;
		margin-right: 5px;
	}

	.educationsubmit .filed .right .price {
		font-size: 16px;
		flex: 1;
		text-align: right;
		font-family: 'oswald';
	}

	.educationsubmit .btton-box {
		height: 50px;
		display: flex;
		padding: 5px 10px;
		border-top: 1px solid #f5f5f5;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		align-items: center;
		background: #fff;
		z-index: 3;
	}

	.educationsubmit .notOption {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: transparent;
		z-index: 2;
	}

	.educationsubmit .btton-box .left {
		font-size: 16px;
		flex: 1;
		font-family: 'oswald';
	}

	.educationsubmit .btton-box .left .bold {
		font-size: 24px;
	}

	.educationsubmit .btton-box .right {
		width: 120px;
	}

	.educationsubmit .Logo {
		padding: 1px 5px;
		display: inline-block;
		font-size: 22rpx;
		margin-right: 5rpx;
		border-radius: 4px;
	}
	.educationsubmit .liuyan{
		margin-bottom: 10px;
	}
</style>
