<!-- 打压遏制ts分析 -->
<template>
  <div class="thematic-box">
    <div class="title-text">中美博弈专题分析</div>
    <DivideHeader class="divide" :titleText="'打压遏制态势分析'"></DivideHeader>
    <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);">
        <Timeline :data="course" text-key="title" id-key="seq" />
      </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('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 distributionColor" class="cup-item-box" :style="{
            color: `hsla(${item.color[0]}, ${item.color[1]}%, ${item.color[2]}%, ${1})`
          }">
            <div class="cup-title">
              {{ item.titlle }}
            </div>
            <WaveBall :percent="item.value" :data="item" :color="item.color" :size="128" />
            <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: 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"> <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;">
          <el-radio-group v-model="strengthBtn" size="small" @change="handleStrengthBtn">
            <el-radio-button value="all" border>全部领域
            </el-radio-button>
            <el-radio-button value="integratedCircuits" border>集成电路</el-radio-button>
            <el-radio-button value="energy" border>能源
            </el-radio-button>
            <el-radio-button value="biotechnology" border>生物科技</el-radio-button>
            <el-radio-button value="quantum" border>量子科技</el-radio-button>
            <el-radio-button value="ai" border>人工智能</el-radio-button>
            <el-radio-button value="network" border>通信网络</el-radio-button>
          </el-radio-group>
          <el-select v-model="strengthSelect" placeholder="" style="width: 100px;" size="small">
            <el-option v-for="item in strengthTimeList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div style="display: flex;height: calc(100% - 60px);" id="chart1">
        </div>
      </div>
      <div class="thematic-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"> <img class="item-header-right-icon" src="@/assets/images/icon/tips.png"></img>
            数据来源：美国某某局</div>
        </div>
        <div class="item-header-divider"></div>
        <el-select v-model="areaSelect" placeholder="" style="width: 100px;float: right;" size="small">
          <el-option v-for="item in areaTimeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <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 DivideHeader from "@/components/DivideHeader.vue";
import Timeline from '../component/Timeline.vue'
import WaveBall from '../component/WaveBall.vue'
import getBarChart from '../js/barChart.js'
import radarChart from '../js/radarChart.js'

//对华打压历程
const course = ref([
  {
    time: '2025年1月',
    title: '《AI扩散暂行最终规则》发布',
    content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
  },
  {
    time: '2025年1月',
    title: '特朗普宣布撤销拜登AI规则',
    content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
  },
  {
    time: '2025年1月',
    title: '特朗普签署EO 143202',
    content: '特朗普政府宣布撤销拜登AI规则，计划'
  },
  {
    time: '2025年1月',
    title: '中国网信办约谈英伟达',
    content: '中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。'
  },
  {
    time: '2025年7月23日',
    title: '英伟达H20发放出口许可证',
    content: '美国商务部为4月份被实质禁售的英伟达H20发放出口许可证。'
  },
  {
    time: '2025年1月',
    title: '《AI扩散暂行最终规则》发布',
    content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
  },
  {
    time: '2025年1月',
    title: '特朗普宣布撤销拜登AI规则',
    content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
  },
  {
    time: '2025年1月',
    title: '特朗普签署EO 143202',
    content: '特朗普政府宣布撤销拜登AI规则，计划'
  },
  {
    time: '2025年1月',
    title: '中国网信办约谈英伟达',
    content: '中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。'
  },
  {
    time: '2025年7月23日',
    title: '英伟达H20发放出口许可证',
    content: '美国商务部为4月份被实质禁售的英伟达H20发放出口许可证。'
  },
])


//打压遏制手段分布
const distribution = ref([
  {
    "titlle": "法案",
    "value": 80,
    "text": "1626",
    "unit": "个",
    "change": "较上个月+3"
  },
  {
    "titlle": "行政令",
    "value": 20,
    "text": "1626",
    "unit": "个",
    "change": "较上个月+1"
  },
  {
    "titlle": "科技智库",
    "value": 10,
    "text": "66",
    "unit": "次",
    "change": "较上个月+2"
  },
  {
    "titlle": "出口管制",
    "value": 33,
    "text": "66",
    "unit": "次",
    "change": "较上个月+1"
  },
  {
    "titlle": "投融资限制",
    "value": 80,
    "text": "119",
    "unit": "次",
    "change": "较上个月+1"
  },
  {
    "titlle": "市场准入",
    "value": 50,
    "text": "223",
    "unit": "次",
    "change": "较上个月+1"
  }
])

//随机生成颜色
const makeColors = () => {
  let A = Math.floor(Math.random() * 360)   // 随机色相
  let B = 70                                   // 固定饱和度
  let C = 50                                   // 固定亮度
  return [A, B, C]
}
// 计算属性
const distributionColor = computed(() => {
  for (let item in distribution.value) {
    distribution.value[item].color = makeColors()
  }
  return distribution.value
})
const timeIndex = ref(0)
//遏制手段分布按钮
function changeBtn(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],
});


const strengthBtn = ref('all')
function handleStrengthBtn() {

}
//打压遏制强度变化时间选择器
const strengthSelect = ref("近一年");
const strengthTimeList = ref([
  {
    label: "近半年",
    value: "近半年",
  },
  {
    label: "近一年",
    value: "近一年",
  },
  {
    label: "近两年",
    value: "近两年",
  },
  {
    label: "近三年",
    value: "近三年",
  },
  {
    label: "近五年",
    value: "近五年",
  },
]);

//打压遏制领域分布
const areaSelect = ref("2025");
const areaTimeList = ref([
  {
    label: "2025",
    value: "2025",
  },
  {
    label: "2024",
    value: "2024",
  },
  {
    label: "2023",
    value: "2023",
  },
]);
// 绘制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;
    }
  }
}


/* 百分比文字 */
.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;

  .divide {
    width: 100%;
    margin: 0 auto;
    margin-top: 52px;
    margin-bottom: 36px;
  }
}

.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;
    padding-top: 130px;
  }

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

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

}
</style>
