<template>
	<view class="bg">
		<view class="score-card">
			
			<view>积分余额</view>
			<view class="score-num">
				<text style="padding-right: 6rpx;">{{totalScore}}</text>
				<image class="point-image" src="https://static.ticket.sz-trip.com/uploads/20250917/9969ed1c37123ae8b29533a9981d2a6f.png"></image>
			</view>
			<view class="refresh-btn" @click="getScore()">
				<image src="https://static.ticket.sz-trip.com/uploads/20250922/718a9f118e60af19c927d72335615121.png"></image>
				刷新
			</view>

		</view>
		
		<!-- 选项卡区域 -->
		<view class="tab-bar">
		  <view :class="['tab-item',activeType==0]" @click="changeType(0)">积分收支明细</view>
		  <view :class="['tab-item',activeType==1]" @click="changeType(1)">积分使用记录</view>
		</view>
	
		<!-- 积分列表区域 -->
		<view class="score-list" v-if="activeType==0">
		  <view class="list-item" v-for="(item, index) in record" :key="index" @click="goOrder(item)">
			<image v-if="item.type=='score_pay'" class="item-icon" src="https://static.ticket.sz-trip.com/uploads/20250922/1288379124c94892f6ac7a461337da46.png" mode="aspectFit"></image>
			<image v-else-if="item.type=='score_refund'" class="item-icon" src="https://static.ticket.sz-trip.com/uploads/20250922/191fb92720719ec2ce03256389480188.png" mode="aspectFit"></image>
			<image v-else class="item-icon" src="https://static.ticket.sz-trip.com/uploads/20250922/0f95e2a13d6e6d947b9c8721f9d01017.png" mode="aspectFit"></image>
			  
			<view class="item-left flex-between" >
			  <view class="item-info">
				<text class="item-name">{{ item.memo }}</text>
				<text class="item-time" v-if="item.order">订单编号：{{ item.order.order_id }}</text>
				<text class="item-time">{{ item.createtime }}</text>
			  </view>
			  <text class="item-score" :class="item.wallet > 0 ? 'plus' : 'minus'">{{ item.wallet > 0 ? '+' + item.wallet : item.wallet }}</text>
			</view>
		  </view>
		</view>
		
		<view class="score-list" v-if="activeType==1" >
		  <view class="list-item" v-for="(item, index) in useRecord" :key="index" @click="goOrder(item)">
			  <!-- 积分下单 -->
			<image class="item-icon" src="https://static.ticket.sz-trip.com/uploads/20250922/1288379124c94892f6ac7a461337da46.png" mode="aspectFit"></image>
			<view class="item-left flex-between" >
			  <view class="item-info">
				<text class="item-name">{{ item.memo }}</text>
				<text class="item-time" v-if="item.order">订单编号：{{ item.order.order_id }}</text>
				<text class="item-time">{{ item.createtime }}</text>
			  </view>
			  <text class="item-score" :class="item.wallet > 0 ? 'plus' : 'minus'">{{ item.wallet > 0 ? '+' + item.wallet : item.wallet }}</text>
			</view>
		  </view>
		</view>

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeType: 0,
				totalScore: 0,
				typeIndex: 0,
				record: [],
				useRecord: [],
				finish: false,
				page: 1,
			}
		},
		onReady () {
			this.getScore()
			this.getScoreRecord(true)
		},
		methods: {
			// 获取积分明细 取总积分
			getScore() {
				this.Post({},"/api/uservice/user/getMyInfo").then(res=>{
					this.totalScore = res.data.score
				})
			},
			getScoreRecord () {
				this.Post({page:this.page},"/api/uservice/user/getScoreChangeLog").then(res=>{
					let wallet_logs = res.data.wallet_logs.data;
					let expend_logs = res.data.expend_logs.data;
					wallet_logs.forEach(v=>{
						if (v.ext) {v.order = JSON.parse(v.ext)}
					})
					expend_logs.forEach(v=>{
						if (v.ext) {v.order = JSON.parse(v.ext)}
					})
					this.record = [...this.record,...wallet_logs];
					this.useRecord = [...this.useRecord,...expend_logs]
					this.page++
					
				})
			},
			
			
			
			changeType (index) {
				if (index == this.activeType) {
					return
				}
				this.activeType = index;
				
			},
			
			goOrder (item) {
				if (item.order) {
					uni.navigateTo({ url: `/subPackages/order/orderDetail?id=${item.order.order_id}` });
				}
			},
			
			
			
		},
		onReachBottom() {
			setTimeout(() => {
				this.getScoreRecord()
			},1000)
		}
	}
</script>

<style lang="scss" scoped>
	::-webkit-scrollbar {
	  display: none;
	  width: 0;
	  height: 0;
	}
	.bg{
		width: 750rpx;
		min-height: 100vh;
		background: #FFFFFF;
	}
	.point-image{
		width: 26rpx;
		height: 26rpx;
	}
	
.score-card {
	width: 750rpx;
	height: 200rpx;
	background: linear-gradient(-90deg, #FCE2C1, #F0BD90);
	font-weight: 500;
	font-size: 27rpx;
	color: #6E3D1D;
	padding: 26rpx;
	position: relative;
	.score-num {
	  font-weight: 500;
	  font-size: 53rpx;
	  color: #000000;
	  margin-top: 34rpx;
	  display: flex;
	  align-items: center;
	}
	.refresh-btn {
		width: 134rpx;
		height: 40rpx;
		background: #F8D6B1;
		border-radius: 20rpx 0rpx 0rpx 20rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #6E3D1D;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 23rpx 0 20rpx;
		position: absolute;
		top: 26rpx;
		right: 0;
		image{
			width: 26.67rpx;
			height: 26.67rpx;
		}
	}
	
}



.tab-bar {
  display: flex;
  border-bottom: 2rpx solid #D8D8D8;
  height: 109rpx;
  line-height: 109rpx;
  font-weight: 500;
  font-size: 31rpx;
  color: #000000;
  display: flex;
  align-items: center;
  .tab-item {
    flex: 1;
    text-align: center;
	position: relative;
    &.true {
      font-weight: bold;
    }
	&.true::after{
		content: "1";
		width: 67rpx;
		height: 7rpx;
		background: #FB2A54;
		border-radius: 3rpx;
		bottom: 19rpx;
		left: calc(50% - 34rpx);
		position: absolute;
		font-size: 0;
	}
  }
}




.score-list {
  width: 100%;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  padding-left: 26rpx;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-left {
  display: flex;
  align-items: center;
  flex: 1;
  width: 100rpx;
  border-bottom: 2rpx solid #f5f5f5;
  padding: 33rpx 30rpx 33rpx 0;
}

.item-icon {
  width: 33.33rpx;
  height: 33.33rpx;
  margin-right: 26rpx;
  flex-shrink: 0;
}

.item-info {
  display: flex;
  flex-direction: column;
}

.item-name {
  font-size: 28rpx;
  color: #333;
}

.item-time {
  font-size: 24rpx;
  color: #999;
  margin-top: 5rpx;
}

.item-score {
  font-size: 28rpx;
}

.plus {
  color: #FB2A54;
}

.minus {
  color: #000000;;
}
</style>