<template>
	<view class="mg-lr-24">
		<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;" :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('/pages/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">当前可用积分</text>
						<!-- <image class="wenhao" src="/static/mode/mode6.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-26">
			<view class="shop-good u-f u-f-jcfs u-f-aic mg-bot-34">
				<view :class="['item', activeShopGood == item.id ? 'active' : '']" v-for="(item,index) in pointsList"
					:key="item.id" @click="checkGood(item.id,index)">{{item.name}}</view>
			</view>
		</view>

		<view class="white-bg-wrap mg-bot-20" v-if="item&&item.type==1">
			<view class="u-f u-f-jcsb mg-bot-36">
				<view class="u-f u-f-fdc u-f-aisb">
					<text class="fs28 light-black fw700 mg-bot-24">停车积分增加</text>
					<text class="light-gray fs24">{{item.operationPoints}}</text>
				</view>
				<view class="u-f u-f-aic">
					<text class="main-color fs28 fw700">+{{item.operationPoints}}</text>
				</view>
			</view>
			<view class="u-f u-f-jcsb mg-bot-36" v-if="item&&item.type==2">
				<view class="u-f u-f-fdc u-f-aisb">
					<text class="fs28 light-black fw700 mg-bot-24">停车积分增加</text>
					<text class="light-gray fs24">{{item.operationPoints}}</text>
				</view>
				<view class="u-f u-f-aic">
					<text class="font-blue fs28 fw700">-{{item.operationPoints}}</text>
				</view>
			</view>
		</view>

		<view class="line-gradient-btn" style="padding: 24rpx;"
			@click="goDetail('/pages/home-jifenshangcheng/home-jifenshangcheng')">
			去使用
		</view>
	</view>
</template>

<script>
	import commonTitle from "../.././components/common-title/common-title.vue"
	export default {
		components: {
			commonTitle
		},
		data() {
			return {
				activeShopGood: 'all',
				shopGood: [{
						name: '全部',
						id: 'all'
					},
					{
						name: '增加',
						id: 'add'
					},
					{
						name: '减少',
						id: 'jianshao'
					}
				],
				pointsInfres: "",
				pageNum: 1,
				pageSize: 10,
				pointsList: [],
				pointsIndex: 0,
			}
		},
		onShow() {
			this.getGetUserPointsInfoData()
			this.getpointsDetailList()
		},
		methods: {
			getpointsDetailList() {
				this.$http.post('/api/client/pointsRecord/list', {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					type: this.pointsIndex
				}).then(res => {
					this.pointsList = res.data.data.rows
				})
			},
			getGetUserPointsInfoData() {
				this.$http.post('/api/client/pointsRecord/getUserPointsInfo').then(res => {
					console.log(res.data);
					this.pointsInfres = res.data.data
					console.log(this.pointsInfres, "pointsInfres");
				})
			},
			checkGood(id, index) {
				this.activeShopGood = id
				this.pointsIndex = index
			},
			goDetail(url) {
				console.log(url, '跳转');
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	page {
		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;

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

			&.active {
				text-align: center;
				color: #ffffff;
				background-color: #FF4502;
			}
		}
	}
</style>