<template>
	<view class="whole">
		<view class="topBox">
			<view class="box">
				<view class="one">
					<image :src="scoreInfo.avatar" class="img"></image>
					<text>{{ scoreInfo.nickname }}</text>
				</view>
				<view class="two">当前&nbsp;<text>{{scoreInfo.score * 1}}</text>&nbsp;积分</view>
			</view>
		</view>
		
		<view class="listBox">
			<up-tabs
				:current="active"
				keyName="name"
				:list="tabList"
				:itemStyle="itemStyle"
				:lineColor="Color"
				:activeStyle="{ color: Color }"
				@click="onChange">
			</up-tabs>
			
			<view class="box">
				<!-- 来源类型 1-订阅；2-取消订阅；3-消费；4-退款；5-跟团分享；6-晒单评论 7-兑换券 -->
				<view class="item" v-for="(item, index) in scoreDetail" :key="index">
					<view class="one">
						<image v-if="item.source_type === 3" :src="item.source && item.source.items[0] && item.source.items[0].pic_url" class="pic" mode="aspectFill"></image>
						<image v-if="item.source_type === 4" :src="item.source && item.source.item && item.source.item.pic_url" class="pic" mode="aspectFill"></image>
						<view class="pink" v-if="item.source_type === 1 || item.source_type === 2">
							<up-icon name="bookmark" size="30" :color="Color" />
						</view>
						<view class="pink" v-if="item.source_type === 5">
							<up-icon name="share" size="30" :color="Color" />
						</view>
						<view class="pink" v-if="item.source_type === 6">
							<up-icon name="chat" size="30" :color="Color" />
						</view>
						<view class="box1" v-if="item.source_type === 7">
							<view class="goods" v-if="item.source && item.source.use_type === 21">
								<view class="num">￥<text>{{item.source && item.source.amount * 1}}</text></view>
								<view class="txt">商品抵扣券</view>
							</view>
							<template v-else>
								<view class="num">￥<text>{{item.source && item.source.amount * 1}}</text></view>
								<view class="desc" v-if="item.source && item.source.use_type === 10">无门槛</view>
								<view class="desc" v-else>满{{item.source && item.source.full_amount * 1}}减{{item.source && item.source.amount * 1}}</view>
							</template>
						</view>
						<view class="pink" v-if="item.source_type === 8 || item.source_type === 9">
							<up-icon name="account-fill" size="30" :color="Color" />
						</view>
						<view class="pink" v-if="item.source_type === 10">
							<up-icon name="man-add-fill" size="30" :color="Color" />
						</view>
						<view class="pink" v-if="item.source_type === 11">
							<text class="iconfont icon-kouchu"></text>
						</view>
						<view class="pink" v-if="item.source_type === 12 || item.source_type === 13">
							<text class="iconfont icon-socreback"></text>
						</view>
						<view class="pink" v-if="item.source_type === 14">
							<up-icon name="integral" size="30" :color="Color" />
						</view>
						<view class="pink" v-if="item.source_type === 15">
							<up-icon name="account-fill" size="30" :color="Color" />
						</view>
					</view>
					<view class="mid">
						<template v-if="item.source_type === 1">
							<view class="tit">订阅奖励积分</view>
							<view class="label">订阅团长送积分</view>
						</template>
						<template v-if="item.source_type === 2">
							<view class="tit">取消订阅</view>
							<view class="label">取消订阅</view>
						</template>
						<template v-if="item.source_type === 3">
							<view class="tit line" v-if="item.source && item.source.items">
								<text v-for="(it, i) in item.source.items" :key="i">{{it.goods_name}}<template v-if="it.sku_name">【{{it.sku_name}}】</template>
									<template v-if="item.source.items.length !== 1">，</template>
								</text>
							</view>
							<view class="label">跟团奖励积分</view>
						</template>
						<template v-if="item.source_type === 4">
							<view class="tit line" v-if="item.source && item.source.item">{{item.source.item.goods_name}}<template v-if="item.source.item.sku_name">【{{item.source.item.sku_name}}】</template>
							</view>
							<view class="label">退款扣除积分</view>
						</template>
						<template v-if="item.source_type === 5">
							<view class="tit">跟团后分享送积分</view>
							<view class="label">跟团后分享奖励</view>
						</template>
						<template v-if="item.source_type === 6">
							<view class="tit">晒单评论</view>
							<view class="label">晒单评论奖励积分</view>
						</template>
						<template v-if="item.source_type === 7">
							<view class="tit" v-if="item.source && item.source.use_type === 21">{{item.source.extend && item.source.extend.title}}</view>
							<template v-else>
								<view class="tit" v-if="item.source && item.source.use_type === 10">无门槛</view>
								<view class="tit" v-else>满减券</view>
								<view class="label">积分商城奖励兑换</view>
							</template>
						</template>
						<template v-if="item.source_type === 8 || item.source_type === 9">
							<view class="tit">团长调整积分</view>
							<view class="label">团长调整积分</view>
						</template>
						<template v-if="item.source_type === 10">
							<view class="tit">邀请新用户</view>
							<view class="label">邀新奖励积分</view>
						</template>
						<template v-if="item.source_type === 11">
							<view class="tit">积分抵扣</view>
							<view class="label">订单支付抵扣</view>
						</template>
						<template v-if="item.source_type === 12">
							<view class="tit">积分退还</view>
							<view class="label">订单关闭退还</view>
						</template>
						<template v-if="item.source_type === 13">
							<view class="tit">积分退还</view>
							<view class="label">订单退款退还</view>
						</template>
						<template v-if="item.source_type === 14">
							<view class="tit">入会赠送</view>
							<view class="label">入会送积分</view>
						</template>
						<template v-if="item.source_type === 15">
							<view class="tit">团长手动操作</view>
							<view class="label">团长操作积分</view>
						</template>
						<view class="time">{{switchTxt[item.source_type]}}{{item.created_at}}</view>
					</view>
					<view class="score red" v-if="item.score * 1 > 0">+{{item.score * 1}}</view>
					<view v-else class="score">-{{item.score * 1}}</view>
				</view>
				<view v-if="loading" class="loadbox">
					<up-loading-icon text="加载中..." textSize="14"></up-loading-icon>
				</view>
				<view v-if="!loading" style="color:#999;font-size: 12px;text-align:center;padding: 30rpx 0;">没有更多了</view>
			</view>
		</view>

	</view>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { get, post } from '@/Api/request.js'
	import { Style } from '@/utils/list.js'
	
	export default {
		setup() {
			const data = reactive({
				tabList: [
					{id: 0, name: '全部'},
					{id: 1, name: '收入'},
					{id: 2, name: '支出'}
				],
				itemStyle: {
					width: '33%',
					height: '44px'
				},
				page: 1,
				pageSize: 20,
				last_page: 0,
				scoreDetail: [],
				scoreInfo: {
					score: 0
				},
				active: 0,
				loading: false,
				switchTxt: {
					'1': '发放时间：',
					'2': '扣除时间：',
					'3': '发放时间：',
					'4': '扣除时间：',
					'5': '发放时间：',
					'6': '发放时间：',
					'7': '兑换时间：',
					'8': '发放时间：',
					'9': '发放时间：',
					'10': '发放时间：',
					'11': '扣除时间：',
					'12': '退还时间：',
					'13': '退还时间：',
					'14': '发放时间：',
					'15': '操作时间：'
				},
				Color: uni.getStorageSync('theme_color'),
				bgColor: Style[uni.getStorageSync('theme_index') * 1].bgColor,
				priceColor: Style[uni.getStorageSync('theme_index') * 1].priceColor
			})
			
			function getUserInfo() {
				get('/api/v1/shopScore/user').then((res) => {
					data.scoreInfo = res.data.user
				})
			}
			
			function getFetchList() {
				data.loading = true
				let params = {
					page: data.page,
					pageSize: data.pageSize,
					type: data.active || ''
				}
				get('/api/v1/shopScore/user/log', params).then((res) => {
					data.scoreDetail = data.scoreDetail.concat(res.data)
					data.last_page = res.meta.last_page
					data.loading = false
				}).catch(() => {
					data.loading = false
				})
			}
			
			function onChange(e) {
				data.active = e.id
				data.page = 1
				data.scoreDetail = []
				getFetchList()
			}
			
			return {
				...toRefs(data),
				getFetchList,
				onChange,
				getUserInfo
			}
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page ++
				this.getFetchList()
			}
		},
		async onLoad(options) {
			// await this.$onLaunched
			await this.getUserInfo()
			await this.getFetchList()
		}
	}
</script>

<style lang="scss" scoped>
	.whole{
		.topBox{
			padding: 24rpx;
			box-sizing: border-box;
			.box{
				padding: 14rpx;
				background: #fff;
				box-sizing: border-box;
			}
			.one{
				display: flex;
				align-items: center;
				font-size: 30rpx;
				.img{
					width: 60rpx;
					height: 60rpx;
					margin-right: 16rpx;
					border-radius: 6rpx;
				}
			}
			.two{
				padding: 30rpx 0;
				text-align: center;
				font-size: 24rpx;
				color: #666;
				text{
					font-size: 60rpx;
					color: v-bind('Color');
					font-weight: bold;
				}
			}
		}
		.listBox{
			background-color: #fff;
			.box{
				border-top: 1px solid #F6F6F6;
			}
			.item{
				border-bottom: 1px solid #F6F6F6;
				display: flex;
				align-items: center;
				padding: 20rpx 24rpx;
				.one{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 120rpx;
					height: 120rpx;
					background-color: v-bind('bgColor');
					border-radius: 6rpx;
					.icon{
						width: 60rpx;
						height: 60rpx;
					}
					.pic{
						width: 100%;
						height: 100%;
					}
					.iconfont{
						color: v-bind('Color');
						font-size: 30px;
					}
					.box1{
						background-color: #FFF7DB;
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						.num{
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color: #744928;
							line-height: 1;
							text{
								font-size: 30rpx;
								font-weight: 600;
							}
						}
						.desc{
							color: #AC8567;
							font-size: 22rpx;
							margin-top: 10rpx;
						}
						.goods{
							width: 100%;
							.num{
								height: 80rpx;
								justify-content: center;
							}
							.txt{
								font-size: 20rpx;
								color: #AC8567;
								height: 40rpx;
								line-height: 40rpx;
								text-align: center;
								background-color: #FCF6E8;
								position: relative;
								&:before{
									position: absolute;
									width: 12rpx;
									height: 12rpx;
									top: -6rpx;
									left: -6rpx;
									content: '';
									background-color: #fff;
									border-radius: 50%;
								}
								&:after{
									position: absolute;
									width: 12rpx;
									height: 12rpx;
									top: -6rpx;
									right: -6rpx;
									content: '';
									border-radius: 50%;
									background-color: #fff;
								}
							}
						}
					}
				}
				.mid{
					width: calc(100% - 250rpx);
					box-sizing: border-box;
					padding-left: 20rpx;
					.tit{
						color: #333;
						font-size: 28rpx;
						font-weight: 600;
						&.line{
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
					.label{
						color: #9C9C9C;
						font-size: 32rpx;
						padding: 6rpx;
						border: 1px solid #9C9C9C;
						border-radius: 6rpx;
						margin: 8rpx 0;
						line-height: 1;
						font-size: 22rpx;
						display: inline-block;
					}
					.time{
						color: #9D9D9D;
						font-size: 22rpx;
					}
				}
				.score{
					color: #656565;
					font-size: 32rpx;
					font-weight: 600;
					width: 130rpx;
					&.red{
						color: v-bind('Color');
					}
				}
			}
		}
	}
	.loadbox{
		padding: 30rpx 0;
		text-align: center;
	}
	
</style>
