<template>
    <el-dialog title="机器写作" :visible.sync="dialogVisible" width="60%" :before-close="handleClose" :close-on-click-modal="false">
        <div class="info-messageInfo">
            <div class="messageInfo-content">
                <div id="chatContent" class="chatContent" ref="chatContent">
                    <div v-for="item in chatMessageList" class="everyMessage">
                        <div :style="{ justifyContent: item.type == 1 ? 'flex-end' : 'flex-start' }">
                            <template v-if="item.type==2">
                                <!-- <img class="otherSidesAvatarImg" :src="avatar" alt=""> -->
                                <div class="otherSides">
                                    <!-- <div class="otherSides-user">{"机器"}</div> -->
                                    <div class="otherSides-text" v-html="item.message"
                                        style="background-color: white;" v-if="item.message!=''">
                                    </div>
                                    <i class="el-icon-loading" style="color:white" v-else></i>
                                </div>
                            </template>
                            <template v-else>
                                <div class="mySides-text" v-html="item.message"
                                    style="background-color: #85ce61;">
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
                <div class="chatSendMessage">
                    <div class="messageContent">
                        <!-- <div ref="editor" class="preview" contenteditable @keyup.enter="handleSubmit"></div> -->
                        <!-- onpaste="this.value=this.value.replace(/\r|\n/ig,'')" onkeyup="this.value=this.value.replace(/\r|\n/ig,'')" -->
                        <el-input ref="inputs" :disabled="disableds" style="border: 1px solid #6d6d6d;" type="textarea" autosize @keyup.native="handleSubmit($event)" placeholder="请输入内容回车搜索" v-model="sendMessage" >
                        </el-input>
                    </div>
                    <div class="sendMessageButtonList">
                        <el-button size="mini" type="success" @click="sendMessageFn" :disabled="disableds">发送</el-button>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>


<script>
import avatar from '../../../assets/img/ddkz/headPhoto.jpg';
import { getProblemResult } from '../../../api/machineWriting';
export default {
    data() {
        return {
            dialogVisible: false,
            chatMessageList: [],
            sendMessage:'',
            historyList:[],
            avatar: avatar,
            disableds:false,
        }
    },
    props: {
        visible: Boolean
    },
    methods: {
        handleClose() {
            this.$emit('handleCancel');
        },
        sendMessageFn(){
            if(!this.disableds){
                this.chatMessageList.push({type:1,message:this.sendMessage})
                this.chatMessageList.push({type:2,message:''});
                this.queryResult(this.sendMessage)
                this.sendMessage = '';
            }
        },
        queryResult(text){
            this.$nextTick(() => {
                this.keepBottom();
            });
            this.disableds = true;
            getProblemResult({
                text:text,
                top_p:0.8,
                temperature:0.85,
                history:this.historyList
            }).then((res)=>{
                this.historyList.push({human:text,bot:res});
                this.chatMessageList[this.chatMessageList.length-1].message = res;
                this.$nextTick(() => {
                    this.keepBottom();
                });
                this.disableds = false;
            }).catch(err=>{
                console.log(err);
                this.disableds = false;
            })
        },
        handleSubmit(event){
            if (event.keyCode == 13) {
                if (!event.ctrlKey) {
                    event.preventDefault();
                    this.sendMessageFn();
                } else {
                    this.sendMessage += '\n';
                }
            }
        },
        keepBottom() {
            this.$refs.chatContent.scrollTop = this.$refs.chatContent.scrollHeight;
        },

    },
    mounted() {
        this.dialogVisible = this.$props.visible;
    },
    watch:{
        disableds: function (val) {
            if(!val){
                this.$nextTick((_) => {
                    this.$refs.inputs.focus();
                })
            }
        }
    }
}
</script>

<style lang="scss">
.el-dialog {
    padding: 20px;
    box-sizing: border-box;
    background-color: transparent;
    background-image: url(../../../assets/img/home/dialog.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .info-messageInfo {
        width: 100%;
        height: 60%;

        .title {
            width: 100%;
            height: 30px;
            line-height: 30px;

            img {
                width: 20px;
                height: 20px;
            }

            span {
                font-size: 16px;
                font-weight: 500;
                color: white;
                vertical-align: text-bottom;
            }
        }

        .messageInfo-content {
            width: 100%;
            height: calc(100% - 40px);
            margin-top: 10px;
            padding: 0px 10px;
            border: 1px solid #515151c9;
            box-sizing: border-box;

            .chatContent {
                width: 100%;
                height: 74%;
                border-bottom: 1px solid #37383f;
                padding: 10px 0px;
                box-sizing: border-box;
                overflow-y: auto;

                .everyMessage {
                    width: 100%;
                    margin-top: 10px;

                    &>div {
                        width: 100%;
                        display: flex;
                        align-items: flex-start;
                        margin-top: 10px;
                        font-size: 13px;



                        .otherSidesAvatarImg {
                            width: 20px;
                            height: 20px;
                            margin: 5px 10px 0px 10px;
                        }

                        .mySidesAvatarImg {
                            width: 20px;
                            height: 20px;
                            margin: 0px 10px;
                        }

                        &>div {
                            max-width: 50%;

                            .otherSides-user {
                                color: white;
                                margin-bottom: 5px;
                            }

                            .otherSides-text {
                                border-radius: 5px;
                                color: black;
                                margin-bottom: 5px;
                                padding: 5px 10px;
                            }


                            .el-imgage {
                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }

                        .mySides-text {
                            border-radius: 5px;
                            color: black;
                            margin-bottom: 5px;
                            padding: 5px 10px;
                        }


                    }
                }
            }

            .chatSendMessage {
                width: 100%;
                height: 25%;
                position: relative;

                .messageContent {
                    width: 100%;
                    height: 100%;
                    padding: 5px 0px;
                    box-sizing: border-box;

                    .preview {
                        width: 100%;
                        height: 100%;
                        padding: 10px;
                        box-sizing: border-box;
                        color: white;
                        border: 1px solid #474748;
                        outline: none;
                        /* 隐藏聚焦时外边框 */
                        white-space: pre-wrap;
                        overflow: hidden;
                        overflow-y: auto;
                        word-break: break-all;
                    }

                    .el-textarea__inner {
                        height: 100% !important;
                        color: white !important;
                        background-color: transparent !important;
                        border: 1px solid #37383f !important;
                    }
                }

                .sendMessageButtonList {
                    position: absolute;
                    right: 10px;
                    bottom: 15px;
                }
            }
        }
    }
}
</style>