<template>
	<view class="content">
		<home-header />
		<luck-draw :goodsArray="goods" :checked="12" @handle="handle" />
		<view class="caption">Prize poll</view>
		<view class="product">
			<navigator url="/pages/detail/detail" v-for="(item, index) in goods" :key="index" hover-class="none">
				<goods-item :num="index+1" :item="item" />
			</navigator>
		</view>
	</view>
</template>

<script>
	import homeHeader from "@/components/home-header/home-header"
	import luckDraw from "@/components/luck-draw/luck-draw"
	import goodsItem from "@/components/goods-item/goods-item"
	import goodsData from "@/components/home-header/goods-data.js"

	export default {
		data() {
			return {
				goods: goodsData
			}
		},
		components: {
			homeHeader,
			luckDraw,
			goodsItem
		},
		onLoad() {},
		methods: {
			handle(e) {
				console.log(e)
				uni.navigateTo({
					url: '/pages/order-information/order-information'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #FFFFFF;

		.caption {
			font-size: $uni-font-size-title;
			font-weight: bold;
			letter-spacing: $uni-spacing-col-sm;
			text-align: center;
			border-top: 20rpx solid $uni-bg-color-hover;
			padding: 20rpx 0;
			width: 100%;
			display: inline-block;
		}

		.product {
			width: calc(100% - 40rpx);
			margin: 20rpx;
			padding-top: 0;
			display: grid;
			grid-gap: 10rpx;
			grid: ". . . ."
			". . . ."
			". . . .";
			text-align: center;
			&::after {
				content: "";
				display: inline-block;
				width: 100%;
				height: 0rpx;
				visibility: visible;
			}
		}
	}
</style>
