<template>
	<view class="background">
		<cu-custom style="color: #FFFFFF;" :isBack="true" :backWhite="true">
			<block slot="content">
				<text style="color: #FFFFFF;">确认订单</text>
			</block>
		</cu-custom>
		<view style="margin-left: 20rpx;margin-right: 20rpx;">
			<!-- 地址描述 -->
			<view 
				style="margin-top: 10rpx;padding: 0rpx 25rpx 34rpx 33rpx;border-radius: 20rpx;background-color: #FFFFFF">
				<view class="" v-if="addressInfo"  @click="chooseAddress()">
					<view class="flex align-center justify-between">
						<text
							style="margin-top: 39rpx;font-size: 34rpx;font-weight: bold;color: #111111;">{{addressInfo.address}}
							<text class="margin-left-xs"> {{addressInfo.detailed}}</text></text>
						<image src="../../static/arrows_right.png"
							style="width: 24rpx;height: 24rpx;margin-top: 39rpx;">
						</image>
					</view>
					<view class="align-center flex" style="margin-top: 20rpx;">
						<text style="font-size: 26rpx;font-weight: 400;color: #111111;">{{addressInfo.name}}</text>
						<text
							style="font-size: 26rpx;font-weight: 400;color: #111111;margin-left: 28rpx;">{{addressInfo.phone}}</text>
					</view>
				</view>
				<view  @click="chooseAddress()" class="flex justify-between align-center" v-else
					style="padding-top: 30rpx;font-size: 34rpx;font-weight: bold;color: #999">
					<text>请选择服务地址</text>
					<image src="../../static/arrows_right.png" style="width: 24rpx;height: 24rpx;">
					</image>
				</view>
			</view>

            <!-- 备注 -->
            <view style="margin-top: 16rpx;padding: 0rpx 25rpx 0 33rpx;border-radius: 20rpx;background-color: #FFFFFF">
                <view @click="gotoRemark" class="flex align-center justify-between"
                    style="padding: 33rpx 0rpx 33rpx 0rpx;margin-left: 29rpx;margin-right: 29rpx;">
                    <text style="font-size: 29rpx;font-weight: bold;color: #111111;">备注</text>
                
                    <view class="align-center flex">
                        <text v-if="!remark"
                            style="margin-left: 29rpx;margin-right: 29rpx; color: #999999;font-weight: 500;font-size: 29rpx;">可填写特殊需求</text>
                        <text v-else
                            style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 60vw;margin-right: 20rpx;">{{remark}}</text>
                        <image src="../../static/arrows_right.png" style="width: 23rpx;height: 23rpx;"></image>
                    </view>
                </view>
            </view>
            
  
			<!-- 公司描述 -->
			<view style="margin-top: 15rpx; background-color: #FFFFFF;border-radius: 20rpx;">
				<view style="margin-left: 20rpx;margin-right: 20rpx;">
					<view class="flex align-center" 
						style="padding: 15rpx 0rpx 15rpx 0rpx;border-bottom: #EEEEEE 1rpx solid; ">
						<image mode="aspectFill" :src="orderParam.merchant.avatar"
							style="width: 90rpx;height: 72rpx; border-radius: 10rpx;"></image>
						<text
							style="font-size: 26rpx;font-weight: 500;color: #666666;margin-left: 21rpx;">{{orderParam.merchant.merchantName}}</text>
					</view>

					<view class="flex align-start" style="padding:35rpx 0rpx 44rpx 0rpx;">
						<image :src="orderParam.goodsImageList[0].url"
							style="width: 160rpx;height: 128rpx; border-radius: 10rpx;" mode="widthFix"></image>

						<view style="font-size: 28rpx;font-weight: 400;color: #111111;margin-left: 19rpx;flex:1">
							<text style="   font-size: 36rpx;text-align: left; font-family: 'Arial Normal', 'Arial', sans-serif;
								font-weight: 400;font-style: normal;">
								{{orderParam.name}}</text>
							<view class="flex align-center" style="margin-top: 27rpx;">
                                <view style="padding:2rpx 14rpx;background: #FAFAFA;border: 2rpx solid #CCCCCC;border-radius: 8rpx;font-size: 24rpx;color: #666;">
                                    {{specInfo.specificationDesc}}
                                </view>
								<text style="margin-left: 36rpx;font-size: 24rpx;font-weight: 500;color: #FF481E;">{{specInfo.times}}次</text>
							</view>
							<view class="flex align-center justify-between">
								<view></view>
								<view class="flex align-center">
									<text
										style="font-size: 36rpx;font-weight: bold;color: #FF0000;">￥{{specInfo.currentPrice}}</text>

								</view>
							</view>
						</view>

					</view>

				</view>
			</view>

			<!-- 优金豆描述 -->
			<view class="flex align-center justify-between" v-if="configFlag"
				style="margin-top: 15rpx; background-color: #FFFFFF;border-radius: 20rpx;padding: 20rpx 0;">
				<text v-if="coinNumber<100"
					style="font-size: 29rpx;font-weight: 500;color: #999;margin-left: 29rpx;">共{{coinNumber}}优金豆,不满100个,不可使用</text>
				<text v-else-if="orderMoney<20"
					style="font-size: 29rpx;font-weight: 500;color: #999;margin-left: 29rpx;">共{{coinNumber}}优金豆,本单不满20元,不可使用</text>
				<text v-else
					style="font-size: 29rpx;font-weight: 500;color: #666666;margin-left: 29rpx;">共{{coinNumber}}个优金豆，本单可用{{coinPrice*100}}</text>
				<view class="flex align-center" style="padding: 0 10rpx 0 0;" v-if="defaultorderMoney>=20&&coinNumber>=100">
					<text style="font-size: 29rpx;font-weight: bold;color: #FF1414;margin-right: 20rpx;">
						<text class="margin-right-xs">-</text> ¥{{coinPrice}}</text>
					<view class="bg-f8 " :style="{'background-color':form.chooseFlag?'#FC6035':'' }"
						style="border-radius: 50%;padding: 5rpx;border: 1rpx solid #CCCCCC;width: 40rpx;height: 40rpx;"
						@click.stop="form.chooseFlag=!form.chooseFlag">
						<u-icon name="checkbox-mark" color="#fff" v-if="form.chooseFlag"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view style="position: fixed;bottom: 0;  background-color: #F6F6F6;width: 100vw;z-index: 9; border: solid 1rpx  #E3E3E3;">
			<view class="flex align-center justify-between" style="padding: 14rpx 22rpx;">
				<view >
					<view class="flex align-center" style="flex: 1;justify-content: center;margin-right: 20rpx;">
						<text style="font-size: 26rpx;font-weight: 500;color: #111;">共计：</text>
						<text style="font-size: 38rpx;font-weight: bold;color: #FF0000;margin-left: 3rpx;">
                            <span style="font-size: 28rpx;margin-right:10rpx;">¥</span>
                            {{orderMoney}}</text>
						 
					</view>
					<view style="font-size: 24rpx;font-weight: 500;color: #999;" v-if="form.chooseFlag">(已优惠
						¥{{coinPrice}})</view>
				</view>
				<view @click="orderConfirm"
					style="background: linear-gradient(286deg, #FF1414 0%, #FF1414 0%, #FF614A 99%, #FF614A 100%);
					color: #FFFFFF;font-size: 32rpx;border-radius: 8rpx;padding: 25rpx 87rpx;">
					提交订单</view>
			</view>
		</view>
 
	</view>

</template>

<script>
	export default {
		data() {
			return {
				defaultorderMoney:'',
				addFlag: true,
				timeFlag: false,
				addressInfo: {},
				selectTimeIndex: 0,
				showSelectTime: false,
				remark: "",
				dayList: [],
				subscribeTimeList: [],
				selectTimeCellIndex: -1,
				orderParam: {},
				form: {
					chooseFlag: false,
					memberId: "", //会员id
					merchantId: "", //商户ID 
					orderAmount: "", //订单金额
					goodsCounts: 1, //订单商品数量
					orderType: "", //订单类型 001家政 002维修
					totalAmount: "", //实付总价
					addressId: "", //会员地址id
					price: "", //商品单价
					goodsId: "", //商品id
					beanAmount: 0,
				},
				coinPrice: 0,
				coinNumber: 0,
				configFlag: false,
				timeSection: [],
				tempTimeIndex: '',
                specInfo: {},
			};
		},
		onLoad(option) {
            this.form.goodsSpecificationId = option.goodsSpecificationId
			this.init();
			 
			this.getCoin();
			this.getConfig();
		},
		onUnload() {
			uni.removeStorageSync("personDetail");
		},
		onShow() {
			this.addressInfo = uni.getStorageSync("address");
			// 更新addressid
			this.form.addressId = uni.getStorageSync("address").addressId;

			uni.$once("query", (query) => {
				// console.log("返回的参数=>", query);
				this.remark = query;
			});
		},
		computed: {
			// 计算实际金额
			orderMoney() {
				//服务时间数量    单次服务价格    //优惠
				if (this.form.chooseFlag) {
					return this.specInfo.currentPrice - this.coinPrice
				} else {
					return this.specInfo.currentPrice
				}



			},
		},
		methods: { 
			//选择地址
			chooseAddress() {
				console.log("选地址")
				console.log(this.orderParam)
				uni.navigateTo({
					url: '../mine/minePage/myAddress?merchantId=' + this.orderParam.merchantId
				})
			},
			 
			 
		 
			init() {
				this.orderParam = uni.getStorageSync("personDetail");  
                console.log(this.orderParam)
                this.orderParam.goodsSpecificationList.map(item=>{
                    if(item.goodsSpecificationId==this.form.goodsSpecificationId) {
                        this.specInfo = item
                    }
                })
				this.form.memberId = uni.getStorageSync("userInfo").memberId;
				this.form.merchantId = this.orderParam.merchantId;
				this.form.serverId = this.orderParam.serverId;
				this.form.price = this.orderParam.goodsServerPrice;
				this.form.orderType = this.orderParam.bizType == 1 ? '001' : '002';
				this.form.singleTime = this.orderParam.singleTime;
				this.form.goodsId = this.orderParam.goodsId;
				this.form.phone = uni.getStorageSync("userInfo").phone
				this.defaultorderMoney=this.form.goodsCounts * this.orderParam.goodsServerPrice
			},
			// 提交订单
			orderConfirm() {
				// console.log(this.form.addressId)
				if (!this.form.addressId) {
					this.$api.msg("请选择服务地址");
				} else {
					this.form.totalAmount = this.orderMoney; //实付金额
					this.form.orderAmount = this.form.goodsCounts * this.orderParam.goodsServerPrice; //订单金额
					this.form.memo = this.remark; //备注
					if (this.form.chooseFlag) {
						this.form.beanAmount = this.coinPrice * 100;
					}
						
                   let params = {
                        memberId: this.form.memberId, //会员id
                        goodsId: this.form.goodsId, //商品id
                        serverId: this.form.serverId, //服务人员id
                        merchantId: this.form.merchantId, //商家id
                        goodsSpecificationId: this.form.goodsSpecificationId, //商品规格id
                        addressId: this.form.addressId, //服务地址id
                        memo: this.form.memo, //备注
                        phone: this.form.phone, //扣除积分手机号
                        beanAmount: this.form.beanAmount //优金豆抵扣（使用优金豆个数）
                   }
                   console.log("创建订单参数："+params);
					console.log(params);
					
					
					//创建订单，返回订单详情，跳转支付页面
					this.$u.api.addGroupOrder(params)
						.then((res) => {
							// console.log(res);
							if (res.code == 200) {
								this.gotoPayment(res.data);
							}
						})
						.catch((error) => {
							console.log(error);
						});
				}
			},
			/// 前往支付页面
			gotoPayment(data) {
				// console.log(data)
				uni.navigateTo({
					url: '../index/payment?orderId=' + data.orderId + '&totalAmount=' + data.totalAmount +
						'&timestamp=' + data.createTime + '&type=001'
				})
			},
			// 查询商家是否允许使用优金豆
			getConfig() {
				this.$u.api.getConfig().then((res) => {
						// console.log(res)
						if (res.code == 200) {
							if (res.data == true) {
								this.getCoin();
								this.configFlag = true;
							} else {
								this.configFlag = false;
							}
						}
					})
					.catch((error) => {
  						console.log(error);
					}); 
			},
			// 查优金豆
			getCoin() {
				const phone = uni.getStorageSync('userInfo').phone
				// this.$u.api.getCoin(phone).then((res) => { 
				// 		if (res.code == 200) {
							// this.coinNumber = res.data;
							this.coinNumber = 550;
							let res={
								data:500
							}
							if (res.data >= 500) {

								this.coinPrice = 5;
							} else if (res.data >= 400 && res.data < 500) {

								this.coinPrice = 2;
							} else if (res.data >= 300 && res.data < 400) {

								this.coinPrice = 3;
							} else if (res.data >= 200 && res.data < 300) {

								this.coinPrice = 2;
							} else if (res.data >= 100 && res.data < 200) {

								this.coinPrice = 1;
							}
					// }
					// })
					// .catch((error) => {
					// 	console.log(error);
					// });
			},
			/// 前往备注
			gotoRemark() {
				uni.navigateTo({
					url: "orderRemark?content=" + this.remark,
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.background {
		background-image: url(../../static/sure_order_backgound_icon.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.select_day_tittle {
		color: #fc6035;
		font-size: 30rpx;
		font-weight: bold;
	}

	.unselect_day_tittle {
		color: #333333;
		font-size: 26rpx;
		font-weight: 500;
	}

	.select_day_content {
		margin-top: 16rpx;
		color: #fc6035;
		font-size: 26rpx;
		font-weight: bold;
	}

	.unselect_day_content {
		color: #999999;
		margin-top: 19rpx;
		font-size: 26rpx;
		font-weight: 500;
	}

	.left_0 {
		margin-left: 0;
	}

	.left_30 {
		margin-left: 30rpx;
	}

	.time_item {
		border-radius: 8rpx;
		margin-top: 20rpx;
		height: 114rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.no_time_item_backgroud {
		background-color: #ededed;
	}

	.have_time_item_background {
		background-color: #ffffff;
	}

	.no_time_item_date {
		color: #999999;
		font-weight: 500;
		font-size: 26rpx;
	}

	.have_time_item_date {
		color: #333333;
		font-weight: bold;
		font-size: 26rpx;
	}

	.no_time_item_explain {
		color: #999999;
		font-weight: 500;
		font-size: 24rpx;
	}

	.select_date_item_background {
		border: #fc6035 1rpx solid;
		background-color: #fff4f1;
	}

	.select_date_item {
		font-size: 26rpx;
		font-weight: bold;
		color: #fc6035;
	}

	.select_time_sure {
		background: #fc6035;
		box-shadow: 0rpx 5rpx 14rpx 0rpx #eb4553;
		border-radius: 50rpx;
		color: #ffffff;
		font-size: 34rpx;
		font-weight: 500;
		text-align: center;
		padding-top: 29rpx;
		padding-bottom: 29rpx;
	}

	.select_item {
		background: #eee;
		// box-shadow: 0rpx 5rpx 14rpx 0rpx #eb4553;
		border-radius: 50rpx;
		color: #ffffff;
		font-size: 34rpx;
		font-weight: 500;
		text-align: center;
		padding-top: 29rpx;
		padding-bottom: 29rpx;
	}
</style>
