<template>
  <div class="ai-analysis">
    <div class="ai-analysis-empty" v-if="loading">
      <Empty :autoFinish="autoFinish" :fail="fail" :tip="tip"></Empty>
    </div>
    <Markdown :source="data" v-else />
  </div>
</template>

<script lang="ts" setup>
import Markdown from 'vue3-markdown-it';

import { computed, ref } from 'vue';
import { useMainStore } from '@/store';
import Empty from '@/components/CommonEmpty.vue';

const mainStore = useMainStore();
const tip = ref<string>('大约需要 40-60 秒')

const loading = computed(() => mainStore.getAiAnalysisData.loading);
const autoFinish = computed(() => mainStore.getAiAnalysisData.autoFinish);
const fail = computed(() => mainStore.getAiAnalysisData.fail);

const data = computed(() => mainStore.getAiAnalysisData.data);
</script>

<style lang="scss" scoped>
.ai-analysis {
  width: 100%;
  height: auto;
  padding: 40px;
  box-sizing: border-box;
  background-color: #ffffff;

  &-empty {
    width: 100%;
    height: 376px;
  }

  &-text {
    width: 100%;
    word-break: break-all;
    // white-space: pre-wrap;
    overflow: hidden;
    font-weight: 400;
    font-size: 20px;
    color: #282e30;
  }

  :deep(pre) {
    white-space: pre-wrap !important; /* 保留换行，允许长行折行 */
    word-wrap: break-word !important; /* IE/Edge 兼容 */
    word-break: break-all !important;
  }
}
</style>
