<!-- 中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:100%; display: flex;">
        <div style="width: 50%;height: 100%;" id="char7">

        </div>
        <div style="width: 50%;height: 100%;text-align: center;">
          <div v-for="value in data">
            <div>{{ value.name }}</div>
            <div class="progress-row">
              <div class="progress-wrapper left">
                <el-progress :percentage="value.value[0]" :stroke-width="20" class="left-progress" />
                <span class="inner-text">{{ value.value[0] }}%</span>
              </div>

              <!-- 右侧进度条 -->
              <div class="progress-wrapper right">
                <el-progress :percentage="value.value[1]" :stroke-width="20" class="right-progress" />
                <span class="inner-text">{{ value.value[0] }}%</span>
              </div>
            </div>
          </div>

          <!-- 左侧进度条 -->

        </div>
        <div>

        </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 radarChart3 from '../js/radarChart3.js'



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

const data = ref([
  {
    name: '竞争潜力',
    value: [81.7, 75.4]
  }, {
    name: '研究人员总数',
    value: [81.7, 75.4]
  }, {
    name: '研发经费投入总额',
    value: [81.7, 75.4]
  }, {
    name: '研发经费占GDP的比重',
    value: [81.7, 75.4]
  }, {
    name: '每万人研发经费投入额',
    value: [81.7, 75.4]
  }, {
    name: '每万研究人员经费投入额',
    value: [81.7, 75.4]
  }, {
    name: '每万人研究人员数',
    value: [81.7, 75.4]
  }
])
onMounted(() => {
  let char7 = radarChart3()
  setChart(char7, "char7");

});
</script>

<style lang="scss" scoped>
.divide1 {
  margin-top: 64px;
  margin-bottom: 36px;
}

/* ========== 一行两个 ========== */
.progress-row {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 10px;
}

/* ========== 公共外壳 ========== */
.progress-wrapper {
  position: relative;
  flex: 1;
  height: 20px;
}

/* 文字居中在彩色条内 */
.inner-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: #fff;
  font-weight: bold;
  z-index: 2;
}

/* ========== 左侧：右侧斜切 + 左侧圆角 ========== */
/* 左侧文字 */
.left-text {
  font-size: 12px;
  color: #333;
  margin-right: 8px;
  white-space: nowrap;
}

.left-progress :deep(.el-progress-bar__outer) {
  border-radius: 10px 0 0 10px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
  background: #aed6ff;
  overflow: hidden;
}

.left-progress :deep(.el-progress-bar__inner) {
  border-radius: 10px 0 0 10px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
  background: #aed6ff;
}

/* ========== 右侧：左侧斜切 + 右侧圆角 ========== */
.right-progress :deep(.el-progress-bar__outer) {
  border-radius: 0 10px 10px 0;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
  background: #ffccc7;
  overflow: hidden;
}

.right-progress :deep(.el-progress-bar__inner) {
  border-radius: 0 10px 10px 0;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
  background: #ff7875;
}

.resource-box {
  height: 700px;
}

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



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

}
</style>
