<template>
	<view class="msg-view">
		<scroll-view class="msg-view-p" scroll-y="true" :scroll-top="msgPanelScrollTop">
			<view id="chatArea">
				<view class="chat-area-line" v-for="(item,index) in msgList">

					<view class="system-msg"
						:style="{'flex-direction':((item.userName.length + item.content.length)<15?'row':'')}"
						v-if="item.msg_type == 'system'">
						<view class="system-msg-detail ">
							<text class="system-msg-detail-username " v-for="i in item.userName">{{i}}</text>
							<text class="system-msg-detail-content " v-for="i in ':'">{{i}}</text>
							<text class="system-msg-detail-content " v-for="i in item.content">{{i}}</text>
						</view>
					</view>

					<view class="user-msg"
						:style="{'flex-direction':((item.userName.length + item.content.length)<15?'row':'')}" v-else>
						
						<view class="user-msg-detail">
							<view class="user-msg-detail-tag">
								<!-- <text style="text-align: center;font-size: 20px;color: #DD524D;">★1</text> -->
								<!-- 这里可以根据用户等级显示图片 -->
								<image :src="item.avatar" class="user-msg-detail-tag"></image>
							</view>
							<text class="user-msg-detail-username" v-for="i in item.userName"
								@click="test(item.userName)">{{i}}</text>
							<text class="user-msg-detail-content" v-for="i in ':'">{{i}}</text>
							<text class="user-msg-detail-content" v-for="i in item.content">{{i}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		name: 'MhMsgList',
		props: {
			msgList: {
				type: [Object, Array],
				default: [{
					userName: "系统通知",
					content: "直播倡导绿色直播，严禁发布涉黄涉毒涉赌，严禁发布涉政、违法及低俗违规内容。健康直播，文明互动",
					cmd: "say",

					msg_type: "system"
				}, ]
			},
			msgPanelScrollTop: {
				type: [Number, String],
				default: 0
			}
		},
		mounted() {


		},

		methods: {
			test(e) {
				uni.showToast({
					title: e,
					icon: 'none'
				})
			},

			setMsgPanelScroll() {
				var that = this;
				setTimeout(function() {
					const query = uni.createSelectorQuery().in(that);
					query.select('#chatArea').boundingClientRect(data => {
						that.msgPanelScrollTop = data.height - 200;
					}).exec();
				}, 50)


			},
		}

	}
</script>
<style lang="scss" scoped>
	.msg-view-p {
		display: flex;
		width: 550rpx;
		height: 550rpx;


	}


	.chat-area-line {
		width: 550upx;

		flex-direction: row;
		margin-bottom: 5upx;
	}

	.system-msg {
		width: 550upx;
		margin-bottom: 5upx;
	}

	.system-msg-detail {
		// max-width: 550upx;

		padding: 10upx;
		border-radius: 30upx;
		background-color: rgba($color: #000000, $alpha: 0.4);
		flex-direction: row;
		flex-wrap: wrap;
		margin-right: 14upx;

		>.system-msg-detail-username {
			color: red;
			font-size: 32upx;
			font-weight: 400;
			line-height: 40upx;

		}

		>.system-msg-detail-content {
			font-size: 32upx;
			font-weight: 400;
			line-height: 40upx;
			color: #A0CFFF;
		}
	}

	.user-line {
		// max-width: 530upx;
		padding: 10upx;
		color: #FFFFFF;
		flex-direction: row;
		border-radius: 30upx;
		background-color: rgba($color: #000000, $alpha: 0.4);
		margin-right: 14upx;
		font-size: 28upx;
		font-weight: 400;
		line-height: 40upx;
	}

	.user-msg {
		width: 530upx;


		margin-bottom: 5upx;
	}

	.user-msg-detail-tag {
		width: 40upx;
		height: 40upx;
		border-radius: 50%;

	}

	.user-msg-detail {
		padding: 10upx;
		border-radius: 30upx;
		background-color: rgba($color: #000000, $alpha: 0.4);
		flex-direction: row;
		flex-wrap: wrap;
		margin-right: 14upx;



		>.user-msg-detail-username {
			color: #A0CFFF;
			font-size: 32upx;
			font-weight: 400;
			line-height: 40upx;
		}

		>.user-msg-detail-content {
			font-size: 32upx;
			font-weight: 400;
			line-height: 40upx;
			color: #fff;
		}
	}
</style>