<template>
	<view class="home">
		<view class="empty" v-if="domesticList.length == 0"></view>
		<view class="full" v-else>
			<listContent :main='domesticList'></listContent>
			<listContent :main='varietyList'></listContent>
			<listContent :main='americanList'></listContent>
		</view>
	</view>
</template>

<script>
	import listContent from "../../components/listContent.vue";
	import {
		Domestic,
		Variety,
		American
	} from '../../api/home.js';
	export default {
		onLoad() {
			uni.showLoading({
				title: '加载中',
			})
			this.getMain()
		},
		data() {
			return {
				domesticList: [],
				varietyList: [],
				americanList: []
			}
		},
		components: {
			listContent
		},
		methods: {
			async getMain() {
				let newList = [this.getList1(), this.getList2(), this.getList3()];
				let [data1, data2, data3] = await Promise.allSettled(newList);
				this.domesticList = data1;
				this.varietyList = data2;
				this.americanList = data3;
				uni.hideLoading();
			},
			async getList1() {
				return await Domestic({
					start: 0,
					count: 8
				})
			},
			async getList2() {
				return await Variety({
					start: 0,
					count: 8
				})
			},
			async getList3() {
				return await American({
					start: 0,
					count: 8
				})
			},
		}
	}
</script>

<style lang="scss">
	.home {
		padding: 20rpx;
	}
</style>