<template>
  <div class="sanction-content">
    <div class="sanction-header">
      <div class="section-header">
        <div class="section-icon"></div>
        <h3 class="section-title">被制裁时间轴</h3>
      </div>
      <div class="action-icons">
        <img src="../../../assets/icons/download.png" alt="下载" class="action-icon">
        <img src="../../../assets/icons/shoucang.png" alt="收藏" class="action-icon">
      </div>
    </div>
    <div style=" height: 34%;">
      <Timeline :data="sanctionTimeData" text-key="title" id-key="seq" type="inline" />
    </div>
    <div style=" height: calc(60% - 120px);">
      <process />
    </div>
    <div class="chart-text">
      <img src="@/assets/icons/model.png" style="width: 19px;height: 20px;">
      <div>
        近年来，华为遭遇了严峻的外部技术封锁，其核心源于某些国家的持续制裁。这主要包括被列入“实体清单”，禁止其未经许可从美国公司获取芯片等关键技术；以及遭受更严格的“外国直接产品规则”打击，旨在切断其利用美国工具、软件和技术设计或制造先进芯片的渠道。这些措施不仅限制了华为自身产品的设计与生产，也影响了其全球供应链，使其在获取先进半导体、移动操作系统生态（如GMS）及基础软件工具等方面面临巨大挑战，意图从根本上遏制其技术发展。
      </div>
      <div class="arrow-2">
        →
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Timeline from './Timeline.vue';
import process from './process.vue';
import { useRouter } from "vue-router";
import { getSanctionList } from "@/api/companyPages/index.js";
const router = useRouter();
const sanctionTimeData = ref([
  {
    "title": "初步限制与“实体清单”",
    "content": "美国开始游说盟友禁止使用华为5G设备。2019年5月，美国商务部将华为及其70家关联公司列入“实体清单”，禁止关联公司在未获许可证的情况下向华为出售技术和产品。",
    "time": "2025年10月"
  },
  {
    "title": "“外国直接产品规则”升级",
    "content": "制裁全面升级。任何公司，只要使用美国的技术或设备为华为生产芯片，都必须先获得美国许可。此举措旨在切断华为与全球顶级芯片制造商（如台积电）的联系。",
    "time": "2025年10月"
  },
  {
    "title": "进一步封堵漏洞",
    "content": "将华为在21个国家的38家子公司列入实体清单，封堵华为通过第三方子公司获取受控物项的可能性。",
    "time": "2025年10月"
  },
  {
    "title": "5G设备禁令",
    "content": "美国联邦通信委员会将华为、中兴等中国公司列为“国家安全威胁”，禁止美国运营商使用联邦补贴资金购买其设备。",
    "time": "2025年10月"
  },
  {
    "title": "全面切断与制裁加码",
    "content": "美国政府吊销了英特尔、高通等公司向华为出口4G、Wi-Fi等芯片的许可证。据报道，美国已完全停止向华为发放所有产品的出口许可证。持续将更多与华为相关的公司列入实体清单。",
    "time": "2025年10月"
  }
])

// 获取制裁事件
const handleGetSanctionList = async () => {
  try {
    const res = await getSanctionList(router.currentRoute._value.params.id);
    console.log("获取制裁事件", res);
    if (res.code === 200 && res.data) {
      sanctionTimeData.value = res.data
    }
  } catch (error) {
    console.error("获取制裁事件error", error);
  }
};

onMounted(async () => {
  handleGetSanctionList()

});
</script>

<style scoped>
.sanction-content {
  width: calc(100% - 320px);
  height: calc(100vh - 220px);
  overflow: auto;
  border-radius: 4px;
  margin: 16px 160px;
  box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
  background: rgba(255, 255, 255, 1);
  justify-content: space-between;
}

.sanction-header {
  width: 100%;
  height: 60px;
  display: flex;
  padding: 16px 0;
}

.section-header {
  display: flex;
  align-items: center;
}

.action-icons {
  display: flex;
  gap: 15px;
  margin-left: auto;
}

.action-icon {
  /* 收藏按钮 */
  width: 28px;
  height: 28px;
  cursor: pointer;
}

.section-icon {
  width: 7px;
  height: 18px;
  border-radius: 0 4px 4px 0;
  background: rgba(5, 95, 194, 1);
  margin-right: 17px;

}

.section-title {
  font-size: 15px;
  color: #1d2129;
  margin: 0;
  color: rgba(5, 95, 194, 1);
  font-family: Microsoft YaHei;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 1px;
  text-align: left;
}



.chart-text {
  /* 大模型对话结果 */
  height: 80px;
  margin: 12px 20px;
  /* 自动布局 */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10;
  padding: 0px 12px 0px 12px;
  box-sizing: border-box;
  border: 1px solid rgba(231, 243, 255, 1);
  border-radius: 4px;
  background: rgba(246, 251, 255, 1);
  color: rgba(5, 95, 194, 1);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0px;
  text-align: justify;
  gap: 13px;
}

.arrow-2 {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 24px;
  background: rgba(231, 243, 255, 1);
}
</style>