<template>
	<NavBar />
	<HomeSwiper position="1" />
	<view class="container">
		<view class="title">
			<PageTitle :title="$t('menu.tools')" />
		</view>
		<view class="content">
			<Spin v-show="loading1" />
			<view v-if="newsList && newsList.length" class="top-news" @click="goDetail(newsList[0].id)" >
				<image class="img" mode="aspectFill" :src="newsList[0].img_url" ></image>
				<view class="info" >
					<view class="news-title uni-ellipsis-2">{{newsList[0].title}}</view>
					<view class="news-footer">
						<image class="icon" src="/static/clock.svg"></image>
						<text>{{newsList[0].release_time}}</text>
					</view>
				</view>
			</view>
			<view class="news-list">
				<template v-for="(item, index) in newsList" :key="index">
					<view v-if="index > 0" class="news-item" @click="goDetail(item.id)" >
						<image class="img" mode="aspectFill" :src="item.img_url" ></image>
						<view class="info" >
							<view class="news-title uni-ellipsis-2">{{item.title}}</view>
							<view class="news-footer">
								<image class="icon" src="/static/clock.svg"></image>
								<text>{{item.release_time}}</text>
							</view>
						</view>
					</view>
				</template>
			</view>
			<uni-load-more v-if="newsList && newsList.length" :status="loadStatus"></uni-load-more>
		</view>
	</view>
</template>

<script>
import { queryToolReportList } from '@/services/toolsAndReport';
export default {
	data() {
		return {
			searchFormData: {
				curr_page: 1,
				page_size: 21
			},
			loading: false,
			loading1: false,
			total: 0,
			newsList: [],
			hasMore: false
		};
	},
	computed: {
		loadStatus() {
			if (this.loading) {
				return 'loading'
			}
			if (this.newsList && this.newsList.length) {
				if (this.newsList.length < this.total) {
					return 'more'
				}
			}
			return 'no-more'
		}
	},
	methods: {
		async getListData() {
			this.loading1 = true
			const res = await queryToolReportList(this.searchFormData);
			if (res && res.code === 0) {
				this.total = res.data.totalRecords
				this.newsList = res.data.records
				this.searchFormData.curr_page = (this.newsList && this.total > this.newsList.length) ? 2 : 1
				this.hasMore = this.newsList && this.total > this.newsList.length
			}
			this.loading1 = false
		},
		goDetail(id) {
			uni.navigateTo({
				url: "/pages/toolsAndReport/detail?id=" + id
			})
		}
	},
	created() {
		this.getListData();
	},
	onReachBottom() {
		if (this.loading || !this.hasMore) {
			return
		}
		this.loading = true
		queryToolReportList(this.searchFormData).then(res => {
			if (res && res.code === 0) {
				this.total = res.data.totalRecords
				this.newsList = [...this.newsList, ...res.data.records]
				this.searchFormData.curr_page = this.total > this.newsList.length ? (this.searchFormData.curr_page + 1) : this.searchFormData.curr_page
				this.hasMore = this.total > this.newsList.length
			}
			this.loading = false
		}).catch(() => {
			this.loading = false
		})
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
