<template>
	<view class="grid" :style="{'grid-template-columns': `repeat(${col}, 1fr)`}">
		<zero-loading v-if="loading"></zero-loading>
		<template v-else>
			<view class="item" v-for="(item,index) in list" :key="index">
				<image v-if="item.showMark" src="/static/aidex/images/history-icon.png" mode="" class="rightMark"></image>
				<view>
					<image :src="item.image" mode="" :style="{height:imgHeight,width:imgWidth}"></image>
				</view>
				<view class="num">
					{{item.value}}
				</view>
				<view class="label">
					{{item.label}}
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		props: {
			loading:{
				type: Boolean,
				default:false
			},
			list: {
				type: Array,
				default: () => []
			},
			col: {
				type: Number,
				default: 2
			},
			imgHeight: {
				type: String,
				default: '40rpx'
			},
			imgWidth: {
				type: String,
				default: '40rpx'
			}
		}
	}
</script>

<style lang="scss">
	.grid {
		display: grid;
		gap: 22rpx;
		background-color: #fff;
		border-radius: 30rpx;
		margin-top: 26rpx;
		.item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #F4F8F7;
			padding: 24rpx 0;
			border-radius: 10rpx;
			position: relative;
			.num {
				font-size: 36rpx;
				color: #5A5A5A;
			}
			.label {
				font-size: 24rpx;
				color: #5A5A5A;
				text-align: center;
				white-space: pre-wrap;
			}
			.rightMark {
				position: absolute;
				right: 0;
				top: 0;
				height: 40rpx;
				width: 40rpx;
			}
		}
	}
</style>