<template>
	<view class="content">
		<view class="bg"></view>
		<view class="menutop">
			<uni-nav-bar :fixed="true" title="积分明细" background-color="transparnet" status-bar left-icon="left"
						 @clickLeft="back" style="border-bottom: none;"/>
		</view>
		
		<view class="jfs">
			<uni-row justify="space-between" customStyle="margin-bottom: 10px">
				<uni-col :span="3">
					<image class="icon" mode="widthFix" src="../../static/jf/icon_points_small_16@2x.png"></image>
				</uni-col>
				<uni-col :span="20">
					<view class="smtitle" style="position: relative;top: -3px;">
						<u-count-to :duration="2000" :startVal="0" :endVal="userInfo.detail.jf" separator="," color="#111111">
						</u-count-to>
					</view>
				</uni-col>
			</uni-row>
		</view>
		
		<view style="margin-top:0px;z-index: 1;position: relative;background: #FFF;border-radius: 24rpx;padding:12rpx 0">
			<view class="tab_item">
				<u-tabs @click="tabIndex"
					:list="tabBars"
					lineWidth="20"
					lineHeight="5"
					:lineColor="`url(${lineBg}) center`"
					:activeStyle="{
						color: '#111111',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}"
					:inactiveStyle="{
						color: '#666666',
						transform: 'scale(1)'
					}"
					itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;padding-bottom:3px;width:25%"
					>
				</u-tabs>
			</view>
		</view>
		
		<view class="jfbox" v-if="listData.length>0">
			<view class="item" v-for="item in listData">
				<uni-row justify="space-between" customStyle="margin-bottom: 10px">
					<uni-col :span="3">
						<image style="width:64rpx" class="icon" mode="widthFix" src="../../static/jf/icon_points_small_16@2x.png"></image>
					</uni-col>
					<uni-col :span="17">
						<view class="smtitle" style="position: relative;top: -3px;">
							{{item.name}}
						</view>
					</uni-col>
					<uni-col :span="4" v-if="item.type==1">
						<view class="add">{{item.jf}}</view>
					</uni-col>
					
					<uni-col :span="4" v-else>
						<view class="th">-{{item.jf}}</view>
					</uni-col>
					
					<uni-col :offset="3" :span="21">
						<text class="time">{{item.createTime}}</text>
						<u-divider lineColor="#E7E7E7"></u-divider>
					</uni-col>
				</uni-row>
				</view>
		</view>
		<u-empty v-else
		        mode="data"
		        icon="http://cdn.uviewui.com/uview/empty/car.png">
		</u-empty>
	</view>
</template>


<script>
	import {getJlList} from '@/api/jfsc.js'
	export default {
		data(){
			return{
				th:false,
				listData:[],
				tabBars:  [{
				    name: '全部记录'
				}, {
				    name: '积分获取',
				}, {
				    name: '积分兑换',
				}],
				lineBg:require('../../static/nav/nav_line2.png'),
				}
		},
		onLoad() {
			this.getjf('')
		},
		methods:{
			tabIndex(index){
				this.getjf(index.name)
			},
			getjf(type){
				uni.showLoading({
					title: '加载中'
				});
				getJlList(type).then(res=>{
					this.listData = res.data
					uni.hideLoading()
				}).finally(()=>{
					uni.hideLoading()
				})
			},
			back(){
				uni.switchTab({
				   url: "/pages/jfsc/index", // 确保 url 是正确的
				 });
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .uni-navbar__content{
		border-bottom: none !important;
	}
	/deep/ .u-count-num{
		font-weight: bold !important;
		font-family: DINPro, DINPro;
	}
	.jfbox{
		background: #FFF;
		border-radius: 24rpx;
		padding: 24rpx;
		box-sizing: border-box;
		position: relative;
		margin-top: 24rpx;
		.smtitle{
			height: 80rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #111111;
			line-height: 40rpx;
			text-align: justify;
			font-style: normal;
		}
		.add{
			height: 44rpx;
			font-family: DIN, DIN;
			font-weight: 500;
			font-size: 36rpx;
			color: #FF1D1D;
			line-height: 44rpx;
			text-align: center;
			font-style: normal;
			position: relative;
			top: 40rpx;
		}
		.th{
			height: 44rpx;
			font-family: DIN, DIN;
			font-weight: 500;
			font-size: 36rpx;
			color: #106DFF;
			line-height: 44rpx;
			text-align: center;
			font-style: normal;
			position: relative;
			top: 40rpx;
		}
		.time{
			height: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 32rpx;
			text-align: left;
			font-style: normal
		}
	}
	.jfs{
		padding:24rpx 24rpx;
		.title{
			height: 84rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;                                                       
			color: #000000;
			line-height: 42rpx;
			text-align: justify;
			font-style: normal;
			margin-bottom: 12rpx;
		}
		.icon{
			vertical-align: bottom;
			margin-right: 5rpx;
			position: relative;
			top: -2px;
			width: 48rpx;
		}
		.count{
			height: 44rpx;
			font-family: DIN, DIN;
			font-weight: 500;
			font-size: 36rpx;
			color: #FF1D1D;
			line-height: 44rpx;
			text-align: left;
			font-style: normal;
		}
	}
	.content{
		padding: 0 24rpx;
		box-sizing: border-box;
		background: #F8F8F8;
		position: relative;
		height: 100vh;
		overflow: scroll;
		.bg{
			position: absolute;
			background: url('data:image/png;base64,[encoded data, 61464 characters]') 0 0 no-repeat;
			width: 100%;
			background-size: 100%;
			height: calc((100vw / 375) * 480);
			left:0;
			top: 0;
			z-index: 0;
		}
		.menutop{
			width: 100%;
			margin: auto;
			padding-bottom:10px;
			padding-top:0px;
			.search{
				text-align: left;width: 70%;
			}
		}
		.cell_item{
			width: 100%;
			padding:100rpx 24rpx 24rpx;
			margin: auto;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-bottom: 15px;
			position: relative;
			.mjxx{
				position: absolute;
				top:-22rpx;
				right:-10rpx;
				width: 350rpx;
				height: 64rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #106DFF;
				line-height: 64rpx;
				text-align: center;
				font-style: normal;
				background: linear-gradient(to right,#C3E4FB,#D4F5F8) ;
				border-radius: 16px;
			}
			.title{
				height: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 32rpx;
				letter-spacing: 4px;
				text-align: left;
				font-style: normal;
				padding-bottom: 5px;
			}
			.name{
				height: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #111111;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
				padding-bottom: 5px;
			}
			.tel{
				position: absolute;
				top: 100rpx;
				right: 0;
			}
			.photo{
				width: 128rpx;
				height: 128rpx;
				border-radius: 50%;
				position: absolute;
				top: -64rpx;
				border: 4rpx solid #CFE2FF;
				
				img{
					border-radius: 50%;
				}
				.icon{
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					bottom: 0rpx;
					right: 0rpx;
				}
			}
		}
	}
</style>