<template>
	<scroll-view
		style="height: 100%"
		scroll-y
		refresher-enabled="true"
		refresher-background="none"
		:refresher-threshold="100"
		:refresher-triggered="refreshTriggered"
		@refresherrefresh="refresh"
		@scrolltolower="getTypeList"
	>
		<swiper v-if="slideshow.length" :indicator-dots="true" :autoplay="true" indicator-color="rgba(255,255,255,0.3)" indicator-active-color="#F25555" class="index-banner">
			<swiper-item v-if="index < 10" v-for="(item, index) in slideshow" :key="index" class="index-banner-item" @click="bannerOpen(item)">
				<vod-image :src="item.pic" class="index-banner-image" />
			</swiper-item>
		</swiper>
		<channel-class ref="class" :pid="id" :index="index" />
		<view v-show="loadmore" class="load-more">
			<u-loadmore status="loading" loading-icon="semicircle" :line="true" :margin-top="20" />
		</view>
		<u-loading-page :loading="loaded === false" bgColor="none" fontSize="16"></u-loading-page>
	</scroll-view>
</template>

<script>
import vodItem from '@/components/vod-item-row.vue';
import vodImage from '@/components/vod-image';
import channelClass from './channel-class-index.vue';
import { app } from '@/utils/api';

export default {
	components: {
		vodItem,
		channelClass,
		vodImage
	},
	props: {
		id: {
			type: Number,
			default: 0
		},
		index: {
			type: Number
		}
	},
	data() {
		return {
			refreshTriggered: false,
			advList: [],
			color: ['#534545', '#45534C', '#0A354A', '#47390B'],
			actor: [],
			loadmore: false,
			slideshow: [],
			loaded: false
		};
	},
	methods: {
		init() {
			if (this.loaded === false) {
				this.getSlideshow();
				this.refreshTriggered = false;
			}
		},
		getSlideshow() {
			app.slideshow(this.id).then((res) => {
				(this.slideshow = res.data ? res.data : []),
					this.$nextTick(() => {
						this.$refs.class.init();
					});
				this.loaded = true;
			});
		},

		refresh() {
			this.refreshTriggered = true;
			this.$nextTick(() => {
				this.$refs.class.getVodClass();
			});
			setTimeout(() => {
				this.refreshTriggered = false;
			}, 1000);
		},
		getTypeList() {
			this.$refs.class.getData();
		},
		async bannerOpen(data) {
			switch (data.type) {
				case 'adv':
					this.openAD(data.url);
					break;
				case 'topic':
					uni.navigateTo({
						url: '/pages/album/details?id=' + data.topic_id
					});
					break;
				default:
					this.openVideo(data.vod_id);
			}
		}
	}
};
</script>

<style lang="scss">
.index-banner {
	height: 190px;
	.index-banner-item {
		padding: 0 15px;
		box-sizing: border-box;
		.index-banner-image {
			width: 100%;
			height: 100%;
			border-radius: 6px;
			overflow: hidden;
		}
	}
}
.index-box {
	margin-top: 10px;
	.index-box-title {
		margin: 0 15px;
		font-size: 16px;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.more {
			font-size: 15px;
			color: #a1a0a4;
		}
	}
}
.ad-banner {
	width: 100%;
	padding: 5px 15px;
	uni-image {
		width: 100%;
		border-radius: 8px;
	}
}
</style>
