<template>
  <div class="wrap">
    <div class="header">
      <div class="header-content">
        <div class="header-left">
          {{ "多智库报告观点汇聚分析" }}
        </div>
        <div class="header-right">

        </div>
      </div>
    </div>
    <div class="box">
      <div class="box1">
        <AnalysisBox title="选择智库报告" :showAllBtn="true">
          <div class="box1-main" v-if="isChoseItem">
            <div class="box1-header">
              <div class="header-select">
                <div class="select-Domain">
                  <el-select v-model="selectedAreaList" placeholder="全部领域" :teleported="true"
                    :placement="'bottom-start'" :popper-options="{
                      modifiers: [
                        {
                          name: 'preventOverflow', // 禁用自动翻转逻辑
                          options: {
                            mainAxis: false, // 禁用垂直方向的自动调整
                            altAxis: false, // 禁用水平方向的自动调整
                          }
                        },
                        {
                          name: 'flip', // 完全禁用翻转功能
                          enabled: false
                        }
                      ]
                    }" @change="handleCheckedAreaChange">
                    <el-option label="全部领域" :value="''" />
                    <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id">
                      {{ item.name }}
                    </el-option>
                  </el-select>
                </div>
                <div class="search-box">
                  <el-input placeholder="搜索智库报告" v-model="searchPolicy" @keyup.enter="handleSearchPolicy">
                    <template #suffix>
                      <img src="../assets/images/Line_Search.png" class="search-icon" alt="搜索"
                        @click="handleSearchPolicy">
                    </template>
                  </el-input>
                </div>
              </div>
              <div class="footer-select">
                <div class="select-thinkTank">
                  <el-select v-model="sort" placeholder="全部智库" :teleported="true" :placement="'bottom-start'"
                    :popper-options="{
                      modifiers: [
                        { name: 'preventOverflow', options: { mainAxis: false, altAxis: false } },
                        { name: 'flip', enabled: false }
                      ]
                    }">
                    <el-option label="全部智库" :value="''" />
                    <el-option label="兰德公司" :value="'1'" />
                  </el-select>
                </div>
                <div class="select-time">
                  <el-select v-model="selectedYears" placeholder="近一年" :teleported="true" :placement="'bottom-start'"
                    :popper-options="{
                      modifiers: [
                        {
                          name: 'preventOverflow', // 禁用自动翻转逻辑
                          options: {
                            mainAxis: false, // 禁用垂直方向的自动调整
                            altAxis: false, // 禁用水平方向的自动调整
                          }
                        },
                        {
                          name: 'flip', // 完全禁用翻转功能
                          enabled: false
                        }
                      ]
                    }" @change="handleTimeChange">
                    <el-option v-for="item in yearsOptions" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
                <div class="footer-text">{{ total }}{{ "篇报告" }}</div>
              </div>
            </div>
            <div class="box1-middle">
              <div class="box1-item" v-for="(item, index) in curFooterList" :key="item.id"
                @click="handleToReportDetail(item)">
                <div class="left">
                  <img :src=item.imageUrl alt="">
                </div>
                <div class="right">
                  <div class="right-header"> {{ item.name }}</div>
                  <div class="right-footer">
                    <div class="time">{{ item.times }}</div>
                    <div class="text-image think-tank-link" @click.stop="handleToReportDetail(item)">
                      <div class="image">
                        <img :src=item.logoUrl alt="" />
                      </div>
                      <div class="text">
                        {{ item.thinkTankName }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="image-change">
                  <img src="../assets/images/plus.png" alt="" v-if="!selectedIds.has(item.id)"
                    @click.stop="toggleSelected(item.id, item)" />
                  <img src="../assets/images/minus.png" alt="" v-else @click.stop="toggleSelected(item.id, item)" />
                </div>
              </div>
            </div>
            <div class="page-box">
              <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :page-count="pageCount" background
                layout="prev, pager, next" :total="total" @current-change="handleCurrentChange" />
            </div>
            <div class="box1-footer" :class="{ 'is-disabled': !canProceed }" @click="handleChoseItem">
              <div class="text">{{ "已选择" }}{{ selectedIds.size }}{{ "篇报告" }}</div>
              <div class="image"><img src="../assets/images/right-arrow.png" alt="" /></div>
            </div>
          </div>
          <div class="box1-main-analysis" v-if="!isChoseItem">
            <div class="box1-header-analysis">
              <div class="left-text-analysis" @click="handleBack">{{ "< 返回选择" }}</div>
                  <div class="right-text-analysis">{{ "共选择" }}{{ selectedReportList.length }}{{ "篇智库报告" }}</div>
              </div>
              <div class="box1-middle-analysis">
                <div class="box1-item" v-for="(item, index) in selectedReportList" :key="item.id || index"
                  @click="handleToReportDetail(item)">
                  <div class="left">
                    <img :src=item.imageUrl alt="">
                  </div>
                  <div class="right">
                    <div class="right-header"> {{ item.name }}</div>
                    <div class="right-footer">
                      <div class="time">{{ item.times }}</div>
                      <div class="text-image think-tank-link" @click.stop="handleToReportDetail(item)">
                        <div class="image">
                          <img :src=item.logoUrl alt="" />
                        </div>
                        <div class="text">
                          {{ item.thinkTankName }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="image-change">
                    <img src="../assets/images/plus.png" alt="" v-if="!selectedIds.has(item.id)"
                      @click.stop="toggleSelected(item.id, item)" />
                    <img src="../assets/images/minus.png" alt="" v-else @click.stop="toggleSelected(item.id, item)" />
                  </div>
                </div>
              </div>
              <div class="box1-footer-analysis" :class="{ 'is-disabled': !canProceed }" @click="handleAnalysis">
                <div class="text-analysis">{{ "开始分析" }}</div>
                <div class="image-analysis"><img src="../assets/images/right-arrow-white.png" alt="" /></div>
              </div>
            </div>
        </AnalysisBox>
      </div>
      <div class="box2">
        <AnalysisBox title="核心观点分析" :showAllBtn="true" v-if="isBox2 || isAnalysisLoading">
          <div class="box2-main">
            <div class="empty-image" v-if="isBox2 && !isAnalysisLoading">
              <img src="../assets/images/empty-image.png" alt="" />
            </div>
            <div v-if="isAnalysisLoading && !isBeingAnalysisExpanded" class="being-analysis-box">
              <div class="being-analysis-box-image">
                <img src="../assets/images/being-analysis-circle.png" alt="" />
              </div>
              <div class="being-analysis-box-text">{{ "正在思考" }}</div>
              <div class="being-analysis-box-change" @click="toggleBeingAnalysisBox">
                <img src="../assets/images/blue-down.png" alt="" v-if="!isBeingAnalysisExpanded" />
                <img src="../assets/images/blue-up.png" alt="" v-else />
              </div>
            </div>
            <div v-if="isAnalysisLoading && isBeingAnalysisExpanded" class="being-analysis-detail-box">
              <div class="being-analysis-box-header">
                <div class="being-analysis-box-image">
                  <img src="../assets/images/being-analysis-circle.png" alt="" />
                </div>
                <div class="being-analysis-box-text">{{ "正在思考" }}</div>
                <div class="being-analysis-box-change" @click="toggleBeingAnalysisBox">
                  <img src="../assets/images/blue-down.png" alt="" v-if="!isBeingAnalysisExpanded" />
                  <img src="../assets/images/blue-up.png" alt="" v-else />
                </div>
              </div>
              <div class="being-analysis-box-content" ref="beingAnalysisContentRef">
                <div class="being-analysis-content-text">{{ beingAnalysisContent }}</div>
              </div>
            </div>
            <div v-if="isAnalysisLoading" class="being-analysis-image">
              <img src="../assets/images/being-analysis.png" alt="" />

            </div>

          </div>
        </AnalysisBox>
        <AnalysisResultBox title="核心观点分析" :showAllBtn="false" v-if="!isBox2 && !isAnalysisLoading"
          @tab-change="handleOpinionTabChange">

          <div class="box2-main-Consensus" v-if="!isAnalysisLoading && activeOpinionTab === 'consensus'">
            <!-- <div class="box2-main-Consensus-header">
              <div class="tech-development-view">{{ `共识观点 ${consensusList.length}条` }}</div>
              <div class="criticism-view">{{ `分歧观点 ${differenceList.length}条` }}</div>
              <div class="thinkTank-view">
                <div class="thinkTank-image">
                  <img src="../assets/images/rand-image.png" alt="" />
      </div>
                {{ `${domainName} ${consensusList.length + differenceList.length}条` }}
              </div>
            </div> -->
            <div class="box2-main-Consensus-content">
              <template v-for="(item, index) in consensusList" :key="item.id">
                <div class="Consensus-item">
                  <div class="Consensus-item-number">{{ index + 1 }}</div>
                  <div class="Consensus-item-title">{{ item.consensusContent }}</div>
                  <div class="Consensus-item-right">{{ `${item.reportCount}篇报告提及` }}</div>
                  <div class="Consensus-item-image" @click="toggleConsensusItem(item.id)">
                    <img src="../assets/images/down.png" alt="" v-if="!openConsensusIds.has(item.id)" />
                    <img src="../assets/images/up.png" alt="" v-else />
                  </div>
                </div>

                <div class="Consensus-expand" v-if="openConsensusIds.has(item.id)">

                  <div v-for="(sv, svIdx) in item.sourceViewDetails" :key="`${sv.report_id}-${sv.view_id}-${svIdx}`"
                    class="source-view-detail">
                    <div class="source-view-detail-title">
                      <span class="source-view-detail-title-text"
                        :class="{ 'is-clickable-report': hasReportLinkForSourceView(sv) }"
                        @click.stop="handleOpenReportOriginalFromSource(sv)">{{ getSourceViewDisplayTitle(sv) }}</span>
                      <span class="source-view-detail-org" v-if="sv.thinktankName || sv.thinktankLogoUrl">
                        <img v-if="sv.thinktankLogoUrl" :src="sv.thinktankLogoUrl" alt="" />
                        <span class="source-view-detail-org-text">{{ sv.thinktankName }}</span>
                      </span>
                    </div>
                    <div class="source-view-detail-content">{{ getSourceViewDisplayContent(sv) }}</div>
                  </div>
                  <div class="Consensus-expand-badge is-tech-development">{{ "共识观点" }}</div>
                </div>
              </template>
              <div class="empty-image" v-if="consensusList.length === 0">
                <img src="../assets/images/empty-analysis.png" alt="" />
              </div>
              <div class="empty-text" v-if="consensusList.length === 0">
                {{ "未识别到共识观点..." }}
              </div>
            </div>
          </div>
          <div class="box2-main-Differences" v-else-if="!isAnalysisLoading">
            <div class="box2-main-Differences-content">
              <template v-for="(item, index) in differenceList" :key="item.id">
                <div class="Differences-item">
                  <div class="Differences-item-number">{{ index + 1 }}</div>
                  <div class="Differences-item-title">
                    <div class="Differences-item-title-left"> {{ item.disagreementContent }}</div>
                    <div class="Differences-item-title-right">{{ `${item.reportCount}篇报告提及` }}</div>

                  </div>

                  <div class="Differences-item-image" @click="toggleDifferencesItem(item.id)">
                    <img src="../assets/images/down.png" alt="" v-if="!openDifferencesIds.has(item.id)" />
                    <img src="../assets/images/up.png" alt="" v-else />
                  </div>
                </div>

                <div class="Differences-expand" v-if="openDifferencesIds.has(item.id)">
                  <div class="Differences-expand-content">
                    <div class="Differences-expand-top-content">
                      <div class="Differences-expand-top-content-left">


                        <div class="differences-source-views">
                          <div v-for="(sv, svIdx) in item.sourceViewDetails"
                            :key="`${sv.report_id}-${sv.view_id}-${svIdx}`" class="source-view-detail">
                            <div class="source-view-detail-title">
                              <span class="source-view-detail-title-text"
                                :class="{ 'is-clickable-report': hasReportLinkForSourceView(sv) }"
                                @click.stop="handleOpenReportOriginalFromSource(sv)">{{ getSourceViewDisplayTitle(sv)
                                }}</span>
                              <span class="source-view-detail-org" v-if="sv.thinktankName || sv.thinktankLogoUrl">
                                <img v-if="sv.thinktankLogoUrl" :src="sv.thinktankLogoUrl" alt="" />
                                <span class="source-view-detail-org-text">{{ sv.thinktankName }}</span>
                              </span>
                            </div>
                            <div class="source-view-detail-content">{{ getSourceViewDisplayContent(sv) }}</div>
                          </div>
                        </div>

                      </div>
                    </div>
                    <div class="Differences-expand-view">
                      <div class="Differences-expand-view-left">
                        <div class="left-tag">{{ "分歧观点" }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
              <div class="empty-image" v-if="differenceList.length === 0">
                <img src="../assets/images/empty-analysis.png" alt="" />
              </div>
              <div class="empty-text" v-if="differenceList.length === 0">
                {{ "未识别到分歧观点..." }}
              </div>
            </div>
          </div>
        </AnalysisResultBox>
      </div>
    </div>
  </div>
</template>
<script setup>
import router from '@/router';
import { onMounted, ref, computed, reactive, nextTick, watch } from "vue";
import AnalysisBox from "@/components/base/boxBackground/analysisBox.vue"
import AnalysisResultBox from "./boxBackground/analysisBox.vue"
import {
  getThinkTankReport,
  getHylyList,
  getThinkTankReportViewpoint,
  postReportDomainViewAnalysisStream
} from "@/api/thinkTank/overview";
const sort = ref("");
const searchPolicy = ref("");
const isBox2 = ref(true)
const isAnalysisLoading = ref(false)
const isBeingAnalysisExpanded = ref(true)
const beingAnalysisContent = ref("")
const beingAnalysisContentRef = ref(null)
const activeOpinionTab = ref('consensus')
const toggleBeingAnalysisBox = () => {
  isBeingAnalysisExpanded.value = !isBeingAnalysisExpanded.value
}
const scrollBeingAnalysisToBottom = async () => {
  await nextTick()
  const el = beingAnalysisContentRef.value
  if (!el) return
  el.scrollTop = el.scrollHeight
}
watch(() => beingAnalysisContent.value, async () => {
  if (!isBeingAnalysisExpanded.value) return
  await scrollBeingAnalysisToBottom()
})
watch(isBeingAnalysisExpanded, async (expanded) => {
  if (!expanded) return
  await scrollBeingAnalysisToBottom()
})
const handleOpinionTabChange = type => {
  activeOpinionTab.value = type
}
const mockConsensusList = ref([
  {
    id: 'consensus-1',
    title: '应加强美国本土芯片制造能力，减少对亚洲供应链的依赖。',
    reportCount: 1,
    childrenTitle: "《中美冲突、竞争与合作的动因：通用人工智能（AGI）诱发的五大国家安全难题》",
    thinkTankName: "兰德公司",
    childrenContent: "虽然表面上与西方私营企业相似，但中国私营企业对政府政策的约束更紧密，且更易获得政府资源。这些概念差异意味着试图改变中国经济将非常困难，中国私营企业可能需要区别于西方企业。",
    view: "科技发展观点"
  },
  {
    id: 'consensus-2',
    title: '人工智能领域核心风险来源于美国技术领先地位的丧失。',
    reportCount: 1,
    childrenTitle: "《人工智能将在未来五年如何影响中美关系？》",
    thinkTankName: "兰德公司",
    childrenContent: "人工智能已成为大国竞争的核心领域，美国若在算法研发、算力基础设施、数据资源等方面失去领先优势，将直接影响军事优势、经济竞争力与全球话语权。未来五年是技术格局定型的关键期，保持技术代差是维护美国国家安全的重要前提。",
    view: "对我打压观点"
  },


])
const mockDifferenceList = ref([
  {
    "id": 1,
    "divergent_views": [
      {
        "view": "人工智能领域核心风险来源于美国技术领先地位的丧失",
        "Consensus": {
          "institution": "兰德科技智库",
          "title": "《中美冲突、竞争与合作的动因：通用人工智能（AGI）诱导…》",
          "quote": "联邦政府应优先考虑如何防止美国技术领先地位的丧失，并将其列为最根本的战略风险。",
          "tag": "对我打压观点"
        }
      },
      {
        "view": "人工智能领域核心风险来源于AI技术本身固有的安全难题",
        "Differences": {
          "institution": "布鲁金斯学会",
          "title": "《人工智能将在未来五年如何影响中美关系？》",
          "quote": "目前人工智能领域最大的风险源于AI技术本身固有的安全难题（如智能体失控）以及中美在AGI竞赛中因误判而引发冲突的不稳定性。因此，联邦政府应该通过构建合作机制与规范来管理风险。",
          "tag": "科技发展观点"
        }
      }
    ]
  }

])
const openConsensusIds = ref(new Set())
const toggleConsensusItem = id => {
  const set = new Set(openConsensusIds.value)
  if (set.has(id)) {
    set.delete(id)
  } else {
    set.add(id)
  }
  openConsensusIds.value = set
}
const openDifferencesIds = ref(new Set())
const toggleDifferencesItem = id => {
  const set = new Set(openDifferencesIds.value)
  if (set.has(id)) {
    set.delete(id)
  } else {
    set.add(id)
  }
  openDifferencesIds.value = set
}
const domainName = computed(() => {
  const id = selectedAreaList.value
  if (!id) return '全部领域'
  const hit = Array.isArray(areaList.value) ? areaList.value.find(i => String(i.id) === String(id)) : null
  return hit?.name || '全部领域'
})
const domainViewAnalysisRes = ref(null)
/** 观点详情：key 为 `${reportId}::${viewId}`，与流式结果里 source_views 的 view_id 对应观点接口返回的 id */
const viewpointDetailByKey = ref({})
const getViewpointDetailForSource = (reportId, viewId) => {
  const key = `${String(reportId)}::${String(viewId)}`
  return viewpointDetailByKey.value[key] || {
    titleZh: "",
    contentZh: "",
    title: "",
    content: "",
    thinktankName: "",
    thinktankLogoUrl: ""
  }
}
/** 根据 report_id 找到报告名（用于展开区标题展示） */
const getReportNameById = (reportId) => {
  const id = String(reportId ?? "")
  if (!id) return ""
  const list = selectedReportList.value || []
  const hit = Array.isArray(list) ? list.find((r) => String(r?.id ?? "") === id) : null
  return String(hit?.name ?? "").trim()
}
/** 展开区标题：显示报告名《xxx》（优先）；否则回退中文标题/英文标题；无标题则返回空串（由上游过滤） */
const getSourceViewDisplayTitle = (sv) => {
  const reportName = String(sv?.reportName ?? "").trim()
  if (reportName) return `《${reportName}》`
  const fromId = getReportNameById(sv?.report_id)
  if (fromId) return `《${fromId}》`
  const zh = String(sv?.titleZh ?? "").trim()
  if (zh) return zh
  const en = String(sv?.title ?? "").trim()
  if (en) return en
  return ""
}
/** 展开区正文：优先中文，否则英文 */
const getSourceViewDisplayContent = (sv) => {
  const zh = String(sv.contentZh ?? "").trim()
  if (zh) return zh
  return String(sv.content ?? "").trim()
}

/** 是否存在可跳转的报告 id（source_views 的 report_id） */
const hasReportLinkForSourceView = (sv) => Boolean(String(sv?.report_id ?? "").trim())

/** 点击报告标题：新标签打开该报告原文页 */
const handleOpenReportOriginalFromSource = (sv) => {
  const id = String(sv?.report_id ?? "").trim()
  if (!id) return
  const route = router.resolve({
    name: "ReportDetail",
    params: { id }
  })
  window.open(route.href, "_blank")
}
const tryParseAnswerFromStreamText = (text) => {
  const lines = String(text || "")
    .split(/\r?\n/)
    .map((x) => x.trim())
    .filter(Boolean)
  let lastAnswerData = null
  for (const line of lines) {
    if (!line.startsWith("data:")) continue
    const jsonText = line.slice(5).trim()
    if (!jsonText || jsonText === "[DONE]") continue
    try {
      const parsed = JSON.parse(jsonText)
      if (parsed?.type === "answer" && parsed?.data) {
        lastAnswerData = parsed.data
      }
    } catch (e) {
      // 忽略非 JSON 片段，继续解析后续行
    }
  }
  return lastAnswerData
}
const getAnalysisAnswerData = (raw) => {
  if (!raw) return null
  if (typeof raw === "string") {
    return tryParseAnswerFromStreamText(raw)
  }
  if (typeof raw?.data === "string") {
    return tryParseAnswerFromStreamText(raw.data)
  }
  if (raw.type === "answer" && raw.data) return raw.data
  if (raw.data?.type === "answer" && raw.data?.data) return raw.data.data
  if (raw.data?.consensus || raw.data?.differences) return raw.data
  if (raw.consensus || raw.differences) return raw
  return null
}
const consensusList = computed(() => {
  const answer = getAnalysisAnswerData(domainViewAnalysisRes.value)
  const list = Array.isArray(answer?.consensus) ? answer.consensus : []
  return list.map((item, index) => {
    const sourceViews = Array.isArray(item?.source_views) ? item.source_views : []
    const sourceViewDetails = sourceViews
      .map((v) => {
        const detail = getViewpointDetailForSource(v.report_id, v.view_id)
        const reportName = getReportNameById(v.report_id)
        return {
          report_id: v.report_id,
          view_id: v.view_id,
          reportName,
          titleZh: detail.titleZh,
          contentZh: detail.contentZh,
          title: detail.title,
          content: detail.content,
          thinktankName: detail.thinktankName,
          thinktankLogoUrl: detail.thinktankLogoUrl
        }
      })
      .filter((sv) => {
        const title = getSourceViewDisplayTitle(sv)
        return Boolean(title)
      })
    const uniqueReportCount = new Set(sourceViewDetails.map((sv) => String(sv.report_id ?? ""))).size
    const sourceViewText = sourceViews.map((v) => `report_id: ${v.report_id}, view_id: ${v.view_id}`).join("；")
    return {
      id: `consensus-${index + 1}`,
      consensusContent: item?.consensus_content || "",
      reportCount: uniqueReportCount,
      sourceViewText,
      sourceViewDetails
    }
  })
})
const differenceList = computed(() => {
  const answer = getAnalysisAnswerData(domainViewAnalysisRes.value)
  const list = Array.isArray(answer?.differences) ? answer.differences : []
  return list.map((item, index) => {
    const sourceViews = Array.isArray(item?.source_views) ? item.source_views : []
    const sourceViewDetails = sourceViews
      .map((v) => {
        const detail = getViewpointDetailForSource(v.report_id, v.view_id)
        const reportName = getReportNameById(v.report_id)
        return {
          report_id: v.report_id,
          view_id: v.view_id,
          reportName,
          titleZh: detail.titleZh,
          contentZh: detail.contentZh,
          title: detail.title,
          content: detail.content,
          thinktankName: detail.thinktankName,
          thinktankLogoUrl: detail.thinktankLogoUrl
        }
      })
      .filter((sv) => {
        const title = getSourceViewDisplayTitle(sv)
        return Boolean(title)
      })
    const uniqueReportCount = new Set(sourceViewDetails.map((sv) => String(sv.report_id ?? ""))).size
    const sourceViewText = sourceViews.map((v) => `report_id: ${v.report_id}, view_id: ${v.view_id}`).join("；")
    return {
      id: `difference-${index + 1}`,
      disagreementContent: item?.disagreement_content || "",
      reportCount: uniqueReportCount,
      sourceViewText,
      sourceViewDetails
    }
  })
})

// 默认展开：每次分析结果就绪后，共识/分歧列表第一条展开，其余关闭
watch(
  consensusList,
  (list) => {
    if (!Array.isArray(list) || list.length === 0) return
    if (openConsensusIds.value.size > 0) return
    if (!list[0]?.id) return
    openConsensusIds.value = new Set([list[0].id])
  },
  { immediate: true }
)
watch(
  differenceList,
  (list) => {
    if (!Array.isArray(list) || list.length === 0) return
    if (openDifferencesIds.value.size > 0) return
    if (!list[0]?.id) return
    openDifferencesIds.value = new Set([list[0].id])
  },
  { immediate: true }
)

// 近N年发布（用于 startDate）
const selectedYears = ref(5);
const yearsOptions = [
  { label: "近一年", value: 1 },
  { label: "近两年", value: 2 },
  { label: "近三年", value: 3 },
  { label: "近四年", value: 4 },
  { label: "近五年", value: 5 },
];
// 单选：选中领域 id；空字符串表示“全部领域”
const selectedAreaList = ref('');
const selectedPubTimeList = ref([""]);
const currentPage = ref(1);
const curFooterList = ref([


]);
const isChoseItem = ref(true)
const areaList = ref([
  // {
  // 	id: "全部领域",
  // 	name: "全部领域"
  // },
  // "通信网络",
  // "量子科技",
  // "能源"
]);
const handleChoseItem = () => {
  if (!canProceed.value) return
  isChoseItem.value = false
}
const handleAnalysis = async () => {
  if (!canProceed.value) return
  isBox2.value = false
  isAnalysisLoading.value = true
  isBeingAnalysisExpanded.value = true
  beingAnalysisContent.value = ""
  domainViewAnalysisRes.value = null
  // 默认：共识/分歧第一条展开，其余关闭（每次开始分析先清空旧展开状态）
  openConsensusIds.value = new Set()
  openDifferencesIds.value = new Set()
  // 每次进入“开始分析”默认回到共识观点，避免上次状态残留导致内容错位
  activeOpinionTab.value = 'consensus'
  await handlePostReportDomainViewAnalysis()
}
const handleBack = () => {
  isChoseItem.value = true
  isBox2.value = true
  // 返回选择时终止“分析中”展示，恢复空态图
  isAnalysisLoading.value = false
  isBeingAnalysisExpanded.value = false
  beingAnalysisContent.value = ""
  // 返回选择时也重置，确保下次进入分析展示一致
  activeOpinionTab.value = 'consensus'
  openConsensusIds.value = new Set()
  openDifferencesIds.value = new Set()
}
const pageSize = 10;
const total = ref(0);
// total 为 0 时也固定显示 1 页
const pageCount = computed(() => {
  const t = Number(total.value || 0);
  return t > 0 ? Math.ceil(t / pageSize) : 1;
});
// 已选择的报告 id（每条 item 独立控制 plus/minus，支持多条同时变化）
const selectedIds = ref(new Set());
const selectedReportMap = ref(new Map());
const selectedReportList = computed(() => Array.from(selectedReportMap.value.values()));
// 选择/开始分析都要求至少选择 2 篇报告
const canProceed = computed(() => selectedIds.value.size >= 2)
const toggleSelected = (id, item) => {
  const set = selectedIds.value;
  const map = selectedReportMap.value;
  if (set.has(id)) {
    set.delete(id);
    map.delete(id);
  } else {
    set.add(id);
    if (item) {
      map.set(id, item);
    }
  }
  selectedIds.value = new Set(set); // 触发响应式更新
  selectedReportMap.value = new Map(map); // 触发响应式更新
};

const normalizeViewList = raw => {
  const list = Array.isArray(raw) ? raw : []
  return list
    .filter(v => v && (v.view_id || v.viewId || v.id))
    .map(v => {
      const viewId = v.view_id ?? v.viewId ?? v.id
      const viewTextCandidate =
        v.view_text ??
        v.viewText ??
        v.contentZh ??
        v.contentEn ??
        v.content ??
        v.textZh ??
        v.textEn ??
        v.text ??
        v.titleZh ??
        v.titleEn ??
        v.title ??
        ""
      const viewText = String(viewTextCandidate ?? "").trim()
      return {
        view_id: viewId,
        view_text: viewText
      }
    })
    .filter(v => v.view_id != null && v.view_text !== "")
}

/** 从列表接口返回的报告项上取科技领域名称；没有再回退为左侧已选领域名，仍没有则用空字符串（不用「全部领域」） */
const getDomainsForReport = (report) => {
  const raw = report?.domains
  if (Array.isArray(raw) && raw.length) {
    const names = raw.map((x) => String(x ?? "").trim()).filter(Boolean)
    if (names.length) return [...new Set(names)]
  }
  if (selectedAreaList.value) {
    const hit = Array.isArray(areaList.value)
      ? areaList.value.find((i) => String(i.id) === String(selectedAreaList.value))
      : null
    const name = String(hit?.name ?? "").trim()
    if (name) return [name]
  }
  return [""]
}

const mergeAnalysisAnswerParts = (parts) => {
  const consensus = []
  const differences = []
  for (const p of parts) {
    const data = getAnalysisAnswerData(p)
    if (!data) continue
    if (Array.isArray(data.consensus)) consensus.push(...data.consensus)
    if (Array.isArray(data.differences)) differences.push(...data.differences)
  }
  return { consensus, differences }
}

const handlePostReportDomainViewAnalysis = async () => {
  try {
    viewpointDetailByKey.value = {}
    beingAnalysisContent.value = ""
    const selectedReports = selectedReportList.value || []
    const reportEntriesRaw = await Promise.all(
      selectedReports.map(async (report) => {
        const reportId = report?.id
        if (!reportId) return null
        try {
          const viewpointRes = await getThinkTankReportViewpoint({
            reportId,
            currentPage: 0,
            pageSize: 10000,
            keyword: "",
            orgIds: ""
          })
          console.log("分析时用到的观点", viewpointRes)
          if (viewpointRes?.code !== 200 || !viewpointRes?.data) return null
          const items = Array.isArray(viewpointRes.data.content)
            ? viewpointRes.data.content
            : Array.isArray(viewpointRes.data)
              ? viewpointRes.data
              : []
          const detailMap = {}
          for (const row of items) {
            const vid = row?.id ?? row?.view_id ?? row?.viewId
            if (vid == null || vid === "") continue
            detailMap[`${reportId}::${String(vid)}`] = {
              titleZh: String(row.titleZh ?? row.title_zh ?? "").trim(),
              contentZh: String(row.contentZh ?? row.content_zh ?? "").trim(),
              title: String(row.title ?? "").trim(),
              content: String(row.content ?? "").trim(),
              thinktankName: String(
                row.thinktankName ??
                row.thinktank_name ??
                row.thinkTankName ??
                row.orgName ??
                ""
              ).trim(),
              thinktankLogoUrl: String(
                row.thinktankLogoUrl ??
                row.thinktank_logo_url ??
                row.thinkTankLogoUrl ??
                row.orgLogoUrl ??
                ""
              ).trim()
            }
          }
          const views = normalizeViewList(items)
          if (!views.length) return null
          return {
            report,
            report_id: reportId,
            view_list: views,
            detailMap
          }
        } catch (error) {
          console.error(`获取报告核心论点失败: ${reportId}`, error)
          return null
        }
      })
    )

    const mergedDetails = {}
    for (const e of reportEntriesRaw) {
      if (e?.detailMap) Object.assign(mergedDetails, e.detailMap)
    }
    viewpointDetailByKey.value = mergedDetails

    const reportEntries = reportEntriesRaw.filter(Boolean)
    if (!reportEntries.length) {
      domainViewAnalysisRes.value = null
      return
    }

    // 按报告 domains 拆成多组 { domain, report_view_list }；每个领域单独调一次接口（无最外层 domain_report_view_list）
    const domainToReports = new Map()
    for (const entry of reportEntries) {
      const domainLabels = getDomainsForReport(entry.report)
      for (const domainLabel of domainLabels) {
        if (!domainToReports.has(domainLabel)) {
          domainToReports.set(domainLabel, [])
        }
        const list = domainToReports.get(domainLabel)
        if (!list.some((x) => x.report_id === entry.report_id)) {
          list.push({
            report_id: entry.report_id,
            view_list: entry.view_list
          })
        }
      }
    }

    const payloads = [...domainToReports.entries()]
      .filter(([, report_view_list]) => report_view_list.length > 0)
      .map(([domain, report_view_list]) => ({ domain, report_view_list }))

    if (!payloads.length) {
      domainViewAnalysisRes.value = null
      return
    }

    const responses = []
    for (const payload of payloads) {
      console.log("智库领域观点分析入参", payload)
      const res = await postReportDomainViewAnalysisStream(payload, {
        onReasoningChunk: async (chunk) => {
          beingAnalysisContent.value += String(chunk)
          await scrollBeingAnalysisToBottom()
        }
      })
      responses.push(res)
    }
    const merged = mergeAnalysisAnswerParts(responses)
    domainViewAnalysisRes.value = {
      type: "answer",
      data: merged
    }
    console.log("智库领域观点分析合并结果", merged)
  } catch (e) {
    console.error('智库领域观点分析接口调用失败', e)
    domainViewAnalysisRes.value = null
  } finally {
    isAnalysisLoading.value = false
  }
}
function arrayToString(value) {
  // 支持 array / string / null
  if (Array.isArray(value)) {
    return value.reduce((acc, item) => {
      if (item !== null && item !== undefined && item !== "") {
        return acc === "" ? item : acc + "," + item;
      }
      return acc;
    }, "");
  }
  if (value === null || value === undefined || value === "") return "";
  return String(value);
}
const handleCheckedAreaChange = () => {
  // 领域筛选变化时，从第一页重新加载
  console.log(selectedAreaList.value, "当前选中的领域");
  currentPage.value = 1;
  handleGetetThinkTankReport(1);
};
const handleSearchPolicy = () => {
  currentPage.value = 1;
  handleGetetThinkTankReport(1);
};
const handleTimeChange = () => {
  currentPage.value = 1;
  handleGetetThinkTankReport(1);
};

const handleCurrentChange = page => {
  console.log(page, "pagepagepage");
  currentPage.value = page;
  handleGetetThinkTankReport(page);
};

const handleToReportDetail = (item) => {
  if (!item?.id) return;
  window.sessionStorage.setItem("curTabName", item.name);
  const route = router.resolve({
    name: "ReportDetail",
    params: {
      id: item.id
    }
  });
  window.open(route.href, "_blank");
};
//获取行业领域字典
// getHylyList
const handleGetHylyList = async () => {
  try {
    const res = await getHylyList();
    console.log("行业领域字典", res);
    if (res.code === 200 && res.data) {
      areaList.value = res.data;
    }
  } catch (error) {
    console.error("获取行业领域字典error", error);
  }
};
//获取智库报告
const handleGetetThinkTankReport = async (page = currentPage.value) => {
  const thinkTankId = router.currentRoute?.value?.params?.id || "";

  const getDateYearsAgo = (years) => {
    const d = new Date();
    d.setFullYear(d.getFullYear() - Number(years || 1));
    const y = d.getFullYear();
    const m = String(d.getMonth() + 1).padStart(2, "0");
    const day = String(d.getDate()).padStart(2, "0");
    return `${y}-${m}-${day}`;
  };

  const getTodayYmd = () => {
    const d = new Date();
    const y = d.getFullYear();
    const m = String(d.getMonth() + 1).padStart(2, "0");
    const day = String(d.getDate()).padStart(2, "0");
    return `${y}-${m}-${day}`;
  };

  const domainIds = arrayToString(selectedAreaList.value);
  const keyword = (searchPolicy.value || "").trim();

  const params = {
    thinkTankId,
    pageNum: Number(page),
    pageSize: pageSize,
    sortFun: false,
    domainIds,
    startDate: getDateYearsAgo(selectedYears.value),
    endDate: getTodayYmd(),
    keyword: keyword || undefined,
  };
  try {
    // 先清空，避免视觉上看起来没变化
    curFooterList.value = [];
    const res = await getThinkTankReport(params);
    console.log("智库报告", res);
    if (res.code === 200 && res.data) {
      curFooterList.value = res.data.content;
      total.value = res.data.totalElements;
    } else {
      // 无数据：清空列表、总数置 0、分页回到 1
      curFooterList.value = [];
      total.value = 0;
      currentPage.value = 1;
    }
  } catch (error) {
    console.error("获取智库报告error", error);
    curFooterList.value = [];
    total.value = 0;
    currentPage.value = 1;
  }
};
onMounted(async () => {
  handleGetetThinkTankReport();
  handleGetHylyList()
});

</script>
<style lang="scss" scoped>
.wrap {
  display: flex;

  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  height: 100vh;


  .header {

    height: 64px;
    width: 100%;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0 20px 0 rgba(25, 69, 130, 0.1);
    border-bottom: 1px solid #EAECEE;
    display: flex;

    flex-direction: column;
    align-items: center;

    .header-content {
      width: 1600px;
      height: 64px;
      justify-content: space-between;
      display: flex;

      .header-left {
        font-family: "Source Han Sans CN";
        font-weight: 700;
        font-size: 20px;
        line-height: 26px;
        letter-spacing: 0;
        text-align: left;
        color: rgb(59, 65, 75);
        margin-top: 18px;
      }
    }
  }

  .think-tank-link {
    cursor: pointer;
  }

  .being-analysis-box {
    width: 1063px;
    height: 40px;
    background-color: rgb(246, 250, 255);
    border-radius: 50px;
    border: 1px solid rgb(231, 243, 255);
    display: flex;

    .being-analysis-box-image {
      width: 16px;
      height: 16px;
      margin-top: 12px;
      margin-left: 12px;

      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .being-analysis-box-text {
      font-family: "Source Han Sans CN";
      font-weight: 700;
      font-size: 14px;
      line-height: 22px;
      letter-spacing: 0;
      text-align: left;
      color: rgb(5, 95, 194);
      height: 22px;
      margin-left: 12px;
      margin-top: 9px;
    }

    .being-analysis-box-change {
      width: 14px;
      height: 24px;
      margin-top: 8px;
      margin-left: auto;
      margin-right: 12px;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }

  .being-analysis-detail-box {
    width: 1063px;
    height: 260px;

    background-color: rgb(246, 250, 255);
    border-radius: 10px;
    display: flex;
    flex-direction: column;

    .being-analysis-box-header {
      width: 1063px;
      height: 40px;
      background-color: rgb(246, 250, 255);

      display: flex;

      .being-analysis-box-image {
        width: 16px;
        height: 16px;
        margin-top: 12px;
        margin-left: 12px;

        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }

      .being-analysis-box-text {
        font-family: "Source Han Sans CN";
        font-weight: 700;
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0;
        text-align: left;
        color: rgb(5, 95, 194);
        height: 22px;
        margin-left: 12px;
        margin-top: 9px;
      }

      .being-analysis-box-change {
        width: 14px;
        height: 24px;
        margin-top: 8px;
        margin-left: auto;
        margin-right: 12px;
        cursor: pointer;

        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }

    .being-analysis-box-content {
      width: 983px;
      height: 204px;
      margin-left: 40px;
      overflow-y: auto;
      overflow-x: hidden;
      font-family: "Source Han Sans CN", sans-serif;
      font-weight: 400;
      font-size: 14px;
      line-height: 22px;
      letter-spacing: 0;
      text-align: left;
      color: rgb(59, 65, 75);
    }
  }

  .being-analysis-content-text {
    line-height: 22px;
    white-space: pre-wrap;
    word-break: break-word;
  }

  .being-analysis-image {
    width: 100%;
    height: 100%;
    min-height: 320px;
    display: flex;
    top: 276px;
    left: 408px;
    position: absolute;


    img {
      width: 289px;
      height: 242px;
      display: block;
    }
  }

  .box {
    display: flex;
    gap: 16px;
    margin-top: 16px;

    width: 1600px;
    height: 950px;
    margin-bottom: 100px;


    .box1 {
      width: 480px;
      height: 920px;
      display: flex;

      .box1-main {
        height: 866px;
        width: 100%;
        padding-left: 23px;
        padding-bottom: 18px;
        padding-right: 22px;
        display: flex;
        flex-direction: column;

        .box1-header {
          width: 435px;
          height: 68px;
          margin-top: 2px;
          display: flex;
          flex-direction: column;
          gap: 12px;

          .header-select {
            width: 435px;
            height: 32px;
            display: flex;
            gap: 8px;

            .select-Domain {
              width: 150px;
              height: 32px;

              :deep(.el-select__placeholder) {
                color: rgb(95, 101, 108) !important;
              }
            }

            .search-box {
              width: 277px;
              height: 32px;
              border: 1px solid rgb(230, 231, 232);
              border-radius: 4px;

              .search-icon {
                width: 16px;
                height: 16px;

                img {
                  width: 100%;
                  height: 100%;
                }
              }

            }
          }

          .footer-select {
            width: 435px;
            height: 24px;
            display: flex;


            .select-thinkTank {
              width: 107px;
              height: 24px;



              :deep(.el-input__wrapper) {
                box-shadow: none !important;
                border: none !important;
                outline: none !important;
              }

              :deep(.el-input__wrapper.is-focus) {
                box-shadow: none !important;
                border: none !important;
                outline: none !important;
              }

              :deep(.el-select__wrapper) {
                box-shadow: none !important;
                border: none !important;
                outline: none !important;
                height: 24px !important;
                line-height: 24px !important;
                min-height: 24px !important;
              }

              :deep(.el-input__inner) {
                height: 24px !important;
                line-height: 24px !important;
                min-height: 24px !important;
                /* 文字垂直居中 */
              }

              :deep(.el-select__placeholder) {
                color: rgb(95, 101, 108) !important;
              }
            }

            .select-time {
              width: 97px;
              height: 24px;

              :deep(.el-input__wrapper) {
                box-shadow: none !important;
                border: none !important;
                outline: none !important;
              }

              :deep(.el-input__wrapper.is-focus) {
                box-shadow: none !important;
                border: none !important;
                outline: none !important;
              }

              :deep(.el-select__wrapper) {
                box-shadow: none !important;
                border: none !important;
                outline: none !important;
                height: 24px !important;
                line-height: 24px !important;
                min-height: 24px !important;
              }

              :deep(.el-select__placeholder) {
                color: rgb(95, 101, 108) !important;
              }
            }

            .footer-text {
              height: 24px;
              color: rgb(95, 101, 108);
              font-family: "Source Han Sans CN", sans-serif;
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              letter-spacing: 0;
              text-align: center;
              margin-left: auto;
            }


            :deep(.el-input__wrapper) {
              box-shadow: none !important;
              border: none !important;
            }
          }
        }

        .box1-middle {
          width: 435px;
          height: 656px;
          margin-top: 12px;
          display: flex;
          flex-direction: column;
          overflow-y: auto;
          /* 垂直方向自动滚动条 */
          overflow-x: hidden;
          /* 禁止横向滚动 */

          .box1-item {
            height: 100px;
            width: 435px;
            border-top: 1px solid rgb(234, 236, 238);
            border-bottom: 1px solid rgb(234, 236, 238);
            flex-shrink: 0;
            display: flex;

            /* 防止item被挤压变形 */
            .left {
              width: 54px;
              height: 72px;
              margin-top: 14px;
              margin-left: 9px;

              img {
                width: 100%;
                height: 100%;
              }


            }

            .right {
              width: 320px;
              height: 72px;
              margin-top: 12px;
              margin-left: 8px;
              display: flex;
              flex-direction: column;

              .right-header {
                width: 320px;
                height: 48px;
                font-family: "Source Han Sans CN", sans-serif;
                font-weight: 700;
                /* Bold */
                font-size: 16px;
                line-height: 24px;
                letter-spacing: 0px;
                text-align: justify;
                color: rgb(59, 65, 75);
                /* 两端对齐 */
                display: -webkit-box;
                -webkit-line-clamp: 2;
                /* 限制 2 行 */
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
              }

              .right-footer {
                width: 320px;
                height: 22px;
                margin-top: 4px;
                display: flex;
                justify-content: space-between;

                .time {
                  height: 22px;
                  font-family: "Source Han Sans CN";
                  font-weight: 400;
                  /* Regular */
                  font-size: 14px;
                  line-height: 22px;
                  letter-spacing: 0;
                  text-align: left;
                  /* 左对齐 */
                  color: rgb(132, 136, 142);
                }

                .text-image {
                  height: 22px;
                  display: flex;

                  .image {
                    width: 16px;
                    height: 16px;
                    margin-top: 3px;
                    margin-right: 4px;

                    img {
                      width: 100%;
                      height: 100%;
                    }
                  }

                  .text {
                    height: 22px;
                    font-family: "Source Han Sans CN";
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 22px;
                    letter-spacing: 0;
                    text-align: left;
                    color: rgb(95, 101, 108);
                  }
                }
              }
            }

            .image-change {
              width: 16px;
              height: 16px;
              margin-top: 17px;
              margin-left: 14px;

              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }

        .page-box {
          margin-top: 21px;
        align-items: center;
          justify-content: center;
          display: flex;
        }

        .box1-footer {
          width: 435px;
          height: 36px;
          margin-top: 21px;
          border-radius: 6px;
          border: 1px solid #EAECEE;
          display: flex;
          cursor: pointer;

          .text {
            color: rgb(59, 65, 75);
            font-family: "Microsoft YaHei";
            font-weight: 400;
            font-size: 16px;
            line-height: 22px;
            letter-spacing: 0px;

            margin-top: 7px;
            margin-left: 154px;
          }

          .image {
            width: 13px;
            height: 8px;
            margin-top: 14px;
            margin-left: 8px;
            display: inline-block;

            img {
              width: 100%;
              height: 100%;
              vertical-align: top;
            }
          }

          &.is-disabled {
            cursor: not-allowed;
            opacity: 0.5;
            pointer-events: none;
          }
        }
      }

      .box1-main-analysis {
        height: 866px;
        width: 100%;
        padding-left: 23px;
        padding-bottom: 18px;
        padding-right: 22px;
        display: flex;
        flex-direction: column;

        .box1-header-analysis {
          width: 435px;
          height: 24px;
          margin-top: 1px;
          display: flex;

          display: flex;
          justify-content: space-between;

          .left-text-analysis {
            height: 24px;
            font-family: "Source Han Sans CN";
            font-weight: 400;
            /* 字重：Regular */
            font-size: 16px;
            /* 字号 */
            line-height: 24px;
            /* 行高 */
            letter-spacing: 0px;
            /* 字间距 */
            text-align: left;
            /* 左对齐 */
            color: rgb(59, 65, 75);
            cursor: pointer;
          }

          .right-text-analysis {
            height: 24px;
            font-family: "Source Han Sans CN";
            font-weight: 400;
            /* 字重：Regular */
            font-size: 16px;
            /* 字号 */
            line-height: 24px;
            /* 行高 */
            letter-spacing: 0px;
            /* 字间距 */
            text-align: left;
            /* 左对齐 */
            color: rgb(95, 101, 108);

          }


        }

        .box1-middle-analysis {
          margin-top: 12px;
          width: 435px;
          height: 757px;
          flex-direction: column;
          overflow-y: auto;
          /* 垂直方向自动滚动条 */
          overflow-x: hidden;
          /* 禁止横向滚动 */

          .box1-item {
            height: 100px;
            width: 435px;
            border-top: 1px solid rgb(234, 236, 238);
            border-bottom: 1px solid rgb(234, 236, 238);
            flex-shrink: 0;
            display: flex;

            /* 防止item被挤压变形 */
            .left {
              width: 54px;
              height: 72px;
              margin-top: 14px;
              margin-left: 9px;

              img {
                width: 100%;
                height: 100%;
              }


            }

            .right {
              width: 320px;
              height: 72px;
              margin-top: 12px;
              margin-left: 8px;
              display: flex;
              flex-direction: column;

              .right-header {
                width: 320px;
                height: 48px;
                font-family: "Source Han Sans CN", sans-serif;
                font-weight: 700;
                /* Bold */
                font-size: 16px;
                line-height: 24px;
                letter-spacing: 0px;
                text-align: justify;
                color: rgb(59, 65, 75);
                /* 两端对齐 */
                display: -webkit-box;
                -webkit-line-clamp: 2;
                /* 限制 2 行 */
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
              }

              .right-footer {
                width: 320px;
                height: 22px;
                margin-top: 4px;
                display: flex;
                justify-content: space-between;

                .time {
                  height: 22px;
                  font-family: "Source Han Sans CN";
                  font-weight: 400;
                  /* Regular */
                  font-size: 14px;
                  line-height: 22px;
                  letter-spacing: 0;
                  text-align: left;
                  /* 左对齐 */
                  color: rgb(132, 136, 142);
                }

                .text-image {
                  height: 22px;
                  display: flex;

                  .image {
                    width: 16px;
                    height: 16px;
                    margin-top: 3px;
                    margin-right: 4px;

                    img {
                      width: 100%;
                      height: 100%;
                    }
                  }

                  .text {
                    height: 22px;
                    font-family: "Source Han Sans CN";
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 22px;
                    letter-spacing: 0;
                    text-align: left;
                    color: rgb(95, 101, 108);
                  }
                }
              }
            }

            .image-change {
              width: 16px;
              height: 16px;
              margin-top: 17px;
              margin-left: 14px;

              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }



        .box1-footer-analysis {
          width: 435px;
          height: 36px;
          margin-top: 18px;
          border-radius: 6px;
          background-color: rgb(5, 95, 194);
          display: flex;
          cursor: pointer;

          .text-analysis {
            color: rgb(255, 255, 255);
            font-family: "Microsoft YaHei";
            font-weight: 400;
            font-size: 16px;
            line-height: 22px;
            letter-spacing: 0px;

            margin-top: 7px;
            margin-left: 175.5px;
          }

          .image-analysis {
            width: 13px;
            height: 8px;
            margin-top: 14px;
            margin-left: 8px;
            display: inline-block;

            img {
              width: 100%;
              height: 100%;
              vertical-align: top;
            }
          }

          &.is-disabled {
            cursor: not-allowed;
            opacity: 0.5;
            pointer-events: none;
          }
        }
      }


    }

    .box2 {
      width: 1104px;
      height: 920px;


      .box2-main {
        height: 866px;
        width: 100%;
        display: flex;

        justify-content: center;
        position: relative;


        .empty-image {
          width: 289px;
          height: 242px;
          margin-top: 276px;
          justify-content: center;
          display: flex;


          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .box2-main-Consensus {
        height: 866px;
        width: 100%;
        display: flex;

        padding-top: 13px;
        padding-left: 24px;
        padding-right: 24px;
        padding-bottom: 18px;
        display: flex;
        flex-direction: column;

        .box2-main-Consensus-header {
          width: 1056px;
          height: 34px;
          display: flex;
          flex-direction: row;
          gap: 12px;

          .tech-development-view {
            height: 34px;
            padding: 2px 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgb(231, 243, 255);
            border-radius: 20px;
            color: rgb(5, 95, 194);
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 16px;
            line-height: 30px;
            letter-spacing: 0px;
            text-align: justify;
            /* 两端对齐 */
          }

          .criticism-view {
            height: 34px;
            padding: 2px 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgb(250, 237, 237);
            border-radius: 20px;
            color: rgb(206, 79, 81);
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 16px;
            line-height: 30px;
            letter-spacing: 0px;
            text-align: justify;
            /* 两端对齐 */
          }

          .thinkTank-view {
            height: 34px;
            padding: 2px 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgb(255, 255, 255);
            border: 1px solid rgb(234, 236, 238);
            border-radius: 20px;
            color: rgb(95, 101, 108);
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 16px;
            line-height: 30px;
            letter-spacing: 0px;
            text-align: justify;

            .thinkTank-image {
              width: 16px;
              height: 16px;
              margin-right: 10px;
              margin-bottom: 0px;

              img {
                width: 100%;
                height: 100%;
                display: block;
              }
            }
          }

          /* 两端对齐 */

        }

        .box2-main-Consensus-content {
          width: 1056px;
          overflow-y: auto;
          overflow-x: hidden;

          height: 100%;
          min-height: 0;
          display: flex;
          flex-direction: column;
          align-items: stretch;
          position: relative;

          .empty-text {
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 16px;
            line-height: 30px;
            letter-spacing: 0px;
            text-align: center;
            display: flex;
            width: 289px;
            height: 30px;
            position: absolute;
            justify-content: center;
            left: 384px;
            bottom: 330px;
            color: rgb(132, 136, 142);
          }

          /* 展开区向下撑开，子项不被纵向压缩；超出高度由本容器滚动 */
          .empty-image {
            height: 200px;
            width: 200px;
            position: absolute;
            left: 428px;
            bottom: 372px;

            img {
              width: 100%;
              height: 100%;
              display: block;
              object-fit: contain;
              /* 防止图片变形 */
            }
          }

          .Consensus-item {
            width: 1056px;
            min-height: 62px;
            flex-shrink: 0;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            border-top: 1px solid rgb(234, 236, 238);
            padding: 16px 15px;

          }

          .Consensus-item:last-child {
            border-bottom: 1px solid rgb(234, 236, 238);
          }

          .Consensus-item:has(+ .Consensus-expand) {
            border-bottom: 1px solid rgb(234, 236, 238);
            margin-bottom: 0;
          }

          /* 展开时：只让“上方标题行”字重变粗 */
          .Consensus-item:has(+ .Consensus-expand) .Consensus-item-title {
            font-weight: 700;
          }

          .Consensus-item-number {
            flex: 0 0 24px;
            width: 24px;
            height: 24px;
            background-color: rgb(231, 243, 255);
            color: rgb(5, 95, 194);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 14px;
            line-height: 22px;
            letter-spacing: 0;
            text-align: center;
            margin-top: 3px;
          }

          .Consensus-item-title {
            flex: 1;
            min-width: 0;
            min-height: 30px;
            margin-left: 18px;
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 16px;
            line-height: 30px;
            letter-spacing: 0;
            text-align: justify;
            color: rgb(59, 65, 75);
          }

          .Consensus-item-right {
            flex: 0 0 auto;
            width: 89px;
            height: 30px;
            margin-left: 18px;
            color: rgb(95, 101, 108);
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 16px;
            line-height: 30px;
            letter-spacing: 0;
            text-align: justify;
          }

          .Consensus-item-image {
            flex: 0 0 auto;
            width: 14px;
            height: 24px;
            margin-left: 18px;

            img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }

          .Consensus-expand {
            width: 1056px;
            flex-shrink: 0;
            box-sizing: border-box;

            border-top: none;


            padding: 0px 50px 24px 58px;
          }

          .Consensus-expand:last-child {
            border-bottom: 1px solid rgb(234, 236, 238);
          }

          .Consensus-expand-row {
            display: flex;
            align-items: center;
            justify-content: space-between;

          }

          .Consensus-expand-image {
            width: 16px;
            height: 16px;
            margin-top: 3px;
            margin-right: 4px;

            img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }

          .Consensus-expand-badge {
            margin-top: 24px;
            width: 112px;
            height: 28px;
            padding: 2px 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            letter-spacing: 0px;
            text-align: justify;
          }

          .Consensus-expand-badge.is-tech-development {
            background-color: rgb(231, 243, 255);
            color: rgb(5, 95, 194);
          }

          .Consensus-expand-badge.is-criticism {
            background-color: rgb(250, 237, 237);
            color: rgb(206, 79, 81);
          }

          .Consensus-expand-title {
            width: 834px;
            height: 30px;
            color: rgb(59, 65, 75);
            font-family: "Source Han Sans CN";
            font-weight: 700;
            font-size: 16px;
            line-height: 30px;
            letter-spacing: 0px;
            text-align: justify;
          }

          .Consensus-expand-subtitle {
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 14px;
            line-height: 22px;
            letter-spacing: 0px;
            text-align: left;
            color: rgb(95, 101, 108);
            display: flex;
          }

          .Consensus-expand-content {
            margin-top: 4px;
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 16px;
            line-height: 30px;
            letter-spacing: 0px;
            text-align: justify;
            color: rgb(95, 101, 108);
            padding-bottom: 16px;
            border-bottom: 1px solid rgb(234, 236, 238);

          }

          .source-view-detail {
            margin-top: 16px;
            padding-bottom: 16px;
            border-bottom: 1px solid rgb(234, 236, 238);

            &:last-child {
              border-bottom: none;
            }
          }

          .source-view-detail-title {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            font-family: "Source Han Sans CN";
            font-weight: 500;
            font-size: 15px;
            line-height: 24px;
            color: rgb(59, 65, 75);
            margin-bottom: 6px;
          }

          .source-view-detail-title-text {
            justify-content: space-between;
            gap: 16px;
            font-family: "Source Han Sans CN";
            font-weight: 700;
            font-size: 16px;
            line-height: 30px;
            letter-spacing: 0;
            text-align: justify;
          }

          .source-view-detail-org {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: rgb(95, 101, 108);
            font-size: 14px;
            line-height: 22px;
            margin-top: 4px;

            img {
              width: 16px;
              height: 16px;
              display: block;

              object-fit: cover;
              margin-top: 3px;
            }

            .source-view-detail-org-text {
              font-family: "Source Han Sans CN";
              font-weight: 400;
              /* Regular */
              font-size: 14px;
              line-height: 22px;
              letter-spacing: 0px;
              text-align: left;
              /* 左对齐 */
              color: rgb(95, 101, 108);
            }
          }

          .source-view-detail-content {
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 16px;
            line-height: 30px;
            letter-spacing: 0;
            text-align: justify;
            color: rgb(95, 101, 108);
          }
        }



      }

      .box2-main-Differences {
        height: 866px;
        width: 100%;
        display: flex;

        padding-top: 13px;
        padding-left: 24px;
        padding-right: 24px;
        padding-bottom: 18px;
        display: flex;
        flex-direction: column;

        .box2-main-Differences-content {
          width: 1056px;
          overflow-y: auto;
          height: 848px;

          display: flex;
          flex-direction: column;
          overflow-x: hidden;
          position: relative;

          .Differences-item {
            width: 1056px;
            min-height: 62px;
            flex-shrink: 0;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            border-top: 1px solid rgb(234, 236, 238);
            padding-bottom: 16px;
            padding-top: 16px;
            padding-left: 15px;
            padding-right: 9px;

          }

          .empty-image {
            height: 200px;
            width: 200px;
            position: absolute;
            left: 428px;
            bottom: 372px;

            img {
              width: 100%;
              height: 100%;
              display: block;
              object-fit: contain;
              /* 防止图片变形 */
            }
          }

          .empty-text {
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 16px;
            line-height: 30px;
            letter-spacing: 0px;
            text-align: center;
            display: flex;
            width: 289px;
            height: 30px;
            position: absolute;
            justify-content: center;
            left: 384px;
            bottom: 330px;
            color: rgb(132, 136, 142);
          }

          .Differences-item:last-child {
            border-bottom: 1px solid rgb(234, 236, 238);
          }

          .Differences-item:has(+ .Differences-expand) {
            border-bottom: 1px solid rgb(234, 236, 238);
            margin-bottom: 0;
          }

          .Differences-item-number {
            flex: 0 0 24px;
            width: 24px;
            height: 24px;
            background-color: rgb(231, 243, 255);
            color: rgb(5, 95, 194);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 14px;
            line-height: 22px;
            letter-spacing: 0;
            text-align: center;
            margin-top: 3px;
          }

          .Differences-item-title {


            min-width: 0;
            min-height: 30px;
            margin-left: 18px;
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 16px;
            line-height: 30px;
            letter-spacing: 0;
            text-align: justify;
            color: rgb(59, 65, 75);
            display: flex;

          }

          .Differences-item:has(+ .Differences-expand) .Differences-item-title-left {
            font-weight: 700;
          }

          .Differences-item-title-right {
            min-height: 30px;
            margin-left: 18px;
            width: 89px;
          }

          .Differences-item-title-left {
            min-height: 30px;
            width: 845px;
          }



          .Differences-item-image {
            flex: 0 0 auto;
            width: 14px;
            height: 24px;
            margin-left: 18px;

            img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }

          .Differences-expand {
            width: 1056px;
            flex-shrink: 0;
            box-sizing: border-box;

            border-top: none;


            padding: 0px 50px 24px 58px;
            display: flex;
          }

          .Differences-expand:last-child {
            border-bottom: 1px solid rgb(234, 236, 238);
          }

          .Differences-expand-content {
            width: 948px;
            display: flex;
            flex-direction: column;
          }

          .Differences-expand-top-content {
            width: 948px;
            display: flex;
            gap: 44px
          }

          .Differences-expand-top-content-left {
            width: 948px;
            display: flex;
            flex-direction: column;

          }

          .content-left-title {
            width: 948px;
            height: 24px;
            display: flex;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: rgb(59, 65, 75);
            font-family: "Source Han Sans CN";
            font-weight: 400 !important;
            font-size: 16px;
            line-height: 24px;
            letter-spacing: 0px;
            text-align: justify;
          }

          .content-left-img-name {
            width: 948px;
            height: 22px;
            display: flex;
            margin-top: 8px;
          }

          .content-left-img {
            width: 16px;
            height: 16px;
            margin-top: 3px;
            margin-right: 4px;

            img {
              width: 100%;
              height: 100%;
              display: block;
            }



          }

          .content-left-name {

            height: 22px;
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 14px;
            line-height: 22px;
            letter-spacing: 0;
            text-align: left;
            color: rgb(95, 101, 108);
          }

          .content-left-text {
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 16px;
            line-height: 30px;
            letter-spacing: 0px;
            text-align: justify;
            color: rgb(95, 101, 108);
            margin-top: 8px;

          }

          .differences-source-views {


            .source-view-detail {
              margin-top: 16px;
              padding-bottom: 16px;
              border-bottom: 1px solid rgb(234, 236, 238);
            }

            .source-view-detail-title {
              display: flex;
              align-items: flex-start;
              justify-content: space-between;
              gap: 16px;
              font-family: "Source Han Sans CN";
              font-weight: 500;
              font-size: 15px;
              line-height: 24px;
              color: rgb(59, 65, 75);
              margin-bottom: 6px;
            }

            .source-view-detail-title-text {
              justify-content: space-between;
              font-family: "Source Han Sans CN", sans-serif;
              font-weight: 700;
              font-size: 16px;
              line-height: 30px;
              letter-spacing: 0;
              text-align: justify;
            }

            .source-view-detail-org {
              flex: 0 0 auto;
              display: inline-flex;
              align-items: center;
              gap: 4px;
              color: rgb(95, 101, 108);
              font-size: 14px;
              line-height: 22px;
              margin-top: 4px;

              img {
                width: 16px;
                height: 16px;
                display: block;

                object-fit: cover;
                margin-top: 3px;
              }

              .source-view-detail-org-text {
                font-family: "Source Han Sans CN";
                font-weight: 400;
                /* Regular */
                font-size: 14px;
                line-height: 22px;
                letter-spacing: 0px;
                text-align: left;
                /* 左对齐 */
                color: rgb(95, 101, 108);
              }
            }

            .source-view-detail-content {
              font-family: "Source Han Sans CN";
              font-weight: 400;
              font-size: 16px;
              line-height: 30px;
              letter-spacing: 0;
              text-align: justify;
              color: rgb(95, 101, 108);
            }
          }


          .Differences-expand-view {
            width: 948px;
            height: 36px;
            display: flex;
            margin-top: 10px;
            gap: 44px
          }

          .Differences-expand-view-left {
            width: 452px;
            height: 36px;
          }

          .left-tag {
            width: 112px;
            height: 28px;
            color: rgb(206, 79, 81);
            background-color: rgb(250, 237, 237);
            border-radius: 4px;
            margin-top: 8px;
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            letter-spacing: 0px;
            text-align: justify;
            display: flex;
            align-items: center;
            justify-content: center;
          }


        }


      }
    }
  }
}

:deep(.analysis-box-wrapper .wrapper-header) {
  height: 54px !important;
  display: flex;
  align-items: center;

  .header-title>div {
    line-height: 54px;
  }
}
</style>