<template>
	<view class="g-components-chat-message g_fs_17 g_flex_row_start" >
		<div class="g_flex_column_center">
			{{displayedMessage}}
		</div>
	</view>
</template>

<script>
	export default {
		props: {
			cusMessage: {
				type: String,
				default: () => {
					return '';
				},
			},
			isRender:{
				default: () => {
					return 0;
				},
			}
		},
		data(){
			return {
				isShow:0,
				displayedMessage: ''
			}
		},
		watch: {
			cusMessage: {
				handler(newVal) {
					console.log('newVal',newVal)
					const hasDot = newVal.endsWith('。');
					const messageWithoutDot = hasDot ? newVal.slice(0, -1) : newVal;
					this.displayedMessage = messageWithoutDot;
					if (this.isShow) {
							this.displayedMessage = messageWithoutDot + '...';
					} else {
							this.displayedMessage = hasDot ? messageWithoutDot + '。' : messageWithoutDot;
					}
				},
				immediate: true
			},
			'isRender': {
					handler(newVal) {
							this.isShow = newVal;
							const hasDot = this.cusMessage.endsWith('。');
							const messageWithoutDot = hasDot ? this.cusMessage.slice(0, -1) : this.cusMessage;
							this.displayedMessage = this.isShow ? messageWithoutDot + '...' : (hasDot ? messageWithoutDot + '。' : messageWithoutDot);
					},
					immediate: true
			}
		},
		created(){
			this.isShow = this.isRender;
		},
		methods:{
			
		}
	};
</script>

<style>
</style>