<script setup>
	/**
	 * 积分
	 */
	import intergralApi from '@/api/intergral.js';
	import {
		useStore,
	} from 'vuex'
	import {
		ref,
		reactive,
		computed,
	} from 'vue'
	// 任务
	import task from '@/components/index/task'

	import {
		onLoad,
	} from '@dcloudio/uni-app'
	// 工具库
	import util from '@/common/js/util.js'
	// vuex
	const store = useStore()
	//我的卷轴列表
	const dataList = ref([])
	//读秒记录
	const viewData = ref({
		seconds: 0
	})
	//积分变动记录
	const scrollLogData = ref([])
	// 用户信息
	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})

	onLoad(() => {
		buyScrollList()
		scrollChange()
	})

	// 查看我购买的卷轴
	function buyScrollList() {
		intergralApi.buyScrollList({
			query: {
				status: 0,
			}
		}).then(rs => {
			if (rs.code == 200) {
				dataList.value = rs.data
				return
			}
		})
	}

	// 积分变动明细
	function scrollChange() {
		intergralApi.scrollChange({
			query: {
				pageNum: 1,
				pageSize: 4,
			}
		}).then(rs => {
			if (rs.code == 200) {
				const reuslt = rs.rows
				scrollLogData.value = rs.rows
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	function navigateToPage(path) {
		uni.navigateTo({
			url: path
		});
	}
</script>

<template>
	<view class="appbw">
		<view v-for="(item, index) in dataList" :key="item.id">
			<view class="board pr oh df mtb30 mlr30 ptb20 plr20 cfff f30 br20">
				<view class="left f1 mr40">
					<view class="key mt20 f32">卷轴可释放</view>
					<view class="value mt5 ptb5 tac bfff br20">{{item.score}}</view>
				</view>

				<view class="right f1">
					<view class="f36">{{item.name}}</view>
				</view>

				<view class="image pa">
					<image src="/static/integral.png" mode="aspectFit" />
				</view>
			</view>
		</view>

		<!-- 任务读秒 -->
		<view class="task mtb30 mlr30">
			<task />
		</view>

		<!-- 变动明细 -->
		<view class="log mtb30 mlr30 ptb20 plr40 c666 f28 bFFFBF3 br20">
			<view class="line rows">
				<view class="title c333 f36">变动明细</view>
				<view class="" @click="navigateToPage('/pages/index/integralLog')">全部</view>
			</view>
			<view v-for="(item, index) in scrollLogData" :key="item.id">
				<view class="list df mt30">
					<view class="f1">
						<view>{{item.context}}</view>
						<view class="f20">{{item.createTime}}</view>
					</view>
					<view class="fs0">
						<text v-if="item.status == 2">-</text>
						{{item.scroll}}
					</view>
				</view>
			</view>
		</view>

		<!-- 填充 -->
		<view class="fill" style="height: 30rpx;"></view>
	</view>
</template>

<style lang="scss">
	// 
	.board {
		background-image: linear-gradient(121deg, #27EFE2 0%, #A45EFF 43%, #FF004F 99%);

		.value {
			color: #3D3D3D;
			font-size: 40rpx;
		}

		.image {
			right: 0rpx;
			bottom: -50rpx;
			width: 200rpx;
			height: 200rpx;
			transform: rotate(-5deg);
		}
	}
</style>