<template>
	<view :class="['message-item', detail.isRobotMessage?'':'message-item-my']">
		<view class="message-robot-wrap" v-if="detail.isRobotMessage">
			<view class="robot-icon">
				<image  src="@/static/chat/bot2.png" mode=""></image>
			</view>
			<view class="text-message-wrap">
				{{ detail.message }}
			</view>
		</view>
		<view class="message-wrap" v-else>
			{{ detail.message }}
		</view>
	</view>
</template>

<script setup lang="ts">
	const props = defineProps({
		detail: {
			type: Object,
			default: {}
		}
	})
</script>

<style lang="scss" scoped>
	.message-item{
		display: flex;
		padding: 0 60rpx 32rpx 34rpx;
		.message-robot-wrap{
			display: flex;
			.robot-icon{
				height: 64rpx;
				width: 64rpx;
				border-radius: 50%;
				background-color: #000;
				padding: 16rpx;
				margin-right: 16rpx;
				image{
					height: 100%;
					width: 100%;
				}
			}
			.text-message-wrap{
				flex: 1;
				background-color: #fff;
				color: #303437;
				font-size: 32rpx;
				padding: 32rpx;
				word-break: break-all;
				text-align: justify;
				border-radius: 0 48rpx 48rpx 48rpx;
			}
		}
	}
	.message-item-my{
		justify-content: flex-end;
		padding-left: 114rpx;
		.message-wrap{
			background-color: #0070F0;
			font-size: 32rpx;
			color: #fff;
			padding: 20rpx 32rpx;
			border-radius: 48rpx;
			word-break: break-all;
			text-align: justify;
		}
	}
</style>