<template>
	<view class="content">
		<view class="back">
			<view class="back-title">
				锶源昆仑统计数据
			</view>
		</view>
		<view class="parade">
			<view class="dataOne">
				<view class="dataOne-item">
					<view class="dataOne-number">
						{{activities.all}}
					</view>
					<view class="dataOne-text">
						发行总量
					</view>
				</view>
				<view class="dataOne-item">
					<view class="dataOne-number">
						{{activities.donate}}
					</view>
					<view class="dataOne-text">
						已捐数量
					</view>
				</view>
				<view class="dataOne-item">
					<view class="dataOne-number">
						{{activities.residue}}
					</view>
					<view class="dataOne-text">
						剩余数量
					</view>
				</view>
			</view>
			
			<!-- 订单数据 -->
			<view class="dataOther">
				<view class="dataOther-title">
					订单数据
				</view>
				<view class="dataOther-list">
					<view class="dataOther-item" @click="$router.push({name: 'CensusOrder', params: {state: 'all', newTitle: '总订单'}})">
						<view class="dataOther-number">
							{{orders.all}}
						</view>
						<view class="dataOther-text">
							总订单数
						</view>
						<view class="dataOther-see">
							查看
						</view>
					</view>
					<view class="dataOther-item" @click="$router.push({name: 'CensusOrder', params: {state: ' PAID', newTitle: '待发货'}})">
						<view class="dataOther-number">
							{{orders.paid}}
						</view>
						<view class="dataOther-text">
							待发货数
						</view>
						<view class="dataOther-see">
							查看
						</view>
					</view>
					<view class="dataOther-item" @click="$router.push({name: 'CensusOrder', params: {state: 'DELIVERED', newTitle: '已发货'}})">
						<view class="dataOther-number">
							{{orders.delivered}}
						</view>
						<view class="dataOther-text">
							已发货
						</view>
						<view class="dataOther-see">
							查看
						</view>
					</view>
					<view class="dataOther-item" @click="$router.push({name: 'CensusOrder', params: {state: 'SIGNED', newTitle: '已签收'}})">
						<view class="dataOther-number">
							{{orders.signed}}
						</view>
						<view class="dataOther-text">
							已签收
						</view>
						<view class="dataOther-see">
							查看
						</view>
					</view>
					<view class="dataOther-item" @click="$router.push({name: 'CensusUser'})">
						<view class="dataOther-number">
							{{orders.users}}
						</view>
						<view class="dataOther-text">
							捐献人数
						</view>
						<view class="dataOther-see dataOther-red">
							查看
						</view>
					</view>
					<view class="dataOther-item">
						<view class="dataOther-number">
							{{orders.amount}}
						</view>
						<view class="dataOther-text">
							收款总额
						</view>
					</view>
				</view>
			</view>
			
			<!-- 会员数据 -->
			<!-- <view class="dataOther">
				<view class="dataOther-title">
					会员数据
				</view>
				<view class="dataOther-list">
					<view class="dataOther-item">
						<view class="dataOther-number">
							{{users.all}}
						</view>
						<view class="dataOther-text">
							注册总量
						</view>
					</view>
					<view class="dataOther-item">
						<view class="dataOther-number">
							{{users.yk}}
						</view>
						<view class="dataOther-text">
							月卡数
						</view>
					</view>
					<view class="dataOther-item">
						<view class="dataOther-number">
							{{users.jk}}
						</view>
						<view class="dataOther-text">
							季卡数
						</view>
					</view>
					<view class="dataOther-item">
						<view class="dataOther-number">
							{{users.nk}}
						</view>
						<view class="dataOther-text">
							年卡数
						</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
    import { censusData } from '@/apis/interfaces/user'
	export default {
		data() {
			return {
                activities: '',
				orders    : '',
				users     : ''
			};
		},
        onShow() {
			// 获取查看数据
            this.censusInfo();
        },
        
		methods:{
			// 查看数据
			censusInfo() {
			    censusData().then(res => {
				this.activities = res.activities
				this.orders     = res.orders
				this.users      = res.users
			        console.log(res)
			    }).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		overflow: hidden;
		background-color: #f5f5f5;
		height: 100vh;
		overflow-y: scroll;
		padding-bottom: 30rpx;
		box-sizing: border-box;
	}
	.back {
		background-image: linear-gradient(to right, #6884fc, #868afe);
		text-align: center;
		padding: 80rpx 0 140rpx;
		.back-title {
			color: #ffffff;
			font-size: 34rpx;
		}
	}
	
	.parade {
		margin-top: -70rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		.dataOne {
			background-color: #ffffff;
			padding: 40rpx 0;
			box-sizing: border-box;
			display: flex;
			.dataOne-item {
				flex: 3;
				text-align: center;
				.dataOne-number {
					font-size: 40rpx;
					font-weight: 600;
					margin-top: 5rpx;
				}
				.dataOne-text {
					font-size: 24rpx;
				}
			}
		}
		
		.dataOther {
			background-color: #ffffff;
			margin-top: 30rpx;
			padding: 30rpx 30rpx 0;
			.dataOther-title {
				font-weight: 600;
				margin-bottom: 20rpx;
			}
			.dataOther-list {
				overflow: hidden;
				padding: 20rpx 0;
				margin: 0 -10rpx;
				.dataOther-item {
					background-color: #f4f7fd;
					width: calc(33.33% - 20rpx);
					margin: 0 10rpx 20rpx;
					padding: 25rpx 0;
					text-align: center;
					border-radius: 8rpx;
					float: left;
					position: relative;
					overflow: hidden;
					.dataOther-see {
						position: absolute;
						right: 0;
						top: 0;
						background-color: #f0bb6e;
						color: #ffffff;
						font-size: 22rpx;
						padding: 0 12rpx;
						line-height: 34rpx;
						border-radius: 0 0 0 10rpx;
						&.dataOther-red {
							background-color: #d86a6b;
						}
					}
					.dataOther-text {
						font-size: 24rpx;
						color: #383c4b;
						margin-top: 5rpx;
					}
					.dataOther-number {
						color: #315cf4;
						font-weight: 600;
						font-size: 38rpx;
						text {
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
</style>