<template>
	<view class="page-container">
	<!-- 	<view class="header-bg">
			<view class="header-bg-upper"></view>
		</view> -->
		<view class="status-bar"></view>
		<view class="nav">
			<view class="nav-tabs">
				<u-tabs lineColor="#DA2538" line-width="0px" line-hight="0px" :scrollable="false"
					:active-style="{fontSize: '18px', fontWeight: 'bold', color: '#fff'}" :list="navs"
					:current="navIndex" @click="tabsClick"></u-tabs>
			</view>
			<navigator url="/pages/search/search" style="padding-right: 10px;">
			  <u-icon  size="30" name="search"></u-icon>
			</navigator>
		</view>
		<swiper :current="navIndex" @change="swiperChange" class="swiper-container">
			<!-- <swiper-item>
				<channel-album ref="album" />
			</swiper-item> -->
			<swiper-item>
				<channel-class ref="class" />
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import channelAlbum from './channel-album.vue'
	import channelClass from './channel-class.vue'

	export default {
		components: {
			channelAlbum,
			channelClass
		},
		data() {
			return {
				navs: [ {
					name: '影视分类'
				}],
				navIndex: 0
			}
		},
		watch: {
			navIndex: {
				handler() {
					this.$nextTick(() => {
						this.loadData()
					})
				}
			}
		},
		onShow() {
			const id = getApp().globalData.switchChannel.id
			// if (this.navIndex != id) {
				this.navIndex =0
			// } else {
				this.$nextTick(() => {
					this.loadData()
				})
			// }
		},
		methods: {
			swiperChange(e) {
				this.navIndex = e.detail.current
				getApp().globalData.switchChannel.id = parseInt(e.detail.current)
			},
			tabsClick(data) {
				if (this.navIndex != data.index) {
					this.navIndex = data.index
				}
			},
			loadData() {
				// if (this.navIndex == 1) {
					this.$refs.class.init()
				// } else {
					// this.$refs.album.init()
				// }
			}
		}
	}
</script>

<style lang="scss">
	.page-container {
		height: 100%;
		background-color: $uni-bg-color;
		.nav{
			display: flex;
			justify-content: space-between;
			padding: 0 0 0 0;
			align-items: center;
			
		}
		.nav-tabs {
			width: 30%;
			// margin-bottom: 14px;
			height: 50px;
			padding: 0 !important;
			position: relative;
			z-index: 1;
		}

		.swiper-container {
			height: calc(100% - var(--safe-top) - 50px);
		}
	}
</style>