<template>
	<div style="height: 100%;">
		<div class="list_box" v-if="loading_box">
			<div class="list_left">
				<view class="box_left box"></view>
				<view class="box_left box"></view>
				<view class="box_left box"></view>
				<view class="box_left box"></view>
				<view class="box_left box"></view>
				<view class="box_left box"></view>
				<view class="box_left box"></view>
			</div>
			<div class="list_right">
				<view class="box_right box"></view>
				<view class="box_right box"></view>
				<view class="box_right box"></view>
				<view class="box_right box"></view>
				<view class="box_right box"></view>
				<view class="box_right box"></view>
				<view class="box_right box"></view>
			</div>
		</div>
		<view class="group" v-else>
			<portrait :group-list="groupList" :type="1" @getnum="getNum" :vip-on="vip_on" />
		</view>
		<tabbar :chooseIndex="1" :num="cartNum" :msgNum="msgNum" />
	</div>

</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import tabbar from '@/components/tabbar/index.vue'
	import { get } from '@/Api/request.js'
	import Portrait from '@/components/homeList/Portrait.vue'
	import { goodsItem, NetWork } from '@/components/common.js'
	
	export default {
		components: {
			Portrait,
			tabbar
		},
		setup() {
			const data = reactive({
				vip_on: 0,
				loading_box: true,
				msgNum: Number(uni.getStorageSync('msgNum')) || 0,
				cartNum: Number(uni.getStorageSync('cartNum')) || 0
			})
			
			const groupList = ref([])
			// 获取分组
			async function getList() {
				var num2 = 0
				var interval = setInterval(function() {
					num2 += 1
					if (num2 == 20) {
						clearInterval(interval)
					}
				}, 1000)
				let res = await get('/api/v1/index', {
					shop_id: 1,
					from: 2
				})
				let list = []
				res.data.groups.forEach((item) => {
					if (item.is_more === 0) {
						list.push(item)
					}
				})
				list.unshift({
					id: '',
					name: '全部商品'
				})
				groupList.value = list
				if (num2 == 20 && data.loading_box) {
					uni.showToast({
						icon: 'none',
						title: '请求超时，请重试！'
					})
					return
				}
				if (res.code == 0) {
					data.loading_box = false
				}
			}
			
			function getCartNum() {
				get('/api/v1/carts/num').then((res) => {
					data.cartNum = Number(res.data.num)
				})
			}

			return {
				groupList,
				getList,
				getCartNum,
				NetWork,
				...toRefs(data)
			}
		},
		async onLoad() {
			await this.getList()
		},
		onShow() {
			this.getCartNum()
			this.vip_on = uni.getStorageSync('vip_on') || 0
		}
	}
</script>

<style lang="scss" scoped>
	.group {
		height: 100%;
		background: #fff;
	}

	@keyframes fade {
		from {
			opacity: 1;
		}
		50% {
			opacity: 0.5;
		}
		to {
			opacity: 1;
		}
	}
	.box {
		background: #e1e1e1;
		animation: fade 2s infinite;
	}
	.list_box {
		display: flex;
		background: #fff;
		.list_left {
			width: 25%;
			margin-right: 20rpx;
			display: flex;
			flex-direction: column;
			.box_left {
				height: 90rpx;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
			}
		}

		.list_right {
			flex: 1;
			display: flex;
			flex-direction: column;
			.box_right {
				height: 140rpx;
				padding: 20rpx 0;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>
