<template>
	<scroll-view
		style="height: 100%"
		scroll-y="true"
		refresher-enabled="true"
		refresher-background="none"
		:refresher-threshold="100"
		:refresher-triggered="refreshTriggered"
		@refresherrefresh="refresh"
		@scrolltolower="getData"
	>
		<!-- <view class="vod-container">
      <vod-item v-for="(vod, vodIndex) in list" :key="vodIndex" />
    </view> -->
		<view class="vod-container">
			<view v-for="(vod, vodIndex) in list" :key="vodIndex">
				<vod-item :item="vod" :index="vodIndex + 1" :order="true" />
				<adv-item v-if="(vodIndex + 1) % 8 === 0 && banner_adv.length" :adv="banner_adv[Math.floor(Math.random() * banner_adv.length)]" />
			</view>
		</view>
		<view class="load-more">
			<u-loadmore :status="loadStatus" loading-icon="semicircle" :line="true" />
		</view>
	</scroll-view>
</template>

<script>
import vodItem from '@/components/vod-item-row.vue';
import advItem from '@/components/adv-item.vue';
import { app } from '@/utils/api';

export default {
	components: {
		vodItem,
		advItem
	},
	props: {
		id: {
			type: Number,
			default: 0
		},
		sort: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			list: [],
			banner_adv: [],
			page: 1,
			loaded: false,
			refreshTriggered: false,
			loadStatus: 'loadmore'
		};
	},
	watch: {
		sort: {
			handler(val) {
				if (this.loaded) {
					this.loaded = false;
					this.loadStatus = 'loadmore';
					this.list = [];
					this.page = 1;
				}
			}
		}
	},
	methods: {
		init() {
			if (this.loaded === false) {
				this.getData();
			}
		},
		async getData() {
			if (this.loadStatus === 'nomore' || this.loadStatus === 'loading') {
				return;
			}
			this.loadStatus = 'loading';
			await app
				.hotList(this.id, this.sort, this.page)
				.then((res) => {
					const resData = res.data;
					console.log(resData);
					this.banner_adv = resData.adv_list.banner_adv;
					if (resData.page < resData.page_total) {
						this.loadStatus = 'loadmore';
						this.page++;
					} else {
						this.loadStatus = 'nomore';
					}
					this.list = this.list.concat(resData.list);
					this.loaded = true;
				})
				.catch((e) => {
					this.loadStatus = 'loadmore';
				});
			this.refreshTriggered = false;
		},
		refresh() {
			this.refreshTriggered = true;
			this.loadStatus = 'loadmore';
			this.page = 1;
			this.list = [];
			this.getData();
		}
	}
};
</script>

<style></style>
