<template>
	<view class="mg-lr-24" style="padding-bottom: 110rpx;">
		<view class="jifen-card mg-bot-46">
			<view class="u-f u-f-jcsb u-f-aic mg-bot-18">
				<view class="u-f u-f-jcfs u-f-aic">
					<image style="width: 76rpx;height: 76rpx;border-radius: 50%;" :src="pointsInfres.avatarUrl" class="mg-right-10"></image>
					<view class="fs28 fw400 white-color">{{pointsInfres.nickName}}</view>
				</view>
				<view class="u-f u-f-jcfe u-f-aic" @click="goDetail('/pagesE/home-zhuanjifen/home-zhuanjifen')">
					<view class="u-f u-f-jcfs u-f-aic white-btn">
						<text class="fs28 fw400 main-color mg-right-10">赚积分</text>
						<image src="/static/common/hight_right_arrow.png" class="s-h-right-arrow"></image>
					</view>
				</view>
			</view>
			<view class="jifen-card-content u-f u-f-jcsb u-f-aifs">
				<view class="u-f u-f-fdc u-f-aifs">
					<view class="u-f u-f-jcfs u-f-aic mg-bot-12">
						<text class="mg-right-10 fs24 fw400 light-black">当前可用积分</text>
						<image class="wenhao" src="/static/common/wenhao.png"></image>
					</view>
					<view class="fw600 light-black fs36 mg-bot-30">{{pointsInfres.availablePoints}}</view>
					<view class="u-f u-f-jcfs u-f-aic fs24">
						<text class="light-black mg-right-16">即将过期</text>
						<view class="light-black fw600">{{pointsInfres.expiringSoonPoints}}</view>
					</view>
				</view>
				<view class="u-f u-f-aic u-f-jcfe">
					<image style="width: 144rpx;height: 144rpx;" :mode="'widthFix'" src="../.././static/common/jifen.png"></image>
				</view>
			</view>
		</view>

		<view class="mg-bot-26">
			<common-title :msg="'积分明细'"></common-title>
		</view>

		<view class="mg-bot-20">
			<view class="shop-good u-f u-f-jcfs u-f-aic mg-bot-34">
				<view :class="['item', pointsIndex == item.id ? 'active' : '']" v-for="(item,index) in pointsTabs"
					:key="item.id" @click="checkGood(item.id)">
					{{item.name}}
				</view>
			</view>
		</view>

		<view class="white-bg-wrap mg-bot-20">
			<view class="mg-bot-36" v-for="item in pointsList" :key="item.id">
				<view class="u-f u-f-jcsb">
					<view class="u-f u-f-fdc u-f-aisb">
						<text class="fs28 light-black fw600 mg-bot-24">{{item.title}}</text>
						<text class="light-gray fs24">{{item.createTime}}</text>
					</view>
					<view class="u-f u-f-aic u-f-jcfe">
						<text class="main-color fs28 fw600">{{item.type==1 ? '+' : '-'}}{{item.operationPoints}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="fix-bot u-f u-f-aic u-f-jcc">
			<view class="line-gradient-btn" style="padding: 24rpx 0;width: calc(100% - 48rpx)"
				@click="goDetail('/pagesE/home-jifenshangcheng/home-jifenshangcheng')">
				去使用
			</view>
		</view>
		
	</view>
</template>

<script>
	import commonTitle from "../.././components/common-title/common-title.vue"
	export default {
		components: {
			commonTitle
		},
		data() {
			return {
				activeShopGood: 0,
				pointsInfres: "",
				pageNum: 1,
				pageSize: 10,
				pointsTabs: [
					{
						name: '全部',
						id: 0
					},
					{
						name: '增加',
						id: 1
					},
					{
						name: '减少',
						id: 2
					}
				],
				pointsList: [],
				pointsIndex: 0,
				pageNum: 1,
				pageSize: 10,
				total: 0
			}
		},
		onShow() {
			this.getGetUserPointsInfoData()
			this.getpointsDetailList()
		},
		methods: {
			getpointsDetailList(flag) {
				this.$http.post('/api/client/pointsRecord/list', {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					type: this.pointsIndex
				}).then(res => {
					this.pointsList = !flag ? res.data.data.rows : this.pointsList.concat(res.data.data.rows)
					this.total = res.data.data.total
				})
			},
			getGetUserPointsInfoData() {
				this.$http.post('/api/client/pointsRecord/getUserPointsInfo').then(res => {
					let pointsInfres = res.data.data
					this.pointsInfres = pointsInfres
				})
			},
			checkGood(id) {
				this.pageNum = 1;
				this.pointsIndex = id
				this.getpointsDetailList()
			},
			goDetail(url) {
				console.log(url, '跳转');
				uni.navigateTo({
					url: url
				})
			},
			onReachBottom() {
				console.log(this.total, this.list.length);
				if (this.total > this.list.length) {
					this.pageNum = this.pageNum + 1
					this.getpointsDetailList(true)
				} else {
					wx.showToast({
						title: '没有更多啦！',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #FAFBFF;
	}
</style>

<style lang="scss" scoped>
	.jifen-card {
		padding: 18rpx 12rpx 12rpx 12rpx;
		background: linear-gradient(92deg, #FF4502 0%, #FF8903 100%);
		border-radius: 18rpx 18rpx 18rpx 18rpx;
	}

	.jifen-card-content {
		background-color: #FFF6EE;
		padding: 20rpx 18rpx 38rpx 18rpx;
		border-radius: 10rpx;
	}

	.white-btn {
		padding: 10rpx 40rpx;
		background-color: #ffffff;
		border-radius: 15rpx;
		.s-h-right-arrow {
			width: 12rpx;
			height: 19rpx;
		}
	}

	.wenhao {
		width: 32rpx;
		height: 32rpx;
	}

	.shop-good {
		.item {
			flex: calc(33.3% - 30rpx);
			text-align: center;
			padding: 16rpx 50rpx;
			background-color: #ffffff;
			border-radius: 18rpx;
			margin-right: 30rpx;
			color: #333333;

			&:last-child {
				margin-right: 0;
			}

			&.active {
				text-align: center;
				color: #ffffff;
				background-color: #FF4502;
			}
		}
	}
	
	.fix-bot {
		width: 100%;
		position: fixed;
		bottom: 28rpx;
		left: 0;
		z-index: 333;
	
		.content {
			background-color: #ffffff;
			padding: 10rpx 24rpx;
		}
	}
</style>