<template>
	<HeaderNav :title="title"></HeaderNav>
	<view :class="{show:(footCheck === 'home')}">
		<HomePage v-show="(footCheck === 'home')"></HomePage>
	</view>
	<view :class="{show:(footCheck === 'order')}">
		<OrderPage v-show="(footCheck === 'order')"></OrderPage>
	</view>
	<view :class="{show:(footCheck === 'chat')}">
		<ChatPage v-show="(footCheck === 'chat')"></ChatPage>
	</view>
	<view :class="{show:(footCheck === 'user')}">
		<UserPage v-show="(footCheck === 'user')"></UserPage>
	</view>
	<RightNav></RightNav>
	<FooterNav></FooterNav>
</template>

<script>
	import FooterNav from '@/components/FooterNav/Index.vue';
	import RightNav from '@/components/RightNav/Index.vue';
	import HeaderNav from '@/components/HeaderNav/Index.vue';
	import HomePage from '@/pages/Index/components/HomePage/Index.vue';
	import OrderPage from '@/pages/Index/components/OrderPage/Index.vue';
	import ChatPage from '@/pages/Index/components/ChatPage/Index.vue';
	import UserPage from '@/pages/Index/components/UserPage/Index.vue';
	export default {
		components: {
      FooterNav,
      RightNav,
      HeaderNav,
      HomePage,
      OrderPage,
      ChatPage,
      UserPage,
		},
		data() {
			return {
				title: '',
				footCheck: 'home',
			}
		},
		onLoad() {

		},
		methods: {
			// store.
		},
		onPageScroll(res) {
			if (res.scrollTop <= 20) {
				uni.$emit('isTop', true);
			} else {
				uni.$emit('isTop', false);
			}

		},
		created() {
			// this.pagePadding = (api.navHeight().navPaddingTop+
			// api.navHeight().navHeight + (api.navHeight().headerPadding *2))
		},
		mounted() {
			this.title = this.$store.state.title;
		},
		watch: {
			"$store.state.footCheck": {
				handler(newVal, oldVal) {
					this.footCheck = newVal;
				}
			},
			"$store.state.title": {
				handler(newVal, oldVal) {
					this.title = newVal;
				}
			}
		}
	}
</script>

<style lang="scss">
	@keyframes show {
		0% {
			display: block;
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.show {
		animation: show .5s;
	}
</style>