<template>
	<view class="news-list">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:up="upOption">
			<view class="contain">
				<!-- <view class="banner">
					<ad-swipers :pid="14" height="340rpx">
					</ad-swipers>
				</view> -->
				<view class="main">
					<view class="article-list">
						<view class="article-item bg-white"  v-for="(item, index) in newsList" :key="index" >
							<router-link :to="{path: '/pages/demand_details/demand_details', query: {id: item.id, type}}">
								<view class="flex col-top">
									<view class="info flex-1">
										<view class="title lg line-2 m-b-20 fontw">{{ item.name }}</view>
										<view class="lighter line-2 article-content">
											<u-parse :html="item.content " />
										</view>
									</view>
								</view>
								<view class="flex row-between m-t-20">
									<view class="xs muted">发布时间: {{item.create_time}}</view>
									<view class="flex">
										<image class="icon-sm" src="/static/images/icon_see.png"></image>
										<view class="m-l-10 xs muted">已报名<text style="color: #f00;padding: 0 8rpx;">{{item.reports_count}}</text>人</view>
									</view>
								</view>
							</router-link>
						</view>
					</view>
				</view>
			</view>

		</mescroll-body>
	</view>
</template>

<script>
	import {
		getDemandLists
	} from '@/api/store';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				upOption: {
					auto: false,
					empty: {
						icon: '/static/images/news_null.png',
						tip: "暂无数据",
					}
				},
				newsList: [],
			};
		},

		onLoad(options) {
		},

		methods: {
			async downCallback() {
				await this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				getDemandLists({
					page_size:page.num,
					page_no:page.size
				}).then(({
					data
				}) => {
					if (page.num == 1) this.newsList = [];
					let curPageData = data.list;
					let curPageLen = curPageData.length;
					let hasNext = !!data.more;
					this.newsList = this.newsList.concat(curPageData);
					this.mescroll.endSuccess(curPageLen, hasNext);
				}).catch(() => {
					this.mescroll.endErr()
				})
			},
			
		}
	};
</script>
<style lang="scss">
	.news-list {
		.main {
			.article-list {
				padding-top: 20rpx;

				.article-item {
					padding: 26rpx 20rpx;
					align-items: flex-start;
					&:not(:last-of-type){
						border-bottom: $-solid-border;
					}
				}
			}
		}
	}
	
	.fontw {
		font-weight: bold;
	}
	.article-content {
		max-height: 146rpx;
		overflow: hidden;
	}
</style>
