<template>
  <div class="introduction-wrap">
    <div class="left">
      <div class="box1">
        <div class="box-header">
          <div class="header-left"></div>
          <div class="title">提出背景</div>
          <div class="header-btn-box">
            <div class="btn" @click="handleClickBox1Btn(1)">
              <el-button type="primary" plain v-if="box1BtnActive === 1"
                >涉华背景</el-button
              >
              <el-button type="info" plain v-else>涉华背景</el-button>
            </div>
            <div class="btn" @click="handleClickBox1Btn(2)">
              <el-button type="primary" plain v-if="box1BtnActive === 2"
                >全部背景</el-button
              >
              <el-button type="info" plain v-else>全部背景</el-button>
            </div>
          </div>
          <div class="header-right">
            <img src="../assets/icons/header-icon.png" alt="" />
          </div>
        </div>
        <div class="box1-main">
          <div
            class="box1-item"
            v-for="(item, index) in backgroundList"
            :key="index"
          >
            <div class="id">{{ index + 1 }}</div>
            <div class="title">{{ item.title }}</div>
            <div class="open">
              <img src="./assets/images/open-icon.png" alt="" />
            </div>
          </div>
        </div>
        <div class="box1-footer">
          <div class="box1-footer-left">{{ "共计10条指令" }}</div>
          <div class="box1-footer-right">
            <el-pagination
              :page-size="5"
              background
              layout="prev, pager, next"
              :total="10"
            />
          </div>
        </div>
      </div>
      <div class="box2">
        <div class="box-header">
          <div class="header-left"></div>
          <div class="title">相关事件</div>
          <div class="header-right">
            <img src="../assets/icons/header-icon.png" alt="" />
          </div>
        </div>
        <div class="box2-main">
          <div
            class="box2-item"
            v-for="(item, index) in relatedEvents"
            :key="index"
          >
            <div class="item-left">
              <img :src="item.image" alt="" />
            </div>
            <div class="item-center">
              <div class="title">{{ item.title }}</div>
              <div class="content">{{ item.content }}</div>
            </div>
            <div class="item-right">{{ item.time }}</div>
          </div>
        </div>
        <div class="box2-footer">
          <img src="./assets/images/more-icon.png" alt="" />
        </div>
      </div>
    </div>
    <div class="right">
      <div class="box3">
        <div class="box-header">
          <div class="header-left"></div>
          <div class="title">法律依据</div>

          <div class="header-right">
            <img src="../assets/icons/header-icon.png" alt="" />
          </div>
        </div>
        <div class="box3-main">
          <div class="box3-item" v-for="(item, index) in laws" :key="index">
            <div class="id">{{ index + 1 }}</div>
            <div class="item-header">
              <div class="name">{{ item.name }}</div>
              <div class="info">{{ item.info }}</div>
            </div>
            <div class="item-content">{{ item.content }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

import Img1 from "./assets/images/box2-img1.png";
import Img2 from "./assets/images/box2-img2.png";
import Img3 from "./assets/images/box2-img3.png";
import Img4 from "./assets/images/box2-img4.png";
import Img5 from "./assets/images/box2-img5.png";

const box1BtnActive = ref(1);

const backgroundList = ref([
  {
    title:
      "认为人工智能（AI）是一项将决定未来几十年经济增长、国家安全和全球竞争力的基础性技术",
  },
  {
    title:
      "要求美国不仅必须在开发通用和前沿AI能力方面领先，还必须确保美国的人工智能技术、标准和治理模式在全球范围内被采用",
  },
  {
    title: "要求加强与盟友的关系并确保我们持续的技术主导地位",
  },
  {
    title:
      "计划通过支持美国原产人工智能技术的全球部署，以维护和扩大美国在人工智能领域的领导地位",
  },
  {
    title: "目的为减少国际社会对由中国开发的人工智能技术的依赖",
  },
]);

const relatedEvents = ref([
  {
    image: Img1,
    title: "中美AI模型性能差距迅速缩小",
    content:
      "斯坦福大学《2025年人工智能指数报告》显示，中美顶尖AI模型在MMLU（大规模多任务语言理解）等主流基准测试中的性能...",
    time: "2025-08-30",
  },
  {
    image: Img2,
    title: "中国模型以更低成本实现高性能",
    content:
      "2025年1月，中国公司深度求索（DeepSeek）发布高性能AI推理模型R1，以其极低的训练成本和媲美顶级模型的推理能力受...",
    time: "2025-05-16",
  },
  {
    image: Img3,
    title: "美国发布《赢得AI竞赛：美国AI行动计划》​",
    content:
      "特朗普政府发布该计划，核心包括加速创新​（解除监管）、建设AI基础设施​（加速数据中心审批、保障能源供应）和引领国际...",
    time: "2025-07-23",
  },
  {
    image: Img4,
    title: "中国深入推进“人工智能+”行动",
    content:
      "中国国务院常务会议审议通过《关于深入实施“人工智能+”行动的意见》，大力推进AI在各领域的规模化商业化应用和和深...",
    time: "2025-07-31",
  },
  {
    image: Img5,
    title: "美国对华AI芯片出口管制持续升级",
    content:
      "美国商务部宣布撤销拜登时期的《AI扩散规则》，要求全球使用美国技术的芯片厂商停止向中国出口AI芯片，直接影响英伟达...",
    time: "2025-05-20",
  },
]);

const laws = ref([
  {
    name: "《美国法典》",
    info: "第3编第301条",
    content:
      "允许总统通过行政命令（Executive Order）​​ 或其它书面形式授权行政部门或机构的负责人​（如国务卿、财政部长等）代行本属于总统的法定职能（由国会立法授予总统的职能）。",
  },
  {
    name: "《出口管制改革法案》",
    info: "",
    content:
      "该法案授权政府出于国家安全和外交政策目的对特定技术、商品和软件的出口进行管制。确保AI技术不流向“对手国家”是其题中应有之义。",
  },
  {
    name: "《国际紧急经济权力法》",
    info: "",
    content:
      "授予总统在应对“不寻常且极其严重的威胁”时，监管商业和金融交易的广泛权力，包括实施出口管制。这在以往的贸易和科技管制中常被引用。",
  },
  {
    name: "《2019年通过外交捍卫美国商业法》",
    info: "第708(c)(3)条",
    content:
      "授权小企业管理局局长和OSTP主任任命其各自行政部门和机构的高级官员担任EDAG成员。",
  },
  {
    name: "《关于安全、可靠和可信地开发和使用人工智能的行政命令》",
    info: "",
    content:
      "要求强大AI系统的开发者与政府共享安全测试结果，并为AI安全、隐私保护、公平权利及创新竞争等方面制定标准。",
  },
]);
</script>

<style lang="scss" scoped>
.introduction-wrap {
  display: flex;
  .box-header {
    height: 56px;
    display: flex;
    position: relative;
    .header-left {
      margin-top: 20px;
      width: 8px;
      height: 16px;
      border-radius: 0 4px 4px 0;
      background: rgba(10, 87, 166, 1);
    }
    .title {
      margin-left: 22px;
      margin-top: 20px;
      height: 16px;
      line-height: 16px;
      color: rgba(10, 87, 166, 1);
      font-family: Microsoft YaHei;
      font-size: 16px;
      font-weight: 600;
      line-height: 16px;
    }
    .header-btn-box {
      position: absolute;
      top: 14px;
      right: 52px;
      display: flex;
      .btn {
        margin-left: 8px;
      }
    }
    .header-right {
      position: absolute;
      top: 14px;
      right: 12px;
      width: 32px;
      height: 32px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .left {
    width: 1150px;
    .box1 {
      margin-top: 16px;
      width: 1150px;
      height: 414px;
      border-radius: 4px;
      box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
      background: rgba(255, 255, 255, 1);
      .box1-main {
        margin-left: 22px;
        height: 280px;
        .box1-item {
          width: 1101px;
          height: 48px;
          margin-bottom: 8px;
          box-sizing: border-box;
          border: 1px solid rgba(234, 236, 238, 1);
          border-radius: 2px;
          background: rgba(255, 255, 255, 1);
          display: flex;
          .id {
            margin-top: 12px;
            margin-left: 15px;
            width: 24px;
            height: 24px;
            text-align: center;
            line-height: 24px;
            border-radius: 12px;
            background: #e7f3ff;
            color: #0a57a6;
          }
          .title {
            width: 1000px;
            line-height: 48px;
            margin-left: 13px;
          }
          .open {
            width: 16px;
            height: 16px;
            margin-top: 16px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .box1-footer {
        margin: 20px 22px;
        display: flex;
        justify-content: space-between;
        .box1-footer-left {
          height: 20px;
          color: rgba(132, 136, 142, 1);
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
        }
      }
    }
    .box2 {
      margin-top: 16px;
      width: 1150px;
      height: 415px;
      border-radius: 4px;
      box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
      background: rgba(255, 255, 255, 1);
      .box2-main {
        margin-top: 3px;
        margin-left: 31px;
        height: 310px;
        width: 1090px;
        .box2-item {
          display: flex;
          height: 60px;
          margin-bottom: 2px;
          .item-left {
            width: 64px;
            height: 48px;
            border-radius: 2px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .item-center {
            width: 892px;
            margin-left: 14px;
            .title {
              height: 30px;
              color: rgba(59, 65, 75, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 700;
              line-height: 30px;
              margin-top: -5px;
            }
            .content {
              height: 30px;
              color: rgba(59, 65, 75, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 400;
              line-height: 30px;
            }
          }
          .item-right {
            margin-top: 19px;
            margin-left: 30px;
            height: 22px;
            color: rgba(95, 101, 108, 1);
            font-family: Microsoft YaHei;
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
          }
        }
      }
      .box2-footer {
        margin: 5px auto 0;
        width: 108px;
        height: 32px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .right {
    margin-left: 16px;
    .box3 {
      margin-top: 16px;
      width: 576px;
      height: 845px;
      border-radius: 4px;
      box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
      background: rgba(255, 255, 255, 1);
      .box3-main {
        margin-top: 9px;
        width: 520px;
        height: 720px;
        overflow-y: auto;
        .box3-item {
          margin-bottom: 24px;
          position: relative;
          .id {
            width: 24px;
            height: 24px;
            position: absolute;
            left: 28px;
            top: 1px;
            z-index: 99;
            text-align: center;
            line-height: 24px;
            margin-top: 5px;
            border-radius: 12px;
            background: #e7f3ff;
            color: #0a57a6;
          }
          .item-header {
            width: 460px;
            height: 35px;
            display: flex;
            justify-content: space-between;
            margin-left: 60px;
            .name {
              max-width: 460px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              height: 24px;
              margin-top: 5px;
              color: rgba(59, 65, 75, 1);
              font-family: Microsoft YaHei;
              font-size: 18px;
              font-weight: 700;
              line-height: 24px;
            }
            .info {
              text-align: right;
              margin-left: 10px;
              height: 24px;
              margin-top: 5px;
              color: rgba(95, 101, 108, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 400;
              line-height: 24px;
            }
          }
          .item-content {
            margin-left: 66px;
            border-top: 1px solid rgba(234, 236, 238, 1);
            padding-top: 3px;
            color: rgba(95, 101, 108, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 400;
            line-height: 30px;
          }
        }
      }
    }
  }
}
</style>