<style>
	.place_order {
		height: 100%;
		background: #f5f5f5;
	}

	.place_order .orderItem {
		background-color: #fff;
		margin-bottom: 10px;
		padding: 0 15px;
	}

	.place_order .order_big {
		font-size: 14px;
		color: #08090E;
		/* font-weight: bold; */
	}

	.place_order .order_mini {
		font-size: 11px;
		color: #919191;
		margin-top: 10px;
	}

	.place_order .orderCar {
		display: flex;
		justify-content: space-between;
		padding: 30px 0;
	}

	.place_order .order_carImg image {
		width: 200rpx;
		height: 200rpx;
	}

	.place_order .order_GName {
		width: 100%;
		height: 50px;
		border-top: 1px solid rgba(0, 0, 0, 0.05);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.order_carBg {
		background-color: #F5F5F5;
		width: 100%;
		padding: 5px;
		color: #727272;
		font-size: 12px;
	}

	.place_order .order_small {
		font-size: 14px;
		color: #919191;
	}

	.place_order .order_comLeft {
		/* margin-left: 70px; */
	}

	.or_Image {
		width: 10px;
		height: 14px;
		margin-right: 5px;
	}

	.place_order .btnstyle {
		width: 135px;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		color: #FFF;
		background-image: linear-gradient(to right,
			#FF8585,
			#EE4454);
	}

	.OrderbtnList {
		position: fixed;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 3;
		height: 50px;
		display: flex;
		align-items: center;
	}

	.Order_heji {
		font-size: 14px;
		color: #616161;
		width: 60%;
		text-align: right;
		padding-right: 20px;
	}

	.Ordersku .count-box {
		display: flex;
		width: 90%;
		margin: 40px auto 20px;
		padding: 15px 0;
	}

	.Ordersku .count-box .label {
		font-size: 14px;
		color: #333;
		width: 1px;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
	}

	.place_order .orderNum_close {
		position: absolute;
		right: 15px;
		top: 15px;
	}

	.order_Remark {
		color: red;
		font-size: 12px;
		text-align: right;
		margin-bottom: 10px;
	}

	.disBtn {
		background-color: gray !important;
		background-image: none !important;
	}

	.Agree_content {
		padding: 24rpx;
		text-align: center;
		background: #fff;
		position: relative;
	}

	.place_order .order_close {
		position: absolute;
		right: 10px;
		top: 10px;
		z-index: 999;
	}
	.place_order .Shop_Address{
		display: inline-block;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 2;
	    line-clamp: 2;
	    -webkit-box-orient: vertical;
	}
</style>
<template>
	<view class="place_order">
		<template v-if="mchs.length>0">
		<view class="orderItem">
			<view class="orderCar">
				<view class="order_carImg">
					<image mode="aspectFit" :src="mchs[0].goods_list[0].cover_pic" />
					</image>
				</view>
				<view style="width:48%">
					<view class="order_big">{{mchs[0].goods_list[0].goods_attr.name}}</view>
					<view class="order_carBg" style="margin-top:10px;">
						<view style="margin-bottom:5px;">天数：{{mchs[0].goods_list[0].goods_attr.advance_day}}天</view>
						<view style="margin-bottom:5px;">颜色：{{mchs[0].goods_list[0].goods_attr.carcolor_name}}</view>
						<view>类型：{{mchs[0].goods_list[0].goods_attr.car_model}}/{{mchs[0].goods_list[0].goods_attr.ride_num}}座
						{{mchs[0].goods_list[0].goods_attr.car_class}}</view>
					</view>
				</view>
				<view style="text-align: right;">
					<view class="order_big">¥ {{mchs[0].goods_list[0].unit_price}}</view>
					<view style="color:#727272;font-size:13px;">×{{mchs[0].goods_list[0].num}}</view>
				</view>
			</view>
			<view class="order_GName">
				<view class="order_big order_comLeft">匹配导游</view>
				<view style="display: flex;align-items: center;">
					<u-avatar mode="circle" style="margin-top:9px;" :size="50"  :src="mchs[0].goods_list[0].goods_attr.guide_photo"></u-avatar>
					<text class="order_big" style="margin-left:3px;">{{mchs[0].goods_list[0].goods_attr.guide_name}}</text>
				</view>
			</view>
			<view class="order_GName">
				<view class="order_big order_comLeft">服务类型</view>
				<view style="display: flex;align-items: center;">
					<text class="order_big" style="margin-left:5px;">
						{{mchs[0].goods_list[0].goods_attr.car_type_name}}
					</text>
				</view>
			</view>
			<view class="order_GName">
				<view class="order_big order_comLeft">是否拼座</view>
				<view style="display: flex;align-items: center;">
					<text class="order_big" style="margin-left:5px;">
						{{mchs[0].goods_list[0].goods_attr.is_spell==1?'是':'否'}}
					</text>
				</view>
			</view>
		</view>
		</template>
		<view class="orderItem">
			<view class="order_GName" style="border-top:0;">
				<view class="order_big order_comLeft">联系人</view>
				<view style="display: flex;align-items: center;">
					<input class="uni-input" v-model="orderMsg.Consignee" placeholder="请输入联系人" style="border:none;padding-left:5px;text-align: right;" />
				</view>
			</view>
			<view class="order_GName" style="border-top:0;border-top: 1px solid rgba(0, 0, 0, 0.05);">
				<view class="order_big order_comLeft">联系电话</view>
				<view style="display: flex;align-items: center;">
					<input class="uni-input" v-model="orderMsg.Mobile" placeholder="请输入联系电话" style="border:none;padding-left:5px;text-align: right;" />
				</view>
			</view>
			<view class="order_GName" style="border-top:0;border-top: 1px solid rgba(0, 0, 0, 0.05);">
				<view class="order_big order_comLeft">取车城市</view>
				<view style="display: flex;align-items: center;">
					四川 成都市
				</view>
			</view>
			<view class="order_GName" @click="openmap(),isShowStart=1">
				<view class="order_big order_comLeft">出发地址</view>
				<view style="display: flex;align-items: center;width:56%" v-if="msg.ShoppingAddress!=''">
					<image class="or_Image" mode="aspectFit" style="width:30px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/o_address.png"></image>
					<text class="Shop_Address">{{msg.ShoppingAddress}}</text>
				</view>
				<view v-else>
					<text>请选择</text>
				</view>
			</view>
			<view class="order_GName" v-if="mchs[0].goods_list[0].goods_attr.car_type!=5" @click="openmap(),isShowStart=2">
				<view class="order_big order_comLeft">目的地</view>
				<view style="display: flex;align-items: center;width:56%" v-if="orderMsg.DestinationAddress!=''">
					<image class="or_Image" mode="aspectFit" style="width:30px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/o_address.png"></image>
					<text>{{orderMsg.DestinationAddress}}</text>
				</view>
				<view v-else>
					<text>请选择</text>
				</view>
			</view>
			<view class="order_GName" style="height:90px;align-items: normal;">
				<view class="order_big order_comLeft" style="margin-top:10px;">用车时间</view>
				<view style="display: flex;align-items: center;" @click="gotime">
					<view style="text-align: right;">
						<view>{{STime.month}}月{{STime.day}}日 {{STime.week+' '+STime.hour+':'+STime.minute}}</view>
						<view style="margin:5px 0;">至<text style="color:#4578FF;font-size:12px;">({{intervalDay==0.5?'半':intervalDay}}天)</text></view>
						<view>{{ETime.month}}月{{ETime.day}}日 {{ETime.week+' '+ETime.hour+':'+ETime.minute}}</view>
					</view>
					<view>
						<u-icon name="arrow" :size="32" color="#111"></u-icon>
					</view>
				</view>
			</view>
			<view v-if="!dataList.date_enable" class="order_Remark">
				{{dataList.date_remark}}
			</view>
			<view class="order_GName" @click="showPeopleDialog=true">
				<view class="order_big order_comLeft">人数</view>
				<view style="display: flex;align-items: center;">
					{{msg.DetailList[0].Number}}
					<u-icon name="arrow" :size="32" color="#111"></u-icon>
				</view>
			</view>
		</view>
		<view class="orderItem" style="padding-bottom:60px;">
			<view class="order_GName" style="border-top:0;">
				<view class="order_big order_comLeft">优惠券</view>
				<view style="display: flex;align-items: center;">
					<text style="color:#F20707" @click="showCouponHandler">
						<text style="flex: 1;" v-if="mchs[0].coupon.user_coupon_id == 0 &&couponList.length>0">选择优惠券</text>
						<text class="content" v-else-if="couponList.length==0">暂无优惠券</text>
						<text class="content" v-else :style="{ color: mainColor }">已优惠{{ mchs[0].coupon.coupon_discount }}元</text>
						<u-icon name="ellipsis" size="36" v-if="couponList.length > 0"></u-icon>
					</text>
					<u-icon name="arrow" :size="32" color="#111"></u-icon>
				</view>
			</view>
			<view class="order_GName" v-if="mchs[0].integral.can_use">
				<view class="order_big order_comLeft">积分抵扣</view>
				<view style="display: flex;align-items: center;">
					<text>{{ `使用${mchs[0].integral.use_num}积分抵扣` }}</text><text style="color:#F20707;margin:0 5px;">¥{{mchs[0].integral.deduction_price}}</text>
					<u-checkbox-group>
						<u-checkbox v-model="userInt" :active-color="mainColor" @change="changeUseInt" size="30" shape="circle"></u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
			<view class="order_GName" style="height:70px;align-items: normal;">
				<view class="order_big order_comLeft" style="margin-top:16px;">保险</view>
				<view style="display: flex;align-items: center;">
					<view style="text-align: right;">
						<view>意外保险
							<text style="color:#F20707;margin:0 5px;">¥{{mchs[0].insurance_money}}/人</text>
							<text style="margin-right:5px;">×{{msg.DetailList[0].Number}}</text>
							<u-checkbox-group size="30">
								<u-checkbox v-model="checked" @change="changeAgree" :active-color="mainColor"></u-checkbox>
							</u-checkbox-group>
						</view>
						<view style="margin-top:5px;" @click="showAgree=true">请阅读<text style="color:#4578FF">《保险条款》</text></view>
					</view>
				</view>
			</view>
			<view class="order_GName">
				<u-field padding="0px" style='width: 100%;' label-width="80" v-model="orderMsg.BuyerMessage" label="留言" placeholder="建议留言前先与客服沟通确认"></u-field>
			</view>
			<view class="order_GName">
				<view style="text-align: right;width:100%;">
					<text style="color:#ADADAD;margin-right:10px;">共{{intervalDay==0.5?'半':intervalDay}}天</text>
					<text>小计：<text style="color:#F20707;">¥{{mchs[0].total_price}}</text></text>
				</view>
			</view>
		</view>
		<view class="OrderbtnList">
			<view class="Order_heji">
				合计<text style="color:#F20707;font-size:15px;margin-left:5px;">¥{{mchs[0].total_price}}</text>
			</view>
			<view class='btnstyle' :class="{'disBtn':!dataList.date_enable}" @click="subOrder()" style="width:40%;">提交订单</view>
		</view>
		<!-- 购买数量 -->
		<u-popup mode="bottom" v-model="showPeopleDialog" border-radius="14" :mask-close-able="true" custom-style="padding:0;background:none;">
			<view class="Ordersku">
				<view class="orderNum_close">
					<u-icon name="cross" color="#9F9F9F" @click="showPeopleDialog=false" size="40" />
				</view>
				<view class="count-box">
					<text class="label">购买数量</text>
					<u-number-box v-model="msg.DetailList[0].Number" :min="1" @change="valChange"></u-number-box>
				</view>
				<view class="btn-box">
					<view style="flex: 1;">
						<u-button :ripple="true" :hair-line="false" @click="sureBuyNum()" :custom-style="btn1">确定</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<coupon v-if="couponList.length > 0 && showCoupon" :list="couponList" :current="msg.User_Coupon_Id" @close="closeCouponHandler"></coupon>
		<u-popup v-model="showAgree" mode="center" length="98%">
			<view class="Agree_content">
				<view class="order_close" @click="showAgree=false">
					<u-icon name="cross" color="#9F9F9F" size="40" />
				</view>
				<scroll-view scroll-y="true" :style="{'height':contentHeight}">
					<view>条款</view>
					<view style="margin-top:20px;" v-html="dataList.insurance_description"></view>
				</scroll-view>
			</view>
		</u-popup>
		<payCom v-if="payBtn" :payInfo="payInfo" @closePay="closePay"></payCom>
		<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>
	</view>
</template>

<script>
	import amap from './components/amap-wx.js'
	import AddressParse from '../address/zh-address-parse.min.js'
	import coupon from '@/components/coupon/index';
	import payCom from '@/components/pay/pay';
	
	export default {
		components: {
			coupon,
			payCom
		},
		data() {
			return {
				mainColor: "",
				activeStyle: "",
				pageTitle: "确认订单",
				g: {},
				msg: {
					DetailList: [{
						GoodsId: 0, //商品id
						Number: 0, //人数
					}],
					TripSTime: '', //预约日期
					District: 0, //区id
					City: 0, //市id
					Province: 0, //省id
					ShoppingAddress: '', //接送详细地址
					User_Coupon_Id: 0, //优惠券id
					Use_Integral: 0, // 使用积分
				},
				//是否使用积分抵扣
				UseScore: '',
				btn1: {
					flex: 1,
					height: '100%',
					borderRadius: '40px',
					border: 'none',
					color: '#FFF',
					fontSize: '13px',
					width: '90%',
					background: '#EE4454',
					marginBottom: '20px'
				},
				//是否显示修改人数
				showPeopleDialog: false,

				//优惠券
				couponList: [],
				//优惠券弹窗
				showCoupon: false,
				mchs: [],
				dataList: [], //数据源
				userInt: false,
				checked: true,
				showAgree: false, //是否显示协议弹窗
				contentHeight: 0,
				//下单msg
				orderMsg: {
					Consignee: '', //联系人
					Mobile: '', //联系电话
					Province: 0, //省id
					City: 0, //市id
					District: 0, //区id
					ShoppingAddress: '', //接送地址
					BuyerMessage: '', //买家留言
					DetailList: [{
						GoodsId: 0, //商品id
						Number: 0, //人数
					}],
					User_Coupon_Id: 0, //使用优惠券id
					CouponMoney: '', //优惠金额
					Income: '', //客人付款金额
					Use_Integral: '', //使用积分数量
					AnchorName: '', //主播名称
					TripSTime: '', //预定起始时间
					TripETime: '', //预定结束时间
					CarType: '', //服务类型
					DestinationAddress: '' //目的地
				},
				intervalDay: '',
				StartTime: '',
				EndTime: '',
				STime: {},
				ETime: {},

				Pickcar: '成都', //取车城市
				amapPlugin: null,
				key: 'c785085c46d1eb41b1ebe8d1ec7fd945',
				latitude: '',
				longitude: '',
				isShowStart:1, //1出发地址赋值 2目的地赋值
				
				//支付信息
				payInfo: {
					OpenId: 'ow_7I5XC1-RGwwk8QANBmWKYKmOc',
					OrderId: '',
					OrderPayType: 1,
					GoodsName: ''
				},
				payBtn:false,
				payExit: false,
			};
		},

		onLoad(options) {
			if (options) {
				this.msg.DetailList[0].GoodsId = options.GoodsId;
				this.msg.DetailList[0].Number = options.Number;
				this.msg.ShoppingAddress = options.ShoppingAddress;
				//时间的处理
				this.msg.TripSTime = options.StartTime;
				this.STime = this.getTime(options.StartTime);
				this.StartTime = options.StartTime;
				this.ETime = this.getTime(options.EndTime);
				this.EndTime = options.EndTime;
				
				this.orderMsg.TripSTime = options.StartTime;
				this.orderMsg.TripETime = options.EndTime;
				
				this.payInfo.OpenId=uni.getStorageSync('mall_UserInfo').OpenId;
				
				
				//地址处理
				let parseResult = AddressParse(this.msg.ShoppingAddress, 0)
				let nameList = [parseResult.province, parseResult.city, parseResult.area];
				this.getDestination(nameList);

				this.amapPlugin = new amap.AMapWX({
					key: this.key
				});
				this.getRegeo()
			}
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.activeStyle = `background:${this.mainColor};`;
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
			this.contentHeight = this.$utils.calcContentHeight(100) + "px";
		},
		methods: {
			getRegeo() {
				uni.showLoading({
					title: '获取信息中'
				});
				this.amapPlugin.getRegeo({
					success: (data) => {
						this.Pickcar = data[0].regeocodeData.addressComponent.city;
						this.latitude = data[0].latitude;
						this.longitude = data[0].longitude;
						uni.hideLoading();
					}
				});
			},
			openmap() { //打开地图选择详情地址
				let that = this
				uni.chooseLocation({
					latitude: this.latitude,
					longitude: this.longitude,
					success: function(res) {
						if(that.isShowStart==1){
							that.latitude = res.latitude;
							that.longitude = res.longitude;
							that.msg.ShoppingAddress = res.address
							let parseResult = AddressParse(that.msg.ShoppingAddress, 0)
							let nameList = [parseResult.province, parseResult.city, parseResult.area];
							that.getDestination(nameList);
						}else{
							that.orderMsg.DestinationAddress = res.address;
						}
					}
				});
			},
			//获取数据
			getData() {
				this.request2({
						url: '/api/AppletGCOrder/GetAppletSDGoodsSettlementInfo',
						data: this.msg
					},
					res => {
						if (res.resultCode == 1) {
							this.dataList = res.data;
							if(res.data.mch_list){
								this.mchs = res.data.mch_list;
								this.intervalDay = this.dataList.mch_list[0].goods_list[0].goods_attr.use_day; //获取多少天
								
								this.payInfo.GoodsName = this.mchs[0].goods_list[0].goods_attr.car_name.slice(0,10);
								
								this.mchs.forEach(x => {
									x.goods_list.forEach(j => {
										j.marketingLogo = JSON.parse(j.marketingLogo)
									})
								})
							}
							this.initCoupon();
						}
					}
				);
			},
			gotime() {
				let GoodsId = this.msg.DetailList[0].GoodsId
				uni.navigateTo({
					url: '/pages/guidecar/rili?StartTime=' + this.StartTime + '&EndTime=' + this.EndTime + '&use_day=' + this.intervalDay +
						'&GoodsId=' + GoodsId
				})
			},
			gotimeconfirm(StartTime, EndTime) { //选择时间返回的参数
				this.STime = this.getTime(StartTime)
				this.StartTime = StartTime
				this.ETime = this.getTime(EndTime)
				this.EndTime = EndTime;
				this.msg.TripSTime = StartTime;
				
				this.orderMsg.TripSTime = StartTime
				this.orderMsg.TripETime = EndTime
				
				this.getData()
			},
			getTime(time) {
				let myDate = new Date(time);
				let obj = {}
				obj.year = myDate.getFullYear(); //年
				obj.month = myDate.getMonth() + 1; //月
				obj.day = myDate.getDate(); //日
				obj.hour = myDate.getHours(); //时
				obj.minute = myDate.getMinutes(); //分
				let days = myDate.getDay();
				obj.week = this.getweek(days) //星期几
				return obj
			},
			getweek(day) { //根据值返回当前时间的星期几
				if (day == 1) {
					return '星期一'
				} else if (day == 2) {
					return '星期二'
				} else if (day == 3) {
					return '星期三'
				} else if (day == 4) {
					return '星期四'
				} else if (day == 5) {
					return '星期五'
				} else if (day == 6) {
					return '星期六'
				} else if (day == 0) {
					return '星期日'
				}
			},
			//通过地址获取省市区ID
			getDestination(nameList) {
				this.request2({
						url: '/api/AppletGuideCar/GetDestinationListByNames',
						data: {
							area: nameList
						}
					},
					res => {
						if (res.resultCode == 1) {
							if (res.data.length == 3) {
								this.msg.Province = res.data[0].ID;
								this.msg.City = res.data[1].ID;
								this.msg.District = res.data[2].ID;
							} else {
								this.msg.Province = res.data[0].ID;
								this.msg.City = res.data[1].ID;
								this.msg.District = 0;
							}
							this.getData();
						}
					}
				);
			},
			//人数
			valChange(e) {
				this.msg.DetailList[0].Number = e.value;
			},
			//点击确定
			sureBuyNum() {
				this.showPeopleDialog = false;
				this.getData();
			},
			//关闭弹窗
			cloGood() {
				this.popupClose();
			},
			//选择优惠券
			showCouponHandler() {
				this.showCoupon = true;
			},
			//关闭优惠券弹出
			closeCouponHandler(e) {
				if (e != -1) {
					this.msg.User_Coupon_Id = e;
					this.getData();
				}
				this.showCoupon = false;
			},
			//选择是否用积分
			changeUseInt(e) {
				this.userInt = e.value;
				this.msg.Use_Integral = this.userInt ? 1 : 0;
				this.getData();
			},
			//点击始终同意协议
			changeAgree(e) {
				this.checked = true;
			},
			//获取优惠券下拉数据
			initCoupon() {
				let ProductList = [];
				this.mchs.forEach(item => {
					item.goods_list.forEach(list => {
						let obj = {
							GoodsClassId: list.categoryIdList,
							GoodsPrice: list.total_price,
							ProductId: list.id
						};
						ProductList.push(obj);
					});
				});
				this.request2({
						url: '/api/AppletCoupon/GetNoUseCouponList',
						data: {
							ProductList: ProductList
						}
					},
					res => {
						if (res.resultCode == 1) {
							this.couponList = res.data;
						}
					}
				);
			},
			//提交订单
			subOrder() {
				if (this.dataList.date_enable) {
					this.orderMsg.Province = this.msg.Province;
					this.orderMsg.City = this.msg.City;
					this.orderMsg.District = this.msg.District;
					this.orderMsg.ShoppingAddress = this.msg.ShoppingAddress;
					this.orderMsg.DetailList = this.msg.DetailList;
					this.orderMsg.User_Coupon_Id = this.msg.User_Coupon_Id;
					this.orderMsg.CouponMoney = this.dataList.mch_list[0].coupon.coupon_discount; //优惠金额
					this.orderMsg.Income = this.dataList.total_price;
					this.orderMsg.Use_Integral = this.msg.Use_Integral;
					this.orderMsg.CarType = this.dataList.mch_list[0].goods_list[0].goods_attr.car_type;
					this.orderMsg.AnchorName = uni.getStorageSync("AnchorName")?uni.getStorageSync("AnchorName").AnchorName:''; //直播名称
					this.request2({
							url: '/api/AppletOrder/SetAppletSDGoodsOrderInfo',
							data: this.orderMsg
						},
						res => {
							if (res.resultCode == 1) {
								this.payInfo.OrderId = res.data.OrderId;
								this.payInfo.total_price = this.dataList.total_price;
								this.payBtn = true;
							}else{
								this.$refs.uToast.show({
									title: res.data.message,
									type: 'warning'
								});
							}
						}
					);
				}
			},
			closePay() {
				this.payBtn = false;
				this.payExit = true;
			},
			exitPay() {
				this.payExit = false;
				uni.redirectTo({
				  url: "/pages/guidecar/orderList?status=1",
				});
			},
		},
	};
</script>
