<template>
  <GList
    class="flex-1"
    :scroll-top="scrollTop"
    @scroll="scrollGList"
  >
    <view style="position: relative;">
      <view
        v-if="dataList.history.cover"
        class="television"
        @click="getUserHistory"
      >
        <u-transition
          :show="scrollTransition"
          :mode="scrollTransition ? 'slide-left':'fade-left'"
          duration="200"
        >
          <view
            class="television-content"
            style="align-items: center;"
          >
            <view
              class="television-image flex-center"
            
              :style="{background: `url(${dataList.history.cover})`,	'background-size': 'cover'}"
            >
              <image
                src="@/static/images/play-history.png"
                style="width: 66rpx;height: 66rpx;"
              />
            </view>
          </view>
        </u-transition>
      </view>
    

      <view class="body-bg" />
      <view class="banner mb-20">
        <u-swiper
          class=""
          height="336rpx"
          indicator
          :list="dataList.ads"
          key-name="cover"
          interval="1500"
          :autoplay="true"
          circular
          @click="bannerClick"
        />
      </view>
      <view class="px-20 flex-row playletItem ">
        <GPlayletItem
          v-for="(item, index) in dataList.module1"
          :key="index"
          :class="(index + 1) % 2 === 0 ? '' : 'mr-14 mb-20'"
          :data="item"
        />
      </view>
      <view
        class="card-playlet mb-24 "
        style="overflow: hidden;"
      >
        <GSwiper
          dot-mode="nav"
          autoplay
          :plus="2"
          :circular="true"
          :swiper-list="dataList.module2"
          @change="GSwiperChange"
          @itemClick="itemClick"
        />
        <view class="mt-20">
          <text class="card-playlet-title">
            {{ module2Info.name || '-' }}
          </text>
          <text class="card-playlet-text text-three">
            {{ module2Info.description || '' }}
          </text>
        </view>
      </view>
      <view class="px-20 flex-row playletItem mb-20">
        <GPlayletItem
          v-for="(item, index) in dataList.module3"
          :key="index"
          :class="(index + 1) % 2 === 0 ? '' : 'mr-14 mb-20'"
          :data="item"
        />
      </view>
      <view class="rank mx-20 px-10">
        <view class="flex-center mb-26">
          <image
            class="rank-title"
            src="@/static/images/Group-rank.png"
            mode="aspectFit"
          />
        </view>
        <view class="flex-row rankList">
          <view
            v-for="(item, index) in dataList.module4"
            :key="index"
            class="rankItem"
            :class="(index + 1) % 3 === 0 ? 'mb-24' : 'mb-24 mr-22'"
            @click="rankItem(item)"
          >
            <view class="rankItem-header">
              <image
                class="rankItem-header-img"
                :src="item.cover"
                mode="aspectFill"
              />
              <image
                class="rankItem-header-rank"
                :src="rankImg[index]"
                mode="aspectFill"
              />

              <view class="bottom-right">
                <text class="bottom-text">
                  {{ item.new || 0 }}集全
                </text>
              </view>
            </view>
            <view class="mt-10 ">
              <text
                class="fs-32 text-one"
                style="color: #1A1A1A;"
              >
                {{ item.name }}
              </text>
            </view>
          </view>
        </view>
      </view>
      <view class="px-20 flex-row playletItem ">
        <GPlayletItem
          v-for="(item, index) in dataList.module5"
          :key="index"
          :class="(index + 1) % 2 === 0 ? '' : 'mr-14 mb-20'"
          :data="item"
        />
      </view>
      <GFooter />
      <!-- #ifndef H5 -->
      <u-gap height="160" />
      <!-- #endif -->
    </view>
  </GList>
</template>

<script>
import { getIndexList } from '@/api/index.js';
export default {
	tabIndex: {
		type: Number,
		default: 0
	},
	data() {
		return {
			showLading: true,
			triggered: false,
			scrollTransition: true,
			rankImg: [
				require('@/static/images/rank_1.png'),
				require('@/static/images/rank_2.png'),
				require('@/static/images/rank_3.png'),
				require('@/static/images/rank_4.png'),
				require('@/static/images/rank_5.png'),
				require('@/static/images/rank_6.png')
			],
			dataList: {
				ads: [],
				history: null,
				module1: [],
				module2: [],
				module3: [],
				module4: [],
				module5: []
			},
			module2Index: 0,
			time: null,
			scrollTop:0
		};
	},
	computed: {
		module2Info() {
			return this.dataList.module2[this.module2Index] || {};
		}
	},

	methods: {
		GSwiperChange(e) {
			this.module2Index = e;
		},
		itemClick(e){
			uni.navigateTo({
				url: `/pages/video/index?sid=${e.id}`
			});
		},
		getUserHistory(){
			uni.navigateTo({
				url: `/pages/video/index?sid=${this.dataList.history.sid}`
			});
		},
		
		bannerClick(e) {
			uni.navigateTo({
				url: `/pages/video/index?sid=${this.dataList.ads[e].bookid}`
			});
		},
		rankItem(e) {
			uni.navigateTo({
				url: `/pages/video/index?sid=${e.id}`
			});
		},
		refresherrefreshHandler() {
			this.triggered = true;
		},
		getList() {
			getIndexList().then(res => {
				this.dataList = res || {
					ads: [],
					history: null,
					module1: [],
					module2: [],
					module3: [],
					module4: [],
					module5: []
				};
			});
		},
		scrollGList(e) {
			this.scrollTransition = false;
			clearTimeout(this.time);
			this.time = setTimeout(() => {
				this.scrollTransition = true;
			}, 500);
			//获取距离顶部距离
			const scrollTop = e;
			let opacity = 1;
			opacity = Math.min(1, 100 / scrollTop);
			this.$emit('opacity', opacity);
		}
	}
};
</script>

<style lang="scss">
.header_bg {
	position: fixed;
	top: -6rpx;
	left: 0;
	width: 750rpx;
	height: 614px;
	z-index: 0;
}

.banner {
	padding: 0 20rpx;
	width: 750rpx;
	height: 336rpx;
}

.playletItem {
	flex-wrap: wrap;
}
.card-playlet {
	margin: 0 20rpx;
	padding: 24rpx 28rpx;
	background: #ffffff;
	border-radius: 10rpx;
	.card-playlet-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #1a1a1a;
		text-align: center;
		margin-bottom: 8rpx;
	}
	.card-playlet-text {
		font-size: 24rpx;
		line-height: 56rpx;
		font-weight: 400;
		color: #666666;
		text-align: center;
	}
}

.rank {
	background: linear-gradient(180deg, #ffecd7 0%, #ffffff 12%);
	border-radius: 10rpx;
	padding-top: 36rpx;
	margin-bottom: 20rpx;
}
::v-deep .card-playlet .uni-swiper-slides {
	width: 336rpx;
	height: 452rpx;
	border-radius: 10rpx;
}
.rank-title {
	width: 300rpx;
	height: 60rpx;
}
.rankList {
	flex-wrap: wrap;
}
.rankItem {
	width: 214rpx;
}
.rankItem-header {
	position: relative;
	height: 286rpx;
	width: 214rpx;
	border-radius: 10rpx;
	overflow: hidden;
	.rankItem-header-img {
		position: absolute;
		top: 2rpx;
		left: 0;
		height: 284rpx;
		width: 214rpx;
	}
	.rankItem-header-rank {
		position: absolute;
		width: 74rpx;
		height: 48rpx;
		top: 0;
		left: 0;
	}

	.bottom-right {
		position: absolute;
		bottom: 0;
		right: 0;
		padding: 20rpx 10rpx;
		.bottom-text {
			font-size: 24rpx;
			color: #ffffff;
			text-shadow: 0px 0px 4rpx rgba(0, 0, 0, 0.25);
		}
	}
}
.body-bg {
	position: absolute;
	top: -2rpx;
	width: 750rpx;
	z-index: 0;
	height: 346rpx;
	background: url('https://diyyhdapi.qinjiu8.com/backImg.png');
	background-size: 100% 100%;
}
.television {
	width: 158rpx;
	height: 168rpx;
	position: fixed;
	bottom:100rpx;
	left: 0rpx;
	z-index: 999;

}
.television-content {
	width: 198rpx;
	height: 208rpx;
	background: url('https://diyyhdapi.qinjiu8.com/television.png');
	background-size: 100% 100%;
	padding-top: 58rpx;
}
.television-image {
	height: 119rpx;
	width: 123rpx;
	border-radius: 32rpx;

}
</style>
