<template>
  <view v-if="userId > 0">
	  <view v-if="item.sendType == 1">
		  <view class="tip-box" v-if="item.contentType == 1">
		  		<text class="time">{{item.content}}</text>
		  </view>
		  <view class="tip-card" v-if="item.contentType == 2">
		  		  <!-- <image class="icon" src="@/static/images/help.png"></image> -->
		  		  <view class="content-box">
		  			  <view class="title">温馨提示</view>
		  			  <view class="content">{{item.content}}</view>
		  		  </view>
		  </view>
	  </view>
	  
	  <view v-if="item.sendType == 2">
		  <view class="tip-box" v-if="showTime(item, messageIndex)">
			<text class="time">{{showDayTime(item.createTime)}}</text>
		  </view>
		  <view class="chat-box left" v-if="item.sendUserId != userId">
			  <view class="avatar" @click="detail(item)">
				<u-avatar width="80rpx" height="80rpx" :src="item.sendAvatar"></u-avatar>
			  </view>
			  
			  <view class="content-box" v-if="item.contentType == 1">
				  <view class="content" >{{item.content}}</view>
			  </view>
			  <view class="content-box" v-if="item.contentType == 2">
				  <view class="content" >{{item.content}}</view>
				  <u-icon name="map-fill" color="#3D7EFF" size="40"></u-icon>
			  </view>
			  <view class="content voice" :class="item.id == playId ?'play':''" @click="playAudio(item)" v-if="item.contentType == 3">
				  <view class="icon">
					  <u-icon name="voice1" custom-prefix="iconfont" color="#080808" size="40"></u-icon>
				  </view>
				  <text>{{item.voiceSec}}”</text>
			  </view>
			  <view v-if="item.contentType == 4" @click="showPic(item)" class="msg-img">
				<u-image width="420rpx" border-radius="5px" height="220rpx" :fade="false" :src="item.content"></u-image>
			  </view>
			  <view v-if="item.contentType == 5" class="msg-img">
				<u-image width="200rpx" height="200rpx" :fade="false" :src="item.content"></u-image>
			  </view>
		  </view>
		  <view class="chat-box right" v-if="item.sendUserId == userId">
			  <view class="content-box" v-if="item.contentType == 1">
				  <u-icon v-if="item.readStatus" name="checkmark-circle-fill" color="#00c8b0" size="40"></u-icon>
				  <u-icon v-else name="checkmark-circle" color="#00c8b0" size="40"></u-icon>
				  <view class="content" >{{item.content}}</view>
			  </view>
			  
			  <view class="content-box" v-if="item.contentType == 2">
				  <u-icon name="map-fill" color="#3D7EFF" size="40"></u-icon>
				  <view class="content" >{{item.content}}</view>
			  </view>
			  
			  <view class="content-box" v-if="item.contentType == 3">
				  <u-icon v-if="item.readStatus" name="checkmark-circle-fill" color="#00c8b0" size="40"></u-icon>
				  <u-icon v-else name="checkmark-circle" color="#00c8b0" size="40"></u-icon>
				  <view class="content voice" :class="item.id == playId ?'play':''" @click="playAudio(item)">
					  <text>{{item.voiceSec}}”</text>
					  <view class="icon">
						  <u-icon name="chat_voice" custom-prefix="iconfont" color="#fff" size="40"></u-icon>
					  </view>
				  </view>
			  </view>
			  
			  <view class="content-box" v-if="item.contentType == 4">
				  <u-icon v-if="item.readStatus" name="checkmark-circle-fill" color="#00c8b0" size="40"></u-icon>
				  <u-icon v-else name="checkmark-circle" color="#00c8b0" size="40"></u-icon>
				  <view class="msg-img" @click="showPic(item)">
					<u-image width="420rpx" border-radius="5px" height="220rpx" :fade="false" :src="item.content"></u-image>
				  </view>
			  </view>
			  
			  <view class="content-box" v-if="item.contentType == 5">
				  <u-icon v-if="item.readStatus" name="checkmark-circle-fill" color="#00c8b0" size="40"></u-icon>
				  <u-icon v-else name="checkmark-circle" color="#00c8b0" size="40"></u-icon>
				  <view class="msg-img">
					<u-image width="200rpx" height="200rpx" :fade="false" :src="item.content"></u-image>
				  </view>
			  </view>
			  
			  <view class="avatar" @click="detail(item)">
				<u-avatar width="80rpx" height="80rpx" :src="item.sendAvatar"></u-avatar>
			  </view>
		  </view>
	  </view>
	  
  </view>
</template>

<script>
	import dayjs from 'dayjs';
	import isToday from "dayjs/plugin/isToday";
	import isYesterday from "dayjs/plugin/isYesterday";
	dayjs.extend(isToday);
	dayjs.extend(isYesterday);
	import sheep from '@/sheep';
	export default {
		props: {
			item: {
				type: Object,
				default: {
					createTime: 0,
				},
			},
			// 消息索引
			messageIndex: {
			  type: Number,
			  default: 0,
			},
			// 消息列表
			messageList:{
			  type: Array,
			  default: () => [],
			},
			playId: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				userId: 0,
			}
		},
		created() {
			var user = sheep.$store('user').userInfo;
			this.userId = user.id;
		},
		methods: {
			// 预览图片
			showPic(e) {
				uni.previewImage({
					indicator: "none",
					current: e.content,
					urls: [e.content],
				});
			},
			detail(e) {
				sheep.$router.go('/pages/user/detail/index',{id: e.sendUserId});
			},
			playAudio(e) {
				this.$emit('playAudio', e);
			},
			formatDate(date, format= 'YYYY-MM-DD HH:mm:ss') {
			  // 日期不存在，则返回空
			  if (!date) {
			    return ''
			  }
			  // 日期存在，则进行格式化
			  if (format === undefined) {
			    format = 'YYYY-MM-DD HH:mm:ss'
			  }
			  return dayjs(date).format(format);
			},
			showDayTime(datetime) {
			  if (!datetime) return "";
			  const weeks = [
			   "星期日",
			   "星期一",
			   "星期二",
			   "星期三",
			   "星期四",
			   "星期五",
			   "星期六",
			  ];
			  // 当天 显示时分
			  if (dayjs(datetime).isToday()) {
			    return dayjs(datetime).format("HH:mm");
			  }
			  // 昨天 昨天+时分
			  if (dayjs(datetime).isYesterday()) {
			    return `昨天 ${dayjs(datetime).format("HH:mm")}`;
			  }
			  // 本周 显示周几+时分
			  if (dayjs().isSame(datetime, "week")) {
			    const weekIndex = dayjs().day();
			    return `${weeks[weekIndex]} ${dayjs(datetime).format("HH:mm")}`;
			  }
			  // 本周之前 显示年月日
			  if (dayjs(datetime).isBefore(new Date(), "week")) {
			    return dayjs(datetime).format("YYYY-MM-DD");
			  }
			},
			showTime(item, index) {
				// 最后一个
				var createTime = new Date().getTime();
				if(index > 0){
					var message = this.messageList[index + 1];
					if(message){
						createTime = message.createTime;
					} 
				}
				
				let dateString = dayjs(createTime).fromNow();
				let nowDateString = dayjs(item.createTime).fromNow();
				return dateString !== nowDateString;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.chat-box {
		padding: 6px 12px;
		display: flex;
		
		.content-box {
			display: flex;
			align-items: center;
		}
	}
	.left {
		.content {
			border-radius: 0px 8px 8px;
			width: fit-content;
			background-color: #fff;
			color: #080808;
			padding: 8px;
			margin: 8px;
			text-align: justify;
			max-width: 470rpx;
			font-size: 11px;
			font-family: Helvetica Neue, Helvetica, sans-serif;
			align-items: center;
			display: flex;
		}
		
		.msg-img {
			margin: 8px;
		}
		
		.icon {
			margin-right: 5px;
		}
		
		.play{
			
			.icon {
				color: #fff;
			}
			
			.icon:after
			{
				border-right: solid 3px #fff;
				animation: other-play 1s linear infinite;
				z-index: 9;
			}
			
		}
	}
	
	.right {
		display: flex;
		justify-content: flex-end;
		
		.content {
			border-radius: 8px 0px 8px 8px;
			width: fit-content;
			background-color: #00c8b0;
			color: #080808;
			padding: 8px;
			margin: 8px;
			color: #fff;
			text-align: justify;
			max-width: 470rpx;
			font-size: 11px;
			font-family: Helvetica Neue, Helvetica, sans-serif;
			align-items: center;
			display: flex;
		}
		
		.msg-img {
			margin: 8px;
		}
		
		.icon {
			margin-left: 5px;
		}
		
		.play{
			
			.icon {
				color: #fff;
			}
			
			.icon:after
			{
				border-left: solid 3px #00c8b0;
				animation: my-play 1s linear infinite;
				z-index: 9;
			}
			
		}
		
	}
	
	@keyframes my-play {
		0% {
			transform: translateX(80%);
		}
		100% {
			transform: translateX(0%);
		}
	}
	
	@keyframes other-play {
		0% {
			transform: translateX(-80%);
		}
		100% {
			transform: translateX(0%);
		}
	}
	
	.voice{
		.icon{
			font-size: 40upx;
			display: flex;
			align-items: center;
		}
		.icon:after
		{
			content:" ";
			width: 20px;
			height: 20px;
			border-radius: 100%;
			position: absolute;
			box-sizing: border-box;
		}
	}
	
	
	.avatar {
		margin-top: 8px;
	}
	
	.tip-box {
		display: flex;
		justify-content: center;
		padding: 7px 0;
		padding: 7px 20px;
		text-align: center;
		
		.time {
			color: #aaaaaa;
			font-size: 10px;
		}
	}
	
	.tip-card {
		display: flex;
		justify-content: center;
		background-color: #fff;
		border-radius: 3px;
		padding: 7px;
		margin: 12px;
		text-align: justify;
		
		.icon {
			width: 60rpx;
			height: 60rpx;
		}
		
		.content-box {
			display: flex;
			flex-direction: column;
			flex: 1;
			margin-left: 7px;
			
			.title {
				font-size: 11px;
				color: #333333;
			}
			
			.content {
				margin-top: 3px;
				color: #aaaaaa;
				font-size: 10px;
			}
		}
	}
</style>