<!-- entranceList组件（通用组件） -->
<template>
	<uni-grid class="entrance" :column="column" :showBorder="false" :highlight="false">
		<uni-grid-item class="entrance-grid-item" v-for="(v, i) in list" :key="i" @click="itemClickHandle(v)">
			<view class="entrance-item">
				<!-- <image class="image" :style="[imgStyle]" :src="v[imageKey]" mode=""></image>
				<text class="title" :style="[titleStyle]">{{ v[titleKey] }}</text> -->
				<image class="image" :style="{width:v.width,height:v.height}" :src="v[imageKey]" mode=""></image>
				<text class="title" :style="[titleStyle]">{{ v[titleKey] }}</text>
			</view>
		</uni-grid-item>
	</uni-grid>
</template>

<script>
	export default {
		name: 'IndexEntrance',
		props: {
			column: {
				type: Number,
				default: 4
			},
			list: {
				type: Array,
				default: function () {
					return []
				}
			},
			// 图片大小
			imageH: {
				type: [String, Number],
				default: 60
			},
			imageW: {
				type: [String, Number],
				default: 60
			},
			// 单位
			unit: {
				type: String,
				default: 'rpx'
			},
			imageKey: {
				type: String,
				default: 'image'
			},
			titleKey: {
				type: String,
				default: 'title'
			},
			// 设置title样式
			titleStyle: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data () {
			return {
				
			}
		},
		computed: {
			imgStyle () {
				return {
					width: `${this.imageW}${this.unit}`,
					height: `${this.imageH}${this.unit}`
				}
			}
		},
		methods: {
			itemClickHandle (item) {
				this.$emit('click', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
.entrance {
	%flexCenter {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.entrance-grid-item {
		@extend %flexCenter;
	}
	.entrance-item {
		height: 100%;
		width: 100%;
		@extend %flexCenter;
		flex-direction: column;
	}
	.image {
		width: 80rpx;
		height: 80rpx;
	}
	
	.title {
		margin-top: 15rpx;
		font-size: 24rpx;
		text-align: center;
	}
}
</style>
