<script lang="ts" setup>
import MdPreview from '@/components/markdown/MdPreview.vue'
import api from '@/servers/finyx/api'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

const { query } = useRoute()

const loading = ref<boolean>(false)
const paragraphData = ref<any>([])
const detail = ref<any>({})

const getDetail = async () => {
  if (!query?.id) {
    return ElMessage.error('获取文档详情失败，请重试')
  }
  try {
    loading.value = true
    detail.value = await api.wendang.getDetail8({ id: query?.id as number })
    const model: any = {
      documentId: query?.id
    }
    paragraphData.value = await api.wendangfenduan.query2(model)
    if (query?.chunkId) {
      paragraphData.value = paragraphData.value.filter((item) => item.id === query?.chunkId)
    }
  } catch (e) {
    ElMessage.error('获取文档详情失败，请重试')
  } finally {
    loading.value = false
  }
}

onMounted(getDetail)
</script>

<template>
  <div class="traceability-details">
    <div class="traceability-details-left">
      <div class="title">{{ detail?.name }}</div>
      <md-preview
        :modelValue="detail?.content"
        class="maxkb-md"
        editorId="preview-only"
        style="padding: 20px 30px"
      ></md-preview>
    </div>
    <div class="traceability-details-right">
      <div
        v-for="(item, i) in paragraphData"
        :key="i"
        class="traceability-details-right-item"
      >
        <div class="title">#{{ item.sort }} {{ item.size }}字符</div>
        <md-preview
          :modelValue="item.content"
          class="maxkb-md"
          editorId="preview-only"
        ></md-preview>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.traceability-details {
  height: 100%;
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow: hidden;

  &-left {
    flex: 1;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    line-height: 25px;
    overflow-y: scroll;

    .title {
      margin-bottom: 10px;
    }
  }

  &-right {
    flex: 1;
    margin-left: 10px;
    overflow-y: auto;

    &-item {
      padding: 20px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      margin-bottom: 10px;
      position: relative;

      .title {
        margin-bottom: 10px;
      }
    }
  }
}
</style>
