<template>
  <a-layout>
    <a-layout-content :style="{ padding: '0 20px', marginTop: '10px' }">
      <div :style="{ background: '#fff', padding: '20px', minHeight: '580px' }">
        <a-input-search
          style="width: 45%; margin-bottom: 20px"
          v-model:value="question"
          placeholder="查询"
          :loading="loading"
          enter-button
          @search="handlerSearch"
        />
        <a-row>
          <a-col :span="12">
            <a-card style="margin-right: 40px" v-show="isShow">
              <div class="chat-container">
                <div v-for="(message, index) in messages" :key="index" :class="{ me: message.isMe }">
                  <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"></span>
                </div>
              </div>
              <!-- <a-button @click="delData" style="margin-right: 20px">清空数据</a-button> -->
              <a-button type="primary" @click="getReport" :loading="loading">生成报告</a-button>
            </a-card>
          </a-col>
          <a-col :span="12">
           
              <!-- <BasicForm @register="registerForm"/> -->
              <MarkDown 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 } from '@ant-design/icons-vue';
  import { MarkDown, MarkDownActionType } from '/@/components/Markdown';

  const loading = 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);

    
  function toggleTheme() {
    const markDown = unref(markDownRef);
    if (!markDown) return;
    const vditor = markDown.getVditor();
    vditor.setTheme('dark');
    vditor.setPreviewMode('wysiwyg')
  }

  const markdownOptions= ref ({  
        mode: 'sv'
    })


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

  const problemResqultAry = ref([])

  // 开始打字动画
  async function getReport() {


    if(problemResqultAry.value.length==0){
      return false
    }

    //toggleTheme()

    loading.value = true

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


    if (!isTyping.value) {
      isShowReport.value = true;
      isTyping.value = true;
      let index = 0;
      const intervalId = setInterval(() => {
        if (index < textToType.value.length) {
          generatedText.value += textToType.value[index];
          index++;
        } else {
          clearInterval(intervalId);
          isTyping.value = false;
        }
      }, typingSpeed);
    }
  }

  async function handlerSearch() {
    loading.value = true
    let params = {queryCond:question.value}
    let resData =  await defHttp.get({ url: "/polar/polarAITest",params,timeout:30000});
    console.log(resData);
    loading.value = false
    
    problemResqultAry.value.push(resData.result)

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

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

  }
</script>

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