<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>
			<view v-for="(item, index) in messageArr" :key="index" class="mssage-box">
				<view class="mssage-action" @click="openChum">
					<block v-if="item.cover === ''">
						<u-avatar
							clsss="mssage-action-cover"
							size="44"
							:text="item.text"
							font-size="14"
							randomBgColor
						></u-avatar>
					</block>
					<block v-else>
						<u-avatar
							clsss="mssage-action-cover"
							:src="item.cover"
							size="44"
						></u-avatar>
					</block>
					<view class="mssage-action-content">
						<view class="mssage-header">
							<view class="header-name">{{item.name}}</view>
							<view class="header-time">{{item.time}}</view>
						</view>
						<view class="mssage-msg">{{item.message}}</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	// import { init, connect } from '@rongcloud/imlib-uni'
	export default {
		data() {
			return {
				messageArr	 : [
					{
						cover: 'https://cdn.uviewui.com/uview/album/1.jpg',
						name: '班班五月',
						message: '咱们进直播间了吗？上课啦~今天教大家【拆解项目背后的逻辑】',
						time: '昨天'
					},
					{
						cover: 'https://cdn.uviewui.com/uview/album/4.jpg',
						name: '周磊',
						message: '[语音]',
						time: '周一'
					},
					{
						cover: '',
						text: 'S',
						name: 'SKY',
						message: '谢谢',
						time: '2022/1/5'
					},
					{
						cover: 'https://cdn.uviewui.com/uview/album/5.jpg',
						name: '俊少',
						message: '[语音]',
						time: '2022/1/4'
					},
				],
				optionsAction: [
					{
						text: '删除',
						style: {
							backgroundColor: '#e6576b'
						}
					}
				]
			};
		},
		methods:{
			openChum(){
				uni.showToast({
					title: '聊聊系统正在开发中，敬请期待',
					icon : 'none'
				})
			}
		},
		onNavigationBarButtonTap(e) {
			
			switch (e.index){
				case 1:
					uni.showToast({
						title: '聊聊好友系统正在开发中，敬请期待',
						icon : 'none'
					})
					break;
				case 0:
					uni.showToast({
						title: '聊聊扫一扫系统正在开发中，敬请期待',
						icon : 'none'
					})
					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>
