<template>
	<view class="content">
		<view class="goods-list">
			<view v-for="(item, index) in goodsList" :key="index" class="goods-item">
				<view class="listcard" @click="navToDetailPage(item)">
					<view class="listcard-image">
						<image :src="item.code=='交易物流'?pic1:pic2" mode="aspectFill"></image>
					</view>
					<view class="listcard-content">
						<view class="listcard-content_title">
							<text>{{item.code}}</text>
							<text class="text2">{{item.ctime | formatCreateTime }}</text>
						</view>
						<text class="listcard-content_title_text">{{item.params}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <uni-load-more :status="loadingType"></uni-load-more> -->
	</view>

</template>

<script>
	import Api from '@/common/api';
	import {
		formatDate
	} from '@/common/date';

	export default {
		data() {
			return {
				pageNum: 1,
				pic1: "http://mall.yyundong.com/wl.png",
				pic2: "http://mall.yyundong.com/tx.png",
				goodsList: [
					// {
					// 	title: "交易物流",
					// 	pic: "https://desk-fd.zol-img.com.cn/t_s960x600c5/g1/M0B/03/06/ChMljl402K6IOTZbAARWayFg6S4AAQJPwFhuRIABFaD752.jpg",
					// 	createTime: "02-12",
					// 	content: "您的订单商品已经到取货点，请在7日内取出。",
					// },
					// {
					// 	title: "云链助手",
					// 	pic: "https://ts1.cn.mm.bing.net/th/id/R-C.2ce48cd4a70b48403a56e9ea8c710355?rik=tU9CL%2fR0TMLEYA&riu=http%3a%2f%2fwww.kutoo8.com%2fupload%2fimage%2f63051471%2f4_1920x1080.jpg&ehk=wZm6BwD%2b8TIDXmqxTntxftDP8IzjD8g3hhI6bEwdb54%3d&risl=&pid=ImgRaw&r=0",
					// 	createTime: "01-10",
					// 	content: "春天已经至，已到施肥时间。",
					// }
				]
			};
		},

		onLoad(options) {
			// #ifdef H5
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
			// #endif

			// this.loadData();
		},
		onShow() {
			this.loadData();
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			// if (e.scrollTop >= 0) {
			// 	this.headerPosition = 'fixed';
			// } else {
			// 	this.headerPosition = 'absolute';
			// }
		},
		//下拉刷新
		onPullDownRefresh() {
			this.pageNum = this.pageNum + 1;
			this.loadData('refresh');
		},
		//加载更多
		onReachBottom() {
			this.pageNum = this.pageNum + 1;
			this.loadData();
		},
		filters: {
			formatCreateTime(time) {
				let date = new Date(time);
				return formatDate(date, 'MM-dd')
			},
		},
		methods: {
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type = 'add', loading) {
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return;
					}
					this.loadingType = 'loading';
				} else {
					this.loadingType = 'more';
				}
				let params = {};


				let list = await Api.apiCall('get', Api.member.mesList, params);
				console.log("消息列表", list)
				this.goodsList = list;
				// let goodsList = await this.$api.json('goodsList');
				// if (type === 'refresh') {
				// 	this.goodsList = [];
				// }

				// this.goodsList = this.goodsList.concat(goodsList);

				//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
				this.loadingType = this.goodsList.length > list.total ? 'nomore' : 'more';
				if (type === 'refresh') {
					if (loading == 1) {
						uni.hideLoading();
					} else {
						uni.stopPullDownRefresh();
					}
				}
			},
			//详情
			navToDetailPage(item) {
				console.log("消息>>>>", item)
				//测试数据没有写id，用title代替
				// let id = item.id;
				uni.navigateTo({
					url: '/pages/index/messageDetail',
					// 版本2.8.9+ 支持
					success: (res) => {
						// 和上面其实没差什么,但是这种方式是可以的 这里不是$emit
						res.eventChannel.emit('sendTestValue', {
							info: item
						})
					}
				});
			},
			stopPrevent() {}
		}
	};
</script>

<style lang="scss">
	page,
	.content {
		background: $page-color-base;
	}

	.listcard {
		display: flex;
		align-items: center;
		padding: 10px;
		margin: 15px;
		border-radius: 5px;
		box-shadow: 0 0 5px 1px rgba($color:#000000, $alpha:0.1);
		box-sizing: border-box;

		.listcard-image {
			flex-shrink: 0;
			width: 50px;
			height: 50px;
			border-radius: 5px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}

		}

		.listcard-content {
			display: flex;
			flex-direction: column;
			padding-left: 10px;
			width: 100%;
			justify-content: space-between;

			.listcard-content_title {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: 14px;
				color: #333;
				font-weight: 400;
				line-height: 1.2;
				position: relative;

				text {
					font-size: 22px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}

				.text2 {
					color: #999;
					font-size: 18px;
				}

			}

			.listcard-content_title_text {
				margin-top: 5px;
				font-size: 18px;
				color: #999;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.listcard-content_des {
				display: flex;
				justify-content: space-between;
				font-size: 12px;

				.listcard-content_des-label {
					display: flex;

					.listcard-content_des-label-item {
						padding: 0 5px;
						margin-right: 5px;
						border-radius: 15px;
						color: #f00;
						border: 1px #f00 solid;
					}
				}

				.listcard-content_des-browe {
					color: #999;
					font-size: 15px;
					line-height: 1.5;
				}
			}
		}

		&.mode-column {
			.list-content {
				width: 100%;
				padding-left: 0;
			}

			.listcard-image {
				display: flex;
				margin-top: 10px;
				width: 100%;
				height: 80px;

				.listcard-image_item {
					margin-left: 10px;
					width: 100%;
					border-radius: 5px;
					overflow: hidden;

					&:first-child {
						margin-left: 0;
					}

					image {
						width: 100%;
						height: 100%;
					}

				}
			}

			.listcard-content_des {
				margin-top: 10px;
			}
		}

		&.mode-image {
			flex-direction: column;

			.listcard-image {
				width: 100%;
				height: 100px;
			}

			.listcard-content {
				padding-left: 0;
				margin-top: 10px;

				.listcard-content_des {
					display: flex;
					align-items: center;
					margin-top: 10px;
				}
			}
		}
	}
</style>
