<template>
  <div class="document-compare-page">
    <intelligence-left-tab-bar />

    <div class="compare-main">
      <div v-if="isCompareLoading" class="compare-loading-placeholder">
        <img
          class="compare-loading-placeholder-img"
          :src="comparePlaceholderUrl"
          alt=""
        />
      </div>

      <template v-else>
        <div class="compare-header">
          <div class="header-title">文档对照</div>
          <div class="header-file-name">{{ displayFileName }}</div>
        </div>

        <div class="compare-content">
          <div class="article-nav-tree">
            <div class="tree-title">文章标题</div>
            <div class="tree-list">
              <button
                v-for="item in articleTree"
                :key="item.id"
                type="button"
                class="tree-item"
                :class="{ active: activeSectionId === item.id }"
                @click="onSelectSection(item.id)"
              >
                {{ item.title }}
              </button>
            </div>
          </div>

          <div class="paragraph-compare-panel">
            <div class="panel-title">段落对照</div>
            <div class="paragraph-list">
              <div
                v-for="paragraph in displayParagraphs"
                :key="paragraph.id"
                class="paragraph-compare-row"
              >
                <div class="paragraph-cell source-cell">
                  <div class="cell-label">原文</div>
                  <div class="cell-content">{{ paragraph.sourceText }}</div>
                </div>
                <div class="paragraph-cell translated-cell">
                  <div class="cell-label">译文</div>
                  <div class="cell-content">{{ paragraph.translatedText }}</div>
                </div>
              </div>

              <div v-if="displayParagraphs.length === 0" class="empty-tip">
                当前章节暂无段落占位数据
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import IntelligenceLeftTabBar from '@/components/intelligenceLeftTabBar/index.vue'
import comparePlaceholderUrl from './icons/container-1885-placeholder.png'
import { fetchDocumentCompareMock } from './mock'

const route = useRoute()

const isCompareLoading = ref(true)

const displayFileName = computed(() => {
  const fileName = route.query.fileName
  return typeof fileName === 'string' && fileName
    ? fileName
    : '未命名文档（占位）'
})

const articleTree = ref([])

const paragraphRows = ref([])

const activeSectionId = ref('all')

const displayParagraphs = computed(() => {
  if (activeSectionId.value === 'all') {
    return paragraphRows.value
  }

  return paragraphRows.value.filter(
    (item) => item.sectionId === activeSectionId.value
  )
})

const onSelectSection = (sectionId) => {
  activeSectionId.value = sectionId
}

onMounted(async () => {
  const fileName =
    typeof route.query.fileName === 'string' ? route.query.fileName : ''
  try {
    const data = await fetchDocumentCompareMock(fileName)
    articleTree.value = data.articleTree
    paragraphRows.value = data.paragraphRows
  } finally {
    isCompareLoading.value = false
  }
})
</script>

<style scoped lang="scss">
.document-compare-page {
  display: flex;
  min-height: calc(100vh - 64px);
  background: #fff;
}

.compare-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 12px;
  overflow: auto;
}

.compare-loading-placeholder {
  flex: 1;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: var(--bg-white-100);
  border-radius: 8px;
}

.compare-loading-placeholder-img {
  max-width: 100%;
  max-height: min(720px, calc(100vh - 160px));
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.compare-header {
  min-height: 56px;
  border: 1px solid #e8ecf2;
  border-radius: 8px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.header-title {
  color: #344054;
  font-weight: 600;
}

.header-file-name {
  color: #475467;
  font-size: 14px;
}

.compare-content {
  flex: 1;
  min-height: 560px;
  display: flex;
  gap: 12px;
}

.article-nav-tree {
  width: 300px;
  flex-shrink: 0;
  border: 1px solid #e8ecf2;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.tree-title,
.panel-title {
  color: #344054;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.tree-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tree-item {
  height: 36px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  background: #fff;
  color: #344054;
  cursor: pointer;
  text-align: left;
  padding: 0 10px;
}

.tree-item.active {
  border-color: #2563eb;
  color: #2563eb;
  background: #eff4ff;
}

.paragraph-compare-panel {
  flex: 1;
  border: 1px solid #e8ecf2;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.paragraph-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.paragraph-compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.paragraph-cell {
  border: 1px solid #e4e7ec;
  border-radius: 6px;
  padding: 10px;
  min-height: 120px;
}

.cell-label {
  font-size: 12px;
  color: #667085;
  margin-bottom: 8px;
}

.cell-content {
  font-size: 14px;
  line-height: 22px;
  color: #344054;
  white-space: pre-wrap;
}

.empty-tip {
  color: #98a2b3;
  font-size: 14px;
}
</style>
