<!-- 中M科技实力对比 -->
<template>
  <div class="resource-box">
    <DivideHeader class="divide1" :titleText="'中美科技实力对比'"></DivideHeader>

    <div style="margin-top: 24px;display: flex;">

      <div class="resource-content" style="width:100%">

        <div style="display: flex;height: 500px;">
          <div style="width: 50%;height: 500px">
            <div style="padding: 20px;width: 100%;text-align: center;">
              <el-radio-group v-model="strengthBtn" size="small" @change="handlestrengthBtn">
                <el-radio-button value="potential" border>竞争潜力
                </el-radio-button>
                <el-radio-button value="potency" border>竞争效力</el-radio-button>
                <el-radio-button value="strength" border>竞争实力
                </el-radio-button>
              </el-radio-group>
            </div>

            <div style="width: 100%;height: 450px;" id="char7">

            </div>
          </div>
          <div style="width: 50%;height: 550px;text-align: center;padding:0 24px ;position: relative;">
            <div class="title-box">
              <div style="display: flex;width: 100%">
                <div class="unite">
                  <img class="unite-icon" src="@/assets/images/icon/united_USA.png" alt="" />
                  <div class="unite-title">
                    美国
                  </div>
                </div>
                <div class="unite-title" style="width: 33%;text-align: center;line-height: 40px;">
                  {{ data[0].name }}
                </div>
                <div class="unite" style=" justify-content: flex-end; ">
                  <div class="unite-title">
                    中国
                  </div>
                  <img class="unite-icon" src="@/assets/images/icon/united_CHN.png" alt="" />

                </div>
              </div>
              <div class="progress-row">
                <div class="progress-wrapper left" :style="{ '--i': '40px', '--j': '-20px' }">
                  <el-progress :percentage="data[0].value[0]" :stroke-width="20" class="left-progress"
                    :show-text="false" />
                  <span class="inner-text" style="font-size: 24px;line-height: 40px;top: 20px;">{{ data[0].value[0]
                  }}%</span>
                </div>

                <!-- 右侧进度条 -->
                <div class="progress-wrapper right" :style="{ '--i': '40px' }">
                  <el-progress :percentage="data[0].value[1]" :stroke-width="20" class="right-progress"
                    :show-text="false" />
                  <span class="inner-text" style="font-size: 24px;line-height: 40px;top: 20px;">{{ data[0].value[0]
                  }}%</span>
                </div>
              </div>
            </div>
            <div v-for="value in data.slice(1)">
              <div class="unite-title-small" style="margin-top: 10px;">{{ value.name }}</div>
              <div class="progress-row">
                <div class="progress-wrapper left" :style="{ '--i': '20px', '--j': '0px' }">
                  <el-progress :percentage="value.value[0]" :stroke-width="20" class="left-progress"
                    :show-text="false" />
                  <span class="inner-text">{{ value.value[0] }}%</span>
                </div>

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

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

          </div>
        </div>

        <div>

        </div>

      </div>



    </div>
    <SymmetryProgress :left-val="62" :right-val="88" />



  </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'

//科技实力按钮
const strengthBtn = ref('potential')
function handlestrengthBtn() {

}
// 绘制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()
  // 2. 传入容器，生成配置
  // 1. 初始化容器
  const dom = document.getElementById('char7');
  const myChart = echarts.init(dom);

  // 2. 传入容器，生成配置
  const option = radarChart3(
    ['研究人员总数', '每万人研究人员数', '每万研究人员研发经费投入额',
      '每万人研发经费投入额', '研发经费占GDP的比重', '研发经费投入总额'],
    [4200, 3000, 20000, 35000, 50000, 18000],
    false,
    dom
  );

  myChart.setOption(option);

  // setChart(option, "char7");

});
</script>

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

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

/* ========== 公共外壳 ========== */
.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 {
  transform: scaleX(-1);

}

.left-progress :deep(.el-progress-bar__outer) {
  border-radius: 0 var(--i) var(--i) 0;
  clip-path: polygon(0px 0, 100% 0, 100% 100%, var(--i) 100%);
  background: rgba(231, 243, 255, 1);
  overflow: hidden;
  /* 读行内传进来的变量 */
  height: var(--i) !important;
  margin-left: var(--j) !important
}

.left-progress :deep(.el-progress-bar__inner) {
  border-radius: 0 var(--i) var(--i) 0;
  clip-path: polygon(0px 0, 100% 0, 100% 100%, var(--i) 100%);
  background: rgba(174, 214, 255, 1);
  /* 读行内传进来的变量 */
  height: var(--i) !important;
  margin-left: var(--j) !important
}



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

.right-progress :deep(.el-progress-bar__inner) {
  border-radius: 0 var(--i) var(--i) 0;
  clip-path: polygon(var(--i) 0, 100% 0, 100% 100%, 0 100%);
  background: #ff7875;
  height: var(--i) !important;
}

.title-box {
  height: 100px;
  width: 100%;
  margin-top: 20px;
  box-sizing: border-box;
  border: 1px solid rgba(234, 236, 238, 1);
  border-radius: 4px;
  background: rgba(247, 248, 249, 1);


  .unite {
    display: flex;
    width: 33%;
    align-items: center;

    .unite-icon {
      width: 40px;
      padding: 5px;
    }


  }

  .unite-title {
    color: rgba(59, 65, 75, 1);
    font-size: 24px;
    font-weight: 700;

    letter-spacing: 0px;
    text-align: left;
  }


}

.unite-title-small {
  color: rgba(59, 65, 75, 1);
  font-size: 18px;
  font-weight: 700;

  letter-spacing: 0px;

}

.resource-box {
  height: 800px;
  // width: 1600px;
}

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

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

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

.resource-content {
  /* 容器 480 */
  width: 100%;
  height: 550px;
  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);

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