<!-- 中M博弈概览页 -->
<template>
  <div class="thematic-box">
    <div class="title-text">中美博弈专题分析</div>
    <img class="title-img" src="@/assets/images/bg/概览页模块标题.png"></img>
    <div class="thematic-content">
      <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"> <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;height: calc(100% - 60px);">
        <div class="thematic-btn-left" @click="changeBtn('timwLine', 'left')">
          <img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-left.png"></img>

        </div>
        <div class="timeLine-box">
          <div style="height: calc(50% - 8px);display: flex">
            <div v-for="(item, index) in timeLineOddIndexItems" class="time-item-box">
              {{ item.titlle }}
            </div>
          </div>
          <img style=" width: 100%; height: 10px;" src="@/assets/images/bg/time-line.png"></img>
          <div style="height: calc(50% - 8px);display: flex;">
            <div v-for="(item, index) in timeLineIndexItems" class="time-item-box">
              {{ item.titlle }}
            </div>
          </div>
        </div>
        <div class="thematic-btn-right" @click="changeBtn('right')">
          <img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-right.png"></img>

        </div>
      </div>

    </div>
    <div class="thematic-content" style="margin-top: 20px;height: 350px;">
      <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);">
        <div class="thematic-btn-left" @click="changeBtn('timwLine', 'left')">
          <img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-left.png"></img>

        </div>
        <div class="cup-box" style="display: flex;">
          <div v-for="item in distribution" class="cup-item-box" :style="{
            color: item.borderColor
          }">
            <div class="cup-title">
              {{ item.titlle }}
            </div>
            <div class="cup" :style="{

              borderColor: item.bgColor1,
              outlineColor: item.bgColor1,
            }">
              <!-- 水位 -->
              <div class="water" :style="{
                '--percent': item.value,
                '--c1': item.bgColor1,
                '--c2': item.bgColor2,
              }"></div>
              <!-- 文字 -->
              <span class="txt" :style="{ color: item.borderColor, }">{{ item.text }}</span>
            </div>
            <div style="margin-top: 20px;">
              {{ item.change }}
            </div>
          </div>


        </div>
        <div class="thematic-btn-right" @click="changeBtn('right')">
          <img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-right.png"></img>

        </div>
      </div>

    </div>
    <div style="margin-top: 20px;height: 450px;display: flex;">
      <div class="thematic-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"> <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;height: calc(100% - 60px);" id="chart1">

        </div>
      </div>
      <div class="thematic-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"> <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;height: calc(100% - 60px);" id="char2">

        </div>
      </div>

    </div>
  </div>

</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import getBarChart from '../js/barChart.js'
import radarChart from '../js/radarChart.js'
const timeLine = ref([
  {
    time: '2025年1月',
    titlle: '《AI扩散暂行最终规则》发布0',
    content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
  },
  {
    time: '2025年1月',
    titlle: '《AI扩散暂行最终规则》发布1',
    content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
  },
  {
    time: '2025年1月',
    titlle: '特朗普签署EO 143202',
    content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
  },
  {
    time: '2025年1月',
    titlle: '《AI扩散暂行最终规则》发布3',
    content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
  },
  {
    time: '2025年7月23日',
    titlle: '《AI扩散暂行最终规则》发布4',
    content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
  },
])

// 过滤出奇数下标（1,3,5...）
const timeLineOddIndexItems = computed(() =>
  timeLine.value.filter((_, idx) => idx % 2 === 1)
)
// 过滤出偶数下标（1,3,5...）
const timeLineIndexItems = computed(() =>
  timeLine.value.filter((_, idx) => idx % 2 === 0)
)


const distribution = ref([
  {
    titlle: '法案',
    value: 80,
    text: '1626个',
    change: '较上个月+3',
    bgColor1: '#E6F4FF',//浅色
    bgColor2: '#91CAFF',//深色
    borderColor: '#0958D9',
  }, {
    titlle: '法案',
    value: 20,
    text: '1626个',
    change: '较上个月+3',
    bgColor1: '#FFFBE6',//浅色
    bgColor2: '#FDE19A',//深色
    borderColor: '#D48806',
  }, {
    titlle: '法案',
    value: 10,
    text: '1626个',
    change: '较上个月+3',
    bgColor1: '#E6F4FF',//浅色
    bgColor2: '#91CAFF',//深色
    borderColor: '#0958D9',
  }, {
    titlle: '法案',
    value: 40,
    text: '1626个',
    change: '较上个月+3',
    bgColor1: '#E6F4FF',//浅色
    bgColor2: '#91CAFF',//深色
    borderColor: '#0958D9',
  }, {
    titlle: '法案',
    value: 50,
    text: '1626个',
    change: '较上个月+3',
    bgColor1: '#E6F4FF',//浅色
    bgColor2: '#91CAFF',//深色
    borderColor: '#0958D9',
  }
])
const timeIndex = ref(0)
//时间轴及遏制手段分布按钮
function changeBtn(data, type) {
  if (type === 'left') {
    timeIndex.value === 0 ? '' : timeIndex.value = timeIndex.value - 1
  } else {
    (timeIndex.value.length - timeIndex.value <= 4) ? '' : timeIndex.value = timeIndex.value + 1

  }
}


const chart1Data = ref({
  name: [
    "2024-12",
    "2025-1",
    "2025-2", "2025-3", "2025-4", "2025-5", "2025-6", "2025-7",
  ],
  value: [83.76, 76.72, 73.89, 72.16, 66.24, 65.47, 63.98, 62.12, 44.38, 24.79],
});

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

onMounted(() => {
  let char1 = getBarChart(chart1Data.value.name, chart1Data.value.value, true);

  setChart(char1, "chart1");

  let char2 = radarChart()
  setChart(char2, "char2");
});
</script>

<style lang="scss" scoped>
.cup-box {
  overflow-x: auto;

  .cup-item-box {
    width: 220px;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid rgba(234, 236, 238, 1);
    border-radius: var(---, 10px);
    margin: 20px;
    padding: 20px;

    .cup-title {
      font-family: Microsoft YaHei;
      font-size: 20px;
      font-weight: 700;
      line-height: 26px;
      letter-spacing: 0px;
      text-align: center;
      margin-bottom: 20px;
    }
  }
}

/* 杯子：正圆 */
.cup {
  position: relative;
  width: 130px;
  height: 130px;
  /* 本身高度设为 0，内容靠子元素或绝对定位 */
  border-radius: 50%;
  border: 4px #2196f3 solid;
  overflow: hidden;
  /* 关键：把超出部分裁掉 */
  display: flex;
  align-items: flex-end;
  /* 水永远贴底 */
  justify-content: center;
  border: 4px solid #2196f3;
  /* 内圈实线 */
  outline: 4px solid #2196f3;
  /* 外圈实线 */
  outline-offset: 4px;
  /* 两线间距，想再宽调大即可 */

}

/* 水位层 */
.water {
  width: 100%;
  height: calc(var(--percent) * 1%);
  /* 0~100 对应 0~100% */
  background: linear-gradient(to top, var(--c1), var(--c2));
  position: relative;
  animation: wave 3s linear infinite;
}

/* 波浪 */
.water::before,
.water::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  top: -350px;
  /* 把圆心顶到上面去 */
  left: 50%;
  border-radius: 45%;
  transform: translate(-50%, 0);
  background: rgba(255, 255, 255, .4);
  animation: rotate 7s linear infinite;
}

.water::after {
  top: -370px;
  border-radius: 40%;
  opacity: .7;
  animation-duration: 9s;
  animation-direction: reverse;

}

/* 旋转动画 */
@keyframes rotate {
  to {
    transform: translate(-50%, 0) rotate(360deg);
  }
}

/* 百分比文字 */
.txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font: 24px/1 sans-serif;
  color: #0d47a1;
  z-index: 2;
}

.thematic-box {
  height: 1500px;
}

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

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

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

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

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

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

}
</style>
