<template>
	<view class="main-page">
		<view>
			<view>
				<view class="content-list" v-for="(item,index) in orderData.orderList" :key="item.id">
					<view>
						<view class="station-name">{{item.stationName}}</view>
						<view class="station-time">{{item.createTime}}</view>
					</view>
					<view class="">
						<view class="orders-price">￥{{item.trRealAmt}}</view>
						<view class="price-type">{{$t('index.Electricity_consumption')}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import config from '@/common/config/config.js';
	import {
		reactive,
		ref,
	} from "vue";
	import {
		onLoad,
		onShow,
		onReachBottom,
		onUnload,
		onHide,
		onTabItemTap,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	//
	import { useI18n } from 'vue-i18n'//zz
	 const { t } = useI18n()//zz
	const orderData = reactive({ //请求的订单列表
		orderList: [],
		orderAskIng: []
	})
	const page = ref(1) //触底加载增加的页数
	const totalPages = ref() //总页数，用于判断是否加载完
	const idKey=ref()
	onLoad((option)=>{
		idKey.value=option.id
		console.log(option,'option');
	})
	onShow( async () => {
		page.value = 1
		await getOrder(0)
	})
	onReachBottom(async () => {
		if (page.value < totalPages.value) {
			page.value += 1
			await getOrder(1)
			orderData.orderList = orderData.orderList.concat(orderData.orderAskIng)
		} else {
			uni.$u.toast(t('index.No_more'));
		}
	})
	const getOrder = async (type) => {
		await uni.$request({
			url: config.wxUrl_pay + 'pay/invoice/orderDetail?pageNo=' +
				page.value + "&pageSize=" + 10+ "&invoiceId=" + idKey.value
		}).then(res => {
			// console.log(res, '==========>444');
			if (type == 1) {
				orderData.orderAskIng = res.data.data.data //触底加载的列表
			} else {
				orderData.orderList = res.data.data.data //渲染的列表
			}
			totalPages.value = res.data.data.totalPage //总页数
		}).catch((err) => {
			uni.showToast({
				title: t('index.Load_failure'),
				duration: 2000,
				icon: 'error'
			});
		})
	}
</script>

<style lang='less' scoped>
	.main-page {
		/* background: #F5F7FA; */
		position: relative;

	}

	.content-list {
		padding: 32rpx;
		display: flex;
		justify-content: space-between;
		background: #FFFFFF;
		box-shadow: -2px 2px 8px 0px #7AA7D026;
		margin: 16rpx 0;
	}

	.station-name {
		color: #171717;
		font-size: 28rpx;
		font-weight: 400;
		height: 40rpx;
		line-height: 40rpx;
	}

	.station-time {
		font-size: 20rpx;
		font-weight: 400;
		color: #808080;
		margin-top: 8rpx;
	}

	.orders-price {
		color: #4C91FF;
		font-size: 32rpx;
		font-weight: 400;
		text-align: right;
		height: 40rpx;
		line-height: 40rpx;
	}

	.price-type {
		font-size: 20rpx;
		font-weight: 400;
		color: #585858;
		text-align: right;
		margin-top: 8rpx;
	}
</style>
<style lang="less">
	page {
		background-color: #F2F6F7;
	}
</style>