<script setup>
	/**
	 * 卷轴商城
	 */
	import api from '@/api/index.js'
	import {
		useStore,
	} from 'vuex'
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	// 工具库
	import util from '@/common/js/util';
	// 支付密码
	import payPwd from '@/components/mine/payPwd'
	const {
		proxy
	} = getCurrentInstance()
	// 
	const store = useStore()
	//我的卷轴列表
	const dataList = ref([])
	// 需要操作的卷轴
	const scrollItem = ref({})
	// 用户信息
	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})

	onLoad(() => {
		scrollList()
	})

	// 查看我购买的卷轴
	function scrollList() {
		api.intergral.scrollList({}).then(rs => {
			if (rs.code == 200) {
				dataList.value = rs.data
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 购买卷轴
	function buyScroll(secondPassword) {
		api.intergral.buyScroll({
			query: {
				// 二级密码
				secondPassword: secondPassword,
			},
			data: {
				// 卷轴id
				scrollConfigId: scrollItem.value.scrollConfigInfoId,
				// 付款类型
				payType: 1,
			}
		}).then(rs => {
			if (rs.code === 200) {
				util.alert('购买成功')
				// util.getUserinfo()
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 点击卷轴购买
	 * @param {Object} item
	 */
	function handleItem(item) {
		scrollItem.value = item
		// 
		proxy.$refs.payPwdRef.open()
	}
</script>

<template>
	<view class="appbw">
		<navigator url="/pages/index/integral">
			<view class="board rows oh mt20 mlr30 plr30 cfff f32 br20">
				<image class="image" src="/static/integral.png" mode="aspectFit" />
				<view class="f1">我的卷轴</view>
				<uni-icons type="right" color="#fff" size="40rpx" />
			</view>
		</navigator>

		<!-- 内容 -->
		<view class="container">

			<view class="list mtb20 mlr30 ptb50 plr40 br20 c333 f24" v-for="(item, index) in dataList" :key="item.id">
				<view class="rows">
					<view class="c333 f36">{{item.scrollName}}</view>
					<view class="">最多持有量: {{item.scrollLimit}}</view>
					<!-- 当前持有量： 3 -->
				</view>
				<view class="rows mt40">
					<view class="f44">{{item.scrollSeedMoney}}积分</view>
					<view class="btn black f1 ml45" @click="handleItem(item)">{{item.price}}购买</view>
				</view>
			</view>

		</view>

		<view class="fill" style="height: 60rpx;"></view>
	</view>

	<!-- 购买卷轴 -->
	<payPwd ref="payPwdRef" @confirm="buyScroll" />
</template>

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

		// 卷轴图片
		.image {
			width: 286.06rpx;
			height: 286.22rpx;
			transform: rotate(-50deg);
		}

		.score {

			.value {
				background-color: #fff;
				color: #333;
			}
		}
	}

	.container {

		.list:nth-child(1) {
			background-color: #F4F4F4;
		}

		.list:nth-child(2) {
			background-color: #E4FBFF;
		}

		.list:nth-child(3) {
			background-color: #CACDFF;
		}

		.list:nth-child(4) {
			background-color: #F4CAFF;
		}
	}
</style>