<template>
	<scroll-view
		style="height: 100%"
		scroll-y
		refresher-enabled="true"
		refresher-background="none"
		refresher-default-style="black"
		:refresher-threshold="100"
		:refresher-triggered="refreshTriggered"
		@refresherrefresh="refresh"
		@scrolltolower="getTypeList"
	>
		<swiper
			v-if="slideshow.length"
			class="card-swiper"
			:indicator-dots="true"
			:autoplay="true"
			interval="5000"
			duration="500"
			@change="cardSwiper"
			indicator-color="#8799a3"
			indicator-active-color="#DA2538"
		>
			<swiper-item v-for="(item, index) in slideshow" :key="index" class="index-banner-item" :class="cardCur == index ? 'cur' : ''" @click="bannerOpen(item)">
				<view class="swiper-item">
					<vod-image :src="item.pic" class="index-banner-image" />
				</view>
			</swiper-item>
		</swiper>
		<game :data="icon_adv" v-if="icon_adv.length"></game>
		<view class="text-adv" v-if="text_adv.length">
			<view class="test-adv-name" v-for="(item, index) in text_adv">
				<text @click="openAD(item.adv_link)">{{ item.adv_name }}</text>
			</view>
		</view>
		<!-- <topic v-if="data.topic" :list="data.topic" /> -->
		<index-actor v-if="actor.length" :data="actor"></index-actor>

		<view v-if="newList.length" class="index-box2">
			<view class="index-box-title">
				<text>今日推荐</text>
			</view>
			<scroll-view scroll-x scroll-with-animation :scroll-animation-duration="300" :disable-programmatic-animation="true">
				<view class="index-box">
					<view class="vod-container2">
						<vod-item v-for="(item, index) in newList" :key="index" :item="item" />
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="advList.length > 0" class="ad-banner" @click="openAD(advList[0].adv_link)">
			<vodImage :src="advList[0].adv_image" mode="widthFix" />
		</view>
		<!-- <view v-for="(item, index) in newList" :key="index" :item="item" v-if="index>4">
			<vod-card :item="item"></vod-card>
		</view> -->
		<view v-if="hotList && hotList.length > 0" class="index-box">
			<view class="index-box-title">
				<text>热门推荐</text>
			</view>
			<view class="vod-container">
				<vod-item v-for="(item, index) in hotList" :key="index" :item="item" v-if="index < 4" />
			</view>
			<view v-if="advList.length > 1" class="ad-banner" @click="openAD(advList[1].adv_link)">
				<vodImage :src="advList[1].adv_image" mode="widthFix" />
			</view>
		</view>

		<view v-for="(item, index) in hotList" :key="index" v-if="index > 4">
			<vod-card :item="item"></vod-card>
		</view>
		<view v-if="typeList.length > 0" v-for="(item, index) in typeList" :key="index">
			<view class="index-box" :style="{ backgroundColor: item.color }">
				<view class="index-box-title">
					<text>{{ item.name ? item.name : '' }}{{ id == 0 ? '推荐' : '' }}</text>
					<view class="more" @click="toChannel(item.id, item.pid)">
						更多
						<uni-icons type="forward" size="16" color="#a1a0a4"></uni-icons>
					</view>
				</view>
				<view class="vod-container">
					<vod-item v-for="(vod, vodIndex) in item.list" :key="vodIndex" :item="vod" v-if="vodIndex < 4" />
				</view>
				<view v-if="advList.length > index + 2" class="ad-banner" @click="openAD(advList[index + 2].adv_link)">
					<vodImage :src="advList[index + 2].adv_image" mode="widthFix" />
				</view>
			</view>
			<view v-for="(vod, vodIndex) in item.list" :key="vodIndex" :item="vod" v-if="vodIndex > 4">
				<vod-card :item="vod"></vod-card>
			</view>
		</view>
		<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 topic from '@/components/vod-topic.vue';
import vodItem from '@/components/vod-item-row.vue';
import vodCard from '@/components/vod-card.vue';
import vodImage from '@/components/vod-image';
import indexActor from '@/components/Index-actor.vue';
import game from '@/components/game.vue';
import { app } from '@/utils/api';

export default {
	components: {
		topic,
		vodItem,
		vodImage,
		vodCard,
		indexActor,
		game
	},
	props: {
		id: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			slideshow: [],
			topic: [],
			newList: [],
			hotList: [],
			type: [],
			typeList: [],
			data: [],
			loaded: false,
			refreshTriggered: false,
			current: 0,
			pageIndex: 1,
			advList: [],
			dotsStyles: {
				backgroundColor: 'rgba(255, 255, 255, 0.4)',
				color: '#fff',
				width: 6,
				selectedBackgroundColor: 'rgba(255, 255, 255, 0.9)',
				selectedBorder: '1px rgba(255, 255, 255, 0.9) solid'
			},

			advList: [],
			color: ['#534545', '#45534C', '#0A354A', '#47390B'],
			actor: [],
			loadmore: false,
			cardCur: 0,
			icon_adv: [],
			interval_adv: [],
			text_adv: []
		};
	},
	methods: {
		cardSwiper(e) {
			this.cardCur = e.detail.current;
		},
		changeIndex(e) {
			this.current = e.detail.current;
		},
		init() {
			if (this.loaded === false) {
				this.getSlideshow();
				this.getactorList();
				this.getData();
			}
		},
		getactorList() {
			app.actorList().then((res) => {
				this.actor = res.data.vod_actor;
				this.getData();
			});
		},
		getSlideshow() {
			app.slideshow(this.id).then((res) => {
				this.slideshow = res.data ? res.data : [];
			});
		},
		getData() {
			app.indexList(this.id).then((res) => {
				const resData = res.data;
				if (resData) {
					this.data = resData;
					this.topic = resData.topic;
					this.newList = resData.recommend;
					this.hotList = [];
					this.type = resData.type;
					this.text_adv = this.data.adv_list.text_adv;
					this.advList = resData.adv_list.banner_adv ? resData.adv_list.banner_adv : [];
					this.icon_adv = resData.adv_list.icon_adv;

					this.interval_adv = resData.adv_list.interval_adv || [];
					this.loaded = true;
					//this.refreshTriggered = false;
					this.getTypeList();
				} else {
					uni.reLaunch({
						url: '/pages/splash/splash'
					});
				}
			});
		},
		getTypeList() {
			if (this.loadmore || this.pageIndex > this.type.length) {
				return;
			}
			this.loadmore = true;
			setTimeout(() => {
				const max = this.type.length;
				this.pageIndex++;
				if (this.pageIndex <= max) {
					this.typeList = this.type.slice(0, this.pageIndex);
					this.pageIndex++;
				} else {
					this.typeList = this.type;
				}
				this.loadmore = false;
			}, 1000);
		},
		refresh() {
			this.refreshTriggered = true;
			this.getSlideshow();
			this.getData();
			setTimeout(() => {
				this.refreshTriggered = false;
			}, 500);
		},
		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);
			}
		},
		toChannel(type, type_pid) {
			const pid = parseInt(type_pid);
			getApp().globalData.switchChannel.id = 1;
			if (pid > 0) {
				getApp().globalData.switchChannel.type = type;
				getApp().globalData.switchChannel.type_pid = pid;
			} else {
				getApp().globalData.switchChannel.type = 0;
				getApp().globalData.switchChannel.type_pid = type;
			}

			uni.switchTab({
				url: '/pages/home/channel'
			});
		}
	}
};
</script>

<style lang="scss">
// .card-swiper {
// 	height: 190px;
// 	swiper-item {
// 		width: 610upx !important;
// 		left: 70upx;
// 		box-sizing: border-box;
// 		padding: 40upx 0upx 10upx;
// 		overflow: initial;
// 	}
// 	swiper-item .swiper-item {
// 		&:before {
// 			content: '';
// 			display: block;
// 			padding-top: 100%;
// 			background-color: #171929;
// 		}
// 		width: 100%;
// 		display: block;
// 		height: 100%;
// 		border-radius: 10upx;
// 		transform: scale(0.9);
// 		transition: all 0.2s ease-in 0s;
// 		overflow: hidden;
// 	}
// 	.index-banner-item {
// 		padding: 0 15px;
// 		box-sizing: border-box;
// 		.index-banner-image {
// 			position: absolute;
// 			left: 0;
// 			top: 0;
// 			border-radius: 6px;
// 			overflow: hidden;
// 		}
// 	}
// }

.card-swiper swiper-item.cur .swiper-item {
	transform: none;
	transition: all 0.2s ease-in 0s;
}
.card-swiper {
	height: 190px;
}

.card-swiper swiper-item {
	width: 610upx !important;
	left: 70upx;
	box-sizing: border-box;
	padding: 40upx 0upx 10upx;
	overflow: initial;
}

.card-swiper swiper-item .swiper-item {
	width: 100%;
	display: block;
	height: 100%;
	border-radius: 10upx;
	transform: scale(0.9);
	transition: all 0.2s ease-in 0s;
	overflow: hidden;
}

.card-swiper swiper-item.cur .swiper-item {
	transform: none;
	transition: all 0.2s ease-in 0s;
}
.index-banner-item {
	padding: 0 15px;
	box-sizing: border-box;
	.index-banner-image {
		width: 100%;
		height: 100%;
		border-radius: 6px;
		overflow: hidden;
	}
}
.text-adv {
	width: 100%;
	padding: 16px 10px;
	margin: 5px 0;
	align-content: center;
	display: grid;
	grid-template-columns: repeat(5, 18%);
	column-gap: 5px;
	row-gap: 10px;
	justify-content: space-between;
	.test-adv-name {
		color: #d2cd8d;
		text-align: center;
		margin-bottom: 5px;
		font-size: 14px;
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1; /* 显示的行数 */
		-webkit-box-orient: vertical;
	}
}
.index-box {
	// margin-top: 10px;
	// margin: 0px 15px;
	border-radius: 10px;
	padding: 5px 0;

	.index-box-title {
		margin: 0 15px;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #ffffff;
		font-size: 18px;

		.more {
			font-size: 15px;
			color: #a1a0a4;
		}
	}

	.vod-container {
		color: #ffffff;
	}
	.vod-container2 {
		align-content: center;
		display: grid;
		grid-template-columns: repeat(100, 49%);
		column-gap: 10px;
		row-gap: 10px;
		grid-template-rows: 1fr; /* One row with equal height */
		justify-content: space-between;
		grid-auto-flow: column;
		.vod-item {
			width: 100%;
			max-width: 210px;
		}
		.vod-title {
			width: 100%;
			margin-top: 5px;
			font-size: 14px;
			font-weight: 500;
			line-height: 1.6;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}

.index-box2 {
	border-radius: 10px;
	margin: 0 15px;
	.index-box-title {
		font-size: 16px;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #ffffff;
		font-size: 18px;

		.more {
			font-size: 15px;
			color: #a1a0a4;
		}
	}

	.vod-container {
		color: #ffffff;
	}
	.vod-container2 {
		align-content: center;
		display: grid;
		grid-template-columns: repeat(100, 49%);
		column-gap: 10px;
		row-gap: 10px;
		grid-template-rows: 1fr; /* One row with equal height */
		justify-content: space-between;
		grid-auto-flow: column;
		.vod-item {
			width: 100%;
			max-width: 210px;
		}
		.vod-title {
			width: 100%;
			margin-top: 5px;
			font-size: 14px;
			font-weight: 500;
			line-height: 1.6;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}

.ad-banner {
	width: 100%;
	padding: 5px 15px;

	uni-image {
		width: 100%;
		border-radius: 8px;
	}
}

.vod-topic {
	position: relative;
	justify-content: center;
	overflow-y: hidden;

	.topic-content {
		padding: 15px;
		display: flex;

		.topic-max {
			uni-image {
				width: 220px !important;
				height: 160px !important;
				border-radius: 10px;
			}
		}

		.topic-small {
			width: 72px;
			height: 72px;
			border-radius: 10px;
			margin-right: 15px;
		}

		.topic-item {
			margin: 8px;

			uni-image {
				width: 72px;
				height: 72px;
				border-radius: 10px;
			}

			// position: relative;
		}
	}
}
</style>
