<template>
  <div class="wrap">
    <div class="scroll-inner">
      <div class="header">
        <div class="header-top">
          <div class="header-top-left">
            <img :src=thinkInfo.projectCoverImgUrl alt="" />
            <div>
              <div class="title">{{ thinkInfo.name }}</div>
              <div class="en-title">
                {{ "调查项目" }}
              </div>

            </div>
          </div>
          <div class="header-top-right">
            <div class="image-name-box">
              <div class="image"><img :src="thinkInfo.orgLogo" alt="" /></div>
              <div class="name">{{ thinkInfo.orgName }}</div>
            </div>
            <div class="tag-box">
              <AreaTag v-for="(value, index) in thinkInfo.tags" :key="index" :tagName="value"></AreaTag>
            </div>
          </div>
        </div>

      </div>
      <div class="bottom-row">
        <div class="left">

          <div class="box1">
            <AnalysisBox title="关键词云" :showAllBtn="true">
              <div class="box1-main">
                <template v-if="!hasBox5ChartData">
                  <el-empty class="box5-el-empty" description="暂无数据" :image-size="100" />
                </template>
                <template v-else>
                  <div class="box5Chart">
                    <!-- 有数据后再挂载子组件：子组件仅在 onMounted 初始化，异步数据到达后需 v-if + key 强制重新挂载 -->
                    <WordCloudChart v-if="box5Data.length" :key="box5WordCloudKey" :data="box5Data" width="432px"
                      height="272px" />
                  </div>
                  <div class="box1-footer">
                    <TipTab :text="REPORT_ANALYSIS_TIP_BOX5" />
                  </div>
                  <div class="ai-wrap" v-if="!isShowAiContentBox5" @mouseenter="handleSwitchAiContentShowBox5(true)">
                    <AiButton />
                  </div>

                  <div class="ai-content" v-if="isShowAiContentBox5" @mouseleave="handleSwitchAiContentShowBox5(false)">
                    <AiPane :aiContent="aiContentBox5" />
                  </div>
                </template>
              </div>
            </AnalysisBox>
          </div>
          <div class="box2">
            <!-- <div class="box-header">
					<div class="header-left"></div>
					<div class="title">涉及科技领域</div>
					<div class="header-right">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box2-main">
					<div class="box2-content" id="box2Chart"></div>
				</div> -->
            <AnalysisBox title="项目报告" :showAllBtn="true">
              <div class="box2-main">
                <div class="box2-item" v-for="(report, idx) in reportList" :key="report.id || idx">
                  <div class="box2-item-content" @click="handleClickProjectReport(report)">
                    <div class="left"><img :src="report.imgUrl" alt="" /></div>
                    <div class="right-content">
                      <div class="report-title">{{ report.nameZh }}</div>
                      <div class="report-footer">
                        <div class="report-time">{{ formatDate(report.reportDate) }}</div>
                        <div class="report-footer-right">
                          <div class="footer-image">
                            <img :src="report.reportOrgLogo" alt="" />
                          </div>
                          <div class="think-name">{{ report.reportOrg }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </AnalysisBox>
          </div>

        </div>
        <div class="right">
          <div class="box3">
            <AnalysisBox title="内容摘要" :showAllBtn="true">
              <div class="box3-main">
                <AiSummary>
                  <template #summary-content>
                    {{ box1Data }}
                  </template>
                </AiSummary>

              </div>
            </AnalysisBox>
          </div>
          <div class="box4">
            <AnalysisBox title="项目背景" :showAllBtn="true">
              <div class="box4-main">
                <div class="text" v-html="formatParagraph(projectBackground)">

                </div>
              </div>
            </AnalysisBox>
          </div>
          <div class="box5">
            <AnalysisBox title="项目团队" :showAllBtn="true">
              <div class="box5-main">

                <div class="box5-main-item-box">
                  <div class="item" v-for="(author, idx) in reportAuthors" :key="idx">
                    <div class="item-left">
                      <img :src="author.avatarUrl ? author.avatarUrl : DefaultIcon1" alt=""
                        @error="() => { if (author.avatarUrl) author.avatarUrl = null; }"
                        @click="handleClickReportAuthor(author)" />
                    </div>
                    <div class="item-right">
                      <div class="item-name">{{ author.name }} </div>

                    </div>
                  </div>
                </div>
              </div>
            </AnalysisBox>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import DefaultIcon1 from '@/assets/icons/default-icon1.png'
import WarningPane from "@/components/base/WarningPane/index.vue"
import WordCloudChart from "@/components/base/WordCloundChart/index.vue"
import SearchContainer from "@/components/SearchContainer.vue";
import { ref, onMounted, computed, defineProps } from "vue";
import { ElMessage } from "element-plus";
import {
  getThinkTankReportAbstract,
  getThinkTankReportContent,
  getThinkTankReportIndustry,
  getThinkTankReportIndustryCloud,
  getThinkTankReportViewpoint,
  getThinkTankProjectsInfo,
  getThinkTankProjectCloud,
  getThinkTankProjectsAuthors,
  getThinkTankReportRelated,
  getThinkTankProjectRelated
} from "@/api/thinkTank/overview";
import { getChartAnalysis } from "@/api/aiAnalysis/index";
import { useRouter } from "vue-router";
import "echarts-wordcloud";
import AiSummary from '@/components/base/Ai/AiSummary/index.vue'
import { getPersonSummaryInfo } from "@/api/common/index";
import AiButton from "@/components/base/Ai/AiButton/index.vue";
import AiPane from "@/components/base/Ai/AiPane/index.vue";
import TipTab from "@/views/thinkTank/TipTab/index.vue";
const router = useRouter();
const thinkInfo = ref({


})
const reportAuthors = ref([]);
const projectBackground = ref("");
const applySurveyProjectDocumentTitle = (title) => {
  const text = String(title || "").trim();
  if (!text) return;
  window.sessionStorage.setItem("surveyProjectTabName", text);
  document.title = text;
};
const REPORT_ANALYSIS_TIP_BOX5 =
  "调查项目关键词云，数据来源：美国兰德公司官网";
// 默认仅展示 AiButton，悬停后再请求 AI
const isShowAiContentBox5 = ref(false);
const aiContentBox5 = ref("");
const isBox5InterpretLoading = ref(false);
const box5AiAbortController = ref(null);
const handleSwitchAiContentShowBox5 = (val) => {
  isShowAiContentBox5.value = val;
  if (val) {
    fetchBox5ChartInterpretation();
  } else {
    if (box5AiAbortController.value) {
      box5AiAbortController.value.abort();
      box5AiAbortController.value = null;
    }
    isBox5InterpretLoading.value = false;
  }
};
const searchOpinions = ref('');
const formatParagraph = (text) => {
  if (!text) return ''
  // 把换行分割成数组 → 每一段都包 <p>
  return text.split('\n').map(item => {
    return `<p>${item}</p>`
  }).join('')
}
const escapeHtml = (text) => {
  return String(text ?? "")
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#39;");
};
const escapeRegExp = (text) => {
  return String(text ?? "").replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
};
/** 可同时展开多条；用 id 区分项，避免翻页后索引与展开状态错位 */
const expandedOpinionKeys = ref(new Set());
const getOpinionExpandKey = (item, index) => {
  if (item != null && item.id != null && item.id !== "") {
    return String(item.id);
  }
  return `idx-${index}`;
};
const reportList = ref([]);
const formatDate = (dateStr) => {
  if (!dateStr) return "";
  const date = new Date(dateStr)
  const y = date.getFullYear()
  const m = date.getMonth() + 1
  const d = date.getDate()
  return `${y}年${m}月${d}日`
};
// 获取项目报告信息
const handleGetThinkTankReport = async () => {
  try {
    const res = await getThinkTankProjectRelated(router.currentRoute._value.params.id);
    console.log("报告全局信息", res);
    if (res.code === 200 && res.data) {
      reportList.value = Array.isArray(res.data) ? res.data : [];
    }
  } catch (error) {
    console.error("获取相关报告error", error);
  }
};

/** 新标签页打开智库报告详情 /thinkTank/reportDetail/:id */
const handleClickProjectReport = (report) => {
  const id = report?.id;
  if (!id) {
    ElMessage.warning("报告 id 为空，无法跳转");
    return;
  }
  const reportTitle = String(report?.nameZh || report?.name || "").trim();
  const route = router.resolve({
    name: "ReportDetail",
    params: { id: String(id) },
    query: reportTitle ? { name: reportTitle } : {}
  });
  window.open(route.href, "_blank");
};

const handleClickReportAuthor = async (author) => {
  const personId = author?.personId;
  if (!personId) return;



  const params = { personId };

  const res = await getPersonSummaryInfo(params);
  if (res.code !== 200 || !res.data) return;
  window.sessionStorage.setItem("curTabName", author?.name || "");
  const route = router.resolve({
    path: "/characterPage",
    query: {
      personId
    }
  });
  window.open(route.href, "_blank");
};
// 内容摘要
const box1Data =
  ref(`包括经济竞争在内的美中竞争自2017年以来一直在定义美国外交政策。这两个经济体是世界上第一和第二大国家经济体,并且深深交织在一起。改变关系,无论多么必要,可能是昂贵的。因此,美国面临着一项挑战,确保其经济在耦合的战略竞争条件下满足国家的需求。
       为了应对这一挑战,兰德大学的研究人员对美中竞争进行了经济和制度分析,进行了参与式的远见练习,以了解确保美国经济健康的长期路径,并创建了两个经济竞争游戏,探索多个国家在相互交流的同时确保经济健康的动态...`);

// 获取调查项目详情（header/摘要/背景）
const handleGetThinkTankProjectsInfo = async () => {
  try {
    const id = router.currentRoute._value.params.id;
    if (!id) return;
    const res = await getThinkTankProjectsInfo({ id });
    if (res?.code === 200 && res?.data) {
      const info = res.data;
      thinkInfo.value = {
        ...info,
        name: info.projectNameZh,
        ename: info.projectName,
        tags: Array.isArray(info.domains) ? info.domains : thinkInfo.value.tags,
      };
      console.log("thinkInfo", thinkInfo.value);
      applySurveyProjectDocumentTitle(info.projectNameZh || info.projectName || "");
      if (info.summaryZh || info.summary) {
        box1Data.value = info.summaryZh || info.summary;
      }
      projectBackground.value = info.backgroundZh || info.background || projectBackground.value;
    }
  } catch (error) {
    console.error("获取调查项目详情error", error);
  }
};
const handleGetThinkTankProjectsAuthor = async () => {
  try {
    const id = router.currentRoute._value.params.id;
    if (!id) return;
    const res = await getThinkTankProjectsAuthors({ id });
    if (res?.code === 200 && res?.data) {

      reportAuthors.value = res.data;
      console.log("reportAuthors.value", reportAuthors.value);

    }
  } catch (error) {
    console.error("获取调查项目作者error", error);
  }
};
//获取内容摘要
const handleGetThinkTankReportAbstract = async () => {
  try {
    const res = await getThinkTankReportAbstract(router.currentRoute._value.params.id);
    console.log("内容摘要", res);
    if (res.code === 200 && res.data) {
      box1Data.value = res.data;
    }
  } catch (error) {
    console.error("获取内容摘要error", error);
  }
};

// 涉及科技领域
const areaList = ref([]);
const activeArea = ref(6);
const handleClickArea = area => {
  activeArea.value = area;
  handleGetThinkTankReportIndustryCloud();
};
const box2Data = ref([
  // {
  // 	name: "通用人工智能",
  // 	value: 100
  // },
  // {
  // 	name: "AI芯片",
  // 	value: 66
  // },
  // {
  // 	name: "计算能力又是",
  // 	value: 72
  // },
  // {
  // 	name: "基准测试",
  // 	value: 88
  // },
  // {
  // 	name: "出口管制",
  // 	value: 78
  // },
  // {
  // 	name: "军事AI",
  // 	value: 85
  // },
  // {
  // 	name: "生态系统",
  // 	value: 88
  // },
  // {
  // 	name: "模型能力",
  // 	value: 89
  // }
]);
// 报告关键词云
const box5Data = ref([]);
const hasBox5ChartData = computed(() => Array.isArray(box5Data.value) && box5Data.value.length > 0);
/** 词云子组件不 watch 数据，每次接口成功有数据时递增 key，强制重新挂载以触发 onMounted */
const box5WordCloudKey = ref(0);

//获取科技领域词云
const handleGetThinkTankReportIndustryCloud = async () => {
  try {
    const params = {
      id: router.currentRoute._value.params.id
      // industryId: activeArea.value
    };
    const res = await getThinkTankProjectCloud(params);
    console.log("科技领域词云", res);
    if (res.code === 200 && res.data) {
      const data = (res.data || []).map(item => ({
        name: item.name,
        value: item.value
      }));
      // 该接口数据用于「报告关键词云」
      box5Data.value = data;
      if (data.length) {
        box5WordCloudKey.value += 1;
      }
      // 仅在用户打开 AI 面板时才请求解读
    } else {
      box5Data.value = [];
    }
  } catch (error) {
    console.error("获取科技领域词云error", error);
    box5Data.value = [];
  }
};
//涉及科技领域
const handleGetThinkTankReportIndustry = async () => {
  try {
    const res = await getThinkTankReportIndustry(router.currentRoute._value.params.id);
    console.log("涉及科技领域", res);
    if (res.code === 200 && res.data) {
      areaList.value = res.data;
    }
  } catch (error) {
    console.error("获取涉及科技领域error", error);
  }
};
// 主要观点
const majorOpinions = ref([
  {
    id: 1,
    title: "我是示例标题",
    desc: "我是示例内容",
    tagList: [
      {
        name: "关税",
        status: 2
      },
      {
        name: "跨境电商",
        status: 1
      }
    ]
  },
  {
    id: 2,
    title: "我是示例标题",
    desc: "我是示例内容",
    tagList: [
      {
        name: "私有经济",
        status: 2
      }
    ]
  }
]);
//处理点击详情页事件
const handleOpenReportOriginal = item => {
  const route = router.resolve({
    name: "ReportOriginal",
    params: {
      id: router.currentRoute._value.params.id
    },
    query: {
      currentPage: currentPage.value,
      pageSize: pageSize.value,
      opinionId: item?.id ?? "",
      opinionContent: item?.content ?? ""
    }
  });
  window.open(route.href, "_blank");
};
const tabActiveName = ref("报告分析");

const switchTab = name => {
  tabActiveName.value = name;
};
// 处理页码改变事件
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);


// 获取报告核心论点（支持搜索）
const handleGetThinkTankReportViewpoint = async () => {
  try {
    const params = {
      reportId: router.currentRoute._value.params.id,
      currentPage: currentPage.value - 1,
      pageSize: pageSize.value,
      keyword: (searchOpinions.value || "").trim(),
      orgIds: ""
    };
    const res = await getThinkTankReportViewpoint(params);
    console.log("核心论点", res.data);
    if (res.code === 200 && res.data) {
      const nextOpinions = res.data.content || [];
      majorOpinions.value = nextOpinions;

      total.value = res.data.totalElements || 0;
      // 默认：第一条展开，其余关闭
      const nextExpandedKeys = new Set();
      if (Array.isArray(nextOpinions) && nextOpinions.length > 0) {
        nextExpandedKeys.add(getOpinionExpandKey(nextOpinions[0], 0));
      }
      expandedOpinionKeys.value = nextExpandedKeys;
    }
  } catch (error) {
    console.error("获取主要观点error", error);
  }
};

// 获取图表分析内容
const box3AnalysisContent = ref("");

const getInterpretationTextFromChartResponse = (res) => {
  const list = res?.data;
  const first = Array.isArray(list) ? list[0] : null;
  return (
    first?.["解读"] ||
    first?.["interpretation"] ||
    first?.["analysis"] ||
    first?.["content"] ||
    ""
  );
};
const appendAiInterpretationChunk = (targetRef, chunk, loadingText = "解读生成中…") => {
  if (!chunk) {
    return;
  }
  const current = String(targetRef.value || "");
  const base = current === loadingText ? "" : current;
  targetRef.value = base + String(chunk);
};
const fetchBox5ChartInterpretation = async () => {
  const list = Array.isArray(box5Data.value) ? box5Data.value : [];
  if (!list.length) {
    aiContentBox5.value = "暂无图表数据";
    return;
  }
  const hasValidContent =
    aiContentBox5.value &&
    aiContentBox5.value !== "解读生成中…" &&
    aiContentBox5.value !== "解读加载失败" &&
    aiContentBox5.value !== "暂无图表数据";
  if (hasValidContent || isBox5InterpretLoading.value) {
    return;
  }
  if (box5AiAbortController.value) {
    box5AiAbortController.value.abort();
  }
  box5AiAbortController.value = new AbortController();
  isBox5InterpretLoading.value = true;
  aiContentBox5.value = "解读生成中…";
  const chartPayload = {
    type: "词云图",
    name: "报告关键词云",
    data: list.map((item) => ({
      name: item.name,
      value: item.value
    }))
  };
  try {
    const res = await getChartAnalysis(
      { text: JSON.stringify(chartPayload) },
      {
        signal: box5AiAbortController.value.signal,
        onChunk: chunk => {
          appendAiInterpretationChunk(aiContentBox5, chunk);
        }
      }
    );
    const text = getInterpretationTextFromChartResponse(res);
    aiContentBox5.value = text || aiContentBox5.value || "未返回有效解读内容";
  } catch (error) {
    if (error?.name !== "AbortError") {
      console.error("报告关键词云图表解读请求失败", error);
      aiContentBox5.value = "解读加载失败";
    }
  } finally {
    isBox5InterpretLoading.value = false;
    box5AiAbortController.value = null;
  }
};

onMounted(() => {
  handleGetThinkTankProjectsInfo();
  handleGetThinkTankReportAbstract();
  handleGetThinkTankReportViewpoint();
  handleGetThinkTankReportIndustry();

  handleGetThinkTankReportIndustryCloud();
  handleGetThinkTankProjectsAuthor();
  handleGetThinkTankReport();
});
</script>

<style lang="scss" scoped>
.wrap {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;

  .scroll-inner {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding-bottom: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;

    &::-webkit-scrollbar {
      width: 8px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 4px;
    }
  }

  .header {
    width: 100%;
    min-height: 94px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(234, 236, 238, 1);
    box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
    background: rgba(255, 255, 255, 1);
    position: sticky;
    top: 0;
    z-index: 99999;
    overflow: hidden;

    .header-top {
      margin: 0 auto;
      margin-top: 20px;
      width: 1600px;
      display: flex;
      justify-content: space-between;

      .header-top-left {
        display: flex;

        img {
          width: 54px;
          height: 54px;
        }

        .title {
          margin-left: 20px;
          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);
        }

        .en-title {
          margin-left: 20px;
          margin-top: 4px;
          font-family: "Source Han Sans CN";
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          letter-spacing: 0;
          text-align: left;
          color: rgb(95, 101, 108);
        }


      }

      .header-top-right {
        display: flex;
        flex-direction: column;
        text-align: right;
        align-items: flex-end;

        .image-name-box {
          width: 118px;
          height: 24px;
          gap: 6px;

          text-align: right;
          display: flex;
          justify-content: flex-end;

          .name {
            height: 24px;
            color: rgba(95, 101, 108, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            letter-spacing: 0px;
            text-align: right;
          }

          .image {
            width: 16px;
            height: 16px;

            margin-top: 5px;

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

        .tag-box {
          margin-top: 7px;
          display: flex;
          gap: 8px;

        }
      }
    }


  }

  .bottom-row {

    flex-direction: row;
    justify-content: center;
    display: flex;
    gap: 16px;
    margin-bottom: 70px;


    .left {
      gap: 16px;
      display: flex;
      flex-direction: column;



      .box1 {
        width: 480px;
        height: 415px;
        margin-top: 17px;


        .box1-main {
          width: 480px;
          height: 361px;
          padding: 24px 24px 65px 24px;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          overflow: hidden;
          position: relative;

          .box5Chart {
            width: 100%;
            height: 100%;
            margin: 0 auto;
            overflow: hidden;
          }

          .box5-el-empty {
            margin: 0 auto;
            height: 100%;
          }

          .box1-footer {

            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            bottom: 20px;
            left: 32px;

          }

          .ai-wrap {
            position: absolute;
            bottom: 18px;
            right: 0;
            cursor: pointer;


          }

          .ai-content {
            position: absolute;
            bottom: 0;
            right: 0;
            min-width: 480px;
            min-height: 156px;

          }


        }
      }

      .box2 {

        width: 480px;

        // border: 1px solid rgba(234, 236, 238, 1);
        // border-radius: 10px;
        // box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
        // background: rgba(255, 255, 255, 1);

        .box2-main {
          width: 436px;
          margin-top: 5px;
          margin-left: 23px;


          .box2-item {
            height: 103px;
            width: 100%;
            border-bottom: 1px solid rgba(234, 236, 238, 1);
            border-top: 1px solid rgba(234, 236, 238, 1);

            .box2-item-content {
              width: 100%;
              height: 90px;
              margin-top: 7px;
              display: flex;
              cursor: pointer;

              .left {
                width: 56px;
                height: 74px;
                margin-top: 8px;

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

              .right-content {
                margin-left: 13px;
                width: 365px;
                height: 76px;
                margin-top: 7px;

                .report-title {
                  height: 48px;
                  font-family: "Source Han Sans CN";
                  font-weight: 700;
                  font-size: 16px;
                  line-height: 24px;
                  letter-spacing: 0;
                  text-align: left;

                  /* 👇 下面是 两行文本超出省略 核心代码 */
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  /* 限制显示 2 行 */
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  word-break: break-all;
                }

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

                  .report-time {

                    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);
                  }

                  .report-footer-right {
                    height: 22px;
                    display: flex;
                    gap: 6px;

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

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

                    .think-name {
                      height: 22px;
                    }
                  }
                }
              }
            }
          }
        }

        .box2-btn {
          margin-top: 16px;
          margin-bottom: 21px;
          margin-left: 23px;
          width: 436px;
          height: 36px;
          background-color: rgb(5, 95, 194);
          border-radius: 6px;
          display: flex;

          .btn-text {
            color: rgb(255, 255, 255);
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 16px;
            line-height: 22px;
            letter-spacing: 0;
            margin-left: 120px;
            margin-top: 7px;


          }

          .btn-image {
            width: 13px;
            height: 8px;

            margin-left: 8px;
            display: inline-block;
            margin-top: 14px;

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

    .right {
      margin-top: 17px;
      gap: 16px;
      display: flex;
      flex-direction: column;

      .box3 {
        width: 1103px;


        // border: 1px solid rgba(234, 236, 238, 1);
        // border-radius: 10px;
        // box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
        // background: rgba(255, 255, 255, 1);
        .box3-main {
          width: 1058px;

          margin-top: 3px;
          margin-left: 22px;
          padding-bottom: 22px;

          :deep(.summary-main) {
            margin-bottom: 25px;
            font-family: "Source Han Sans CN";
            font-weight: 400;
            /* Regular 常规 */
            font-size: 16px;
            line-height: 30px;
            letter-spacing: 0px;
            text-align: justify;
            color: rgb(59, 65, 75);
            /* 两端对齐 */

          }

          .box3-top {
            width: 1058px;
            height: 48px;
            background: linear-gradient(rgb(137, 193, 255, 0.1), rgb(255, 255, 255));
            display: flex;

            .top-title {
              width: 1010px;
              height: 32px;
              margin-left: 24px;
              margin-top: 16px;

              .title-image {
                width: 199px;
                height: 32px;

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

            }



          }

          .box3-text {
            width: 1006px;
            margin-top: 24px;
            margin-left: 26px;
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 16px;
            line-height: 30px;
            letter-spacing: 0px;
            text-align: justify;
            text-justify: inter-ideograph;
          }
        }


      }

      .box4 {
        width: 1103px;
        height: auto;

        // border: 1px solid rgba(234, 236, 238, 1);
        // border-radius: 10px;
        // box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
        // background: rgba(255, 255, 255, 1);
        position: relative;



        .box4-main {
          width: 1103px;
          padding: 5px 24px 21px 28px;

          .text {
            font-family: "Source Han Sans CN";
            font-weight: 400;
            /* Regular */
            font-size: 16px;
            line-height: 30px;
            letter-spacing: 0px;
            text-align: left;
            color: rgb(59, 65, 75);
            white-space: pre-line;
            text-indent: 2em;
            margin: 0;
          }


        }


      }

      .box5 {
        width: 1103px;
        height: auto;
        position: relative;

        .box5-main {
          width: 1103px;
          padding: 3px 18px 21px 20px;

          .box5-main-item-box {
            width: 1065px;
            display: grid;
            grid-template-columns: 1fr 1fr;

            gap: 12px 0;


            .item {
              width: 532.5px;
              height: 49px;
              display: flex;
              flex-direction: row;

              .item-left {
                width: 42px;
                height: 42px;
                border-radius: 50%;
                margin-top: 3px;
                margin-left: 3px;
                cursor: pointer;

                img {
                  width: 100%;
                  height: 100%;
                  display: block;
                  border-radius: 50%;
                  /* 图片也要加，不然会漏出直角 */
                  object-fit: cover;
                  /* 防止图片变形 */
                }
              }

              .item-right {
                height: 49px;
                margin-left: 11px;
                display: flex;
                flex-direction: column;

                .item-name {
                  height: 24px;
                  margin-top: 1px;
                  font-family: "Source Han Sans CN";
                  font-weight: 700;
                  /* Bold 粗体 */
                  font-size: 16px;
                  line-height: 24px;
                  letter-spacing: 0px;
                  text-align: left;
                  color: rgb(59, 65, 75);
                }

                .item-position {
                  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(95, 101, 108);

                }
              }
            }
          }

        }


      }
    }
  }
}

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

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