<template>
  <view class="flex-1">
    <GLoading />
    <scroll-view
     
      class="flex-1"
      style="z-index: 999;"
      scroll-y="true"
      lower-threshold="30"
      @scrolltolower="scrollLower"
    >
      <view style="position: relative;">
        <view class="body-bg" />
        <view class=" px-20 py-20">
          <!-- <view class="high mb-20">
		        <view class="high-title mb-24">
		          <text class="high-title-text">
		            优质短剧
		          </text>
		        </view>
		        <view class="highContent">
		          <view
		            v-for="(item, index) in dataList.module2"
		            :key="index"
		            class="flex-row mb-20"
		          >
		            <u--image
		              class="highContent-img mr-20"
		              :fade="true"
		              :lazy-load="true"
		              height="238rpx"
		              width="176rpx"
		              :src="item.cover"
		              duration="450"
		              mode="aspectFill"
		            />
					    
		            <view
		              class="high-right"
		              style="justify-content: center;"
		            >
		              <text class="high-right-one text-one">
		                {{ item.name || '-' }}
		              </text>
		              <text class="high-right-to mt-28 mb-32 text-To">
		                {{ item.description || '-' }}
		              </text>
		              <view
		                class="high-right-three flex-row"
		                style="align-items: center;"
		              >
		                <u-icon
		                  name="/static/icon/hot.png"
		                  size="44rpx"
		                />
		                <text class="high-right-three-text">
		                  {{ item.num || 0 }}火力值
		                </text>
		              </view>
		            </view>
		          </view>
		        </view>
		      </view> -->
          <view class="listData flex-1">
            <view
              v-for="(item, index) in dataList.module1"
              :key="index"
              class="listDataItem mb-20"
            >
              <image
                v-if="item.recommend === 1"
                src="@/static/images/recommend.png"
                style="width:160rpx;height:102rpx;position: absolute;top: 20rpx;left: 20rpx;z-index: 999;"
                mode="aspectFill"
              />
              <u--image
                class="listDataItemImg"
                :fade="true"
                :lazy-load="true"
                height="720rpx"
                width="710rpx"
                :src="item.cover"
                duration="450"
                mode="aspectFill"
                @click="listDataItemClick(item)"
              />
              <image
                src="@/static/images/play.png"
                class="_image"
                mode="aspectFill"
                @click="listDataItemClick(item)"
              />
              <view class="listData-remake px-20 pt-104">
                <view
                  class="flex-row"
                  style="justify-content: space-between;"
                >
                  <text class="listData-remake-title">
                    {{ item.name || '-' }}
                  </text>
                  <view
                    class="flex-row"
                    style="align-items: center;"
                    @click="chase(item)"
                  >
                    <u-icon
                      :name="
                        item.collection === 0
                          ? '/static/icon/attention.png'
                          : '/static/icon/attention-on.png'
                      "
                      size="36rpx"
                    />
                    <text class="listData-remake-text">
                      {{ item.num || 0 }}
                    </text>
                  </view>
                </view>
                <text class="listData-remarks text-To">
                  {{ item.description }}
                </text>
              </view>
              <text class="listData-update">
                {{ item.new || 0 }}集全
              </text>
            </view>
          </view>
        </view>
        <u-loadmore :status="status" />
        <!-- #ifndef H5 -->
        <u-gap height="80" />
        <!-- #endif -->
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { findindex, addkeep, chasingdramadel } from '@/api/index.js';
export default {
	data() {
		return {
			dataList: {
				module1: [],
				module2: []
			},
			status: 'loadmore',
			page: 1
		};
	},
	onShow() {
		this.$showLoading(true);
		this.dataList.module1 = [];
		console.log(this.dataList);
		this.getList();
	},
	methods: {
		getList() {
			findindex({ page: this.page }).then(res => {
				this.$showLoading(false);
				if (res.module1.length === 0) {
					this.status = 'nomore';
				} else {
					this.status = 'loadmore';
					this.dataList.module1 =
						this.dataList.module1.concat(res.module1) || [];
				}
			});
		},
		scrollLower() {
			if (this.status !== 'nomore') {
				this.page++;
				this.status = 'loading';
				this.getList();
			}
		},
		listDataItemClick(item) {
			uni.navigateTo({
				url: `/pages/video/index?sid=${item.id}`
			});
		},
		chase(item) {
			let fn = null;
			let params = {};
			console.log(item);
			if (item.collection === 0) {
				fn = addkeep;
				params = {
					sid: item.id
				};
			} else {
				fn = chasingdramadel;
				params = {
					ids: item.id
				};
			}
			fn(params).then(() => {
				item.collection = item.collection === 0 ? 1 : 0;
				item.num = item.collection === 0 ? item.num - 1 : item.num + 1;
			});
		}
	}
};
</script>

<style lang="scss">
.high {
	position: relative;
	padding: 40rpx 20rpx;
	border-radius: 10rpx;
	background-image: url('~@/static/images/hign.png');

	background-size: 100% 100%;
	.high-title-text {
		font-size: 44rpx;
		font-weight: bold;
		color: #f48319;
	}
	.highContent-img {
		width: 176rpx;
		height: 238rpx;
	}
	.high-right-one {
		font-size: 36rpx;
		font-weight: bold;
		color: #1a1a1a;
	}
	.high-right-to {
		font-size: 30rpx;
		font-weight: 400;
		color: #666666;
	}
	.high-right-three-text {
		font-size: 30rpx;
		font-weight: 400;
		color: #666666;
	}
}
.listDataItem {
	position: relative;
	height: 958rpx;
	border-radius: 10rpx;
	overflow: hidden;
}
.listDataItemImg {
	width: 710rpx;
	height: 720rpx;
}
.listData-remake {
	position: absolute;
	bottom: 0;
	width: 710rpx;
	height: 332rpx;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 22%);
}
.listData-remake-title {
	font-size: 44rpx;
	font-weight: bold;
	color: #1a1a1a;
}
.listData-remake-text {
	font-size: 26rpx;
	font-weight: 400;
	color: #666666;
}
.listData-remarks {
	font-size: 26rpx;
	font-weight: 400;
	color: #999999;
	line-height: 56rpx;
	margin-top: 16rpx;
}
.listData-update {
	position: absolute;
	bottom: 310rpx;
	right: 10rpx;
	font-size: 28rpx;
	font-weight: 500;
	color: #ffffff;
}
._image {
	width: 136rpx;
	height: 136rpx;
	position: absolute;
	top: 298rpx;
	left: 288rpx;
}
.body-bg {
	position: absolute;
	top: 0;
	width: 750rpx;
	z-index: 2rpx;
	height: 434rpx;
	background: url('https://diyyhdapi.qinjiu8.com/backImg.png');
	background-size: 100% 100%;
}
</style>
