<!-- 中M博弈概览页 -->
<template>
  <div class="resource-box">

    <img class="title-img" src="@/assets/images/bg/概览页模块标题2.png"></img>

    <div style="margin-top: 20px;height: 450px;display: flex;">
      <div class="resource-content" style="width: 45%; display: block;">
        <div class="item-header">
          <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
          <div class="item-header-text">中美博弈资源新闻动态</div>
          <div class="item-header-right"> 更多 +</div>
        </div>
        <div class="item-header-divider"></div>

      </div>
      <div class="resource-content" style="width: 45%;margin-left: 5%;">
        <div class="item-header">
          <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
          <div class="item-header-text">创新主体排名</div>

        </div>
        <div class="item-header-divider"></div>

      </div>

    </div>
    <div style="margin-top: 20px;height: 450px;display: flex;">
      <div class="resource-content" style="width: 45%; display: block;">
        <div class="item-header">
          <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
          <div class="item-header-text">研发投入情况</div>

        </div>
        <div class="item-header-divider"></div>
        <div style="display: flex;height: calc(100% - 60px);" id="char3">

        </div>
      </div>
      <div class="resource-content" style="width: 45%;margin-left: 5%;">
        <div class="item-header">
          <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
          <div class="item-header-text">研发投入领域</div>
          <div class="item-header-right"> 查看数据源> </div>
        </div>
        <div class="item-header-divider"></div>
        <div style="display: flex;height: calc(100% - 60px);" id="char4">

        </div>
      </div>

    </div>
    <div style="margin-top: 20px;height: 450px;display: flex;">
      <div class="resource-content" style="width: 45%; display: block;">
        <div class="item-header">
          <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
          <div class="item-header-text">专利申请情况</div>

        </div>
        <div class="item-header-divider"></div>
        <div style="display: flex;height: calc(100% - 60px);" id="char5">

        </div>
      </div>
      <div class="resource-content" style="width: 45%;margin-left: 5%;">
        <div class="item-header">
          <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
          <div class="item-header-text">论文发表情况</div>
          <div class="item-header-right"> 查看数据源> </div>
        </div>
        <div class="item-header-divider"></div>
        <div style="display: flex;height: calc(100% - 60px);" id="char6">

        </div>
      </div>

    </div>
  </div>

</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import getBarChart2 from '../js/barChart2.js'
import radarChart2 from '../js/radarChart2.js'
import getMultiLineChart1 from "../js/multiLineChart1.js";


const names = ['Jan', 'Feb', 'Mar', 'Apr', 'May']
const data1 = [120, 200, 150, 80, 70]
const data2 = [90, 230, 180, 110, 100]

//专利申请情况
const chart5Data = ref({
  title: [
    "2024-09",
    "2024-10",
    "2024-11",
    "2024-12",
    "2025-01",
    "2025-02",
    "2025-03",
    "2025-04",
    "2025-05",
    "2025-06",
    "2025-07",
    "2025-08"
  ],
  data: [
    {
      name: "提出法案",
      value: [145, 52, 84, 99, 71, 96, 128, 144, 140, 168, 188, 172]
    },
    {
      name: "通过法案",
      value: [6, 3, 4, 6, 11, 5, 2, 14, 16, 27, 28, 44]
    }
  ]
});

// 绘制echarts图表
const setChart = (option, chartId) => {
  let chartDom = document.getElementById(chartId);
  chartDom.removeAttribute("_echarts_instance_");
  let chart = echarts.init(chartDom);
  chart.setOption(option);
  return chart;
};

onMounted(() => {

  let char3 = getBarChart2(names, data1, data2, false);

  setChart(char3, "char3");

  let char4 = radarChart2()
  setChart(char4, "char4");

  let chart5 = getMultiLineChart1(chart5Data.value.title, chart5Data.value.data[0].value, chart5Data.value.data[1].value);
  setChart(chart5, "char5");
  let chart6 = getMultiLineChart1(chart5Data.value.title, chart5Data.value.data[0].value, chart5Data.value.data[1].value);
  setChart(chart6, "char6");
});
</script>

<style lang="scss" scoped>
.resource-box {
  height: 1550px;
}

.title-text {
  font-size: 32px;
  font-weight: 700;
  line-height: 42px;
  margin: 40px;
  text-align: center;
}

.title-img {
  width: 100%;
  height: 42px;
}

.resource-content {
  /* 容器 480 */
  width: 100%;
  height: 450px;
  box-sizing: border-box;
  border: 1px solid rgba(234, 236, 238, 1);
  border-radius: var(---, 10px);
  /* 业务系统/模块阴影 */
  box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
  background: rgba(255, 255, 255, 1);

  .item-header {
    height: 48px;
    width: 100%;
    display: flex;

    .item-header-icon {
      width: 20px;
      height: 20px;
      margin: 15px;
    }

    .item-header-text {
      width: 250px;
      font-size: 20px;
      font-weight: 700;
      line-height: 26px;
      background: rgba(255, 255, 255, 0.65);
      color: #055FC2;
      font-family: Microsoft YaHei;
      font-size: 20px;
      line-height: 48px;
      text-align: left;

    }

    .item-header-right {
      color: rgba(59, 65, 75, 1);
      font-family: Microsoft YaHei;
      font-size: 16px;
      line-height: 48px;
      text-align: right;

      width: calc(100% - 350px);

      .item-header-right-icon {
        /* 容器 704 */
        width: 14px;
        height: 16px;
      }
    }
  }

  .timeLine-box {
    height: 100%;
    width: calc(100% - 50px);


    .time-item-box {
      width: 30%;
      height: 165px;
    }
  }

  .item-header-divider {
    /* 矩形 249 */
    width: 100%;
    height: 1px;
    background: #eaecee;
  }

  .resource-btn-left {
    height: 100%;
    width: 24px;
  }

  .resource-btn-right {
    height: 100%;
    width: 24px;
  }

  .resource-btn-icon {
    height: 48px;
    width: 100%;
    margin-top: calc(50% - 24px);
  }

}
</style>
