<template>
	<view class="grid-item-wrapper" :class="{'border':showBorder}" :style="{width:childWidth,height:childHeight,borderColor:borderColor}">
		<slot />
	</view>
</template>

<script>
	export default {
		name: 'grid-item',
		inject: ['grid'],
		data() {
			return {
				column: 0,
				showBorder: true,
				square: true,
				index: 0,
				borderColor:''
			}
		},
		computed: {
			childWidth() {
				return this.grid.childWidth
			},
			childHeight() {
				return this.grid.childHeight || ''
			}
		},
		created() {
			this.column = this.grid.column
			this.showBorder = this.grid.showBorder
			this.square = this.grid.square
			this.index = this.grid.index++
			this.borderColor = this.grid.borderColor
		}
	}
</script>

<style lang="scss">
	.grid-item-wrapper {
		$grid-border: 1px;
		display: inline-block;
		box-sizing: border-box;

		&.border {
			border: $grid-border solid;
			border-top-width: 0;
			border-left-width: 0;
		}

		&.none {
			border: $grid-border solid;
			border-top-width: 0;
			border-left-width: 0;
			border-color: rgba(0, 0, 0, 0);
		}
	}
</style>
