<template>
	<view class="grid-item" :class="{hover}" :style="{width:center?'':width,padding: getPadding}">
		<view class="grid-item__wrapper">
			<image :style="{width:rect,height:rect,}" 
			class="grid-item__icon" 
			v-if="type=='icon'&&icon"
			:src="icon" mode="aspectFill"></image>
			<view class="grid-item__text" :style="{padding: top}" :class="{oneline}">
				<text v-if="always">{{text}}</text>
				<slot><text v-if="!always">{{text}}</text></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "niu-grid-item",
		props: {
			always:{
				type: Boolean,
				default: false,
			},
			icon:{
				type: String,
				default: '',
			},
			button:{
				type: String,
				default: '',
			},
			topText:{
				type: String,
				default: '',
			},
			text:{
				type: String,
				default: '',
			},
			padding: {
				type: String,
				default: '15rpx 20rpx',
			},
			oneline:{
				type: Boolean,
				default: false
			},
			top: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
				num: 5,
				rect: '80rpx',
				type: 'icon',
				hover: true,
				center: false
			}
		},
		computed: {
			width(){
				if(this.num == 0) return 0 + '%';
				return 100/this.num + '%';
			},
			getPadding(){
				return this.padding
			}
		},
		mounted() {
			let parent = this.$n.util.getParent('niu-grid',this);
			console.log(parent);
			if(parent){
				this.num = parent.num;
				this.rect = parent.rect;
				this.type = parent.type;
				this.hover = parent.hover;
				this.center = parent.center;
			}
		},
		methods: {
			bindGetUserInfo(e) {
				this.$emit("userinfo",e)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.grid-item{
		display: inline-flex;
		box-sizing: border-box;
		height: 100%;
		&.hover:active{
			background-color: #f5f5f5;
		}
		
		.grid-item__wrapper{
			margin: auto;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			position: relative;
			.grid-item__text{
				white-space: nowrap;
				&.oneline{
					width: 100%;
					@include ellipsis(1);
				}
			}
			.button{
				position: absolute;
				left: 0;
				bottom: 0;
				top: 0;
				right: 0;
				z-index: 1;
				opacity: 0;
			}
		}
	}
</style>