<script setup>
	import {
		onMounted,
		ref,
		reactive,
		computed,
		getCurrentInstance,
		watch,
		defineExpose,
	} from 'vue';
	import {
		useStore,
	} from 'vuex'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import durianlApi from '@/api/durian.js';
	const treeData = ref([])
	const store = useStore()
	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})

	onLoad(() => {
		buyDurianList()
	})

	// 我的榴莲果树
	function buyDurianList() {
		durianlApi.buyDurianList({
			query: {
				userId: userinfo.value.userId,
			}
		}).then(rs => {
			console.log(rs)
			treeData.value = rs.data
		})
	}
</script>

<template>
	<view class="appbw">
		<!--  -->
		<view class="list mlr40">
			<view class="item rows mtb25 br15" v-for="(item,index) in treeData" :key="index">
				<image class="wh180" src="/static/tree.png" mode="aspectFit" />
				<view class="col f1 ml30 c333 f26">
					<view class="txt">每日可释放：{{item.release}}</view>
					<view class="txt mtb5">当前可释放：{{item.released}}</view>
					<view class="txt">当前级别：{{item.level}}</view>
				</view>
			</view>
		</view>

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

<style lang="scss">
	// 
	.list {
		.item {
			background-color: #F4F4F4;
		}

		.item+.item:nth-child(3n+1) {
			background-color: #F4CAFF;
		}

		.item+.item:nth-child(3n+2) {
			background-color: #E4FBFF;
		}

		.item+.item:nth-child(3n+3) {
			background-color: #CACDFF;
		}
	}
</style>