<template>
	<view class="container">
		<view class="list-item" v-for="(item,index) in list" :key="index" @click="handleDetail(item.url)">
			{{item.title}}
		</view>
		<myEmpty v-show="loading == false && list.length == 0"></myEmpty>
	</view>
</template>

<script>
	import myEmpty from "@/pages_watch/components/myEmpty/myEmpty.vue";
	import {guidList} from "@/api/pages_watch/index.js"
	export default {
		components: {
			myEmpty
		},
		data() {
			return {
				loading: false,
				isMore: true,
				queryParam: {
					pageSize: 10,
					pageNum: 1,
				},
				total: 0,
				list: []
			}
		},
		onLoad() {
			this.refresh()
		},
		methods: {
			// 获取数据
			getList() {
				this.loading = true
				guidList(this.queryParam).then(res => {
					this.loading = false
					if (res.code == 200) {
						let list = res.rows && res.rows.length > 0 ? res.rows : []
						this.list = this.list.concat(list)
						this.total = res.total
						this.queryParam.pageNum++
						if (this.list.length >= this.total) {
							this.isMore = false
						}
					}
				}).catch(() => {
					this.loading = false
				})
			},
			refresh() {
				this.loading = false
				this.isMore = true
				this.queryParam.pageNum = 1
				this.list = []
				this.getList()
			},
			handleDetail(url) {
				// #ifdef APP-PLUS
				plus.runtime.openWeb(url)
				// #endif
				
				// #ifdef H5
				window.open(url, '_blank');
				// #endif
				
				// #ifndef H5 || APP-PLUS
				uni.navigateTo({
					url: "/pages/webview/webview?webUrl="+url
				})
				// #endif
			}
		},
		onReachBottom() {
			if (this.isMore) {
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 24rpx;
		padding-bottom: calc(var(--window-bottom) + 24rpx);
		box-sizing: border-box;
		.list-item {
			padding: 30rpx 24rpx;
			margin-bottom: 24rpx;
			border-radius: 16rpx;
			overflow: hidden;
			background-color: #fff;
		}
	}
</style>