<template>
	<view class="content">
		<view class="OrderToggleType">
			<view class="typebtn" @tap="Typetoggle(0)">
				待结算{{count['un_commission_total']}}单
			</view>
			<view class="typebtn" @tap="Typetoggle(1)">
				已结算{{count['commission_total']}}单
			</view>
		</view>
		<view class="order-list">
			<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y"
				:style="{'height':`${scrollHeight}rpx`}"
				@scrolltolower="GetorderList">
				<template v-for="(item,index) in List">
					<!-- 肯德基 -->
					<template v-if="item['brand_id'] == 1 || item['brand_id'] == 5">
						<b-orders-kfc :key="index" :index="index" :item="item">
						</b-orders-kfc>
					</template>
					<!-- 瑞幸 -->
					<template v-if="item['brand_id'] == 13">
						<b-orders-rx :key="index" :index="index" :item="item">
						</b-orders-rx>
					</template>
					<!-- 星巴克 -->
					<template v-if="item['brand_id'] == 10">
						<b-orders-xbk :key="index" :index="index" :item="item">
						</b-orders-xbk>
					</template>
				</template>
				<template v-if="List['length'] <= 0">
					<b-shop-load width="161" height="148" type="orders" :offset="['25%','0']"></b-shop-load>
				</template>
			</scroll-view>
		</view>
		<!-- 加载状态 -->
		<b-load :show="loading" width="79" height="80"  background="rgba(0,0,0,0.3)" type="load"></b-load>
	</view>
</template>

<script>
	import {
		orderListAPI,
		agOrderPayAPI,
		cancelOrderAPI
	} from '@/request/restaurant/index.js';
	import bOrdersKfc from '@/components/b-orders/b-orders-kfc.vue'
	import bOrdersRx from '@/components/b-orders/b-orders-rx.vue'
	import bOrdersXbk from '@/components/b-orders/b-orders-xbk.vue'
	import {
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex';
	import mixin from '@/static/js/mixin/mixin.js';
	import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
	export default {
		name: "b-page-orders",
		mixins:[mixin,restaurantmixins],
		components: {
			bOrdersKfc,
			bOrdersRx,
			bOrdersXbk
		},
		provide() {
			return {
				// 取消订单
				cancel: this.cancel,
				// 重新下单
				Reorder: this.Reorder,
				// 再次支付
				payments: this.payments
			}
		},
		data() {
			return {
				List: [],
				page: 1,
				total: 0,
				scrollHeight: 0,
				// 记录上次点击切换的type
				last_time_toggle:'',
				type: '',
				count: {
					un_commission_total: 0,
					commission_total: 0
				},
				// 加载状态
				loading:false
			};
		},
		watch: {
			// 顶部筛选时切换
			// type() {
			// 	this['page'] = 1;
			// 	this.GetorderList();
			// },
			// // 底部tab切换时重新刷新数据
			// Getnavindex(){
			// 	this['page'] = 1;
			// 	this.GetorderList();
			// },
			Getnavindex(val) {
				// 每次进入订单列表都将重新请求
				if (val != 0) {
					this['type'] = '';
					this.GetorderList();
				}else{
					this['loading'] = true;
					this['page'] = 1;
					this['List'] = [];
				}

			}
		},

		mounted() {
			let self = this;
			this['loading'] = true;
			// 设置scollview高度之前必须得到底部导航高度
			console.log(self['NAVHEIGHT'],'------------');
			setTimeout(()=>{
				this.initScrollView({
					el: 'OrderToggleType',
				}).then(res => {
					self.scrollHeight = res;
					self.GetorderList();
				})
			},1000)
			
			
		},
		methods: {
			
			/**
			 * @顶部选项
			 * */
			Typetoggle(type){
				// 如果上次切换与本次切换类型一致则代表用户点击了两次,此时需要将列表切换至所有列表
				console.log(this['last_time_toggle'],type);
				if(this['last_time_toggle'] === type){
					this['type'] = '';
				}else{
					this['type'] = type;
				}
				
				this['page'] = 1;
				this['List'] = [];
				this.GetorderList();
				this['last_time_toggle'] = this['type'];
			},
			
			/**
			 * @获取订单列表
			 * */
			GetorderList() {
				// uni.showLoading({
				// 	title: '加载中...'
				// });
				let self = this;
				orderListAPI({
					page: this['page'],
					type: this['type'],
					brand_id: this['BrandInfor']['brand_id']
				}).then(data => {
					if (self['page'] == 1) {
						self['List'] = [];
					};
					self['count'] = data['data']['count'];
					self['List'].push(...data['data']['data']['data']);
					self['total'] = data['data']['data']['total'];
					self['page'] += 1;
					// uni.hideLoading();
					this['loading'] = false;
				})
			},

			/**
			 * @再次支付
			 * */
			payments(order_sn, restaurant_id) {
				let self = this;
				this.againpayment(order_sn)
				// let redirect_url;
				// // 肯德基
				// if (self['BrandInfor']['brand_id'] == 1) {
				// 	redirect_url = `/pages/restaurant/order/order-status/order-status?order=${order_sn}`
				// } else if (self['BrandInfor']['brand_id'] == 10) {
				// 	// 星巴克
				// 	redirect_url = `/pages/restaurant/order/order-details/xbk-orders-details?order=${order_sn}`
				// } else if (self['BrandInfor']['brand_id'] == 13) {
				// 	// 瑞幸
				// 	redirect_url = `/pages/restaurant/order/order-details/rx-orders-details?order=${order_sn}`
				// }
				// agOrderPayAPI({
				// 	order_sn,
				// 	type:3,
				// 	redirect_url
				// }).then(data => {
				// 	location.href = data['data']['redirect_url'];
				// })
			},

			/**
			 * @取消订单
			 * */
			cancel(order_sn, index) {
				cancelOrderAPI({
					order_sn
				}).then(data => {
					this.$set(this['List'][index], 'status', 5);
					this.$forceUpdate();
				})
			},
			
			/**
			 * @重新下单
			 * */
			Reorder(commodity) {
				console.log(commodity,'重新下单商品');
				uni.showLoading({
					title:'加载中...',
				})
				let self = this;
				let index = 0;
				// 创建进入餐厅所需要的参数对象
				let {
					restaurant_id,
					latitude,
					longitude,
					restaurant_address,
					restaurant_name
				} = commodity[0];
				this.SETSHOPDETAIL({
					city_name: "",
					close_time: "",
					distance: "",
					latitude,
					longitude,
					open_time: "",
					province_name: "",
					regoin_name: "",
					restaurant_address,
					restaurant_id,
					restaurant_name,
					special: false,
				});
				let add = function(){
					console.log(`第${index}个,总共有${commodity['length']-1}`);
					self.ADD_CART({
						commodity: commodity[index]
					}).then(()=>{
						if(index >= commodity['length']-1) {
							uni.hideLoading();
							uni.navigateTo({
								url: `/pages/restaurant/home/shop_home/shop_home?restaurant_id=${restaurant_id}`
							});
							return;
						};
						index += 1;
						add();
					})
				}
				this.EMPTY(commodity[0]['restaurant_id']).then(  res => {
					console.log(res);
					setTimeout( () => {
						add();
					}, 1000);
				})
			
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 19rpx;
	}
	.scroll-Y{
		box-sizing: border-box;
		padding-top:30rpx;
		position: relative;
	}
	.OrderToggleType {
		display: flex;
		justify-content: space-between;

		.typebtn {
			width: 347rpx;
			height: 91rpx;
			background: #FFFFFF;
			border: 1rpx solid #DEDEDE;
			border-radius: 20rpx;
			text-align: center;
			line-height: 91rpx;
			color: #333333;
			font-size: $FONTSIZE24;
		}
	}
</style>
