<template>	 
	<view>
		<uni-popup :animation="false" :is-mask-click="false" mask-background-color="rgba(0,0,0,0)" ref="recharge" :background-color="db_color"  @change="change">
			<view style="display: flex;align-items: center;justify-content: center;">剩余内容付费解锁</view>
			<view style="display: flex;
						  flex-wrap: wrap;
						  justify-content: space-between;">
				<recharge-item ref="Items" class="product-item" v-for="(item,index) in rechargeList" :key="item.goods_id" :recharge_item_data="item" @itemClick="onItemSelect"></recharge-item>
			</view>
			<view @tap="emits('onClickBuy',curSelectGoodsId,curSelectGoodsIsVip)" style="display: flex;align-items: center;justify-content: center; border: 1px solid #ddd;margin-left: 20%;margin-right: 20%;">购买</view>
			<view @tap="emits('BuyChapter')" style="margin-top: 3%;margin-bottom: 5%; display: flex;align-items: center;justify-content: center; border: 1px solid #ddd;margin-left: 20%;margin-right: 20%;">解锁本章需要{{coin}}</view>
			<view style="margin-left: 5%; margin-bottom: 5%;">剩余书币{{user_coin}}</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref,onMounted, reactive, watch } from 'vue';
	import rechargeItem from './rechargeItem.vue';
	import { recharge_list_data } from '../../data/data';
	import { ReadSetting } from '../../stores/readSetting';
	import { config } from '../../config/config';
	import { tools } from '../../framework/tools';
	import { UserData } from '../../stores/userDataManager';
	
	let db_color = ref(tools.getDbColorByMode(ReadSetting().data.readMode))
	
	let recharge = ref(null)
	
	let type = 'bottom'
	
	let show = ref(true)
	
	let rechargeList= ref<Array<recharge_list_data>>(null)
	
	const {coin} = defineProps(['coin'])
	
	const  emits = defineEmits(['onClickBuy','BuyChapter'])
	
	let user_coin = ref(UserData().getData().coin)
	
	watch(()=>UserData().getData().coin,()=>{
		user_coin.value = UserData().getData().coin
	})
	
	onMounted(()=>{
		ReadSetting().getRechargeList(config.recharge_stype.CHAPTER_PAGE,(d)=>{
			rechargeList.value = d
			// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
			recharge.value.open(type)
		})
	})
	
	function prevent(){
		console.log("prevent")
	}
	
	function maskStart(){
		
	}
	
	function maskTouch(){
		
	}
	
	function change(e){
		
	}
	
	let Items = ref(null)
	let curSelectGoodsId = ref(0)
	let curSelectGoodsIsVip = ref(true)
	function onItemSelect(goods_id:number,isVip:boolean){
		curSelectGoodsIsVip.value = isVip
		curSelectGoodsId.value = goods_id
		Items.value.find((child,index)=>{
			child.updateSelectStatus(goods_id)
		})
	}
	
</script>

<style lang="scss" scoped>
	.product-item {
	  box-sizing: border-box;
	  width: calc(50% - 10px); /* 减去一些空间作为间隔 */
	  margin-bottom: 20px; /* 商品之间的垂直间距 */
	  padding: 10px;
	  border: 1px solid #ddd; /* 可选：给商品添加边框 */
	}
</style>