<template>
	<view class="content">
		<!-- 地址 -->
		<div class="box_1 flex-col">
			<div class="box_2 flex-row justify-between">
				<div class="tag_1 flex-col" :class="`theme-Union-Class-${BrandInfor['brand_id']}-2`">
					<span class="text_2" :class="`themeColor-${BrandInfor['brand_id']}`">取餐地址</span>
				</div>
				<span class="text_3">{{GetShopInfor['restaurant_name']}}</span>
			</div>
			<span class="text_4">{{GetShopInfor['restaurant_address']}}</span>
		</div>

		<!-- 商品列表 -->
		<view class="box_3">
			<text lines="1" class="text_5">餐品详情</text>
			<template v-for="(item,index) in FormInfor['products']">
				<view class="commodity-item" :key="index" @tap="ischoiceDiscount(index)">
					<!-- 商品 -->
					<view class="section_2">
						<text lines="1" class="text_6">{{item['product_name']}}</text>
						<view class="text-wrapper_1">
							<text lines="1" class="text_7">¥</text>
							<text lines="1" class="text_8">{{_amount(item['adj_pay'] * item['num'])}}</text>
						</view>
						<text lines="1" class="text_9">×{{item['num']}}</text>
					</view>

					<view class="section_5">
						<view class="text-group_1">
							<text lines="1"
								class="text_14">可用消费补贴卡余额抵扣￥{{_amount(item['max_deduction'] * item['num'])}}</text>
							<text lines="1" class="text_15" v-if="item['Discountarrcondition']"
								:class="`themeColor-${BrandInfor['brand_id']}`">您余额不足，实际可抵扣￥{{_amount(item['already_deduction_amount'])}}</text>
						</view>
						<!-- 肯德基 -->
						<view class="triangle" v-if="BrandInfor['brand_id'] == 1" :style="{'--color':'#C63836'}"
							v-show="item['is_deduction']">
						</view>
						<!-- 麦当劳 -->
						<view class="triangle" v-if="BrandInfor['brand_id'] == 5" :style="{'--color':'#FFBC0D'}"
							v-show="item['is_deduction']">
						</view>
					</view>
					<view class="text-group_2" v-if="index == FormInfor['products']['length']-1">
						<text lines="1" class="text_16">余额：￥{{ _amount(amount)}}</text>
						<text lines="1" class="text_17">共{{shoptotalnum}}件</text>
					</view>
				</view>
			</template>
		</view>

		<!-- 肯德基就餐方式 -->
		<view class="box_4">
			<text lines="1" class="text_18">就餐方式</text>
			<view class="Way">
				<!-- 在店 -->
				<view class="Way-item" @tap="FormInfor['eat_type'] = 'EAT_IN'"
					:class="[FormInfor['eat_type'] == 'EAT_IN'?`theme-Union-Class-${BrandInfor['brand_id']}-3`:'']"
					style="margin-right: 55rpx;">
					<view class="text">
						店内就餐
					</view>
					<view class="triangle" :style="{'--color':BrandInfor['brand_id'] == 1?'#C63836':'#FFBC0D'}"
						v-if="FormInfor['eat_type'] == 'EAT_IN'">
					</view>
				</view>
				<!-- 打包 -->
				<view class="Way-item" @tap="FormInfor['eat_type'] = 'TAKE_AWAY'"
					:class="[FormInfor['eat_type'] == 'TAKE_AWAY'?`theme-Union-Class-${BrandInfor['brand_id']}-3`:'']">
					<view class="text">
						打包带走
					</view>
					<view class="triangle" :style="{'--color':BrandInfor['brand_id'] == 1?'#C63836':'#FFBC0D'}"
						v-if="FormInfor['eat_type'] == 'TAKE_AWAY'">
					</view>
				</view>
			</view>
		</view>


		<!-- 手机号 -->
		<view class="input-number_1">
			<view class="text-wrapper_3">
				<text lines="1" class="text_20">*</text>
				<text lines="1" class="text_21">联系方式</text>
			</view>
			<view lines="1" class="text_22">
				<input maxlength="11" v-model="FormInfor['phone_number']" type="text" placeholder="请填写您的手机号码">
			</view>
		</view>

		<view lines="1" class="text_23">*温馨提示：如遇点餐失败，1小时内自动退款</view>

		<!-- 占位元素 -->
		<view style="height: 158rpx;width: 100%;"></view>

		<!-- 结算 -->
		<view class="block_2">
			<view class="text-group_3">
				<view class="text-wrapper_4 itemamount">
					<text lines="1" class="text_24">原价：</text>
					<text lines="1" class="text_24">￥{{_amount(calculationamount['prices'])}}</text>
				</view>
				<view class="text-wrapper_4 itemamount">
					<text lines="1" class="text_24">实际付款：</text>
					<text lines="1" class="text_25"
						:class="[`themeColor-${BrandInfor['brand_id']}`]">￥{{_amount(calculationamount['payments'])}}</text>
				</view>
				<view lines="1" class="text_26 itemamount">
					消费卡抵扣：￥{{_amount(calculationamount['Actualamounts'])}}
				</view>
				<view lines="1" class="text_27 itemamount">获得佣金：￥{{_commission(commission)}}</view>
			</view>
			<text lines="1" class="text_28"></text>
			<button class="button_1" :class="`theme-Union-Class-${BrandInfor['brand_id']}-1`" @tap="settlement">
				<text lines="1" class="text_29">结算</text>
			</button>
		</view>
	</view>
</template>

<script>
	// 混入
	import mixin from '@/static/js/mixin/mixin.js';
	import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
	// 核心计算逻辑
	import calculationamountmixin from '@/static/js/mixin/calculationamountmixin.js'
	// 请求
	import {
		createOrderNewAPI,
		conWalletInfoAPI,
		getPhoneAPI
	} from '@/request/restaurant/index.js';
	let self;
	export default {
		mixins: [mixin, restaurantmixins, calculationamountmixin],
		data() {
			return {
				show: true,
				FormInfor: {
					// 品牌id
					brand_id: 0,
					// 店铺id
					restaurant_id: 0,
					// 店铺名
					restaurant_name: '',
					// 经度
					lng: '',
					// 纬度
					lat: '',
					// 店铺地址
					restaurant_address: '',
					// 手机号
					phone_number: '',
					// 是否抵扣
					is_deduction: 1,
					// 抵扣金额
					deduction_amount_total: 0,
					// 产品集合
					products: [],
					// products>product_id
					// products>amount
					// products>is_deduction
					// products>deduction_amount
					// 就餐类型
					eat_type: 'EAT_IN'
				},
				// 账户余额
				amount: 0,
				// 用于先计算再赋值给amount
				// amounts: 0,
				// // 实际支付
				// Actual_amount: 0,
				// // 优惠金额
				// Deduction: 0,
				shoptotalnum: 0,
			};
		},
		onLoad() {
			self = this;
			this['FormInfor']['eat_type'] = this['GetMODE'];
			// 上次下单手机号
			this['FormInfor']['phone_number'] = this['getPhone'];
			this.init();
		},
		onShow() {
			const value = uni.getStorageSync('isWechatStorage');
			console.log(value, '微信支付完成之后的标识');
		},
		methods: {
			init() {
				// 获取当前品牌上次下单手机号
				getPhoneAPI({
					brand_id: this['BrandInfor']['brand_id'],
					type: 4
				}).then(res => {
					this.SETPHONE(res['data'])
					let products = [];
					// 因为进入时暂时获取不到deepClone方法所以使用反转化
					let newobj = JSON.parse(JSON.stringify(this['GetCartList2']));
					for (let i = 0; i < newobj['length']; i++) {
						let item = newobj[i];
						// 是否抵扣
						// if (this['amount'] == 0) {
						// 	item['is_deduction'] = 0;
						// } else {
						// 	item['is_deduction'] = 1;
						// }
						item['is_deduction'] = 1;
						// item['max_deduction'] = 300
						// 抵扣金额(用于显示)
						item['deduction_amount'] = 0;
						// 已抵扣金额(用于逻辑计算)
						item['already_deduction_amount'] = 0;
						// 接口需要提交数量
						item['amount'] = item['num'];
						// 消费卡抵扣状态(抵扣条件)
						item['Discountarrcondition'] = true;
						products.push(item);
						this['shoptotalnum'] += item['num'];
					};
					// 获取余额
					console.log('初始化');
					conWalletInfoAPI().then(res => {
						this['amount'] = res['data']['amount'];
						// this['amount'] = 76;
						this['FormInfor']['brand_id'] = this['BrandInfor']['brand_id'];
						this['FormInfor']['restaurant_id'] = this['GetShopInfor']['restaurant_id'];
						this['FormInfor']['restaurant_name'] = this['GetShopInfor']['restaurant_name'];
						this['FormInfor']['lat'] = this['GetShopInfor']['latitude'];
						this['FormInfor']['lng'] = this['GetShopInfor']['longitude'];
						this['FormInfor']['restaurant_address'] = this['GetShopInfor'][
							'restaurant_address'];
						this['FormInfor']['products'] = products;
					})
				})
			},

			/**
			 * @结算
			 * */
			settlement() {
				let FormInfor = JSON.parse(JSON.stringify(self['FormInfor']))
				if (!FormInfor['phone_number'] || FormInfor['phone_number']['length'] < 11 || !uni.$u.test
					.mobile(FormInfor['phone_number'])) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					})
					return
				};
				console.log(FormInfor['products'], 'products');
				if (typeof FormInfor['products'] == 'object') {
					FormInfor['products'] = JSON.stringify(FormInfor['products'])
				}
				uni.showLoading({
					title: '加载中...'
				});
				console.log(FormInfor, 'FormInfor');
				// return
				createOrderNewAPI(FormInfor).then(res => {
					uni.hideLoading();
					this.$Payment.H5_Payment({
						pay_price: res['data']['pay_price'],
						order_sn: res['data']['order_sn'],
						type: res['data']['type'],
						openid: res['data']['openid'],
						return_url: `/pages/restaurant/order/order-status/order-status?order_sn=${res['data']['order_sn']}`
					});
					// 支付
					// this.payment({
					// 	order_sn:res['data']['order_sn'],
					// 	type:res['data']['type'],
					// 	// 仅微信环境下存在参数
					// 	money:res['data']['money'],
					// redirect_url:`/pages/restaurant/order/order-status/order-status`
					// });
				})

			},

			/**
			 * @商品是否优惠
			 * */
			ischoiceDiscount(index) {
				let current = this['FormInfor']['products'][index];
				// 当前余额为0并且用户准备勾选补贴选项则直接打断
				if (this['amount'] == 0 && !current['is_deduction']) {
					uni.showToast({
						title: '余额不足',
						icon: 'none'
					});
					return
				}
				// 状态取反
				current['is_deduction'] = current['is_deduction'] ? 0 : 1;

			},
		}
	}
</script>

<style lang="scss">
	// 以下代码均从代码生成平台复制
	page {
		width: 100%;
		min-height: 100%;
		background-color: #F6F6F6;
	}

	.Way-item-activation {
		border: 1rpx solid $THEMECOLOR2 !important;

	}

	;

	.triangle {
		width: 0;
		height: 0;
		border-bottom: 40rpx solid var(--color);
		border-left: 40rpx solid transparent;
		position: absolute;
		bottom: 0;
		right: 0;

		&:before {
			content: "";
			position: absolute;
			width: 15rpx;
			height: 8rpx;
			background: transparent;
			top: 20rpx;
			right: 5rpx;
			border: 2rpx solid white;
			border-top: none;
			border-right: none;
			-webkit-transform: rotate(-50deg);
			-ms-transform: rotate(-50deg);
			transform: rotate(-50deg);
			z-index: 9;
		}
	}


	// 顶部地址
	.box_1 {
		background-color: white;
		width: 100%;
		height: 130rpx;
		padding: 32rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.box_2 {
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		font-size: $FONTSIZE28;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.tag_1 {
		background-color: rgba(255, 255, 255, 1.000000);
		border: 1px solid rgba(198, 56, 54, 1);
		display: flex;
		flex-direction: column;
		padding: 10rpx 6rpx;
	}

	.text_2 {
		color: rgba(198, 56, 54, 1);
		font-size: 22rpx;
		font-family: PingFang-SC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
	}

	.text_3 {
		color: rgba(51, 51, 51, 1);
		font-size: $FONTSIZE28;
		font-family: PingFang-SC-Bold;
		text-align: left;
		white-space: nowrap;
		line-height: $FONTSIZE28;
		padding-left: 15rpx;
	}

	.text_4 {
		width: 320rpx;
		height: 23rpx;
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	// 商品
	.box_3 {
		background-color: rgba(255, 255, 255, 1.000000);
		width: 100%;
		display: flex;
		padding: 32rpx;
		flex-direction: column;
	}

	.text_5 {
		width: 100%;
		color: rgba(51, 51, 51, 1);
		font-size: $FONTSIZE28;
		line-height: 86rpx;
	}

	.commodity-item {
		padding: 25rpx 0;
		border-bottom: 1rpx solid #cccccc;
	}

	.section_2 {
		width: 100%;
		line-height: 40rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.section_5 {
		width: 100%;
		position: relative;
		// height: 67rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 30rpx 0;
	}

	.text-group_1 {
		width: 363rpx;
		height: 64rpx;
		margin-top: 3rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.text_14 {
		width: 362rpx;
		height: 27rpx;
		color: rgba(51, 51, 51, 1);
		font-size: $FONTSIZE28;
		font-family: PingFangSC-Regular;
		text-align: left;
		white-space: nowrap;
		line-height: $FONTSIZE28;
		margin-left: 1rpx;
	}

	.text_15 {
		width: 301rpx;
		height: 25rpx;
		color: rgba(198, 56, 54, 1);
		font-size: 24rpx;
		font-family: PingFangSC-Regular;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin-top: 12rpx;
	}

	.text-group_2 {
		height: 65rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.text_16 {
		height: 27rpx;
		color: rgba(51, 51, 51, 1);
		font-size: $FONTSIZE28;
		font-family: PingFangSC-Regular;
		text-align: left;
		white-space: nowrap;
		line-height: $FONTSIZE28;
	}

	.text_17 {
		color: rgba(51, 51, 51, 1);
		font-size: 24rpx;
		font-family: PingFangSC-Regular;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_6 {
		width: 420rpx;
		min-height: 30rpx;
		color: rgba(51, 51, 51, 1);
		font-size: $FONTSIZE28;
		font-family: PingFang-SC-Bold;
		text-align: left;
		line-height: 43rpx;
	}

	.text-wrapper_1 {
		height: 23rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: PingFang-SC-Medium;
		text-align: center;
		white-space: nowrap;
		line-height: 22rpx;
	}

	.text_7 {
		width: 74rpx;
		height: 23rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 22rpx;
		font-family: PingFang-SC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
	}

	.text_8 {
		width: 74rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 30rpx;
		font-family: PingFang-SC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 30rpx;
	}

	.text_9 {
		color: #999999;
		font-size: 30rpx;
		font-family: PingFang-SC-Medium;
		text-align: justifyLeft;
		white-space: nowrap;
		line-height: 30rpx;
	}

	// 就餐方式
	.box_4 {
		background-color: white;
		width: 750rpx;
		height: 237rpx;
		margin-top: 80rpx;
		display: flex;
		flex-direction: column;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	// 方式
	.Way {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-top: 32rpx;

		&-item {
			width: 315rpx;
			height: 90rpx;
			border: 1rpx solid #E3E3E3;
			border-radius: 6rpx;
			line-height: 90rpx;
			text-align: center;
			color: #666666;
			position: relative;

			.text {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	.text_18 {
		width: 100%;
		line-height: 86rpx;
		color: rgba(51, 51, 51, 1);
		font-size: $FONTSIZE28;
		border-bottom: 1rpx solid #E3E3E3;
	}

	.block_1 {
		background-color: rgba(227, 227, 227, 1.000000);
		width: 710rpx;
		height: 1rpx;
		display: flex;
		flex-direction: column;
		margin: 29rpx 0 0 20rpx;
	}

	.text_19 {
		width: 102rpx;
		height: 25rpx;
		color: rgba(102, 102, 102, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 26rpx;
		margin: 63rpx 0 62rpx 509rpx;
	}


	// 手机号
	.input-number_1 {
		background-color: white;
		width: 100%;
		height: 87rpx;
		margin-top: 10rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		padding: 0 32rpx;
		display: flex;
		animation-fill-mode: backwards;
		align-items: center;
	}

	.text-wrapper_3 {
		width: 124rpx;
		height: 27rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: PingFang-SC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
	}

	.text_20 {
		width: 124rpx;
		height: 27rpx;
		color: rgba(198, 56, 54, 1);
		font-size: 28rpx;
		font-family: PingFang-SC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
	}

	.text_21 {
		width: 124rpx;
		height: 27rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: PingFang-SC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
	}

	.text_22 {
		width: 214rpx;
		height: auto;
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_23 {
		width: 100%;
		height: 300rpx;
		color: #999999;
		font-size: $FONTSIZE24;
		font-family: PingFang-SC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		padding: 32rpx;
	}

	// 结算
	.block_2 {
		box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.1);
		background-color: white;
		border-radius: 20rpx 20rpx 0 0;
		width: 100%;
		height: 210rpx;
		flex-direction: row;
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
	}

	.text-group_3 {
		width: 216rpx;
		// height: 81rpx;
		display: flex;
		flex-direction: column;
		// justify-content: space-between;
		margin: 11rpx 0 0 31rpx;
	}

	.text-wrapper_4 {
		width: 211rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: PingFangSC-Semibold;
		text-align: left;
		white-space: nowrap;
		line-height: $FONTSIZE28;
		margin-left: 1rpx;
	}

	.text_24 {
		width: 211rpx;
		height: 27rpx;
		color: rgba(51, 51, 51, 1);
		font-size: $FONTSIZE28;
		font-family: PingFangSC-Semibold;
		text-align: left;
		white-space: nowrap;
		line-height: $FONTSIZE28;
	}

	.text_25 {
		width: 211rpx;
		height: 27rpx;
		color: rgba(198, 56, 54, 1);
		font-size: $FONTSIZE28;
		font-family: PingFangSC-Semibold;
		text-align: left;
		white-space: nowrap;
		line-height: $FONTSIZE28;
	}

	.text_26 {
		width: 216rpx;
		height: 30rpx;
		color: rgba(102, 102, 102, 1);
		font-size: 24rpx;
		font-family: PingFangSC-Regular;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin-top: 4rpx;
	}

	.text_27 {
		width: 191rpx;
		height: 23rpx;
		color: rgba(102, 102, 102, 1);
		font-size: 24rpx;
		font-family: PingFangSC-Regular;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin: 4rpx 0 0 1rpx;
	}

	.text_28 {
		width: 110rpx;
		height: 27rpx;
		color: rgba(255, 255, 255, 1);
		font-size: $FONTSIZE28;
		font-family: PingFang-SC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: $FONTSIZE28;
		margin: 65rpx 0 0 73rpx;
	}

	.button_1 {
		background-color: rgba(198, 56, 54, 1.000000);
		border-radius: 20rpx;
		height: 80rpx;
		display: flex;
		flex-direction: column;
		width: 187rpx;
		margin: 14rpx 20rpx 0 113rpx;
		line-height: 80rpx;
	}

	.text_29 {
		color: #fefefe;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold;
		text-align: left;
		white-space: nowrap;
		text-align: center;
	}




	// 抵扣区域样式
	.discount {
		display: flex;
		align-items: baseline;
		margin-top: 20rpx;

		.Checkbox {
			margin-right: 20rpx;
			width: 24rpx;
			height: 24rpx;
			border: 1rpx solid #D3D6DB;
			border-radius: 50%;
			overflow: hidden;
		}

		.active-Checkbox {
			border-color: var(--Checkboxborder) !important;
			padding: 5rpx;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				border: 3rpx solid #ffffff;
				background-color: var(--Checkboxborder);
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.Deduction-amount {
			color: #333333;
			font-size: 28rpx;
		}

		.Insufficient {
			color: #3672EC;
			font-size: 24rpx;
		}
	}
</style>
