<template>
	<view id="pendingOrderBox">
		<van-tabs color="#04B871" @click="changeTab" title-inactive-color="#969799" title-active-color="#323233">
			<van-tab title='待支付' name="1">
			</van-tab>
			<van-tab title='还款历史' name="2">
			</van-tab>
		</van-tabs>
		<view class="dataBox" :style="orderList.length==0?'background:#F1F1F3':''">
			<view class="orderList" v-if='orderList.length>0'>
				<view class="orderitem" @tap="getOrderDetai(item)" v-for="(item,index) in orderList" :key="index">
					<view class="rigth">
						<view class="storeName"> {{item.storeName||''}}</view>
						<view class="mealType"> {{ mealType[item.mealType]||''}}</view>
						<view class="amount"> {{itemAmount(item.amount||0)}} </view>
					</view>
					<view class="datatime">
						{{item.dealTime||''}}
					</view>
				</view>
			</view>
			<view v-if='orderList.length==0' class="noCostInfo">
				<image :src="ImgUrl+'xzf/noData-01.png'" mode='widthFix' />
				<p>没有欠款订单~</p>
			</view>
		</view>
		<view class="showall">
			— 已展示全部数据 —
		</view>
		<view class="answeringQuestion"  @click="goToPage(1)" v-if="activeTab==1">
			为什么有待支付订单？
		</view>
	</view>
</template>
<script>
	import {
		Dialog,
		Toast
	} from 'vant';
	import config from '../common/config.js'
	import {
		requestGet,
		requestPost
	} from '../common/request.js'
	export default {
		data() {
			return {
				activeTab: 1, // 1 还款  2 历史
				orderList: [],
				ImgUrl: this.$ImgUrl,
				mealType: {
					1: '早餐',
					2: '中餐',
					3: '晚餐',
					4: '夜宵',
					5: '夜夜宵'
				},
				status: {
					0: '待扣款',
					1: '已付款',
					2: '已撤销',
					3: '已退款',
					4: '异常订单'
				}
			}
		},
		onLoad(options) {
			this.WaitPayList(this.activeTab);
		},
		onShow() {},
		methods: {
			// 订单详情
			async getOrderDetai(item) {
				try {
					uni.showLoading({
						title: "请稍后",
						// #ifndef MP-ALIPAY
						mask: true,
						// #endif
					})
					await new Promise((res, rej) => {
						setTimeout(() => {
							res()
						}, 200);
					})
					uni.hideLoading()
					uni.navigateTo({
						url: `../pendingOrderDetail/pendingOrderDetail?devflowNo=` + item.devflowNo || ''
					})
				} catch (error) {
					uni.showToast({
						icon: "error",
						title: error.message
					})
				}
			},
			// 跳转页面
			async goToPage(value) {
				switch (value) {
					case 1:
						uni.navigateTo({
							url: '../OrderClearSuspicions/OrderClearSuspicions'
						})
						break;
					case 2:
						break;
					case 3:
						break;
					default:
						break;
				}
			},
			// 待支付订单列表
			async WaitPayList(activeTab) {
				uni.showLoading({
					title: "请稍后",
					// #ifndef MP-ALIPAY
					mask: true,
					// #endif
				})
				await new Promise((res, rej) => {
					setTimeout(() => {
						res()
					}, 200);
				})
				const data = await requestPost('/cgi-xpay/app/h5/WaitPayList', {
					accountId: sessionStorage.getItem('accountId') * 1,
					status: activeTab - 1
				})
				uni.hideLoading()
				if (data['code'] != 200) {
					await Dialog({
						title: '温馨提示',
						message: data['message'],
						confirmButtonText: "知道了"
					})
					return
				}
				this.orderList = data.data['orderList'] || []
				// this.orderList = Array(10).fill(1).map((v, index) => {
				// 	return {
				// 		accountId: index, //	integer刷脸用户账户id，该id为绑定用户id
				// 		amount: 100, //	integer消费金额 单位分
				// 		dealTime: '2023-08-09 08:02:01', //	string消费时间
				// 		debt: 1, //	integer是否垫资 1支付宝垫资 0未垫资
				// 		devflowNo: 'sdfasdfsdfsd', //	string终端消费流水号
				// 		mealType: 1, //	integer餐别：1早餐,2中餐,3晚餐,4夜宵,5夜夜宵
				// 		schoolName: '学校名称', //	string学校名称
				// 		status: 1, //integer订单状态 0待扣款 1已付款 2已撤销 3已退款 4异常订单
				// 		storeName: '商家名称', //	string商家名称
				// 		userName: '用户姓名', //	string用户姓名
				// 	}
				// })
			},
			changeTab(name, title) {
				this.activeTab = name;
				this.WaitPayList(this.activeTab);
			},
		},
		computed: {
			itemAmount() {
				return function(Amount) {
					if (Amount) {
						return (Amount / 100).toFixed(2)
					} else {
						return "0.00"
					}
				}
			},
		},
		onReachBottom() {},
		//下拉刷新
		onPullDownRefresh() {
			this.WaitPayList(this.activeTab);
			uni.stopPullDownRefresh()
		},
	}
</script>
<style lang="scss">
	page {
		background: #F1F1F3;
	}

	#pendingOrderBox {

		.orderList {
			padding-left: 33rpx;
		}

		.orderitem {
			height: 135rpx;
			border-bottom: 2rpx solid #E5E5E5;

			.rigth {
				display: flex;
				justify-items: center;
				align-items: center;
				padding-top: 24rpx;
				position: relative;
			}

			.storeName {
				height: 45rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 45rpx;
			}

			.mealType {
				width: 80rpx;
				height: 34rpx;
				background: rgba(4, 184, 113, 0.09);
				border-radius: 5rpx;
				line-height: 34rpx;
				text-align: center;
				margin-left: 20rpx;

				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #04B871;
			}

			.amount {
				position: absolute;
				height: 45rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #E02020;
				line-height: 45rpx;
				right: 40rpx;
			}

			.datatime {
				height: 37rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.35);
				line-height: 37rpx;
				margin-top: 6rpx;
			}
		}

		.dataBox {
			border-top: 2rpx solid #F1F1F3;
			background: #FFFFFF;
		}

		.answeringQuestion {
			height: 45rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #858585;
			line-height: 45rpx;
			text-align: center;
			margin-top: 30rpx;
			padding-bottom: 50rpx;
		}

		.showall {
			height: 33rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.25);
			line-height: 33rpx;
			text-align: center;
			margin-top: 32rpx;
		}

		.active {
			color: #01BC73;
			font-weight: bold;
		}

		.noCostInfo {
			width: 500rpx;
			margin: 10vh auto;
			text-align: center;
			color: #484C54;
			font-size: 30rpx;

			image {
				width: 500rpx;
				height: 255rpx;
				margin-bottom: 3vh;
			}
		}
	}
</style>