<template>
  <div class="wrap">
    <div class="box1">
      <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="box1-main">
        <div class="box1-line-box"></div>
        <div
          class="box1-item"
          :class="{ box1ItemFooter: index % 2 }"
          v-for="(item, index) in timeLineList"
          :key="index"
        >
          <div class="point" :class="{ pointFooter: index % 2 }">
            <img src="./assets/icons/box1-point.png" alt="" />
          </div>
          <div class="time" :class="{ timeFooter: index % 2 }">
            {{ item.time }}
          </div>
          <div class="box1-item-header">
            <div class="title">{{ item.title }}</div>
            <div class="icon">
              <img src="./assets/icons/box1-icon1.png" alt="" />
            </div>
          </div>
          <div class="box1-item-content">
            {{ item.content }}
          </div>
        </div>
      </div>
      <div class="box1-footer">
        <div class="box1-footer-left">
          <img src="./assets/icons/box1-icon2.png" alt="" />
        </div>
        <div class="box1-footer-center">
          {{
            "近两年美国AI领域核心政令与事件聚焦于安全治理与竞争领导权。拜登政府2023年10月签署首份AI行政令，强制要求强大AI系统进行安全测试并共享结果。2025年特朗普政府转向，签署《赢得竞赛：美国AI行动计划》，核心转为放松监管、加速创新与基础设施建设，并推动美国AI技术栈全球出口。其间，美国持续升级对华AI芯片出口管制，并积极介入全球AI安全治理议程"
          }}
        </div>
        <div class="box1-footer-right">
          <img src="./assets/icons/box1-icon3.png" alt="" />
        </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="left">
          <div
            class="left-item"
            :class="{ leftItemActive: box2LeftActiveIndex === index }"
            v-for="(item, index) in decreeList"
            :key="index"
          >
            <div class="time">{{ item.time }}</div>
            <div class="title">{{ item.title }}</div>
          </div>
        </div>

        <div class="right">
          <div class="info-box">
            <div class="info-left">
              <img :src="decreeList[box2LeftActiveIndex].img" alt="" />
            </div>
            <div class="info-right">
              <div class="info-item">
                <div class="item-left">{{ "政令全称：" }}</div>
                <div class="item-right1">
                  <div class="item-right-text">
                    {{ decreeList[box2LeftActiveIndex].totalTitle }}
                  </div>
                  <div class="item-right-icon">
                    <img src="./assets/icons/open-icon.png" alt="" />
                  </div>
                </div>
              </div>
              <div class="info-item">
                <div class="item-left">{{ "英文全称：" }}</div>
                <div class="item-right">
                  {{ decreeList[box2LeftActiveIndex].eTotalTitle }}
                </div>
              </div>
              <div class="info-item">
                <div class="item-left">{{ "签署时间：" }}</div>
                <div class="item-right">
                  {{ decreeList[box2LeftActiveIndex].signTime }}
                </div>
              </div>
              <div class="info-item">
                <div class="item-left">{{ "签署总统：" }}</div>
                <div class="item-right">
                  {{ decreeList[box2LeftActiveIndex].signPerson }}
                </div>
              </div>
            </div>
          </div>
          <div class="list-box">
            <div class="list-header">
              <div class="icon">
                <img src="./assets/icons/box2-list-header-icon.png" alt="" />
              </div>
              <div class="title">{{ "政令主要内容" }}</div>
            </div>
            <div class="list-main">
              <div
                class="list-item"
                v-for="(val, idx) in decreeList[box2LeftActiveIndex].list"
                :key="idx"
              >
                <div class="id">{{ idx + 1 }}</div>
                <div class="title">{{ val.title }}</div>
                <div class="open">
                  <img src="./assets/icons/open-icon.png" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

import box2InfoImg from "./assets/icons/box2-info.png";
const box1BtnActive = ref(1);

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

const decreeList = ref([
  {
    time: "2023",
    title: "拜登人工智能政令",
    img: box2InfoImg,
    totalTitle: "关于安全、可靠和可信地开发和使用人工智能的行政命令",
    eTotalTitle:
      "Executive Order on the Safe, Secure, and Trustworthy Development and Use of Artificial Intelligence",
    signTime: "2025年7月23日",
    signPerson: "乔·拜登（Joe Biden）",
    list: [
      {
        title:
          "要求强大AI系统开发者与政府分享安全测试结果（“红队测试”）；制定生物合成筛查标准防范风险；建立AI生成内容鉴别标准",
      },
      {
        title:
          "优先支持隐私保护技术（PET）研发；评估各机构如何收集和使用商业信息；制定评估隐私保护技术有效性的指南。",
      },
      {
        title:
          "为解决算法歧视提供明确指导；确保刑事司法系统中AI使用的公平性；协调调查和起诉AI相关的民权侵犯行为。",
      },
      {
        title:
          "推动医疗保健领域负责任地使用AI；创造资源支持教育工作者部署AI教育工具。",
      },
      {
        title:
          "制定减轻AI对工人潜在危害的原则和最佳实践；编写AI对劳动力市场潜在影响的报告。",
      },
      {
        title:
          "通过“国家AI研究资源”（NAIRR）试点促进研究；为小型开发者和企业家提供技术援助和资源；简化相关领域高技能人才的签证流程。",
      },
      {
        title: "扩大在AI领域的国际合作；与国际伙伴和标准组织加速制定AI标准。",
      },
      {
        title:
          "发布政府机构使用AI的指南；加快招聘AI专业人才并为相关领域员工提供培训。",
      },
    ],
  },
  {
    time: "2023",
    title: "拜登人工智能政令",
    img: "",
    totalTitle: "",
    eTotalTitle: "",
    signTime: "",
    signPerson: "",
    list: [],
  },
  {
    time: "2025",
    title: "特朗普撤销拜登AI规则",
    img: "",
    totalTitle: "",
    eTotalTitle: "",
    signTime: "",
    signPerson: "",
    list: [],
  },
  {
    time: "2023",
    title: "美国AI行动计划",
    img: "",
    totalTitle: "",
    eTotalTitle: "",
    signTime: "",
    signPerson: "",
    list: [],
  },
  {
    time: "2024",
    title: "对中国AI芯片限制",
    img: "",
    totalTitle: "",
    eTotalTitle: "",
    signTime: "",
    signPerson: "",
    list: [],
  },
]);

const box2LeftActiveIndex = ref(0);
</script>

<style lang="scss" scoped>
.wrap {
  .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%;
      }
    }
  }
  .box1 {
    margin: 27px auto 16px;
    width: 1600px;
    height: 492px;
    border-radius: 4px;
    box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
    background: rgba(255, 255, 255, 1);
    .box1-main {
      margin-top: 17px;
      margin-left: 22px;
      width: 1556px;
      height: 330px;
      overflow-x: auto;
      overflow-y: hidden;
      display: flex;
      position: relative;
      .box1-line-box {
        position: absolute;
        left: 0;
        top: 135px;
        height: 8px;
        width: 1556px;
        background: url("./assets/icons/line-bg.png") repeat;
      }
      .box1-item {
        width: 315px;
        height: 142px;
        position: relative;
        box-sizing: border-box;
        padding-left: 20px;
        margin-left: 10px;
        border-left: 1px solid #0a57a6;
        .box1-item-header {
          display: flex;
          width: 315px;
          .title {
            // width: 262px;
            height: 26px;
          }
          .icon {
            margin-left: 10px;
            margin-top: 5px;
            width: 16px;
            height: 16px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .box1-item-content {
          width: 288px;
          min-height: 48px;
          max-height: 96px;
          color: rgba(95, 101, 108, 1);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 400;
          line-height: 24px;
        }
        .point {
          position: absolute;
          left: -11px;
          bottom: -11px;
        }
        .pointFooter {
          position: absolute;
          left: -11px;
          top: -11px;
        }
        .time {
          height: 24px;
          color: rgba(10, 87, 166, 1);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 700;
          line-height: 24px;
          position: absolute;
          bottom: -36px;
          left: 0;
        }
        .timeFooter {
          height: 24px;
          color: rgba(10, 87, 166, 1);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 700;
          line-height: 24px;
          position: absolute;
          top: -36px;
          left: 0;
        }
      }
      .box1ItemFooter {
        margin-top: 138px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }
    }
    .box1-footer {
      margin-left: 22px;
      margin-top: 10px;
      width: 1556px;
      height: 64px;
      box-sizing: border-box;
      padding: 6px 12px;
      display: flex;
      border: 1px solid rgba(231, 243, 255, 1);
      border-radius: 4px;
      background: rgba(246, 251, 255, 1);
      display: flex;
      .box1-footer-left {
        width: 19px;
        height: 20px;
        margin-top: 16px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .box1-footer-center {
        width: 1463px;
        height: 48px;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 2px;
        margin-left: 15px;
        color: rgba(10, 87, 166, 1);
        font-family: Microsoft YaHei;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
      }
      .box1-footer-right {
        width: 24px;
        height: 24px;
        border-radius: 12px;
        background: #e7f3ff;
        margin-top: 14px;
        margin-left: 13px;
        img {
          margin-left: 6px;
          margin-top: 6px;
          width: 12px;
          height: 12px;
        }
      }
    }
  }
  .box2 {
    margin: 0 auto 10px;
    width: 1600px;
    height: 751px;
    border-radius: 4px;
    box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
    background: rgba(255, 255, 255, 1);
    .box2-main {
      display: flex;
      margin-top: 5px;
      .left {
        margin-left: 21px;
        width: 300px;
        .left-item {
          width: 300px;
          height: 64px;
          border-radius: 4px;
          display: flex;
          color: rgba(59, 65, 75, 1);
          font-family: Microsoft YaHei;
          font-size: 18px;
          font-weight: 400;
          cursor: pointer;
          &:hover {
            background: rgba(246, 250, 255, 1);
          }
          .time {
            width: 45px;
            height: 24px;
            line-height: 24px;
            margin-left: 18px;
            margin-top: 20px;
          }
          .title {
            margin-left: 17px;
            margin-top: 17px;
            height: 30px;
            // color:  rgba(10, 87, 166, 1);
            // font-family: Microsoft YaHei;
            // font-size: 16px;
            // font-weight: 700;
            line-height: 30px;
          }
        }
        .leftItemActive {
          color: rgba(10, 87, 166, 1);
          font-weight: 700;
          background: rgba(246, 250, 255, 1);
          &::after {
            position: relative;
            content: "";
            width: 5px;
            height: 48px;
            background: rgba(10, 87, 166, 1);
            right: -70px;
            top: 8px;
          }
        }
      }
      .right {
        margin-left: 36px;
        .info-box {
          margin-top: 25px;
          margin-left: 28px;
          width: 1180px;
          height: 188px;
          box-sizing: border-box;
          border: 1px solid rgba(231, 243, 255, 1);
          background: rgba(246, 250, 255, 1);
          display: flex;
          .info-left {
            width: 97px;
            height: 136px;
            margin-top: 25px;
            margin-left: 28px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .info-right {
            margin-left: 35px;
            margin-top: 22px;
            .info-item {
              display: flex;
              height: 30px;
              margin-bottom: 8px;
              .item-left {
                margin-top: 3px;
                width: 100px;
                height: 24px;
                color: rgba(59, 65, 75, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 700;
                line-height: 24px;
              }
              .item-right {
                width: 899px;
                height: 30px;
                color: rgba(59, 65, 75, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 400;
                line-height: 30px;
              }
              .item-right1 {
                display: flex;
                .item-right-text {
                  height: 30px;
                  color: rgba(10, 87, 166, 1);
                  font-family: Microsoft YaHei;
                  font-size: 16px;
                  font-weight: 700;
                  line-height: 30px;
                }
                .item-right-icon {
                  margin-left: 13px;
                  margin-top: 7px;
                  width: 16px;
                  height: 16px;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }
          }
        }
        .list-box {
          margin-left: 36px;
          .list-header {
            display: flex;
            height: 56px;
            border-bottom: 1px solid rgba(234, 236, 238, 1);
            .icon {
              margin-top: 21px;
              margin-left: 17px;
              width: 19px;
              height: 19px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .title {
              margin-top: 16px;
              margin-left: 16px;
              height: 30px;
              color: rgba(10, 87, 166, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 700;
              line-height: 30px;
            }
          }
          .list-main {
            height: 400px;
            overflow-x: hidden;
            overflow-y: auto;
            .list-item {
              width: 1180px;
              height: 54px;
              box-sizing: border-box;
              border-radius: 4px;
              background: rgba(255, 255, 255, 1);
              border-bottom: 1px solid rgba(234, 236, 238, 1);
              display: flex;
              .id {
                width: 24px;
                height: 24px;
                margin-left: 15px;
                margin-top: 15px;
                border-radius: 12px;
                background: #e7f3ff;
                text-align: center;
                line-height: 24px;
                color: #0a57a6;
              }
              .title {
                margin-left: 13px;
                margin-top: 12px;
                height: 30px;
                width: 1100px;
                color: rgba(59, 65, 75, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 400;
                line-height: 30px;
              }
              .open {
                width: 16px;
                height: 16px;
                margin-top: 20px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>