<template>
  <section class="chat">
    <el-row align="middle" class="mar-b16">
      <ai-model :model="config.model"/>
      <el-row justify="end" class="fill mar-l8 gap-8">
        <!--聊天操作栏-->
        <div class="optIcon clear" @click="chatHistory=[]"/>
        <div class="optIcon setting" :class="{active:$attrs.showSettings}" @click="$emit('setting')"/>
      </el-row>
    </el-row>
    <thinking-bar v-show="loading"/>
    <el-row class="fill">
      <meta-human :voice="speech"/>
      <chat-content class="fill" :list="chatHistory" ref="chatContent"/>
    </el-row>
    <el-row class="mar-t8" align="middle">
      <chat-input class="fill mar-r8" v-model="inputText" @enter="handleSend"/>
      <el-button type="primary" @click="handleSend">发送</el-button>
    </el-row>
  </section>
</template>

<script>
import {dayjs} from "element-plus";
import ChatContent from "../components/chatContent";
import ChatInput from "../components/chatInput";
import ThinkingBar from "../components/thinkingBar";
import AiModel from "../ui/AiModel";
import {USER_AVATAR} from "../utils/env";
import MetaHuman from "./metaHuman.vue";

export default {
  name: "chat",
  components: {MetaHuman, AiModel, ChatContent, ChatInput, ThinkingBar},
  props: {
    config: {default: () => ({})}
  },
  data() {
    return {
      loading: false,
      inputText: "",
      chatHistory: [],
      speech: ""
    }
  },
  methods: {
    handleSend() {
      if (!!this.inputText) {
        const ai = this.config.model
        const myMsg = {
          avatar: USER_AVATAR,
          name: "我",
          time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
          msg: this.inputText,
          chatType: 0, //信息类型，0文字，1图片
          uid: "me", //uid
          role: "user"
        }
        this.chatHistory.push(myMsg)
        this.inputText = "" //置空已发送的消息
        this.loading = true
        const aiMsg = {
          avatar: ai.avatar,
          name: ai.name,
          time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
          msg: "",
          chatType: 0, //信息类型，0文字，1图片
          uid: "ai", //uid
          role: "assistant"
        }
        this.chatHistory.push(aiMsg)
        if (this.config.stream) {
          ai.chatStream(this.chatHistory).then(reader => ai.streamOutput(reader, this.chatHistory.at(-1), v => this.speech = v)).finally(this.handleAfterSend)
        } else {
          ai.chat(this.chatHistory).then(reply => {
            this.speech = reply
            const decodeArr = reply.split("")
            decodeArr.forEach(e => this.chatHistory.at(-1).msg += e)
          }).finally(this.handleAfterSend)
        }
      } else {
        this.$message.error("请不要发送空消息!")
      }
    },
    handleAfterSend() {
      this.loading = false
      this.$refs.chatContent.scrollBottom()
    }
  }
}
</script>

<style lang="scss" scoped>
.chat {
  color: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;

  .optIcon {
    box-sizing: border-box;
    height: 40px;
    min-width: 40px;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: top center;
    cursor: pointer;
    opacity: .6;
    padding-top: 24px;

    &:after {
      font-size: 12px;
      display: block;
      text-align: center;
    }

    &:hover {
      opacity: .8;
    }

    &.active {
      opacity: 1;
    }

    &.clear {
      background-image: url("../assets/clear.svg");

      &:after {
        content: "清空历史";
      }
    }

    &.setting {
      background-image: url("../assets/setting.svg");

      &:after {
        content: "设置";
      }
    }
  }
}
</style>
