<template>
	<view class="page-container">
		<u-tabs :scrollable="false" lineColor="#FC4C5C" :list="tabs" :activeStyle="{ color: '#fff' }" :current="tabIndex" @click="tabsClick"></u-tabs>
		<swiper :current="tabIndex" @change="swiperChange" class="swiper-container">
			<swiper-item>
				<notice-item ref="notice0" :type="1" />
			</swiper-item>
			<swiper-item>
				<notice-item ref="notice1" />
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import noticeItem from './notice-item.vue';

export default {
	components: {
		noticeItem
	},
	data() {
		return {
			tabs: [{ name: '消息通知' }, { name: '系统通知' }],
			tabIndex: 0
		};
	},
	async onLoad() {
		await this.$onLaunched;
		const token = getApp().globalData.userToken;
		if (!token) {
			uni.redirectTo({
				url: '/pages/user/login'
			});
		} else {
			this.$nextTick(() => {
				this.$refs['notice' + this.tabIndex].init();
			});
		}
	},
	methods: {
		swiperChange(e) {
			this.tabIndex = e.detail.current;
			this.$refs['notice' + this.tabIndex].init();
		},
		tabsClick(data) {
			if (this.tabIndex != data.index) {
				this.tabIndex = data.index;
			}
		}
	}
};
</script>

<style lang="scss">
.page-container {
	height: 100%;
	background-color: $uni-bg-color;
	.u-tabs {
		height: 44px;
		// border-top: 1px solid #eef0f3;
		// background-color: #fff;
	}
	.swiper-container {
		height: calc(100% - var(--safe-top) - 44px);
	}
}
</style>
