<template>
  <a-layout>
    <a-layout-content :style="{ padding: '0 20px', marginTop: '10px' }">
      <div :style="{ background: '#fff', padding: '20px', minHeight: '580px' }">
        <a-row :gutter="8">
          <a-col :span="12">
            <a-input-search
              style="width: 80%; margin-bottom: 20px"
              v-model:value="question"
              placeholder="查询"
              :loading="loading"
              enter-button
              @search="handlerSearch"
            />
            <a-card style="margin-right: 40px; height: 500px; overflow-y: auto" v-show="isShow">
              <div class="chat-container">
                <div v-for="(message, index) in messages" :key="index" :class="{ me: message.isMe }" style="padding-bottom: 15px">
                  <a-avatar :size="30" :shape="message.isMe ? 'square' : 'circle'" :style="{ backgroundColor: message.isMe ? '#1890ff' : '#87d068' }">
                    {{ message.isMe ? 'Q' : 'A' }}
                  </a-avatar>
                  <span style="padding-left: 15px">{{ message.text }}</span>
                  <span style="padding-left: 15px">
                    <DeleteOutlined v-if="message.isMe" size="22" @click="removeHandle(index)" />
                  </span>
                </div>
              </div>
            </a-card>
          </a-col>
          <!-- <a-divider type="vertical" style="height: 560px; background-color: #d9d9d9" /> -->
          <a-col :span="12">
            <a-button v-if="isShow" style="margin-bottom: 20px" type="primary" @click="getReport" :loading="loadingBtn">生成报告</a-button>
            <MarkDown v-if="isShowReport" :height="600" v-model:value="textToType" ref="markDownRef" mode="wysiwyg" />
          </a-col>
        </a-row>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted, unref } from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  import { LoadingOutlined, DownloadOutlined, SyncOutlined, FileSyncOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import { MarkDown, MarkDownActionType } from '/@/components/Markdown';
  import { replaceAll } from '/@/utils';
  

  const loading = ref(false);
  const loadingBtn = ref(false);

  const question = ref('');
  const messages = ref<{ text: string; isMe: boolean }[]>([]);
  const isShow = ref<boolean>(false);
  const isShowReport = ref<boolean>(false);

  const markDownRef = ref<Nullable<MarkDownActionType>>(null);

  // 定义要显示的文本
  const textToType = ref('');
  // 用于存储正在生成的文本
  const generatedText = ref('');
  // 控制是否开始打字动画
  const isTyping = ref(false);
  // 打字速度
  const typingSpeed = 30; // 单位毫秒

  const problemResqultAry = ref([]);

  // 开始打字动画
  async function getReport() {
    if (problemResqultAry.value.length == 0) {
      return false;
    }

    //problemResqultAry.value.reverse();

    textToType.value = '';
    loadingBtn.value = true;
    isShowReport.value = true;
    let params = { queryCond: problemResqultAry.value.join(',') + '。希望根据上述现状生成审计发现、影响分析及改进建议。' };
    let resData = await defHttp.post({ url: '/polar/polarAISummary', params, timeout: 60000 });
    loadingBtn.value = false;
    textToType.value = resData.summary;
  }

  async function handlerSearch() {
    if (!question.value) {
      return false;
    }

    loading.value = true;
    let params = { queryCond: question.value };
    let resData = await defHttp.get({ url: '/polar/polarAITest', params, timeout: 60000 });

    loading.value = false;

    let res = resData.result;
    if (res) {
      res = res.replaceAll(/\\/g, '\\\\');
    }
    problemResqultAry.value.push(res);

    const message = { text: resData.result, isMe: false };
    messages.value.unshift(message);

    messages.value.unshift({ text: question.value, isMe: true });
    question.value = '';

    isShow.value = true;
  }

  function removeHandle(ind) {
    messages.value.splice(ind, 2);
    problemResqultAry.value.splice(ind / 2);
  }
</script>

<style lang="less" scoped>
  .keyword {
    color: #1890ff;
    line-height: 30px;
    margin-left: 30px;
  }
  .chat-container {
    line-height: 35px;
  }
</style>
