<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-right">
            <img src="../assets/icons/header-icon.png" alt="" />
          </div>
        </div>
        <div class="box1-main">
          <div class="box1-main-left">
            <img src="./assets/images/box1-img.png" alt="" />
          </div>
          <div class="box1-main-right">
            <div class="item">
              <div class="item-left">{{ "政令全称：" }}</div>
              <div class="item-right">{{ "推动美国人工智能技术栈出口" }}</div>
            </div>
            <div class="item">
              <div class="item-left">{{ "英文全称：" }}</div>
              <div class="item-right text">
                {{ "Promoting the Export of the American AI Technology Stack" }}
              </div>
            </div>
            <div class="item">
              <div class="item-left">{{ "相关领域：" }}</div>
              <div class="item-right tag-box">
                <div class="tag" v-for="(area, index) in areaList" :key="index">
                  {{ area }}
                </div>
              </div>
            </div>
            <div class="item">
              <div class="item-left">{{ "签署时间：" }}</div>
              <div class="item-right text">{{ "2025年7月23日" }}</div>
            </div>
            <div class="item">
              <div class="item-left">{{ "签署总统：" }}</div>
              <div class="item-right text">
                {{ "唐纳德·约翰·特朗普(Donald John Trump)" }}
              </div>
            </div>
            <div class="item">
              <div class="item-left">{{ "政令编号：" }}</div>
              <div class="item-right text">
                {{ "第14320号行政命令 (EO 14320)" }}
              </div>
            </div>
            <div class="item">
              <div class="item-left">{{ "执行期限：" }}</div>
              <div class="item-right text">
                {{ "签署后90天内建立机制并开始实施" }}
              </div>
            </div>
          </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 majorList"
            :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="box2-footer">
          <div class="box2-footer-left">{{ "共计10条指令" }}</div>
          <div class="box2-footer-right">
            <el-pagination
              :page-size="5"
              background
              layout="prev, pager, next"
              :total="10"
            />
          </div>
        </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-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="box3-top">
          <div class="box3-top-left">
            <img src="./assets/images/box3-img.png" alt="" />
          </div>
          <div class="box3-top-right">
            <div class="box3-top-right-header">
              <div class="header-left">{{ "美国商务部" }}</div>
              <div class="header-right">
                <img src="./assets/images/open-icon.png" alt="" />
              </div>
            </div>
            <div class="box3-top-right-main">
              <div class="main-item">
                <div class="item-left">{{ "英文名:" }}</div>
                <div class="item-right">
                  {{ "United States Department of Commerce" }}
                </div>
              </div>
              <div class="main-item">
                <div class="item-left">{{ "成立时间:" }}</div>
                <div class="item-right">{{ "1903年2月14日" }}</div>
              </div>
              <div class="main-item">
                <div class="item-left">{{ "主要职责:" }}</div>
                <div class="item-right">
                  {{ "国际贸易、进出口管制（R-TX-19）" }}
                </div>
              </div>
              <div class="main-item">
                <div class="item-left">{{ "总部地址:" }}</div>
                <div class="item-right">
                  {{ "华盛顿宪法大道1401号胡佛大楼" }}
                </div>
              </div>
              <div class="main-item">
                <div class="item-left">{{ "部长:" }}</div>
                <div class="item-right">{{ "霍华德·卢特尼克" }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="box3-bottom">
          <div class="box3-bottom-header">
            <div class="header-icon">
              <img src="./assets/images/box3-bottom-header-icon.png" alt="">
            </div>
            <div class="header-title">{{ '机构动态' }}</div>
          </div>
          <div class="box3-bottom-main">
                        <el-timeline style="max-width: 500px">
              <el-timeline-item
                :timestamp="item.time"
                placement="top"
                v-for="(item, index) in eventList"
                :key="index"
              >
                <div class="timeline-content">
                  {{ item.content }}
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
          <div class="box3-bottom-footer">
            <img src="./assets/images/more-icon.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
const box1BtnActive = ref(1);

const areaList = ref([
  "人工智能",
  "出口管制",
  "半导体产业",
  "关税",
  "光伏产业",
]);

const majorList = ref([
  {
    title: '要求商务部在90天内建立"全栈式"美国AI出口机制。',
  },
  {
    title: '要求每个纳入出口计划的提案必须涵盖完整的"全栈AI技术包"。',
  },
  {
    title:
      '指示联邦机构提供贷款、担保、股权投资和技术援助支持入选的"优先AI出口包"。',
  },
  {
    title:
      "要求输出技术必须符合美国出口管制法规，并由多部门对最终用户进行合规与安全联合审查。",
  },
  {
    title: '明确政策目标为"减少对对手国家开发的AI技术的国际依赖"。',
  },
]);

// 人物动态
const eventList = ref([
  {
    time: '2025-07-31',
    content: '美商务部发布指南，警告全球企业使用华为昇腾芯片可能违反美国出口管制。意在限制中国AI产业发展，阻碍其获得先进算力。'
  },
  {
    time: '2025-07-25',
    content: '美商务部持续对多种中国产品发起“双反”（反倾销、反补贴）调查并作出裁决，涉及产品从工业原料到日常用品，且裁定的税率普遍较高。'
  },
  {
    time: '2025-07-21',
    content: '美商务部进一步收紧对华先进半导体出口管制，将更多中国实体列入“实体清单”。限制14纳米及以下先进芯片、DRAM等对华出口'
  },
  {
    time: '2025-07-12',
    content: '美商务部发起第三次反倾销和反补贴日落复审调查。'
  }
]);


</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 {
        display: flex;
        .box1-main-left {
          width: 235px;
          height: 332px;
          margin-left: 42px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .box1-main-right {
          margin-left: 40px;
          color: rgba(59, 65, 75, 1);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 700;
          line-height: 24px;
          .item {
            height: 30px;
            display: flex;
            margin-bottom: 17px;
            .item-left {
              width: 100px;
            }
            .tag-box {
              display: flex;
              .tag {
                color: rgba(22, 119, 255, 1);
                font-family: Microsoft YaHei;
                font-size: 14px;
                font-weight: 400;
                // line-height: 20px;
                box-sizing: border-box;
                border: 1px solid rgba(186, 224, 255, 1);
                border-radius: 4px;
                background: rgba(230, 244, 255, 1);
                padding: 1px 8px;
                margin-right: 8px;
              }
            }
            .text {
              font-weight: normal !important;
            }
          }
        }
      }
    }
    .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-left: 22px;
        height: 280px;
        .box2-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;
          &:nth-child(2n-1) {
            background: rgba(247, 248, 249, 1);
          }
          .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%;
            }
          }
        }
      }
      .box2-footer {
        margin: 20px 22px;
        display: flex;
        justify-content: space-between;
        .box2-footer-left {
          height: 20px;
          color: rgba(132, 136, 142, 1);
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
        }
      }
    }
  }
  .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-top {
        display: flex;
        margin-top: 10px;
        height: 261px;
        border-bottom: 1px solid rgba(234, 236, 238, 1);
        .box3-top-left {
          width: 120px;
          height: 120px;
          margin-left: 27px;

          img {
            width: 100%;
            height: 100%;
          }
        }
        .box3-top-right {
          margin-left: 30px;
          .box3-top-right-header {
            display: flex;
            height: 26px;
            .header-left {
              width: 325px;
              height: 26px;
              color: rgba(59, 65, 75, 1);
              font-family: Microsoft YaHei;
              font-size: 20px;
              font-weight: 700;
              line-height: 26px;
            }
            .header-right {
              margin-left: 9px;
              margin-top: 5px;
              width: 16px;
              height: 16px;
              cursor: pointer;
              img{
                width: 100%;
                height: 100%;
              }
            }
          }
          .box3-top-right-main {
            color: rgba(59, 65, 75, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            margin-top: 4px;
            .main-item {
              display: flex;
              margin-top: 12px;
              .item-left{
                height: 24px;
                width: 80px;
              }
              .item-right{
                width: 291px;
              }
            }
          }
        }
      }
      .box3-bottom {
        .box3-bottom-header {
          height: 59px;
          display: flex;
          .header-icon{
            margin-left: 22px;
            margin-top: 27px;
            width: 16px;
            height: 16px;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .header-title{
            margin-left: 12px;
            margin-top: 23px;
            height: 24px;
            color:  rgba(59, 65, 75, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 700;
            line-height: 24px;
          }
        }
        .box3-bottom-main{
          height: 410px;
        }
        .box3-bottom-footer{
          width: 108px;
          height: 32px;
          margin: 5px auto;
          cursor: pointer;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>