<template>
	<view class="content">
		<view class="jg" style="height: 20rpx;background-color: #f8f6f7;"></view>
		<view class="zjc-item" v-for="item in navList" @click="navto('/pages/user/zjcdetail?type=' + item.type + '&name=' + item.title)">
			<view class="zjc-top flex">
				<image src="../../static/icon/zjc-logo.png" mode="" class="zjc-logo"></image>
				<view class="zjc-name">{{item.title}}</view>
				<image src="../../static/img/img74.png" mode="" class="zjc-more"></image>
			</view>
			<view class="zjc-btm flex">
				<view class="btn-item">
					<view class="item-name">累计数量</view>
					<view class="item-val">{{item.total_amount || 0}}</view>
				</view>
				<view class="btn-item" style="text-align: center;">
					<view class="item-name">人数</view>
					<view class="item-val">{{item.user_cts || 0}}</view>
				</view>
				<view class="btn-item" style="text-align: right;">
					<view class="item-name">人均可分</view>
					<view class="item-val">{{item.bonus || 0}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPool
	} from '@/api/pool.js'
	export default {
		data() {
			return {
				navList: [],
				loaded: 0,
			}
		},
		onLoad() {
			this.getZjcs()
		},
		methods: {
			navto(url) {
				console.log(url)
				uni.navigateTo({
					url: url
				})
			},
			getZjcs() {
				for (let i = 0; i < 5; i++) {
					this.getZjc(i)
				}

			},
			getZjc(type) {
				let obj = this
				getPool({
					type: type
				}).then(res => {
					console.log(res)
					if (res.data.length > 0) {
						obj.navList.push(res.data[0])
						console.log(obj.navList[type],'type')
					} else {
						// obj.navList.push({
						// 	total_amount: 0,
						// 	user_cts: 0,
						// 	bonus: 0
						// })
					}
					// obj.loaded = obj.loaded + 1
					// console.log(obj.loaded ,'obj.loaded++')
					// console.log(obj.navList)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
		height: 100%;
	}

	.zjc-item {
		margin: auto;
		width: 700rpx;
		background-color: #fff;
		padding-top: 40rpx;
		border-bottom: 1px solid #e8e8e8;
		border-radius: 20rpx;
		padding-left: 10rpx;
		padding-right: 20rpx;

		.zjc-top {
			height: 52rpx;

			line-height: 52rpx;
			font-size: 36rpx;

			.zjc-logo {
				width: 52rpx;
				height: 52rpx;
				flex-shrink: 0;
			}

			.zjc-name {
				// width: 500rpx;
				flex-grow: 1;
				flex-shrink: 0;
				padding-left: 10rpx;
				font-weight: bold;
			}

			.zjc-more {
				flex-shrink: 0;
				width: 22rpx;
				height: 38rpx;
			}
		}

		.zjc-btm {
			padding: 20rpx 0;

			.btn-item {
				flex-grow: 1;
			}
		}
	}
</style>
