<!-- 中M博弈资源支撑 -->
<template>
  <div class="resource-box">

    <DivideHeader class="divide1" :titleText="'中美博弈资源支撑'"></DivideHeader>

    <div style="margin-top: 20px;height: 450px;display: flex;">
      <div class="resource-content" style="width: 47.5%; 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 style=" height: 400px;overflow: auto;">
          <el-timeline style="max-width: 600px;padding: 25px; ">
            <el-timeline-item placement="top" v-for="(activity, index) in newsData" :key="index" :icon="activity.icon"
              type="primary" :hollow="true" :timestamp="activity.time">
              <div class="row">
                <div class="content-wrapper">
                  {{ activity.content }}
                </div>
                <img :src="activity.image" />
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>

      </div>
      <div class="resource-content" style="width: 47.5%;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" style="width: 130px;">创新主体排名</div>


          <el-radio-group v-model="InnovationRankingBtn" size="small" @change="handleInnovationRankingBtn">

            <el-radio-button value="enterprise" border>科技企业
            </el-radio-button>
            <el-radio-button value="lab" border>国家重点实验室</el-radio-button>
            <el-radio-button value="university" border>研究型大学
            </el-radio-button>
            <el-radio-button value="contractor" border>国防承包商</el-radio-button>
          </el-radio-group>

        </div>
        <div class="item-header-divider"></div>
        <el-table :data="InnovationRanking" stripe style="width: 100%;padding: 5px 25px;"
          :header-cell-style="headerCellStyle">
          <el-table-column prop="name" label="创新主体" width="100" />

          <el-table-column prop="markValue" align="right">
            <template #header>
              <div class="custom-header">
                <div class="label">市值</div>
                <div class="unit">（亿元）</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="所属领域" width="180">
            <template #default="scope">
              <div style="display: flex; align-items: center; gap: 5px">
                <el-tag v-for="tag in scope.row.area" :key="tag" :type="tag === '人工智能'
                  ? 'primary'
                  : TAGTYPE[Math.floor(Math.random() * 5)]
                  ">{{ tag }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="创新实力">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-progress :percentage="scope.row.value * 100" :show-text="false" style="width: 50px;"
                  :status="getStatus(scope.row.value)" />
              </div>
            </template>
          </el-table-column>

        </el-table>
      </div>

    </div>
    <div style="margin-top: 20px;height: 450px;display: flex;">
      <div class="resource-content" style="width: 47.5%; 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: 47.5%;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: 47.5%; 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: 47.5%;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 DivideHeader from "@/components/DivideHeader.vue";
import { TAGTYPE } from "@/public/constant";
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 newsData = ref([
  {
    time: ' 2025-07-31',
    content: '美商务部发布指南，警告全球企业使用华为异腾芯片可能违反美国出口管制。意在限制中国AI产业发展，阻碍其获得先进算力。',
    image: '/testData/newsData1.jpg',
  },
  {
    time: '2025-07-30',
    content: '美商务部持续对多种中国产品发起“双反”(反倾销、反补贴)调查并作出裁决，涉及产品从工业原料到日常用品，且裁定的税率普遍较高。',
    image: '/testData/newsData1.jpg',
  }, {
    time: '2025-07-30',
    content: '美商务部进一步收紧对华先进半导体出口管制，将更多中国实体列入“实体清单”限制14纳米及以下先进芯片、DRAM等对华出口。',
    image: '/testData/newsData1.jpg',
  }, {
    time: '2025-07-27',
    content: '美商务部发起第三次反倾销和反补贴日落复审调査。',
    image: '/testData/newsData1.jpg',
  }

])

function headerCellStyle() {
  return {
    color: 'rgba(59, 65, 75, 1)',
    fontSize: '16px',
    fontWeight: 700,

  };
}
//创新主体排名
const InnovationRanking = ref([
  {
    name: '微软(Microsoft)',
    markValue: '3200',
    area: ['人工智能', '先进制造'],
    value: 0.9
  }, {
    name: '苹果(Apple)',
    markValue: '1600',
    area: ['人工智能'],
    value: 0.8
  }, {
    name: '英伟达(NVIDIA)',
    markValue: '1200',
    area: ['人工智能'],
    value: 0.7
  }, {
    name: '谷歌(Google)',
    markValue: '800',
    area: ['人工智能'],
    value: 0.5
  }, {
    name: 'Meta (Facebook)',
    markValue: '900',
    area: ['人工智能'],
    value: 0.2
  }
])
// 进度条状态
const getStatus = _percent => {
  const percent = _percent * 100;
  if (percent >= 90) {
    return "exception";
  } else if (percent >= 50) {
    return "warning";
  } else {
    return "success";
  }
};
//科技主体排名按钮
const InnovationRankingBtn = ref('enterprise')
function handleInnovationRankingBtn() {

}

//专利申请情况
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>
.divide1 {
  margin-top: 64px;
  margin-bottom: 36px;
}

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

  .row {
    display: flex;
    /* 横向排列 */
    align-items: center;
    /* 垂直居中（可选） */
    width: 100%;
    /* 和外层容器同宽 */
  }

  .content-wrapper {
    flex: 1 1 auto;
    /* 占满剩余空间，把图片顶到最右 */
    /* 文字过长时自动换行 */
    word-break: break-all;
  }

  .row img {
    width: 96px;
    height: 72px;
    margin-left: 8px;
    /* 图片与文字间距，可删 */
    flex-shrink: 0;
    /* 防止图片被压缩 */
  }

  :deep(.el-timeline-item__timestamp.is-top) {
    color: rgba(59, 65, 75, 1);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;

  }

  :deep(.el-timeline-item__node.is-hollow) {
    border-width: 4px
  }

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

  .custom-header {
    text-align: center;
    line-height: 1.3;
  }

  .custom-header .label {
    color: rgba(59, 65, 75, 1);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;

  }

  .custom-header .unit {
    font-size: 12px;
    color: #909399;
  }

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