<template>
	<view class="content">
		<u-tabs lineColor="#287CCE" lineWidth="30" :activeStyle="{color:'#287CCE',fontSize:'36rpx',fontWeight:'bold'}"
			:list="classifyArr" @click="tabClick"></u-tabs>
		<view class="list" v-if="articleList.length > 0">
			<template v-for="item in articleList">
				<one-article :article="item"></one-article>
			</template>
		</view>
		<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
	</view>
</template>

<script>
	import oneArticle from '@/components/one-article/one-article.vue'
	export default {
		components: {
			oneArticle
		},
		data() {
			return {
				classifyArr: [{
					name: '全部',
					id: '',
				}],
				pageNum: 1,
				pageSize: 10,
				parentId: '',
				articleList: [],
				loading: '',
			}
		},
		onShow() {
			this.articleList = [];
			this.pageNum =1;
			this.pageSize = 10;
			this.classifyArr =  [{
					name: '全部',
					id: '',
				}];
			this.getArticleClassList();
			this.getArticleList();
		},
		onReachBottom() {
			console.log('触底');
			if (this.loading == 'more') {
				this.pageNum++;
				this.getArticleList();
			}
		},
		methods: {
			tabClick(item) {
				this.articleList = [];
				this.pageNum = 1;
				this.parentId = item.id;
				console.log(this.parentId);
				this.getArticleList();
			},
			// 获取文章分类
			async getArticleClassList() {
				const res = await this.$myRequest({
					url: '/system/type/list',
				})
				this.classifyArr = this.classifyArr.concat(res.data.rows)
			},
			async getArticleList() {
				const res = await this.$myRequest({
					url: '/system/article/articleList',
					data: {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						parentId: this.parentId
					}
				})
				if (res.data.code == 200) {
					for (let i = 0; i < res.data.rows.length; i++) {
						res.data.rows[i].litpic = this.baseUrl + res.data.rows[i].litpic
					}
					if (res.data.rows.length >= this.pageSize) {
						this.loading = 'more';
					} else {
						this.loading = 'noMore';
					}
					this.articleList = this.articleList.concat(res.data.rows);
				}
			}
		}

	}
</script>

<style lang="less" scoped>
	.content {
		.list {
			margin: 50rpx 22rpx;
		}
	}
</style>