<template>
	<view class="main">
		<view class="toptitle">
			<view class="toptitle_left" @click="ht">
				<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
			</view>
			<view class="toptitle_title">产品新闻</view>
		</view>
		<view class="article-list" style="padding: 20rpx;">
			<view class="list" v-for="(item, index) in list" :key="item.id" @click="goDetail(item)">
				<view class="item">
					<view class="title">
						<text class="two-omit">【{{getXwflName(item.xwfl)}}】{{item.sbmc}}</text>
					</view>
					<view class="summary" v-if="item.xwgy">
						<text class="two-omit">{{item.xwgy}}</text>
					</view>
					<view class="find-collect">
						<view class="find">
							<text>{{item.fbsj == null ? '' : timestampToTime(item.fbsj)}}</text>
						</view>
					</view>
				</view>
				<view class="thumb" v-if="item.xgtp">
					<image :src="'https://hhjj.antissoft.com' + item.xgtp" mode="aspectFill"></image>
				</view>
			</view>
			<view v-if="list.length === 0 && !loading" class="empty-tip">
				<text>暂无产品新闻</text>
			</view>
			<view v-if="loading" class="loading-tip">
				<text>加载中...</text>
			</view>
			<view v-if="!hasMore && list.length > 0" class="nomore-tip">
				<text>没有更多了</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				loading: false,
				hasMore: true,
				form: {
					currentPage: 1,
					pageSize: 20,
					sidx: 'fbsj',
					sort: 'desc'
				}
			}
		},
		onLoad() {
			this.fetchList();
		},
		onReachBottom() {
			if (this.hasMore && !this.loading) {
				this.form.currentPage += 1;
				this.fetchList(true);
			}
		},
		methods: {
			getXwflName(code) {
				const map = { 'xcp': '新产品', 'cpsj': '产品升级', 'xtsj': '系统升级', 'zlgx': '资料更新', 'scdt': '市场动态' };
				return (code && map[code]) ? map[code] : '新闻';
			},
			timestampToTime(timestamp) {
				const date = new Date(timestamp);
				const Y = date.getFullYear() + '-';
				const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return Y + M + D + h + m + s;
			},
			fetchList(append = false) {
				if (this.loading) return;
				this.loading = true;
				if (!append) {
					this.list = [];
					this.form.currentPage = 1;
				}
				this.API.hqxccplist(this.form).then(res => {
					this.loading = false;
					if (res && res.data && res.data.list) {
						const newList = res.data.list;
						for (let i = 0; i < newList.length; i++) {
							if (newList[i].xgtp && newList[i].xgtp !== '' && newList[i].xgtp !== null) {
								try {
									const arr = JSON.parse(newList[i].xgtp);
									if (Array.isArray(arr) && arr.length > 0) {
										newList[i].xgtp = arr[0].url || arr[0];
									}
								} catch (e) {}
							}
						}
						this.list = append ? this.list.concat(newList) : newList;
						const total = res.data.pagination ? res.data.pagination.total : 0;
						this.hasMore = this.list.length < total;
					} else {
						this.hasMore = false;
					}
				}).catch(() => {
					this.loading = false;
					this.hasMore = false;
				});
			},
			goDetail(item) {
				uni.setStorageSync('xccpinfo', JSON.stringify(item));
				uni.navigateTo({
					url: '/pages/new/cpxw/cpxw'
				});
			},
			ht() {
				uni.navigateBack({ delta: 1 });
			}
		}
	}
</script>

<style scoped lang="scss">
	.main {
		padding-top: 87px;
		background-color: #F8F8F8;
		min-height: 100vh;
	}
	.toptitle {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		background-color: #0052D8;
		display: flex;
		height: 80px;
		justify-content: center;
		align-items: center;
		z-index: 200;
		.toptitle_left {
			padding-top: 20px;
			position: absolute;
			left: 10px;
			z-index: 1000;
		}
		.toptitle_title {
			color: #fff;
			font-size: 14px;
			padding-top: 20px;
		}
	}
	.article-list {
		.list {
			display: flex;
			align-items: center;
			width: 100%;
			min-height: 180rpx;
			margin-top: 40rpx;
			border-bottom: 2rpx solid #eaeaea;
			padding-bottom: 40rpx;
			background: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			.item {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;
				min-width: 0;
				.title {
					display: flex;
					text {
						font-size: 26rpx;
					}
				}
				.two-omit {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				.summary {
					margin-top: 8rpx;
					text {
						font-size: 24rpx;
						color: #666;
					}
				}
				.summary .two-omit {
					-webkit-line-clamp: 2;
				}
				.find-collect {
					margin-top: 10rpx;
					.find text {
						color: #9FABB5;
						font-size: 24rpx;
					}
				}
			}
			.thumb {
				flex-shrink: 0;
				margin-left: 20rpx;
				image {
					width: 180rpx;
					height: 120rpx;
					border-radius: 10rpx;
				}
			}
		}
		.empty-tip, .loading-tip, .nomore-tip {
			text-align: center;
			padding: 40rpx;
			color: #999;
			font-size: 28rpx;
		}
	}
</style>
