<template>
	<view class="Order-settlement">
		<view class="Order-settlement-left">
			<view class="Order-settlement-left-item">
				原价: ￥{{RetainDecimalPoint(InforData['original_price'])}}
			</view>
			<view class="Order-settlement-left-item">
				消费补贴卡抵扣：￥{{RetainDecimalPoint(InforData['deduction_amount_total'])}}
			</view>
			<view class="Order-settlement-left-item">
				预估佣金：￥{{InforData['self_commission']}}
			</view>
		</view>
		<view class="Order-settlement-btn-price">
			<view class="Order-settlement-btn-price-pay-price">
				<text class="text1">{{InforData['status'] | OrderStateText}}：</text>
				<text class="text2" style="color:#DE2F2C">￥{{RetainDecimalPoint(InforData['pay_price'])}}</text>
			</view>
			<!-- 待支付 -->
			<view class="Order-settlement-btn-price-operate" v-if="InforData['status']  == OrderStatus0">
				<view class="btn btn1" @tap.stop="cancel(InforData['order_sn'],index)">
					取消订单
				</view>
				<view class="btn btn2" :style="[orderStyle]" @tap.stop="payment(InforData['order_sn'],index)">
					去支付
				</view>
			</view>
			<!-- 已出餐 -->
			<view class="Order-settlement-btn-price-operate" v-if="InforData['status'] == OrderStatus2">
				<!-- 瑞幸-已出参订单按钮 -->
				<template v-if="Brand_RX">
					<view class="btn btn1" @tap.stop="service">
						联系客服
					</view>
					<!-- <navigator hover-class="none" -->
					<!-- :url="`/pages/restaurant/order/order-details/rx-orders-details?order=${InforData['order_sn']}`"> -->
					<view class="btn btn2" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['RX_brand_id'])">
						查看取餐码
					</view>
					<!-- </navigator> -->
				</template>

				<!-- 肯德基-已出参订单按钮 -->
				<template v-if="Brand_KFC">
					<!-- <navigator hover-class="none"
						:url="`/pages/restaurant/order/order-details/order-details?order=${InforData['order_sn']}`"> -->
					<view class="btn btn1" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['KFC_brand_id'])">
						查看取餐码
					</view>
					<!-- </navigator> -->
				</template>

				<!-- 星巴克-已出参订单按钮 -->
				<template v-if="Brand_XBK">
					<!-- <navigator hover-class="none" -->
					<!-- :url="`/pages/restaurant/order/order-details/xbk-orders-details?order=${InforData['order_sn']}`"> -->
					<view class="btn btn1" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['XBK_brand_id'])">
						取餐口令
					</view>
					<!-- </navigator> -->
				</template>
			</view>

			<!-- 已出餐（部分退款） -->
			<view class="Order-settlement-btn-price-operate" v-if="InforData['status'] == OrderStatus4">

				<!-- 瑞幸-已出参（部分退款）订单按钮 -->
				<template v-if="Brand_RX">
					<!-- <navigator hover-class="none" -->
					<!-- :url="`/pages/restaurant/order/order-details/rx-orders-details?order=${InforData['order_sn']}`"> -->
					<view class="btn btn1" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['RX_brand_id'])">
						查看取餐码
					</view>
					<!-- </navigator> -->
				</template>

				<!-- 肯德基-已出参（部分退款）订单按钮 -->
				<template v-if="Brand_KFC">
					<!-- <navigator hover-class="none" -->
					<!-- :url="`/pages/restaurant/order/order-details/order-details?order=${InforData['order_sn']}`"> -->
					<view class="btn btn1" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['KFC_brand_id'])">
						查看取餐码
					</view>
					<!-- </navigator> -->
				</template>

				<!-- 星巴克-已出参（部分退款）订单按钮 -->
				<template v-if="Brand_XBK">
					<!-- <navigator hover-class="none" -->
					<!-- :url="`/pages/restaurant/order/order-details/xbk-orders-details?order=${InforData['order_sn']}`"> -->
					<view class="btn btn1" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['XBK_brand_id'])">
						查看口令
					</view>
					<!-- </navigator> -->
				</template>
			</view>


			<!-- 待出餐/已退款（订单失败就会退款） -->
			<view class="Order-settlement-btn-price-operate"
				v-if="InforData['status'] == OrderStatus1 || InforData['status'] == OrderStatus3">
				<!-- 瑞幸-待出餐/已退款订单按钮 -->
				<template v-if="Brand_RX">
					<view class="btn btn1" @tap.stop="service">
						联系客服
					</view>
					<!-- <navigator hover-class="none" -->
						<!-- :url="`/pages/restaurant/order/order-details/rx-orders-details?order=${InforData['order_sn']}`"> -->
						<view class="btn btn1 btn2" @tap.stop="OrderDetails(shopid['RX_brand_id'])">
							查看订单
						</view>
					<!-- </navigator> -->
				</template>
				<!-- 肯德基-待出餐/已退款订单按钮 -->
				<template v-if="Brand_KFC">
					<view class="btn btn1" @tap.stop="service">
						联系客服
					</view>
				</template>

				<!-- 星巴克-待出餐/已退款订单按钮 -->
				<template v-if="Brand_XBK">
					<!-- <navigator hover-class="none" -->
						<!-- :url="`/pages/restaurant/order/order-details/xbk-orders-details?order=${InforData['order_sn']}`"> -->
						<view class="btn btn1 btn2" @tap.stop="OrderDetails(shopid['XBK_brand_id'])">
							查看订单
						</view>
					<!-- </navigator> -->
				</template>
			</view>


			<!-- 已取消 -->
			<view class="Order-settlement-btn-price-operate" v-if="InforData['status'] == OrderStatus5">
				<!-- 瑞幸-已取消订单按钮 -->
				<template v-if="Brand_RX">
					<view class="btn btn1" @tap.stop="service">
						联系客服
					</view>
					<view class="btn btn1 btn2" @tap.stop="OrderReorder">
						再来一单
					</view>
				</template>
				<!-- 肯德基-已取消订单按钮 -->
				<template v-if="Brand_KFC">
					<view class="btn btn1 btn2" @tap.stop="OrderReorder">
						重新下单
					</view>
				</template>

				<!-- 星巴克-已取消订单按钮 -->
				<template v-if="Brand_XBK">
					<view class="btn btn1" @tap.stop="service">
						联系客服
					</view>
					<view class="btn btn1 btn2" @tap.stop="OrderReorder">
						重新下单
					</view>
				</template>
			</view>

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

<script>
	import {
		RXSERVICE
	} from '@/static/js/serviceurl.js'
	import mixin from '@/static/js/mixin/mixin.js';
	import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
	import {
		mapGetters,
	} from 'vuex'
	export default {
		name: 'b-order-item-settlement',
		mixins: [mixin, restaurantmixins],
		// 取消订单,再次支付,重新下单
		inject: ["cancel", "Reorder", "payment"],
		props: {
			index: {
				type: Number,
				default: 0
			},
			infor: {
				type: Object,
				default: () => {}
			}
		},
		computed: {

			InforData() {
				return this['infor']
			},

			// 各品牌主体色不一样
			orderStyle() {
				let style = {};
				switch (this['BrandInfor']['brand_id']) {
					case 1:
						style['color'] = uni.$u.addUnit('#C63836');
						style['border'] = uni.$u.addUnit('1px solid #DC7473');
						break;
					case 10:
						style['color'] = uni.$u.addUnit('#ffffff');
						style['background-color'] = uni.$u.addUnit('#00AF66');
						// style['border'] = uni.$u.addUnit('1px solid #00AF66');
						break;
					case 13:
						style['color'] = uni.$u.addUnit('#4A6FE7');
						style['border'] = uni.$u.addUnit('1px solid #4A6FE7');
						break;
				};
				return style;
			},

			Brand_RX() {
				return this['BrandInfor']['brand_id'] == 13;
			},

			Brand_KFC() {
				return this['BrandInfor']['brand_id'] == 1;
			},

			Brand_XBK() {
				return this['BrandInfor']['brand_id'] == 10;
			}

		},

		data() {
			return {

			}
		},
		methods: {
			// 重新下单前数据重构
			OrderReorder() {
				let arr = this['InforData']['goods'].map(item => {
					item['restaurant_id'] = this['InforData']['restaurant_id'];
					// 以下数据用于重新下单时保存当前店铺信息
					item['restaurant_address'] = this['InforData']['restaurant_address'];
					item['restaurant_name'] = this['InforData']['restaurant_name'];
					item['latitude'] = this['InforData']['lat'];
					item['longitude'] = this['InforData']['lng'];
					// 因为前端记录商品数量使用的是num,而重新加入购物车时后台代表数量的则是amount
					item['num'] = item['amount'];
					item['pay'] = item['original_price'] / item['amount'];
					// item['pay_price'] = item['original_price'];
					return item
				});
				this.Reorder(arr);
			},



			OrderDetails(type) {
				let url;
				switch (type) {
					case this['shopid']['KFC_brand_id']:
						url =
							`/pages/restaurant/order/order-details/order-details?order=${this['InforData']['order_sn']}`;
						break;
					case this['shopid']['XBK_brand_id']:
						url =
							`/pages/restaurant/order/order-details/xbk-orders-details?order=${this['InforData']['order_sn']}`;
						break;
					case this['shopid']['RX_brand_id']:
						url =
							`/pages/restaurant/order/order-details/rx-orders-details?order=${this['InforData']['order_sn']}`;
						break;
				};
				uni.navigateTo({url})
			},
			/**
			 * @跳转客服
			 * */
			service() {
				uni.openCustomerServiceChat({
					extInfo: {
						url: RXSERVICE,
					},
					corpId: 'ww4f46b491a045158c',

					success(e) {
						console.log(e)
					},
					fail(e) {
						console.log(e)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.Order-settlement {
		padding: 0 32rpx 21rpx 32rpx;
		margin-top: 48rpx;
		display: flex;
		justify-content: space-between;

		&-left {
			color: #333333;
			font-size: $FONTSIZE24;

			&-item:nth-of-type(1) {
				margin-bottom: 12rpx;
			}

			&-item:nth-of-type(2) {
				margin-bottom: 12rpx;
			}
		}

		&-btn-price {
			display: flex;
			align-items: flex-end;
			flex-direction: column;
			justify-content: space-between;

			&-pay-price {
				.text1 {
					color: #333333;
					font-size: $FONTSIZE24;
				}

				.text2 {
					// color: #CE211F;
					font-size: $FONTSIZE36;
				}
			}

			&-operate {
				display: flex;

				.btn {
					width: 160rpx;
					height: 58rpx;
					font-size: $FONTSIZE22;
					text-align: center;
					// line-height: 58rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.btn1 {
					border: 2rpx solid #E3E3E3;
					border-radius: 50rpx;
					color: #666666;
				}

				.btn2 {
					// border: 2rpx solid #C63836;
					border-radius: 50rpx;
					// color: #C63836;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>
