<template>
	<view class="order">
		<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
			<view>
				<statusBar />
				<view class="p30">
					<view class="order_header">
						<view
							class="order_header_view"
							@click="chanStatus(item.type)"
							v-for="(item, index) in status_list"
							:key="index"
							:class="status == item.type ? 'order_header_active' : ''"
						>
							{{ item.name }}
							<view class="order_header_xian" v-if="item.type == status"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="p30">
				<view class="order_list" v-for="(item, index) in dataList" :key="index" @click="toLink(item)">
					<view class="order_list_header">订单编号：{{ item.orderNo }}</view>
					<view class="order_list_view">
						<view>充电时间</view>
						<view>{{ item.startTime }}</view>
					</view>
					<view class="order_list_view">
						<view>结束时间</view>
						<view>{{ item.endTime }}</view>
					</view>
					<view class="order_list_view">
						<view>充电电量</view>
						<view>{{ item.useDegree }}度</view>
					</view>
					<view class="order_list_view">
						<view>服务费</view>
						<view>{{ item.serviceAmount }}元</view>
					</view>
					<view class="order_list_view">
						<view>电费</view>
						<view>{{ item.electricityAmount }}元</view>
					</view>
					<view class="order_list_view">
						<view>预付金额</view>
						<view>{{ item.preAmount }}元</view>
					</view>
					<view class="order_list_total">实付金额：{{ item.actuallyAmount }}元</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onPullDownRefresh, onPageScroll, onReachBottom, onLoad } from '@dcloudio/uni-app';
import { ordersList } from '@/api/api.js';

const paging = ref(null);
let dataList = ref([]);

let list = ref([]);
let status = ref(1);
let status_list = ref([
	{
		name: '全部',
		type: ''
	},
	{
		name: '进行中',
		type: 1
	},
	{
		name: '已完成',
		type: 2
	},
	{
		name: '待支付',
		type: 3
	}
]);

let chanStatus = (e) => {
	status.value = e;
	paging.value.reload();
};

onLoad(async () => {

});

let toLink = (e) => {
	// 1-订单初始化;2-启动充电中;3-正在充电;4-充电结束中;5:交易记录确认;-1-启动失败;-2-启动超时
	if (e.status == 2 || e.status == 3 || e.status == 4) {
		uni.navigateTo({
			url: `/pageOrder/recharge/recharge?transactionNo=${e.transactionNo}&type=order`
		});
	}
};


let isPagingRefNotFound = () => {
	return !paging.value;
};

onPullDownRefresh(() => {
	if (isPagingRefNotFound()) return;
	paging.value.reload().catch(() => {});
});

onPageScroll((e) => {
	if (isPagingRefNotFound()) return;
	paging.value.updatePageScrollTop(e.scrollTop);
	e.scrollTop < 10 && paging.value.doChatRecordLoadMore();
});

onReachBottom(() => {
	if (isPagingRefNotFound()) return;
	paging.value.pageReachBottom();
});

const upChange = (e) => {
	console.log(dataFrom);
	paging.value.reload();
};

const queryList = (pageNo, pageSize) => {
	const params = {
		current: pageNo,
		pageSize: pageSize,
		type: status.value
	};

	ordersList(params)
		.then((res) => {
			paging.value.complete(res);
		})
		.catch((res) => {
			paging.value.complete(false);
		});
};
</script>

<style lang="scss" scoped>
.order {
	&_header {
		@include flex($space: space-between);
		font-weight: bold;
		font-size: 36rpx;
		color: #232323;
		border-bottom: 4rpx solid #e9ecf2;
		&_view {
			padding: 15rpx 0;
			position: relative;
			view {
				position: absolute;
				left: calc(50% - 49rpx);
				bottom: -4rpx;
				width: 98rpx;
				height: 8rpx;
				background: #4879e6;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
		}
		&_active {
			color: #4879e6;
		}
	}

	&_list {
		padding: 25rpx;
		background: #ffffff;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-top: 30rpx;
		&_header {
			font-weight: bold;
			font-size: 26rpx;
			color: #4879e6;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #ebebeb;
			margin-bottom: 20rpx;
		}
		&_view {
			@include flex($space: space-between);
			font-weight: 400;
			font-size: 26rpx;
			color: #232323;
			margin-bottom: 20rpx;
		}
		&_total {
			flex: 1;
			text-align: right;
			font-weight: bold;
			font-size: 40rpx;
			color: #4879e6;
		}
	}
}
</style>
