<template>
	<view>
		<view class="grid-root" :class="{'border':showBorder}" :style="'border-color:'+borderColor">
			<slot />
		</view>
	</view>
</template>

<script>
	export default {
		name: 'grid',
		props: {
			column: {
				type: Number,
				default: 2
			},
			list: {
				type: Array,
				default: null
			},
			showBorder: {
				type: Boolean,
				default: false
			},
			borderColor: {
				type: String,
				default: '#ccc'
			},
			square: {
				type: Boolean,
				default: false
			}
		},
		provide() {
			return {
				grid: this
			}
		},
		data() {
			return {
				childWidth: '',
				childHeight: ''
			}
		},
		mounted() {
			this.setChildWidth()
			this.square && this.getSize()
		},
		methods: {
			setChildWidth() {
				this.childWidth = parseFloat(100 / this.column) + '%'
			},
			getSize() {
				uni.createSelectorQuery()
					.in(this)
					.select('.grid-root')
					.boundingClientRect()
					.exec(ret => {
						let width = parseFloat(ret[0].width / this.column) + 'px'
						this.childHeight = width
					})
			}
		}
	}
</script>

<style lang="scss">
	.grid-root {
		$grid-border: 1px;

		&.border {
			border: $grid-border solid;
			border-right-width: 0;
			border-bottom-width: 0;
		}
	}
</style>
