<script setup>
	/**
	 * 我的钱包
	 */
	import {
		onMounted,
		computed,
		reactive,
		ref,
		getCurrentInstance,
	} from 'vue'
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		useStore,
	} from 'vuex'
	import api from "@/api/index.js"
	// 代理
	const {
		proxy
	} = getCurrentInstance()
	//积分变动记录
	const scrollLog = reactive({
		data: [],
		pageNum: 1,
		pageSize: 30,
		total: 0,
	})
	// 冻结
	const freeze = ref({
		score: 0,
		fruit: 0,
	})

	const store = useStore()

	onLoad(() => {
		// 获取列表
		getList()
		// 获取我的冻结
		getFreeze()
	})

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

	onReachBottom(() => {
		// 获取更多列表
		getMoreList()
	})
	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})

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

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

	function navigateToPage(path) {
		uni.navigateTo({
			url: path
		});
	}

	// 积分变动明细
	function getList() {
		api.mine.getBalanceLog({
			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
				console.log(scrollLog)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		}).finally(() => {
			// 停止下拉刷新
			uni.stopPullDownRefresh()
		})
	}

	// 获取冻结
	function getFreeze() {
		// 
		api.mine.myfreeze().then(rs => {
			console.log('myfreeze', rs)
			if (rs.code == 200 && rs.data) {
				// 
				freeze.value = rs.data
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 展示冻结
	function showFreeze() {
		proxy.$refs.freeze.open()
	}
</script>

<template>
	<view class="appbw plr60">
		<!-- 我的钱包 -->
		<view class="board mt60 ptb25 plr30 cfff f28 br25">
			<view class="">总资产(余额)</view>

			<view class="balance rows">
				<view class="price dib mtb10 ptb10 plr15 c333 f48 bfff br15">
					<text>{{userinfo.balance || 0}}</text>
				</view>

				<view class="rows">
					<navigator url="/pages/index/topUp" hover-class="none" class="btn sm bar black plr20">充值</navigator>
				</view>
			</view>

			<view class="mtb10">可用积分{{userinfo.score || 0}}</view>

			<view class="df jcsb aic mt40" v-if="0">
				<!-- 还没有成为商家 -->
				<view v-if="userinfo.isShop===0" @click="$refs.settledRef.open()">
					<text class="f36 mr10">入驻商家</text>
					<uni-icons type="right" color="" />
				</view>
				<!-- 商家被驳回 -->
				<view class="" v-else>退出押金</view>
			</view>
		</view>

		<view class="more df aic mtb30" @click="showFreeze">
			<view class="f34 mr10">待释放</view>
			<uni-icons type="right" />
		</view>
		<!-- <view class="mtb30 cFF4242 tac">驳回原因：xxxxxxxxxxxxxxxxxxx</view> -->

		<!-- 使用明细 -->
		<view class="logBox mt30 mb60">
			<view class="title c333 f28 b">使用明细</view>
			<view class="list mtb30 c666 f24">
				<view class="item df aic mtb15" v-for="(item,index) in scrollLog.data" :key="index">
					<view class="content f1">{{item.context}}</view>
					<view class="date">
						<text>——{{item.createTime}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 展示冻结金额 -->
		<uni-popup ref="freeze" type="center">
			<view class="freezeAlt popMid bfff br20">
				<view class="header rows mtb30 plr20">
					<view class="">所有冻结金额</view>
					<view class="" @click="$refs.freeze.close()">
						<uni-icons type="closeempty" />
					</view>
				</view>

				<view class="main mtb30 plr30">
					<view class="">冻结积分：{{freeze.score}}</view>
					<view class="mt5">冻结榴莲果：{{freeze.fruit}}</view>
				</view>
			</view>
		</uni-popup>

		<!-- 商家入驻 -->
		<uni-popup ref="settledRef" type="center">
			<view class="setted pr">
				<!-- 标题 -->
				<view class="title pa cfff f52">
					<view>入驻商家需</view>
					<view>缴纳999押金</view>
				</view>

				<!-- 卡通人物 -->
				<view class="cartoon pa">
					<image src="/static/settedCartoon.png" mode="aspectFill" />
				</view>

				<!-- 福利 -->
				<view class="weal pa l0 r0 b0">
					<image class="bg" src="/static/settedBoard.png" mode="aspectFill" />
					<view class="pfull fdc fmid c333 f36">
						<view>完成商家认证</view>
						<view>即可享受视频挂链接等福利</view>
					</view>
				</view>
			</view>

			<!-- 按钮 -->
			<view class="button btn lg colourful mtb30" @click="navigateToPage('/pages/shop/settle')">立即入驻</view>

			<!-- 关闭 -->
			<view class="close fmid" @click="$refs.settledRef.close()">
				<uni-icons type="closeempty" color="#fff" size="34rpx" />
			</view>
		</uni-popup>

		<!-- 商家退出 -->
		<uni-popup ref="offRef" type="center">
			<view class="setted pr">
				<!-- 标题 -->
				<view class="title pa cfff f52">
					<view>确认提交</view>
					<view>退出押金吗</view>
				</view>

				<!-- 卡通人物 -->
				<view class="cartoon pa">
					<image src="/static/settedCartoon1.png" mode="aspectFill" />
				</view>

				<!-- 福利 -->
				<view class="weal pa l0 r0 b0">
					<image class="bg" src="/static/settedBoard.png" mode="aspectFill" />
					<view class="pfull fdc fmid c333 f36">
						<view>退出押金</view>
						<view>将不可享受会员专属福利</view>
					</view>
				</view>
			</view>

			<!-- 按钮 -->
			<view class="button btn lg disabled mtb30">确认</view>

			<!-- 关闭 -->
			<view class="close fmid" @click="$refs.offRef.close()">
				<uni-icons type="closeempty" color="#fff" size="34rpx" />
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss">
	// 板子
	.board {
		background-image: linear-gradient(116deg, #27EFE2 0%, #6D00FF 48%, #FF004F 100%);
	}

	// 入驻
	.setted {
		width: 562rpx;
		height: 516rpx;
		background-image: linear-gradient(143deg, #27EFE2 0%, #A45EFF 43%, #FF004F 100%);
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);
		border-radius: 20rpx;

		// 标题
		.title {
			top: 80rpx;
			left: 30rpx;
		}

		// 卡通
		.cartoon {
			top: 20rpx;
			right: -50rpx;
			width: 280rpx;
			height: 400rpx;
		}

		// 福利
		.weal {
			width: 562rpx;
			height: 268rpx;

			// 背景
			.bg {
				border-radius: 20rpx;
			}
		}
	}

	// 立即入驻
	.button {
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, .3);
	}

	// 关闭
	.close {
		width: 86rpx;
		height: 86rpx;
		margin: 0 auto;
		border-radius: 50%;
		background-color: #999999;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);
	}
</style>