<template>
	<div>
		<div  v-if="domesticList.length == 0">
			<van-loading /> 
		</div>
		<div v-else>
			<listContentVue :main="domesticList"></listContentVue>
			<listContentVue :main="varietyList"></listContentVue>
			<listContentVue :main="americanList"></listContentVue>
		</div>
	</div>
</template>

<script>
	import listContentVue from '../../components/listContent.vue';
	import {
		Domestic,
		Variety,
		American
	} from '../../api/user.js';
	export default {
		onLoad() {
				this.getList();
		},
		data() {
			return {
				domesticList:[],
				varietyList:[],
				americanList:[]
			}
		},
		components:{
			listContentVue
		},
		methods:{
			async getList () {
				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;
			},
			async getList1() {
				return await Domestic()
			},
			async getList2() {
				return await Variety()
			},
			async getList3() {
				return await American()
			}
		}
	}
</script>

<style>
</style>