<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">订单确认</block>
		</cu-custom>
		<!-- 服务地址 -->
		<view v-if="formInfo.defaultAddress" class="bg-white">
			<view class="padding flex justify-between align-center" @click="showAddress2Choose">
				<view>
					<view class="flex justify-start align-center">
						<view class="text-gray margin-right-xs" v-for="(areaObj, index) in formInfo.defaultAddress.area">
							{{areaObj.name}}
						</view>
					</view>
					<view class="text-lg margin-tb-sm">{{formInfo.defaultAddress.address}}</view>
					<view class="text-gray">
						<text class="margin-right">{{formInfo.defaultAddress.person2Contact}}</text>
						<text>{{formInfo.defaultAddress.phone}}</text>
					</view>
				</view>
				<view class="text-lg"><text class="text-bold text-gray cuIcon-right"></text></view>
			</view>
			<view class="cu-progress sm striped">
				<view class="bg-orange" style="width: 100%;"></view>
			</view>
		</view>
		<view v-else class="bg-white" @click="showAddress2Choose">
			<view class="flex justify-between align-center padding-lg">
				<view class="text-lg text-black">
					<text class="cuIcon-locationfill text-blue light"></text>
					选择服务地址
				</view>
				<view>选择<text class="text-sm text-bold text-gray cuIcon-right"></text></view>
			</view>
			<view class="cu-progress sm striped">
				<view class="bg-orange" style="width: 100%;"></view>
			</view>
		</view>
		<!-- 预约时间 -->
		<view class="margin-lr-sm margin-top-sm bg-white padding">
			<view class="flex justify-between align-center">
				<text class="text-black">预约时间</text>
				<uni-datetime-picker @change="changeDoorTime">
					<view v-if="formInfo.doorTime" class="text-sm">{{formInfo.doorTime}}<text class="text-bold cuIcon-right"></text>
					</view>
					<view v-else class="text-red text-sm">请选择上门时间<text class="text-bold cuIcon-right"></text></view>
				</uni-datetime-picker>
			</view>
			<view class="text-sm text-gray margin-top-sm"><text
					class="cuIcon-question">选择的为期望上门时间，稍后工程师将与你确认具体上门时间</text></view>
		</view>
		<!-- 选购的商品列表 -->
		<view class="margin-lr-sm margin-top-sm bg-white">
			<view class="solid-top" v-for="(item, index0) in pickedProductList">
				<view class="cu-bar">
					<view class="action bar-first-action">
						<text class="cuIcon-shopfill text-main-color"></text>
						{{item.shopName}}
						<view>
							<view class="cuIcon-right"></view>
						</view>
					</view>
				</view>
				<view class="margin-top-sm padding-lr">
					<product-picked :columnTitleArr="columnTitleArr" v-for="(product, index1) in item.product"
						:product="product" :pickedList="product.pickedList">
					</product-picked>
				</view>
			</view>
			<!-- <view class="solid-bottom" v-for="(item, index) in pickedProductList">
				<product-picked :columnTitleArr="columnTitleArr" :product="item.product" :pickedList="item.pickedList">
				</product-picked>
			</view> -->
		</view>
		<!-- 支付方式 -->
		<view class="margin-lr-sm margin-top-sm bg-white padding">
			<view class="flex justify-between align-center">
				<text class="text-black">支付方式</text>
				<radio-group @change="changePayWay">
					<label class="radio">
						<radio class="main-color" value="0" :checked="formInfo.payWay=='0'" />
						<text class="margin-left-xs">在线支付</text>
					</label>
					<label class="radio margin-left">
						<radio class="main-color" value="1" :checked="formInfo.payWay=='1'" />
						<text class="margin-left-xs">上门到付</text>
					</label>
				</radio-group>
			</view>
		</view>
		<!-- 发票信息 -->
		<view class="margin-lr-sm margin-top-sm bg-white padding">
			<view class="flex justify-between align-center">
				<!-- <text class="text-black">发票信息</text>
				<text class="text-sm text-bold cuIcon-right"></text> -->
				<text class="text-black">是否需要发票</text>
				<radio-group @change="changeIsNeedBill">
					<label class="radio">
						<radio class="main-color" value="0" :checked="formInfo.isNeedBill=='0'" />
						<text class="margin-left-xs">不需要</text>
					</label>
					<label class="radio margin-left">
						<radio class="main-color" value="1" :checked="formInfo.isNeedBill=='1'" />
						<text class="margin-left-xs">需要</text>
					</label>
				</radio-group>
			</view>
		</view>
		<!-- 备注留言 -->
		<view class="margin-lr-sm margin-top-sm bg-white padding">
			<text class="text-black">备注留言</text>
			<view class="margin-top uni-textarea">
				<textarea class="solid" maxlength="-1" @input="inputComments" placeholder="请填写备注" />
			</view>
		</view>
		<!-- 平台提醒 -->
		<view class="margin-lr-sm margin-top-sm bg-white padding margin-bottom-with-bar">
			<view class="text-sm text-orange"><text
					class="cuIcon-roundcheck">为保障您的权益，请在平台内交易，师傅服务离开后发生损坏或退款以及售后质保，平台可为您追责！</text></view>
		</view>
		<!-- 底部操作栏 -->
		<view class="cu-bar bg-white tabbar border shop fixed-bottom-bar">
			<view class="action text-df left-grid">
				<text class="margin-left-lg">共计</text>
				<text class="margin-left-xs text-red text-price text-xl">{{totalPrice}}</text>
			</view>
			<view class="bg-main-color submit" @click="submit">确定</view>
		</view>
	</view>
</template>

<script>
	import productPicked from '@/components/goods-card/product-picked.vue';

	export default {
		components: {
			productPicked
		},
		data() {
			return {
				columnTitleArr: ['购买型号', '购买数量'],
				pickedProductList: [],
				formInfo: {
					payWay: '0',
					isNeedBill: '0',
					comments: '',
					doorTime: null,
					defaultAddress: null
				},
				totalPrice: 0
			}
		},
		onLoad(options) {
			let params = JSON.parse(decodeURIComponent(options.params));
			this.loadData(params);
			this.bindEvent();
		},
		onUnload() {
			this.offBindEvent();
		},
		methods: {
			async loadData(params) {
				// this.pickedProductList = await this.$api.data('pickedProductList');
				this.pickedProductList = params.pickedProductList;
				// TODO: 遍历查询每个product的总价并赋值，此处先赋定值
				for (let i = 0; i < this.pickedProductList.length; i++) {
					for (let j = 0; j < this.pickedProductList[i].product.length; j++) {
						this.pickedProductList[i].product[j].discountsPrice = 100;
						this.pickedProductList[i].product[j].goodsPrice = 200;
					}
				}
				this.formInfo.defaultAddress = await this.$api.data('defaultAddress');
			},
			bindEvent() {
				uni.$on(this.$globalFun.CHOOSE_ADDRESS, this.chooseAddress);
			},
			offBindEvent() {
				uni.$off(this.$globalFun.CHOOSE_ADDRESS);
			},
			changePayWay(e) {
				this.formInfo.payWay = e.detail.value;
			},
			changeIsNeedBill(e) {
				this.formInfo.isNeedBill = e.detail.value;
			},
			inputComments(e) {
				this.formInfo.comments = e.detail.value
			},
			showAddress2Choose() {
				uni.navigateTo({
					url: '/pages/my/my-address?chooseMode=true'
				})
			},
			chooseAddress(addressInfo) {
				this.formInfo.defaultAddress = addressInfo;
			},
			changeDoorTime(value) {
				this.formInfo.doorTime = value;
			},
			parseGoodsList() {
				let goodsList = [];
				this.pickedProductList.forEach((shopInfo) => {
					shopInfo.product.forEach((productInfo) => {
						productInfo.pickedList.forEach((pickedSpecs) => {
							goodsList.push({
								goodsId: pickedSpecs.id,
								num: pickedSpecs.pickedNum,
							})
						})
					})
				})
				return goodsList;
			},
			validForm() {
				if (!this.formInfo.defaultAddress) {
					uni.showToast({
						title: '请选择服务地址',
						icon: 'none'
					})
					return false;
				}
				if (!this.formInfo.doorTime) {
					uni.showToast({
						title: '请选择上门时间',
						icon: 'none'
					})
					return false;
				}
				return true;
			},
			async submit() {
				let valid = this.validForm();
				if (!valid) {
					return;
				}
				let curUserInfo = this.$request.getCurUserInfo();
				let params = {
					// customerId: curUserInfo.userId,
					customerId: 2,
					serverTime: this.formInfo.doorTime,
					addressId: this.formInfo.defaultAddress.id,
					payType: this.formInfo.payWay,
					remark: this.formInfo.comments,
					isNeedBill: this.formInfo.isNeedBill,
					// goodsList: this.parseGoodsList()
					goodsList: [{
						goodsId: 2,
						num: 1
					}, {
						goodsId: 3,
						num: 1
					}]
				}
				// 调用下单接口
				let res = await this.$request.placeOrder(params);
				try {
					// 获取微信支付所需参数
					let exPayParams = {
						code: this.$request.getCurUserInfo().openId,
						orderMasterCode: res.data.code
					}
					let wxPayParamRes = await this.$request.getWxPayParams(exPayParams);
					// 拉起微信支付窗口,支付成功跳转到支付成功页面
					let payInfo = JSON.parse(wxPayParamRes.data.expend.pay_info);
					let wxPayRes = await wx.requestPayment(payInfo);
					if (wxPayRes.errMsg === "requestPayment:ok") {
						uni.navigateTo({
							url: '/pages/order/pay-result?payResult=0'
						})
					} else {
						throw 'err';
					}
				} catch(e) {
					// 支付失败弹出提示并跳转到我的订单待支付页
					uni.navigateTo({
						url: '/pages/order/pay-result?payResult=1'
					})
				}
			}
		},
	}
</script>

<style scoped>
	.fixed-bottom-bar .text-df {
		font-size: 28rpx !important;
	}

	.fixed-bottom-bar .left-grid {
		width: 55% !important;
		text-align: left;
	}

	.bar-first-action {
		margin-left: unset !important;
		padding-left: 40rpx;
		font-size: 30rpx !important;
	}

	.cu-progress {
		display: inherit;
	}

	.cu-progress.sm {
		height: 12rpx;
	}
</style>
