<template>
	<scroll-view style="height:100%;" scroll-y refresher-enabled="true" refresher-background="none"
		:refresher-threshold="100" :refresher-triggered="refreshTriggered" @refresherrefresh="refresh"
		@scrolltolower="getData">
		<view class="album-list">
			<view v-for="(item, index) in list" :key="index" 
				hover-class="none" class="album-item">
				<view class="index-box-title"><text>{{ item.topic_name }}</text>
					<!-- :url="'/pages/album/details?id=' + item.topic_id" -->
					<view class="more" @click="openUrl('/pages/album/details?id=' + item.topic_id)">
						查看更多
						<uni-icons type="forward" size="16" color="#a1a0a4"></uni-icons>
					</view>
				</view>
				<scroll-view scroll-x scroll-with-animation :scroll-animation-duration="300"
					:disable-programmatic-animation="true">
					<view class="index-box">
						<view class="vod-container" style="display: flex;">
							<vod-item v-for="(vod, i) in item.vod_list" :key="i" :item="vod" :index="i" mode="channel" />
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="load-more">
				<u-loadmore :status="loadStatus" loading-icon="semicircle" :line="true" :margin-top="20" />
			</view>
		</view>
	</scroll-view>
</template>

<script>
import {
	app
} from '@/utils/api'
import vodItem from '@/components/vod-item-row.vue';
export default {
	components: {
		vodItem,
	},
	data() {
		return {
			list: [],
			page: 1,
			loaded: false,
			refreshTriggered: false,
			loadStatus: 'loadmore'
		}
	},
	methods: {
		init() {
			if (this.loaded === false) {
				this.getData()
			}
		},
		async getData() {
			if (this.loadStatus === 'nomore' || this.loadStatus === 'loading') {
				return
			}
			this.loadStatus = 'loading'
			await app.topic(this.page).then(res => {
				const resData = res.data
				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 lang="scss">
.album-list {
	.index-box-title {
			margin: 0 15px;
			font-size: 16px;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: space-between;
		uni-text{
			width: 500rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
			.more {
				font-size: 15px;
				color: #a1a0a4;
			}
		}
	
}</style>