<template>
	<view v-for="item in topicList" :key="item.id" @tap="toTopic(item)">
		<view class="topic">
			<u-image
				width="100%"
				height="360rpx"
				:src="item.picUrl.split('http').length > 1 ? item.picUrl : baseUrl + item.picUrl"
				mode="scaleToFill"
				class="img"
			></u-image>
			<view class="bg-text">
				<view class="txt">{{ item.title }}</view>
				<view class="line"></view>
				<view class="price">阅读次数：{{ item.readCount }}</view>
			</view>
		</view>
		<view class="desc">{{ item.subtitle }}</view>
	</view>
	<view style="padding: 20rpx;"><u-loadmore :status="status" icon-type="flower" /></view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { getTopicList } from '@/api/category';
import { onReachBottom } from '@dcloudio/uni-app';
import config from '@/utils/config';

let baseUrl = config.baseUrl;

let listQuery = reactive({
	page: 1,
	limit: 10,
});

let status = ref('loadmore');
let total = ref(0);

let topicList = ref([] as any);

// 上拉加载数据
onReachBottom(() => {
	// 判断是否还有下一页数据
	if (listQuery.page * listQuery.limit >= total.value) return (status.value = 'nomore');
	// // 判断是否正在请求其它数据，如果是，则不发起额外的请求
	if (status.value === 'loading') return;
	listQuery.page += 1;
	initList();
});

let toTopic = (row: any) => {
	uni.navigateTo({
		url: '/pages/category/topic?id=' + row.id,
	});
};

let initList = () => {
	status.value = 'loading';
	getTopicList(listQuery).then((res: any) => {
		if (res.data.data.total > 10) status.value = 'loadmore';
		else status.value = 'nomore';
		if (res.data.code === 200) {
			total.value = res.data.data.total;
			topicList.value = [...topicList.value, ...res.data.data.list];
		}
	});
};
initList();
</script>

<style scoped lang="scss">
* {
	box-sizing: border-box;
}
.topic {
	width: 100%;
	height: 180px;
	position: relative;
	.img {
		position: absolute;
		top: 0;
		left: 0;
	}
	.bg-text {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 180px;
		text-align: center;
		font-size: 50rpx;
		color: #fff;
		.txt {
			margin-top: 60px;
			height: 25px;
			font-size: 25px;
			color: #fff;
		}
		.line {
			margin: 0 auto;
			margin-top: 16px;
			display: block;
			height: 2px;
			width: 300px;
			background: #fff;
		}
		.price {
			height: 25px;
			font-size: 25px;
			color: #fff;
		}
	}
}
.desc {
	background: #fff;
	width: 100%;
	height: auto;
	overflow: hidden;
	padding: 25px 20px;
	font-size: 20px;
	color: #666;
	line-height: 20px;
	text-align: center;
}
</style>
