<template>
	<view class="content">
		<block v-if="messageArr.length >= 1">
			<view class="vertical null-list">
				<u-empty
					icon="http://cdn.uviewui.com/uview/empty/message.png"
					textColor="#999"
					text="暂无好友消息"
				>
					<template>
						<view class="null-list-btn" @click="openChum">开启聊天</view>
					</template>
				</u-empty>
			</view>
		</block>
		<block v-else>
			<!-- <button type="default">连接</button> -->
			<!-- <button type="default">发送</button> -->
			
			<view v-for="item in 2" :key="item" class="mssage-box">
				<view class="mssage-action" @click="$Router.push({name: 'ImChat'})">
					<u-avatar
						clsss="mssage-action-cover"
						src="https://cdn.uviewui.com/uview/album/1.jpg"
						size="44"
						text="唐"
						font-size="14"
						randomBgColor
					></u-avatar>
					<view class="mssage-action-content">
						<view class="mssage-header">
							<view class="header-name">唐明明</view>
							<view class="header-time">2021/12/31</view>
						</view>
						<view class="mssage-msg">消息</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import { init, connect } from '@rongcloud/imlib-uni'
	export default {
		data() {
			return {
				messageArr	 : [],
				optionsAction: [
					{
						text: '删除',
						style: {
							backgroundColor: '#e6576b'
						}
					}
				]
			};
		},
		methods:{
			openChum(){
				this.$Router.push({name: 'ImChum'})
				console.log("好友列表")
			}
		},
		onNavigationBarButtonTap(e) {
			switch (e.index){
				case 1:
					this.openChum()
					break;
				case 0:
					console.log("扫码添加好友")
					break;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background-color: $window-color;
		min-height: 100vh;
		.null-list{
			height: 100vh;
			text-align: center;
			&-btn{
				margin-top: $margin * 2;
				line-height: 70rpx;
				color: $main-color;
				border:solid 1rpx $main-color;
				padding: 0 ($padding*3);
				font-size: $title-size-m;
				border-radius: 35rpx;
				box-sizing: border-box;
			}
		}
		.mssage-box{
			background: white;
			.mssage-action{
				position: relative;
				padding: 20rpx $padding;
				&::after{
					position: absolute;
					left: $padding + 108;
					right: 0;
					bottom: 0;
					content: " ";
					height: 1rpx;
					background: $border-color;
				}
				&-content{
					position: absolute;
					top: 20rpx;
					height: 44px;
					left: $padding + 108;
					right: $margin;
					display: flex;
					flex-direction: column;
					justify-content: center;
					.mssage-header{
						display: flex;
						font-size: $title-size;
						line-height: 40rpx;
						justify-content: space-between;
						.header-name{
							flex: 1;
							@extend .nowrap;
						}
						.header-time{
							padding-left: $padding;
							font-size: $title-size-sm - 2;
							color: $text-gray;
						}
					}
					.mssage-msg{
						font-size: $title-size-sm - 2;
						color: $text-gray;
						@extend .nowrap;
					}
				}
			}
			&-item:last-child{
				.mssage-action::after{
					display: none;
				}
			}
		}
	}
</style>
