<template>
	<view class="content">
		<view class="his" v-for="item in list">
			<view class="flex user">
				<image :src="item.uid_avatar?item.uid_avatar: 'https://api.myjie.cn/static/img/logo.png'" mode=""
					class="u-avt"></image>
				<view class="u-nickname clamp">
					<view class="">
						{{item.uid_nickname ? item.uid_nickname: '微信用户'}}
					</view>
					<view class="time">
						{{item.create_time}}
					</view>
				</view>
			</view>
			<view class="pl">
				{{item.content}}
			</view>
			<view class="pl-img">
				<image v-for="items,index in item.imgs" class="img" :src="items" mode="" @click="previewImage(item.imgs,items)"></image>
			</view>
		</view>
		<empty v-if="list.length == 0 && loaded"></empty>
		<uni-load-more v-else :status="loading"></uni-load-more>
	</view>
</template>

<script>
	import empty from '@/components/empty/empty.vue'
	import {
		getPlList
	} from '@/api/signing.js'
	export default {
		components: {
			empty
		},
		data() {
			return {
				loaded: false,
				list: [],
				loading: 'more',
				id: 0,
				page: 1,
				limit: 10
			}
		},
		methods: {
			getList() {
				if (this.loading == 'loading' || this.loading == 'noMore') return;
				this.loading = 'loading'
				getPlList({
					to_uid: this.id,
					page: this.page,
					limit: this.limit
				}).then(res => {
					// console.log(res);
					this.list = this.list.concat(res.data.list)
					if (res.data.list.length == this.limit) {
						this.loading = 'more'
					} else {
						this.loading = 'noMore'
					}
					this.loaded = true
				})
			},
			previewImage(images, item) {
				uni.previewImage({
					urls: images,
					current: item,
					success: function(res) {
						console.log('预览图片成功');
					},
					fail: function(res) {
						console.log('预览图片失败', res);
					}
				});
			},
		},
		onLoad(opt) {
			this.id = opt.id
			this.getList()
		},
		onReachBottom() {
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.user {
		justify-content: flex-start;

		.u-avt {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}

		.u-nickname {
			font-size: 30rpx;
			font-weight: bold;
			margin-left: 15rpx;
			.time {
				color: #999;
				font-size: 24rpx;
			}
		}
	}

	.pl {
		font-size: 26rpx;
		padding: 10rpx 0 10rpx 70rpx;
	}

	.content {
		height: 100vh;
		background-color: #fff;
	}

	.his {
		padding: 20rpx;
		border-bottom: 1px dashed #eee;

		&-tit {
			padding-left: 28rpx;
			height: 68rpx;
			line-height: 68rpx;
			background: #EDF8FE;
			font-size: 32rpx;
			color: #000000;
		}

		&-info {
			padding-left: 28rpx;
			font-size: 28rpx;
			color: #000000;
			line-height: 55rpx;
			margin: 20rpx 0;
		}
	}

	.pl-img {
		display: flex;
		justify-content: flex-start;
		padding: 20rpx;
		padding-left: 70rpx;

		.img {
			width: 200rpx;
			height: 200rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
			border: #eee 1rpx solid;
		}
	}
</style>