<template>
  <div class="wrap">
    <div class="scroll-inner">
      <div class="header">
      <div class="header-top">
        <div class="header-top-left">
          <img src="../assets/images/box1-logo.png" alt="" />
          <div>
            <div class="title">{{ thinkInfo.name }}</div>
            <div class="en-title">
              {{ thinkInfo.ename }}
            </div>

          </div>
        </div>
        <div class="header-top-right">
          <div class="image-name-box">
            <div class="image"><img src="../assets/images/box1-logo.png" alt="" /></div>
            <div class="name">{{ thinkInfo.thinkTankName }}</div>
          </div>
          <div class="tag-box">
            <AreaTag v-for="(value, index) in thinkInfo.tags" :key="index" :tagName="value.industryName"></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" @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="idx">
                <div class="box2-item-content">
                  <div class="left"><img :src="report.image" alt="" /></div>
                  <div class="right-content">
                    <div class="report-title">{{ report.name }}</div>
                    <div class="report-footer">
                      <div class="report-time">{{ report.postDate }}</div>
                      <div class="report-footer-right">
                        <div class="footer-image">
                          <img :src="report.thinktankLogo" alt="" />
                        </div>
                        <div class="think-name">{{ report.thinktankName }}</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">
                {{
                  "可再生能源和清洁能源创新为摆脱对化石燃料的依赖提供了机会。然而，可再生能源的间歇性也对电网的实时供需平衡构成挑战。作为解决方案，中国提出开发全球能源互联（GEI）倡议，通过超高压输电线路和智能技术，直接将可再生能源生产者与全球消费者连接起来。北京认识到GEI的潜力，正站在GEI发展的前沿，领导关键推动技术的研究，输出中国技术和标准，支持海外发电和输电基础设施的发展。中国还在联合国和海湾合作委员会等国际组织推动GEI"
                }}
              </div>
            </div>
          </AnalysisBox>
        </div>
        <div class="box5">
          <AnalysisBox title="项目团队" :showAllBtn="true">
            <div class="box5-main">

              <div class="box5-main-item-box">
                <div class="item">
                  <div class="item-left">
                    <img src="../assets/images/rand-image.png" alt="" />
                  </div>
                  <div class="item-right">
                    <div class="item-name">{{ "纳迪娅·阿尔马萨尔基" }} </div>
                    <div class="item-position">{{ "副秘书" }}</div>
                  </div>
                </div>
                <div class="item">
                  <div class="item-left">
                    <img src="../assets/images/rand-image.png" alt="" />
                  </div>
                  <div class="item-right">
                    <div class="item-name">{{ "纳迪娅·阿尔马萨尔基" }} </div>
                    <div class="item-position">{{ "副秘书" }}</div>
                  </div>
                </div>
                <div class="item">
                  <div class="item-left">
                    <img src="../assets/images/rand-image.png" alt="" />
                  </div>
                  <div class="item-right">
                    <div class="item-name">{{ "纳迪娅·阿尔马萨尔基" }} </div>
                    <div class="item-position">{{ "副秘书" }}</div>
                  </div>
                </div>
                <div class="item">
                  <div class="item-left">
                    <img src="../assets/images/rand-image.png" alt="" />
                  </div>
                  <div class="item-right">
                    <div class="item-name">{{ "纳迪娅·阿尔马萨尔基" }} </div>
                    <div class="item-position">{{ "副秘书" }}</div>
                  </div>
                </div>
                <div class="item">
                  <div class="item-left">
                    <img src="../assets/images/rand-image.png" alt="" />
                  </div>
                  <div class="item-right">
                    <div class="item-name">{{ "纳迪娅·阿尔马萨尔基" }} </div>
                    <div class="item-position">{{ "副秘书" }}</div>
                  </div>
                </div>
                <div class="item">
                  <div class="item-left">
                    <img src="../assets/images/rand-image.png" alt="" />
                  </div>
                  <div class="item-right">
                    <div class="item-name">{{ "纳迪娅·阿尔马萨尔基" }} </div>
                    <div class="item-position">{{ "副秘书" }}</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
} 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({
  name: "探讨中国开发和管理的跨大陆电网的安全影响",
  ename: "调查项目",
  tags: [{ industryName: "深海" }, { industryName: "人工智能" }],
  thinkTankName: "兰德科技智库"

})
const REPORT_ANALYSIS_TIP_BOX5 =
  "智库报告关键词云，数据来源：美国兰德公司官网";
// 刷新后默认展示「报告关键词云」AI 总结
const isShowAiContentBox5 = ref(true);
const aiContentBox5 = ref("");
const isBox5InterpretLoading = ref(false);
const handleSwitchAiContentShowBox5 = (val) => {
  isShowAiContentBox5.value = val;
  if (val) {
    fetchBox5ChartInterpretation();
  }
};

const searchOpinions = ref('');

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 box1Data =
  ref(`包括经济竞争在内的美中竞争自2017年以来一直在定义美国外交政策。这两个经济体是世界上第一和第二大国家经济体,并且深深交织在一起。改变关系,无论多么必要,可能是昂贵的。因此,美国面临着一项挑战,确保其经济在耦合的战略竞争条件下满足国家的需求。
       为了应对这一挑战,兰德大学的研究人员对美中竞争进行了经济和制度分析,进行了参与式的远见练习,以了解确保美国经济健康的长期路径,并创建了两个经济竞争游戏,探索多个国家在相互交流的同时确保经济健康的动态...`);

//获取内容摘要
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 getThinkTankReportIndustryCloud(params);
    console.log("科技领域词云", res);
    if (res.code === 200 && res.data) {
      const data = (res.data || []).map(item => ({
        name: item.clause,
        value: item.count
      }));
      // 该接口数据用于「报告关键词云」
      box5Data.value = data;
      if (data.length) {
        box5WordCloudKey.value += 1;
      }
      // 刷新后默认展开 AI：数据就绪即触发解读
      if (isShowAiContentBox5.value) {
        fetchBox5ChartInterpretation();
      }
    } 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 handleCurrentChange = page => {
  currentPage.value = page;
  handleGetThinkTankReportViewpoint();
};

// 获取报告核心论点（支持搜索）
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 handleGetBox3AnalysisContent = async textJson => {
  const params = {
    text: textJson
  };
  const res = await getChartAnalysis(params);
  console.log("图表解析内容", res);
};
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;
  }
  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) },
      {
        onChunk: chunk => {
          appendAiInterpretationChunk(aiContentBox5, chunk);
        }
      }
    );
    const text = getInterpretationTextFromChartResponse(res);
    aiContentBox5.value = text || aiContentBox5.value || "未返回有效解读内容";
  } catch (error) {
    console.error("报告关键词云图表解读请求失败", error);
    aiContentBox5.value = "解读加载失败";
  } finally {
    isBox5InterpretLoading.value = false;
  }
};

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

  handleGetThinkTankReportIndustryCloud();
});
</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;
          }

          .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;

              .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 {
                    height: 22px;
                    width: 97px;
                    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);
          }


        }


      }

      .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;

                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>
