<template>
  <div>
    <h2
      style="
        text-align: center;
        margin: 18px 0;
        font-size: 25px;
        font-family: 'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif;
      "
    >
      ChatGLM
    </h2>
    <div class="chatbg tool">
      <div
        style="
          float: left;
          font-size: 12px;
          padding: 4px 8px;
          border-right: 1px solid #e5e7eb;
          border-bottom: 1px solid #e5e7eb;
          border-bottom-right-radius: 7px;
        "
      >
        <el-icon><ChatDotRound /></el-icon>
        Chatbot
      </div>
      <div style="clear: both"></div>
      <div class="chatGptChat" ref="chatEle">
        <div v-for="(item, index) in chat" :key="index">
          <div v-if="item.type === 'robot'" class="chat">
            <div class="cahtText">
              <textShow :text="item.text" />
            </div>
          </div>
          <div v-if="item.type === 'user'" class="chat chatRight">
            <div class="cahtText" v-text="item.text"></div>
          </div>
          <div style="clear: both"></div>
        </div>
      </div>
    </div>
    <div class="tool">
      <el-row :gutter="15">
        <el-col :span="16">
          <el-input
            v-model="inputText"
            :rows="10"
            type="textarea"
            placeholder="请输入您的问题"
          />
          <el-button
            style="
              width: 100%;
              color: #ea580c;
              font-weight: 600;
              font-size: 16px;
              margin-top: 1em;
            "
            :loading="load"
            color="#fdba74"
            size="large"
            @click="saveText"
          >
            提交
          </el-button>
        </el-col>
        <el-col :span="8">
          <el-button
            style="width: 100%; margin-bottom: 1em"
            color="#f3f4f6"
            size="large"
            @click="(chat = []), (chatlist = [])"
          >
            清除历史记录
          </el-button>
          <div class="tools">
            <div class="toolsItem">
              最大长度
              <el-input-number
                style="float: right"
                v-model="num"
                :min="0"
                :max="4096"
                @change="change"
                controls-position="right"
                size="small"
              />
              <input
                :value="0"
                type="range"
                id="num"
                style="width: 100%"
                @input="input"
              />
            </div>
            <div class="line"></div>
            <div class="toolsItem">
              Top P
              <el-input-number
                style="float: right"
                v-model="num1"
                :min="0"
                :max="1"
                :step="0.01"
                @change="change1"
                controls-position="right"
                size="small"
              />
              <input
                :value="0"
                type="range"
                id="num1"
                style="width: 100%"
                @input="input1"
              />
            </div>
            <div class="line"></div>
            <div class="toolsItem">
              感情度
              <el-input-number
                style="float: right"
                v-model="num2"
                :min="0"
                :max="1"
                :step="0.01"
                @change="change2"
                controls-position="right"
                size="small"
              />
              <input
                :value="0"
                type="range"
                id="num2"
                style="width: 100%"
                @input="input2"
              />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup>
import { createSocket } from '@/utils/socket';
import { ChatDotRound } from '@element-plus/icons-vue';
import { ref, nextTick, onMounted } from 'vue';

import textShow from './textShow.vue';

const chat = ref([]);
const load = ref(false);
const chatEle = ref(null);
const inputText = ref('');
const num = ref(2048);
const num1 = ref(0.7);
const num2 = ref(0.95);
let chatlist = ref([]);
let session_hash = Math.random().toString(36).substring(2);
let index = 0;
function saveText() {
  load.value = true;
  nextTick(() => {
    // 滚动到最底层
    if (chatEle.value.scrollHeight > chatEle.value.clientHeight) {
      chatEle.value.scrollTop = chatEle.value.scrollHeight;
    }
  });
  chat.value.push({
    text: inputText.value,
    type: 'user',
  });
  chat.value.push({
    text: '',
    type: 'robot',
  });
  const t = inputText.value;
  inputText.value = '';

  //   index++;
  if (chatlist.value.length > 3) {
    chatlist.value.shift();
  }
  createSocket(ws => {
    const data = ws.data || {};
    if (data.msg == 'send_hash')
      ws.ws.send(
        JSON.stringify({
          fn_index: index,
          session_hash,
        })
      );
    if (data.msg == 'send_data')
      ws.ws.send(
        JSON.stringify({
          fn_index: index,
          data: [t, chatlist.value, num.value, num1.value, num2.value, null],
          event_data: null,
          session_hash,
        })
      );
    if (data.msg == 'process_generating') {
      const li = data.output.data[0] || [];
      const olist = li[li.length - 1];
      chat.value[chat.value.length - 1].text = olist[1];
    }
    if (data.msg == 'process_completed') {
      chatlist.value = data.output.data[0] || [];
      load.value = false;
    }
  });
}

const input = e => {
  num.value = Math.floor((e.target.value / 100) * 4096);
};

const change = () => {
  document.querySelector('#num').value =
    ((num.value / 4096) * 100).toFixed(0) - 0;
};
const input1 = e => {
  num1.value = e.target.value / 100;
};

const change1 = () => {
  document.querySelector('#num1').value = num1.value * 100;
};
const input2 = e => {
  num2.value = e.target.value / 100;
};

const change2 = () => {
  document.querySelector('#num2').value = num2.value * 100;
};
onMounted(() => {
  change();
  change1();
  change2();
});
</script>
<style>
.chatbg {
  min-height: 3em;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}
.chatGptChat {
  padding-top: 5px;
  box-sizing: border-box;
  font-weight: 500;
  margin: 1em auto 0 auto;
  width: 100%;
  height: auto;
  max-height: 480px;
  position: relative;
  overflow-y: auto;
  padding: 0 1em;
}

.chatGptChat .van-field {
  background-color: #eee;
  position: fixed;
  padding-bottom: 1em;
  bottom: 0;
  left: 0;
}

.chatGptChat .van-field .van-field__control {
  background-color: #ffffff;
  padding: 0.4em;
}

.chatGptChat .chat {
  padding: 8px 12px;
  background-color: #f4f4f680;
  border-radius: 22px;
  border: 1px solid #e5e7eb;
  width: 98%;
  border-bottom-left-radius: 0;
  margin-bottom: 1em;
}

.chatGptChat .chat .cahtText {
  text-align: left;
  line-height: 1.5em;
  border-radius: 5px;
  padding: 0.5em;
  display: inline-block;
  max-width: calc(100% - 40px);
  vertical-align: middle;
}

.chatGptChat .chat .van-image {
  vertical-align: top;
}

.chatGptChat .chat .cahtText:not(:last-child),
.chatGptChat .chat .van-image:not(:last-child) {
  margin-right: 5px;
}
.chatGptChat .chatRight {
  border-color: #fdba74;
  background-color: #fff7ed;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 22px;
  float: right;
}

.tool {
  width: 100%;
  margin: 1em auto 0 auto;
}

@media (min-width: 640px) {
  .chatGptChat,
  .tool {
    max-width: 608px;
  }
}

@media (min-width: 768px) {
  .chatGptChat,
  .tool {
    max-width: 736px;
  }
}

@media (min-width: 1024px) {
  .chatGptChat,
  .tool {
    max-width: 992px;
  }
}

@media (min-width: 1280px) {
  .chatGptChat,
  .tool {
    max-width: 1248px;
  }
}

@media (min-width: 1536px) {
  .chatGptChat,
  .tool {
    max-width: 1504px;
  }
}

.tools {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  line-height: 1.5em;
}
.toolsItem {
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 400;
  color: #6b7280;
}
.line {
  height: 1px;
  background-color: #e5e7eb;
}
</style>
