<script setup>
	import {
		ref,
		reactive,
		computed,
	} from 'vue'
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app'
	import api from '@/api/index.js';
	// 工具库
	import util from '@/common/js/util.js'
	// 积分记录
	import integralLog from '@/components/index/integralLog'

	//我的卷轴列表
	const detail = ref({})
	//积分变动记录
	const scrollLog = reactive({
		data: [],
		pageNum: 1,
		pageSize: 30,
		total: 0,
	})
	// 卷轴id
	const id = ref('')

	onLoad((option) => {
		if (option.id) id.value = option.id
		getDetail()
		getLog()
	})

	onPullDownRefresh(() => {
		// 刷新列表
		refreshList()
	})

	onReachBottom(() => {
		// 获取更多列表
		getMoreList()
	})

	// 刷新列表
	function refreshList() {
		scrollLog.homePageSize = 1
		getList()
	}

	// 获取更多列表
	function getMoreList() {
		if (scrollLog.total <= scrollLog.data.length) return
		scrollLog.pageNum++
		getList()
	}

	// 查看我购买的卷轴
	function getDetail() {
		api.intergral.scrollinfo({
			path: [id.value]
		}).then(rs => {
			if (rs.code == 200) {
				const result = rs.data
				result.formatHash = result.scrollHash.replace(/([\d|\D]{4})[\d|\D]*([\d|\D]{4})/, "$1****$2")
				detail.value = result
				return
			}
		})
	}

	// 积分变动明细
	function getLog() {
		api.intergral.getDetailInfoByScrollId({
			path: [id.value],
			query: {
				pageNum: scrollLog.pageNum,
				pageSize: scrollLog.pageSize,
			}
		}).then(rs => {
			if (rs.code == 200) {
				// 第一页
				if (scrollLog.pageNum == 1) scrollLog.data.length = 0
				// 合并
				scrollLog.data.push(...rs.rows)
				// 总数
				scrollLog.total = rs.total
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 复制
	function handleCopy() {
		// scrollHash
		util.copyText(detail.value.scrollHash)
	}
</script>

<template>
	<view class="app">
		<view class="board pr oh mtb30 mlr30 ptb20 plr20 cfff f30 br20">
			<view class=" df">
				<view class="left f1 mr40">
					<view class="key mt20 f32">卷轴可释放</view>
					<view class="value mt5 ptb5 tac bfff br20">{{detail.scrollRemainPoints}}</view>
				</view>

				<view class="right f1">
					<view class="f36">{{detail.scrollName}}</view>
				</view>

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

			<view class="mt20 df aic f28">
				<view>卷轴哈希: {{detail.formatHash}}</view>
				<view class="wh30 ml15" @click="handleCopy">
					<image src="/static/copy2.png" mode="aspectFit" class="wh24" />
				</view>
			</view>
		</view>

		<view class="log mtb30 mlr30 ptb20 plr40 c666 f28 bFFFBF3 br20">
			<view class="line rows">
				<view class="title c333 f36">当前卷轴明细</view>
			</view>
			<integralLog :list="scrollLog.data" />
		</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>