<template>
	<view class="page-container">
		<view class="discover-header">
			<image src="/static/images/discover-order.png" />
		</view>
		<view class="filter-box">
			<u-tabs
				:line-width="0"
				:line-height="0"
				:item-style="{ height: '30px', padding: '0 15px' }"
				:active-style="{ fontSize: '18px', fontWeight: 'bold', color: '#fff' }"
				:list="type"
				:current="typeIndex"
				@click="tabsClick('typeIndex', $event)"
			></u-tabs>
			<u-tabs
				:line-width="0"
				:line-height="0"
				:item-style="{ height: '40px', padding: '0 10px' }"
				:inactive-style="{ padding: '4px 15px', borderRadius: '5px', background: '#f6f7f9' }"
				:active-style="{ padding: '4px 15px', borderRadius: '5px', color: '#FFF', background: '#DA2538' }"
				:list="sort"
				:current="sortIndex"
				@click="tabsClick('sortIndex', $event)"
			></u-tabs>
		</view>
		<swiper :current="typeIndex" @change="swiperChange" class="swiper-container">
			<swiper-item v-for="(item, index) in type" :key="index">
				<discover-item :ref="'discover' + index" :id="item.id" :sort="sort[sortIndex].id"></discover-item>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import discoverItem from './discover-item.vue';
import { app } from '@/utils/api';

export default {
	components: {
		discoverItem
	},
	data() {
		return {
			type: [{}],
			sort: [
				{ id: 'hits_day', name: '1天' },
				{ id: 'hits_week', name: '7天' },
				{ id: 'hits_month', name: '30天' }
			],
			typeIndex: 0,
			sortIndex: 0
		};
	},
	onLoad() {
		this.getVodClass();
	},
	methods: {
		tabsClick(key, data) {
			if (this[key] != data.index) {
				this[key] = data.index;
				if (key == 'sortIndex') {
					this.$nextTick(() => {
						this.$refs['discover' + this.typeIndex][0].init();
					});
				}
			}
		},
		swiperChange(e) {
			this.typeIndex = e.detail.current;
			this.$refs['discover' + this.typeIndex][0].init();
		},
		async getVodClass() {
			await app.vodClass().then((res) => {
				const resData = res.data;
				if (resData) {
					this.type = resData.type.filter((item) => {
						return item.id > 0;
					});
					this.$nextTick(() => {
						this.$refs['discover' + this.typeIndex][0].init();
					});
				} else {
					uni.reLaunch({
						url: '/pages/splash/splash'
					});
				}
			});
			// app.vodClass().then(res => {
			//   const resData = res.data
			//   console.log(res.data);
			//   this.type = resData.type.filter(item => {
			//     return item.id > 0
			//   })
			//   this.$nextTick(() => {
			//     this.$refs['discover'+this.typeIndex][0].init()
			//   })
			// })
		}
	}
};
</script>

<style lang="scss">
.page-container {
	height: 100%;
	background-color: $uni-bg-color;
	.discover-header {
		width: 100%;
		height: 140px;
		uni-image {
			width: 100%;
			height: 176px;
		}
	}
	.filter-box {
		position: relative;
		margin-top: 20px;
		padding: 11px 0px 5px;
		width: 100%;
		background: #0c0c16;
		border-radius: 11px;
		z-index: 1;
	}
	.swiper-container {
		height: calc(100% - 250px);
	}
}
</style>
