<template>
	<view class="msg">
		<!-- 消息为空 -->
		<view class="msg-null" v-if="msgs.length <= 0">
			<image class="icon" src="@/static/im/icon_03.png" mode="widthFix"></image>
			<text>暂无好友消息</text>
		</view>
		<!-- 消息列表 -->
		<view class="msg-list" v-else>
			<view class="item-flex" v-for="(item,index) in msgs" :key="index" @click="onMsg(item.id)">
				<u-avatar
					:text="surname(item.nickname)"
					fontSize="18"
					size="42"
					shape="square"
					randomBgColor
				></u-avatar>
				<view class="item-content"> 
					<view class="nickname nowrap">
						<view class="nowrap">{{item.nickname}}</view>
						<view class="time">{{item.time}}</view>
					</view>
					<view class="lastmsg nowrap">{{item.latmsg}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msgs: [
					{
						nickname: '张静',
						cover	: require('@/static/imgs/famous_img.png'),
						latmsg	: '我的业务办理的怎么样了？',
						time	: '10:00'
					}, {
						nickname: 'Utest',
						cover	: "",
						latmsg	: '我的业务办理的怎么样了？',
						time	: '10:00'
					}, {
						nickname: '唐明阳',
						cover	: "",
						latmsg	: '我的业务办理的怎么样了？',
						time	: '10:00'
					}
				]
			};
		},
		computed: {
			surname(){
				return (nickname) => {
					return nickname.substring(0,1)
				}
			}
		},
		onShow() {
			// this.$nim.msg()
		},
		methods: {
			onMsg(id){
				let cartId = id || null
				this.$Router.push({
					name	: 'ImChat',
					params	: { cartId } 
				})
			},
		}
	}
</script>

<style lang="scss">
	.msg{ }
	// 消息空的
	.msg-null{
		height: 88vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.icon{
			width: 188rpx;
			opacity: .3;
		}
		text{
			font-size: 32rpx;
			color: #888;
		}
	}
	// 消息信息
	.item-flex{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 20rpx 30rpx;
		align-items: center;
		.item-content{
			width: calc(100% - 42px);
			padding-left: 30rpx;
			box-sizing: border-box;
			.nickname{
				position: relative;
				padding-right: 230rpx;
				font-weight: bold;
				line-height: 50rpx;
			}
			.lastmsg{
				line-height: 42rpx;
				height: 42rpx;
				color: gray;
				font-size: 28rpx;
			}
			.time{
				position: absolute;
				right: 0;
				top: 0;
				width: 200rpx;
				color: gray;
				font-size: 28rpx;
				font-weight: normal;
				text-align: right;
			}
		}
	}
</style>
