<template>
	<view class="min-body">
		<!-- <u-navbar title="我的订单" placeholder @leftClick="leftClick(paypage,'/pages/pages-recharge/index/index')"> -->
		<!-- </u-navbar> -->
		<u-alert title=" " description="此订单列表只展示补贴卡相关订单，如需查看全部订单以及团队订单请移至白马晶选生活圈小程序端进行查看"></u-alert>
		<view style="border-bottom: 2rpx solid #EDEDED;margin-bottom: 20rpx;">
			<u-tabs itemStyle="height:88rpx;padding:0" inactiveStyle="font-size:28rpx;color:#333"
				:activeStyle="tabActive" lineColor="#FF7700" :scrollable="false" @click="clickTab" :list="list">
			</u-tabs>
		</view>

		<view style="margin: 0 24rpx;">
			<view class="white-box" v-for="(item,index) in dataList" :key="index" v-if="activeType == 0">
				<view class="flbtn">
					<view class="lit-333">
						<view class="">
							下单时间：{{item.order.create_time}}
						</view>
						订单号：{{item.orderid}}
					</view>
					<view class="lit-333" v-if="item['order']['status'] == 0" style="color: #b5b5b5;">
						{{item['order']['status_name']}}
					</view>
					<view class="lit-333" v-if="item['order']['status'] == 1" style="color: #e3e300;">
						{{item['order']['status_name']}}
					</view>
					<view class="lit-333" v-if="item['order']['status'] == 2" style="color: #59C316;">
						{{item['order']['status_name']}}
					</view>
					<view class="lit-333" v-if="item['order']['status'] == 3" style="color: red;">
						{{item['order']['status_name']}}
					</view>
				</view>
				<view class="flbtn">
					<view class="flbtn img-box">
						<image :src="item.order.b_goods_img" mode=""></image>
						<view class="" style="padding-top: 10rpx;width: 320rpx;">
							<u-text size="28rpx" color="#333" :bold="true" lines="1" :text="item.order.b_goods_name">
							</u-text>
							<view class="lit-666 overtext" style="font-weight: 300;">
								{{item.order.b_sku_name}}-{{item.order.b_sku_times}}
							</view>
							<view class="lit-666 overtext">充值账号：{{item.order.account}}</view>
							<view class="lit-666 overtext" style="font-weight: 300;">
								预估佣金：{{_commission(item['order']['commission_amount'])}}</view>
							<view class="lit-666 overtext" style="font-weight: 300;">
								佣金状态：{{getStateName(item.order.is_commission)}}</view>
						</view>
					</view>
					<view style="padding-top: 20rpx;">
						<view class="lit-333 bold">
							￥{{(parseInt(item.order.deduction_amount) + parseInt(item.order.pay_price)) / 100}}
						</view>
						<view class="lit-999" style="padding-top: 20rpx;text-align: right;">
							<!-- x1 -->
						</view>
					</view>
				</view>
				<view class="flbtn lit-666" style="margin-top: 20rpx;line-height: 40rpx;">
					<view class="">
						应付金额：￥{{(parseInt(item.order.deduction_amount) + parseInt(item.order.pay_price)) / 100}}
					</view>
					<view class="">
						余额抵扣：￥{{item.order.deduction_amount / 100}}
					</view>
					<view class="big-333 bold" style="color: #EE3D3D;">
						{{item.order.wx_pay_status == 0?'待付款：':'实付款：'}}￥{{item.order.pay_price / 100}}
					</view>
				</view>
			</view>

			<view class="white-box" v-for="(item,index) in dataList" :key="index" v-if="activeType == 3"
				@tap="OrderInfor(item)">

				<!-- 品牌订单又分为电影票点餐加油 -->
				<template v-if="item['order_type'] == 3">
					<view class="flbtn">
						<view class="lit-333">
							<view class="">
								下单时间：{{item['order']['create_time']}}
							</view>
							订单号：{{item.orderid}}

						</view>
						<view class="lit-333" style="color: #b5b5b5;">
							{{item['order']['status_name']}}
						</view>
						
					</view>
					<view class="flbtn">
						<view class="flbtn img-box">
							<!-- <image :src="item['order']store_img" mode=""></image> -->
							<view class="" style="padding-top: 10rpx;width: 320rpx;">
								<u-text size="28rpx" color="#333" :bold="true" lines="1"
									:text="item['order']['brand_name']">
								</u-text>
								<u-gap height="20rpx"></u-gap>
								<view class="lit-666 overtext" style="margin-top: 10rpx;font-weight: 300;">
									预估佣金：{{item['order']['commission']}}</view>
								<view class="lit-666 overtext" style="margin-top: 10rpx;font-weight: 300;">
									佣金状态：{{item['order']['commission_name']}}</view>
							</view>
						</view>
						<view style="padding-top: 20rpx;">
							<view class="lit-333 bold">
								￥{{RetainDecimalPoint(item['order']['original_price'])}}
							</view>
							<view class="lit-999" style="padding-top: 20rpx;text-align: right;">
								<!-- x1 -->
							</view>
						</view>
					</view>
					<view class="flbtn lit-666" style="margin-top: 20rpx;line-height: 40rpx;">
						<view class="">
							<view>应付金额：</view>
							<view>￥{{RetainDecimalPoint(item['order']['original_price'])}}</view>
						</view>
						<view class="">
							<view>余额抵扣：</view>
							<view>￥{{RetainDecimalPoint(item['order']['deduction_amount_total'])}}</view>
						</view>
						<view class="big-333 bold" style="color: #EE3D3D;">
							<view>实付款：</view>
							<view>￥{{RetainDecimalPoint(item['order']['pay_price'])}}</view>
						</view>
					</view>
				</template>
				<template v-if="item['order_type'] == 4">
					<view class="flbtn">
						<view class="lit-333">
							<view class="">
								下单时间：{{item['order']['create_time']}}
							</view>
							订单号：{{item.orderid}}

						</view>
						<view class="lit-333" style="color: #59C316;">
							{{item['order']['status_text']}}
						</view>
					</view>
					<view class="flbtn">
						<view class="flbtn img-box">
							<!-- <image :src="item['order']store_img" mode=""></image> -->
							<view class="" style="padding-top: 10rpx;width: 320rpx;">
								<u-text size="28rpx" color="#333" :bold="true" lines="1" :text="item['desc']">
								</u-text>
								<u-gap height="20rpx"></u-gap>
								<view class="lit-666 overtext" style="margin-top: 10rpx;font-weight: 300;">
									预估佣金：{{item['order']['commission']}}</view>
								<view class="lit-666 overtext" style="margin-top: 10rpx;font-weight: 300;">
									佣金状态：{{item['order']['commission_name']}}</view>
							</view>
						</view>
						<view style="padding-top: 20rpx;">
							<view class="lit-333 bold">
								￥{{item['order']['realMoney']}}
							</view>
							<view class="lit-999" style="padding-top: 20rpx;text-align: right;">
								<!-- x1 -->
							</view>
						</view>
					</view>
					<view class="flbtn lit-666" style="margin-top: 20rpx;line-height: 40rpx;">
						<view class="">
							<view>油量：</view>
							<view>
								￥{{item['order']['units']}}/升
							</view>
						</view>
						<view class="">
							<view>
								应付金额：
							</view>
							<view>
								￥{{_amount(item['order']['totalMoney'])}}
							</view>
						</view>
						<view class="">
							<view>
								余额抵扣：
							</view>
							<view>
								￥{{_amount(item['order']['deductionMoney'])}}
							</view>
						</view>
						<view class="big-333 bold" style="color: #EE3D3D;">
							<view>
								实付款：
							</view>
							<view>
								￥{{_amount(item['order']['realMoney'])}}
							</view>

						</view>
					</view>
				</template>
				<template v-if="item['order_type'] == 5">
					<view class="flbtn">
						<view class="lit-333">
							<view class="">
								下单时间：{{item['order']['create_time']}}
							</view>
							订单号：{{item['orderid']}}
				
						</view>
						<view class="lit-333" style="color: #59C316;">
							{{item['order']['status_text']}}
						</view>
					</view>
					<view class="flbtn">
						<view class="flbtn img-box">
							<!-- <image :src="item['order']store_img" mode=""></image> -->
							<view class="" style="padding-top: 10rpx;">
								<u-text size="28rpx" color="#333" :bold="true" lines="1" :text="item['desc']">
								</u-text>
								<view style="margin: 10rpx 0; font-size: 24rpx;">
									{{item['order']['movieName']}}-({{item['order']['amount']}}张)
								</view>
								<view style="margin: 10rpx 0;font-size: 22rpx;color: #666;">
									{{item['order']['cinemaName']}}{{item['order']['hallName']?item['order']['hallName']:''}}
								</view>
								<u-gap height="20rpx"></u-gap>
								<view class="lit-666 overtext" style="margin-top: 10rpx;font-weight: 300;">
									预估佣金：{{item['order']['commission_amount']}}</view>
								<view class="lit-666 overtext" style="margin-top: 10rpx;font-weight: 300;">
									佣金状态：{{item['order']['commission_name']}}</view>
							</view>
						</view>
					</view>
					<view class="flbtn lit-666" style="margin-top: 20rpx;line-height: 40rpx;">
						<view class="">
							<view>
								应付金额：
							</view>
							<view>
								￥{{_amount(item['order']['price'])}}
							</view>
						</view>
						<view class="">
							<view>
								余额抵扣：
							</view>
							<view>
								￥{{_amount(item['order']['deduction_price'])}}
							</view>
						</view>
						<view class="big-333 bold" style="color: #EE3D3D;">
							<view>
								实付款：
							</view>
							<view>
								￥{{_amount(item['order']['pay_price'])}}
							</view>
				
						</view>
					</view>
				</template>
			</view>
		</view>

	</view>
</template>

<script>
	import mixin from '@/static/js/mixin/mixin'
	import {
		benOrderListAPI
	} from '@/request/recharge/index.js';
	export default {
		mixins: [mixin],
		data() {
			return {
				// 是否返回上一页
				paypage: false,
				page: 1,
				lock: true,
				dataList: [],
				activeType: 0,
				list: [{
						name: '充值相关',
						id: 0
					},
					{
						name: '品牌商家',
						id: 3
					}
				],
				tabActive: {
					color: "#FF7700",
					'font-weight': 'bold',
					'font-size': '28rpx'
				},
				total: 0,
			}
		},
		methods: {
			// async getData() {
			// 	await this.getOrderList()
			// },
			getStateName(state) {
				let arr = [
					'待结算',
					'结算中',
					'已结算'
				];
				return arr[state]
			},
			clickTab(e) {
				console.log(e, 'clicktab');
				let type = this['list'][e['index']]['id'];
				this['page'] = 1;
				this['activeType'] = type;
				this.getOrderList()
			},
			getOrderList() {
				if (this['page'] == 1) {
					this['dataList'] = []
				};
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
				let parameters = {
					order_type: this['activeType'],
					page: this['page']
				};
				if (this['activeType'] == 3) {
					parameters['order_type'] = '3,4,5'
					// parameters['uu_id'] = 620879
				}
				benOrderListAPI(parameters).then(res => {
					console.log(res['data'])
					this['dataList'].push(...res['data']['data']);
					this['total'] = res['data']['total'];
					this.page++;
					uni.hideLoading();
				})
			},
			/**
			 * @初始化
			 * 
			 */
			init(paramet) {
				this['page'] = paramet;
				this.getOrderList();
			},

			OrderInfor(item) {
				if(item['order']['brand_id']){
					if (item['order']['brand_id'] == 10) {
						uni.navigateTo({
							url: `/pages/restaurant/order/order-details/xbk-orders-details?order=${item['order']['order_sn']}`
						})
					} else if (item['order']['brand_id'] == 13) {
						uni.navigateTo({
							url: `/pages/restaurant/order/order-details/rx-orders-details?order=${item['order']['order_sn']}`
						})
					} else {
						uni.navigateTo({
							url: `/pages/restaurant/order/order-details/order-details?order=${item['order']['order_sn']}`
						});
					}
				}
				
			}
		},
		onShow() {
			this.init(1);
		},
		onReachBottom() {
			console.log(this['dataList']['length'], this['total']);
			if (this['dataList']['length'] >= this['total']) return;
			this.getOrderList()
		},

	}
</script>

<style lang="scss">
	.white-box {
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.img-box {
		padding-top: 16rpx;

		image {
			width: 170rpx;
			height: 170rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}
	}
</style>
