<!-- 中M博弈资源支撑 -->
<template>
  <div class="resource-box" style="margin-top: 130px;">
    <DivideHeader class="divide1" :titleText="'中美博弈资源支撑'"></DivideHeader>
    <div style="margin-top: 20px;height: 450px;display: flex;">
      <div class="resource-content" style="width: 49.25%; display: block;">
        <div class="item-header">
          <img class="item-header-icon" src="@/assets/images/icon/resource-icon-1.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: 49.25%;margin-left: 1.5%;">
        <div class="item-header">
          <img class="item-header-icon" src="@/assets/images/icon/resource-icon-2.png"></img>
          <div class="item-header-text" style="width: 200px; margin-right: 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: 49.25%; 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" style="color: rgba(132, 136, 142, 1);"> <img class="item-header-right-icon"
              src="@/assets/images/icon/tips.png"></img>
            数据来源：美国某某局</div>
        </div>
        <div class="item-header-divider"></div>
        <div style="display: flex;margin: 10px;    align-items: center;justify-content: space-between;">
          <el-radio-group v-model="putIntoBtn" size="small" @change="handlePutIntoBtn" style="margin-left: 20px;">
            <el-radio-button value="development" border>研发经费
            </el-radio-button>
            <el-radio-button value="GDP" border>GDP占比</el-radio-button>
          </el-radio-group>
          <div style="display: flex;width: 200px;align-items: center;">
            <div class="legend-icon" style="background-color:#CE4F51 ;">
            </div>
            中国
            <div class="legend-icon" style="background-color:#055FC2 ;">
            </div>
            美国
          </div>
          <el-select v-model="areaSelect" placeholder="" style="width: 150px;margin-left: 160px;margin-right: 20px;"
            size="small">
            <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <div>

          </div>
        </div>

        <div style="display: flex;height: calc(100% - 60px);" id="char3">
        </div>
      </div>
      <div class="resource-content" style="width: 49.25%;margin-left: 1.5%;">
        <div class="item-header">
          <img class="item-header-icon" src="@/assets/images/icon/thematic-icon-3.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: 400px;">
          <div style=" width:60%;height: 100%;" id="char4">
          </div>
          <div style="width: 35%;margin: 20px 10px;">
            <el-select v-model="areaSelect" placeholder="" style="width: 120px;margin-left: 150px;" size="small">
              <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <div style="margin-top: 100px;">
              <div style="display: flex;align-items: center;height: 30px;justify-content: space-between;">
                <div class="legend-icon" style="background-color:#CE4F51 ;">
                </div>
                <div>
                  中国
                </div>
                <div>
                  11832亿美元
                </div>
              </div>
              <div
                style="display: flex;align-items: center;height: 30px;justify-content: space-between;margin-top: 40px;">
                <div class="legend-icon" style="background-color:#055FC2 ;">
                </div>
                <div>
                  美国
                </div>
                <div>
                  11832亿美元
                </div>
              </div>

            </div>
          </div>
        </div>

      </div>
    </div>
    <div style="margin-top: 20px;height: 450px;display: flex;">
      <div class="resource-content" style="width: 49.25%; 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" style="color: rgba(132, 136, 142, 1);"> <img class="item-header-right-icon"
              src="@/assets/images/icon/tips.png"></img>
            数据来源：美国某某局</div>
        </div>
        <div class="item-header-divider"></div>



        <div
          style="display: flex; width: calc(100% - 40px); margin: 10px; align-items: center; justify-content: space-between;">
          <!-- 左侧图例 -->
          <div style="display: flex; align-items: center;">
            <div class="legend-icon" style="background-color:#CE4F51;"></div>中国
            <div class="legend-icon" style="background-color:#055FC2;"></div>美国
          </div>

          <!-- 右侧选择器 -->
          <el-select v-model="patentSelect" placeholder="" style="width: 150px;" size="small">
            <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>

        <div style="display: flex;height: calc(100% - 60px);width: 100%;" id="char5">
        </div>
      </div>
      <div class="resource-content" style="width: 49.25%;margin-left: 1.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; width: calc(100% - 40px); margin: 10px; align-items: center; justify-content: space-between;">
          <!-- 左侧图例 -->
          <div style="display: flex; align-items: center;">
            <div class="legend-icon" style="background-color:#CE4F51;"></div>中国
            <div class="legend-icon" style="background-color:#055FC2;"></div>美国
          </div>

          <!-- 右侧选择器 -->
          <el-select v-model="paperSelect" placeholder="" style="width: 150px;float: right;margin-right: 10px;"
            size="small">
            <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div style="display: flex;height: calc(100% - 60px);width: 100%;" 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 timeList = ref([
  {
    label: "近半年",
    value: "近半年",
  },
  {
    label: "近一年",
    value: "近一年",
  },
  {
    label: "近两年",
    value: "近两年",
  },
  {
    label: "近三年",
    value: "近三年",
  },
  {
    label: "近五年",
    value: "近五年",
  },
]);


const names = ['2021', '2022', '2023', '2024', '2025']
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 putIntoBtn = ref('development')
function handlePutIntoBtn() {

}

//研发投入领域
const areaSelect = ref('近一年')


//专利申请情况
const patentSelect = ref('近一年')

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

//论文发表情况
const paperSelect = ref('近一年')

// 绘制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: 30px;
  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: 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(5, 95, 194, 1);
      font-family: Microsoft YaHei;
      font-size: 16px;
      line-height: 48px;
      text-align: right;
      margin-left: 30px;
      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;
  }

  .legend-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin: 0 10px;
  }

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