<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" indicator-color="rgba(255,255,255,0.3)" indicator-active-color="#28b975" 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>
    <!-- <view v-if="newList && newList.length > 0" class="index-box">
      <view class="index-box-title">
        <text>今日推荐</text>
      </view>
      <view class="vod-container">
        <vod-item v-for="(item, index) in newList" :key="index" :item="item" />
      </view>
      <view v-if="advList.length > 0" class="ad-banner" @click="openAD(advList[0].adv_link)">
        <image :src="advList[0].adv_image" mode="widthFix" />
      </view>
    </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" />
      </view>
      <view v-if="advList.length > 1" class="ad-banner" @click="openAD(advList[1].adv_link)">
        <image :src="advList[1].adv_image" mode="widthFix" />
      </view>
    </view> -->
    <view v-if="typeList.length > 0" v-for="(item, index) in typeList" :key="index" class="index-box">
      <view class="index-box-title">
        <text>{{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" />
      </view>
      <view v-if="advList.length > index+2" class="ad-banner" @click="openAD(advList[index+2].adv_link)">
        <image :src="advList[index+2].adv_image" mode="widthFix" />
      </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 vodItem from '@/components/vod-item-row.vue';
	import vodCard from '@/components/vod-card.vue'
	import vodImage from '@/components/vod-image';
	import blackmonthSwiper from '@/components/blackmonth-swiper.vue'
	import {
		app,
	} from '@/utils/api';

	export default {
		components: {
			vodItem,
			vodImage,
			blackmonthSwiper,
			vodCard
		},
		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
			};
		},
		methods: {

			changeIndex(e) {
				this.current = e.detail.current
			},
			init() {
				if (this.loaded === false) {
					this.getSlideshow();
					this.getData();
					this.getactorList();
				}
			},
			getactorList() {
				app.actorList().then(res => {
					this.actor = res.data.vod_actor
					this.loaded = true;
				});
			},
			getSlideshow() {
				app.slideshow(this.id).then(res => {
					this.slideshow = res.data ? res.data : []
					this.loaded = true;
					setTimeout(() => {
						this.$refs.blackmonth.init()
					}, 1000)
				});
			},
			getData() {
				app.indexList(this.id).then(res => {
					this.data = res.data;
					
					
					

					const resData = res.data
					this.topic = resData.topic
					this.newList = resData.recommend
					// resData.hot
					this.hotList = []
					this.type = resData.type
					this.advList = resData.adv ? resData.adv : []
					console.log(this.type);
					this.loaded = true;
					this.refreshTriggered = false;
					this.getTypeList()
				});
			},
			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();
			},
			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">
.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>