<template>
    <div class="message-item-wrap" :class="messageInfo.messageType">
        <div class="message-icon"><img :src="IconSrc"  v-if="IconSrc"/></div>
        <div class="message-info">
            <span class="message-time" :class="messageInfo.messageType">{{messageInfo.messageTime}}</span>
            <div class="message-text" :class="messageInfo.messageType" v-if="!isPlay">{{messageInfo.messageText}}</div>
            <div class="message-text typing" :class="messageInfo.messageType" v-else>{{typingText}}</div>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        messageInfo:{
            type:Object,
            default:()=>{
                return {
                    messageId:1,
                    messageTime:'2023/4/28 21:22:22',
                    modelName:'gpt-3.5-turbo',//模型名称
                    messageText:`PTA是精对苯二甲酸的英文缩写.........`,
                    messageType:'answer',//消息类型:question or answer
                }
            }
        }
    },
    data() {
        return {
            iconMap:{
                'user':require('@/assets/img/set_m/user_img.png'),
                'gpt-3.5-turbo':require('@/assets/img/icons/chat-gpt.png'),
                'gpt-3.5-turbo-16k':require('@/assets/img/icons/chat-gpt-16k.png'),
                'eta':require('@/assets/img/icons/horizon.png')
            },
            isPlay:false,//是否播放动画
            typingText:'',
        };
    },
    watch:{
        'messageInfo.isPlay':{
            handler(newVal){
                if(newVal){
                    this.isPlay = true
                    this.playTyping()
                }
            },
            immediate:true
        }
    },
    computed:{
        IconSrc(){
            const {messageType,modelName} = this.messageInfo
            const iconType = messageType==='question'?'user':modelName
            return this.iconMap[iconType]||''
        }
    },
    methods: {
        async playTyping(){
            const writeText = (text,delay=150)=>{
                return new Promise((res,rej)=>{
                    setTimeout(()=>{
                        this.typingText+=text
                        res()
                    },delay)
                })
            }
            const textArr = this.messageInfo.messageText.split('')
            console.log('start typing')
            this.$emit('startTyping')
            for(let index=0;index<textArr.length;index++){
                //this.typingText+=textArr[index]
                await writeText(textArr[index])
            }
            console.log('finish typing')
            this.isPlay = false
            this.typingText=''
            this.$emit('finishedTyping',this.messageInfo)
        }
    },
};
</script>

<style scoped lang="scss">
.message-item-wrap{
    display: flex;
    margin-bottom: 30px;
    .message-icon{
        margin-right: 20px;
        img{
            width:38px;
            height:38px;
        }
    }
    .message-info{
        .message-time{
            color:#999999;
            display: block;
            &.question{
                text-align: right;
            }
        }
        .message-text{
            margin-top:12px;
            border-radius: 8px;
            padding:14px 20px;
            display: inline-block;
            white-space: pre-line;
            &.answer{
                background-color: #F4F4F4;
            }
            &.question{
                background-color: #E3EFFD;
            }
            &.typing{
                &::after{
                    content: '|';
                    animation: blink 1s infinite
                }
            }
        }
    }
    &.question{
        flex-direction: row-reverse;
        .message-icon{
            margin-right: 0;
            margin-left: 20px;
        }
    }

    @keyframes blink{
        from{
            opacity: 0;
        }
        to{
            opacity: 1;
        }
    }
}
</style>
