<template>
	<view>
		<login v-if="!login" :login.sync="login" />
		<view v-else>
			<!-- <swiper circular class="swiper-box" :current-item-id="active" @change="swiperChange" easing-function="default">
				<swiper-item class="swiper-item" item-id="home" @touchmove.stop="stopMove">
					<home v-if="activeObj.home" ref="home" />
				</swiper-item>
				<swiper-item class="swiper-item" item-id="cinema" @touchmove.stop="stopMove">
					<cinema v-if="activeObj.cinema" ref="cinema" />
				</swiper-item>
				<swiper-item class="swiper-item" item-id="applist" @touchmove.stop="stopMove">
					<applist v-if="activeObj.applist" ref="applist" />
				</swiper-item>
				<swiper-item class="swiper-item" item-id="user" @touchmove.stop="stopMove">
					<user v-if="activeObj.user" ref="user" />
				</swiper-item>
			</swiper> -->
			<home v-if="activeObj.home" v-show="active==='home'" ref="home" />
			<cinema v-if="activeObj.cinema" v-show="active==='cinema'" ref="cinema" />
			<applist v-if="activeObj.applist" v-show="active==='applist'" ref="applist" />
			<user v-if="activeObj.user" v-show="active==='user'" ref="user" />

			<van-tabbar :active="active" @change="onChange" :placeholder="true" active-color="#E31818" inactive-color="#999999">
				<van-tabbar-item name="home">
					<m-icon slot="icon" type="shouye" size="24px"></m-icon>
					<m-icon slot="icon-active" type="shouye" size="34px"></m-icon>
					首页
				</van-tabbar-item>
				<van-tabbar-item name="cinema">
					<m-icon slot="icon" type="dianying" size="24px"></m-icon>
					<m-icon slot="icon-active" type="dianying" size="34px"></m-icon>
					电影
				</van-tabbar-item>
				<van-tabbar-item name="applist">
					<m-icon slot="icon" type="ddwl" size="24px"></m-icon>
					<m-icon slot="icon-active" type="ddwl" size="34px"></m-icon>
					发现
				</van-tabbar-item>
				<van-tabbar-item name="user">
					<m-icon slot="icon" type="wode" size="24px"></m-icon>
					<m-icon slot="icon-active" type="wode" size="34px"></m-icon>
					我的
				</van-tabbar-item>
			</van-tabbar>
		</view>
	</view>
</template>

<script>
	import applist from "./components/applist.vue";
	import user from "@/pages/user/index.vue";
	import login from "./components/login.vue";
	import home from "@/pages/home/index.vue";

	export default {
		components: {
			applist,
			user,
			login,
			home,
		},
		data() {
			return {
				login: false,
				active: "home",
				activeObj: {},
			};
		},
		mounted() {

		},
		onReachBottom() {
			this.$refs[this.active].onBottom && this.$refs[this.active].onBottom()
		},
		onLoad: function(option) {
			if (option.active) {
				this.active = option.active;
			}
			this.activeObj[this.active] = true;
		},
		onShareAppMessage: function() {},
		methods: {
			stopMove() {
				return true
			},
			onChange(event) {
				// event.detail 的值为当前选中项的索引
				this.active = event.detail;
				this.activeObj[this.active] = true;
				uni.pageScrollTo({
					scrollTop: 0
				})
			},
			swiperChange(event) {
				this.active = event.detail.currentItemId;
				this.activeObj[this.active] = true;
			},
		},
	};
</script>

<style lang="scss">
	.swiper-box {
		height: calc(100vh - 100rpx - env(safe-area-inset-bottom));

		.swiper-item {
			// overflow: auto;
		}
	}
</style>
