<template>

	<view class="orderBox" v-if="orderShow==true">
		<view class="select padding-lr-sm margin-top-sm margin-bottom-xs" @click="getMouth">
			<view class="padding-lr-xs flex">
				{{chooseDay}}
				<view class="padding-lr-xs">
					<text class="lg text-gray cuIcon-unfold "></text>
				</view>
			</view>

			<u-datetime-picker v-model="chooseValue" mode="year-month" :show="timeShow" @confirm="confirm"
				@cancel="cancel" :immediateChange='true'>
			</u-datetime-picker>
		</view>
		<view>
			<view class="cu-card" v-for="(item,index) in orderData.orderList" :key="item.id"
				v-if="orderData.orderList!=null">
				<view class="cu-item shadow" @click="goDetail(item)">
					<view>
						<view class="flex solid-bottom padding-sm justify-between flex-wrap">
							<view class="orderNumber">{{item.sn}}</view>
							<!-- <view class="">
								<view
									:class="{'payState' : item.payStatus== 1 ,'non-payment' : item.payStatus== 0,'refunded': item.payStatus== 2}">
									{{['未付款','已付款','付款失败'][item.payStatus === '' ? '--' : item.payStatus] }}
								</view>
							</view> -->
						</view>
						<view>
							<view class="payMoney padding-lr-sm padding-bottom-sm">
								<view class="margin-top-sm" style="font-size: 20rpx">{{$t('index.License_number')}}：{{item.vehicleNo ? item.vehicleNo : '--'}}
								</view>
								<view class="margin-top-sm" style="font-size: 20rpx">{{$t('index.Power_change_time')}}：{{item.swapEndTime}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view v-if="orderShow==false || orderData.orderList == null || orderData.orderList.length == 0">
		<view class="nonePage">
			<view class="noneBg">
			</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 {
		globalStore
	} from '../../stores/globalData.js';
	const logIn = globalStore()

	import {
		useCounterStore
	} from '@/stores/counter.js';
	import { useI18n } from 'vue-i18n'//zz
	   const { t } = useI18n()//zz
	const detailBack = useCounterStore()

	const orderShow = ref(true) //判断是否登录展示订单
	const orderData = reactive({ //请求的订单列表
		orderList: [{
			orderNo: 0,
			payStatus: 0,
			staSwapRecord: {
				cn: 0
			},
			totalFee: 0,
			createTime: 0
		}],
		orderAskIng: []
	})
	const page = ref(1) //触底加载增加的页数
	const totalPages = ref() //总页数，用于判断是否加载完
	const chooseValue = ref(Date.now());
	const timeShow = ref(false)
	const chooseDay = ref()
	onShow(async () => {
		// orderShow.value = logIn.isLogin //有无数据展示判断
		// if (detailBack.value == true) {
		// chooseDay.value = await getDay(0)//获取当前时间年月
		// getOrder(0, chooseDay.value)
		// } else {
		// console.log(chooseValue._rawValue,'chooseValue._rawValue.');
		// chooseValue._rawValue=chooseValue._value=Date.now()
		//    console.log(chooseValue,chooseValue.value,'llllllllllll',chooseValue._rawValue) 

		// }

	})
	onTabItemTap(async (e) => {
		console.log(e);
		if (e.index == 1) {
			if (!uni.getStorageSync("userInfo")) {
				uni.showToast({
					title: t('index.login_first'),
					duration: 2000,
					icon: 'error'
				});
				return;
			} else {
				// chooseDay.value = await getDay(0)
				page.value = 1
				// getOrder(0, chooseDay.value)
				uni.pageScrollTo({
					scrollTop: 0, // 滚动到页面的目标位置  这个是滚动到顶部, 0 
					duration: 0 // 滚动动画的时长
				})
			}
		}
	})
	onLoad(async () => {
		chooseDay.value = await getDay(0) + '-01' //获取当前时间年月
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: t('index.login_first'),
				duration: 2000,
				icon: 'error'
			});
			return;
		} else {
			getOrder()
		}

	})
	onUnload(() => {
		// console.log('销毁');
	})
	onHide(async () => {
		// detailBack.value = false
		// page.value = 1
		// console.log('隐藏');
	})
	onPullDownRefresh(async () => {
		// chooseDay.value = await getDay(0)
		page.value = 1
		// getOrder(0, chooseDay.value)
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 2000);
	})
	onReachBottom(async () => {
		// console.log(totalPages.value, 'totalPages.value');
		if (page.value < totalPages.value) {
			page.value += 1
			// await getOrder(1, chooseDay.value)
			orderData.orderList = orderData.orderList.concat(orderData.orderAskIng)
		} else {
			uni.$u.toast(t('index.No_more'));
		}
	})
	const getOrder = async (type, data) => {
		let dates = {
			customerId: uni.getStorageSync("userInfo").id,
			time: chooseDay.value
		}
		console.log(dates);
		await uni.$request({
			url: config.baseUrl + 'api/SwapOrder/AppSwapOrder',
			data: dates,
			method: 'POST'
		}).then(res => {
			// console.log(res, '==========>');
			// if (type == 1) {
			// 	orderData.orderAskIng = res.data.data.data //触底加载的列表
			// } else {
			// 	orderData.orderList = res.data.data.data //渲染的列表
			// }
			orderData.orderList = res.data.data.rows //渲染的列表
			totalPages.value = res.data.data.toTal //总页数
		}).catch((err) => {
			uni.showToast({
				title: t('index.Order_loading_failed'),
				duration: 2000,
				icon: 'error'
			});
		})
	}
	const confirm = () => {
		// chooseDay.value = new Date(chooseValue.value)
		setTimeout(() => {
			let n = new Date(chooseValue._rawValue)
			let year = n.getFullYear()
			let month = n.getMonth() + 1
			// let day = m.getDay()
			// console.log('month: ', month, toString.call(month));
			month = month < 10 ? ('0' + month) : month
			let res = year + '-' + month + '-01'
			chooseDay.value = res
			timeShow.value = false
			page.value = 1 //点击查询页面请求第一页
			getOrder(0, res)
		}, 500)
	}
	const cancel = () => {
		timeShow.value = false
	}
	const getMouth = () => {
		timeShow.value = true
	}
	const getDay = (day) => {
		var today = new Date();
		var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
		today.setTime(targetday_milliseconds);
		var tYear = today.getFullYear();
		var tMonth = today.getMonth();
		var tDate = today.getDate();
		tMonth = doHandleMonth(tMonth + 1);
		tDate = doHandleMonth(tDate);
		// return tYear + "-" + tMonth + "-" + tDate;
		return tYear + "-" + tMonth;
	}
	const doHandleMonth = (month) => {
		var m = month;
		if (month.toString().length == 1) {
			m = "0" + month;
		}
		return m;
	}
	const goDetail = (e) => {
		uni.navigateTo({
			url: './detailInf/detailInf?details=' + JSON.stringify(e)
		})
	}
	
</script>
<style lang="scss" scoped>
	.orderBox {
		width: 100%;
		background: #F7F8FA;
	}

	.select {
		height: 40rpx;
		font-size: 28rpx;
		color: #171717;
		background: #F7F8FA;
	}

	.payState {
		padding: 4rpx 16rpx;
		border: 1px solid #4C91FF;
		border-radius: 8px;
		color: #4C91FF;
		font-size: 28rpx;
	}

	.payMoney {
		display: flex;
		flex-direction: column;
	}

	.orderNumber {
		font-weight: 500;
		line-height: 50rpx;
	}

	.nonePage {
		width: 100%;
		height: calc(100vh - 70rpx);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.non-payment {
		color: #FF7B0E;
		border: 1px solid #FF7B0E;
		padding: 4rpx 16rpx;
		border-radius: 8px;
		font-size: 28rpx;
	}

	.refunded {
		color: #F23E2C;
		border: 1px solid #F23E2C;
		padding: 4rpx 16rpx;
		border-radius: 8px;
		font-size: 28rpx;
	}

	.noneBg {
		width: 336rpx;
		height: 452rpx;
		background: url('../../static/order/order.png') no-repeat;
		background-size: 100% 100%;
	}

	.cu-card>.cu-item {
		margin: 0 30rpx 30rpx 30rpx;
	}
</style>
<style lang="scss">
	page {
		background-color: #F7F8FA;
	}
</style>