<template>
	<view class="order-page">
		<NavCom title="积分使用记录"></NavCom>
		<view style="padding-top: 300rpx;" v-if="list.length === 0">
			<empty></empty>
		</view>
		<scroll-view class="scroll-list-view" scroll-y="true" scroll-with-animation @scrolltolower="scrolltolower" v-if="list.length > 0">
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="title">订单号：{{item.orderNo}}</view>
				<view class="sub">使用类型：{{typeObj[item.type]}}</view>
				<view class="sub">使用时间：{{formatDateTime(item.createdAt)}}</view>
				<view class="point">
					<image src="@/static/mine/jf.png" mode="" class="point-img"></image>
					{{item.points}}
				</view>
				<!-- <view class="header">
					
					<view class="header-item"><view class="item-title">订单号：</view>{{item.orderNo}}</view>
					<view class="header-item" style="margin: 12rpx 0;"><view class="item-title">使用类型：</view>{{typeObj[item.type]}}</view>
					<view class="header-item"><view class="item-title">使用时间：</view>{{item.createdAt}}</view>
				</view>
				<view class="list-right">{{item.points}}</view> -->
			</view>
			<view class="no-data" v-if="total == list.length && list.length > 0">没有更多了～</view>
		</scroll-view>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import { userPoint } from '@/API/user.js'
	import NavCom from '@/pages/components/nav.vue'

	export default{
	mixins: [myMixins],
		data(){
			return{
				list:[],
				type:'',
				page:1,
				typeObj:{
					'BOX_RECOVERY':'盲盒回收',
					'MALL_PURCHASE':'商城购买',
					'GIFT':'系统赠送'
				},
				total:0
			}
		},
		components:{NavCom},
		onLoad(opation){
			this.getUserPoint()
		},
		methods:{
			formatDateTime(value) {
			      if (!value) return '';
			      const date = new Date(value);
			      const year = date.getFullYear();
			      const month = String(date.getMonth() + 1).padStart(2, '0');
			      const day = String(date.getDate()).padStart(2, '0');
			      const hours = String(date.getHours()).padStart(2, '0');
			      const minutes = String(date.getMinutes()).padStart(2, '0');
			      const seconds = String(date.getSeconds()).padStart(2, '0');
			      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			    },
			getUserPoint(){
				uni.showLoading()
				userPoint({page:this.page,size:10}).then(res => {
					uni.hideLoading()
					this.total = res.data.total
					if(this.page > 1){
						this.list = [...this.list,...res.data.content]
					}else{
						this.list = res.data.content
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			scrolltolower(){
				if(this.total == this.list.length){
					return
				}
				this.page += 1
				this.getUserPoint()
			},
		}
	}
</script>
<style lang="scss" scoped>
	page{
		background-image: url('@/static/index/bg.png');
		background-size: 100%;
	}
	.order-page{
		.scroll-list-view{
			padding-top: 130rpx;
			height: 100vh;
			
			.list{
				width: 710rpx;
				margin: 0rpx 20rpx;
				background-color: #fff;
				padding: 20rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				// display: flex;
				// align-items: center;
				// justify-content: space-between;
				position: relative;
				.title{
					font-size: 26rpx;
					color: #333333;
					margin-bottom: 15rpx;
				}
				.sub{
					margin-top: 15rpx;
					font-size: 20rpx;
					color: #888888;
				}
				.point{
					width: 130rpx;
					position: absolute;
					right: 38rpx;
					bottom: 18rpx;
					font-weight: 300;
					font-size: 24rpx;
					color: #888888;
					display: flex;
					align-items: center;
					.point-img{
						margin-right: 8rpx;
						width: 30rpx;
						height: 31rpx;
					}
				}
				.header{
					.header-item{
						color: #333;
						font-size: 28rpx;
						display: flex;
						align-items: center;
						.item-title{
							width: 140rpx;
							color: #000000;
						}
					}
				}
				.list-right{
					font-size: 28rpx;
					font-weight: bold;
					color: #000000;
				}
			}
		}
	}
</style>