<template>
  <div class="layout-container">
    <!-- 导航菜单 -->
    <div class="layout-main">
      <div class="layout-main-header">
        <div class="layout-main-header-left-box">
          <div class="left-box-top">
            <div class="icon">
              <img src="./assets/images/USA-logo.png" alt="" />
            </div>
            <div class="info">
              <div class="info-box1">{{ "EO 14320-推动美国人工智能技术栈的出口" }}</div>
              <div class="info-box2">
                <div class="info-box2-item">{{ '总统行动' }}</div>|
                <div class="info-box2-item">{{ '行政命令' }}</div>|
                <div class="info-box2-item">{{ 'Promoting the Export of the American AI Technology Stack' }}</div>
              </div>
            </div>
          </div>
          <div class="left-box-bottom">
            <div
              class="left-box-bottom-item"
              :class="{ leftBoxBottomItemActive: activeTitle === item.name }"
              v-for="(item, index) in mainHeaderBtnList"
              :key="index"
              @click="handleClickMainHeaderBtn(item)"
            >
              <div class="icon">
                <img v-if="activeTitle === item.name" :src="item.activeIcon" alt="" />
                <img v-else :src="item.icon" alt="" />
              </div>
              <div class="name" :class="{ nameActive: activeTitle === item.name }">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="layout-main-header-right-box">
          <div class="right-box-top">
            <div class="time">{{ "2025年7月23日" }}</div>
            <div class="name">{{ "唐纳德·约翰·特朗普(Donald John Trump)" }}</div>
          </div>
          <div class="right-box-bottom">
            <el-button
              type="plain"
              size="large"
              icon="Search"
              @click="handleSwitchActiveName('法案原文')"
              >政令原文</el-button
            >
            <el-button type="primary" size="large" icon="EditPen"
              >分析报告</el-button
            >
          </div>
        </div>
      </div>
      <div class="layout-main-center">
        <router-view />
      </div>
    </div>
    <div class="layout-report-box" v-if="activeName === '法案原文'">
      <div class="report-close" @click="handleSwitchActiveName('分析报告')">
        <img src="./assets/images/report-close-icon.png" alt="" />
      </div>
      <div class="report-main">
        <div class="report-header">
          <div class="report-header-left">
            <div class="text">法案版本：</div>
            <div class="select-box">
              <el-select
                v-model="curBill"
                placeholder="选择法案"
                style="width: 240px"
              >
                <el-option
                  v-for="item in billList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div class="report-header-right">
            <div class="btn">
              <div class="icon">
                <img src="./assets/images/report-header-icon1.png" alt="" />
              </div>
              <div class="text">翻译</div>
            </div>
            <div class="btn">
              <div class="icon">
                <img src="./assets/images/report-header-icon2.png" alt="" />
              </div>
              <div class="text">下载</div>
            </div>
            <div class="btn">
              <div class="icon">
                <img src="./assets/images/report-header-icon3.png" alt="" />
              </div>
              <div class="text">对比</div>
            </div>
            <div class="btn">
              <div class="icon">
                <img src="./assets/images/report-header-icon4.png" alt="" />
              </div>
              <div class="text">查找</div>
            </div>
          </div>
        </div>
        <div class="report-content">
          <div class="content-left">
            <img src="./assets/images/report1.png" alt="" />
          </div>
          <div class="content-right">
            <img src="./assets/images/report2.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="tool-box">
      <div class="tool1">
        <img src="./assets/icons/tool-icon1.png" alt="" />
      </div>
      <div class="tool2">
        <img src="./assets/icons/tool-icon2.png" alt="" />
      </div>
      <div class="tool3">
        <img src="./assets/icons/tool-icon3.png" alt="" />
      </div>
    </div> -->
  </div>
</template>

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

import GJKJAQImg from "./assets/images/icon1.png";
import GJKJAQActiveImg from "./assets/images/icon1.png";
import KJLYImg from "./assets/images/icon2.png";
import KJLYActiveImg from "./assets/images/icon2.png";
import KJYSImg from "./assets/images/icon3.png";
import KJYSActiveImg from "./assets/images/icon3.png";
import ZDKJAQImg from "./assets/images/icon4.png";
import ZDKJAQActiveImg from "./assets/images/icon4.png";
import ZBTXImg from "./assets/images/icon5.png";
import ZBTXActiveImg from "./assets/images/icon5.png";
import ZJKImg from "./assets/images/icon6.png";
import ZJKActiveImg from "./assets/images/icon6.png";
import XTGLImg from "./assets/images/icon7.png";
import XTGLActiveImg from "./assets/images/icon7.png";
import search from "./assets/images/search.png";
import mail from "./assets/images/mail.png";

import icon1 from "./assets/icons/icon1.png";
import icon1Active from "./assets/icons/icon1_active.png";
import icon2 from "./assets/icons/icon2.png";
import icon2Active from "./assets/icons/icon2_active.png";
import icon3 from "./assets/icons/icon3.png";
import icon3Active from "./assets/icons/icon3_active.png";
import icon4 from "./assets/icons/icon4.png";
import icon4Active from "./assets/icons/icon4_active.png";

import headerIcon1 from "./assets/icons/header-icon1.png";
import headerIcon2 from "./assets/icons/header-icon2.png";
import headerIcon3 from "./assets/icons/header-icon3.png";
import headerIcon4 from "./assets/icons/header-icon4.png";
import headerIcon5 from "./assets/icons/header-icon5.png";

const activeName = ref("分析报告");

const handleSwitchActiveName = (name) => {
  activeName.value = name;
};

const curBill = ref("公法（2025年7月4日）");

const billList = ref([
  {
    label: "公法（2025年7月4日）",
    value: "公法（2025年7月4日）",
  },
  {
    label: "公法（2025年7月2日）",
    value: "公法（2025年7月2日）",
  },
]);

const mainHeaderBtnList = ref([
  {
    icon: icon1,
    activeIcon: icon1Active,
    name: "政令概况",
    path: "/decreeLayout/overview",
  },
  {
    icon: icon2,
    activeIcon: icon2Active,
    name: "深度挖掘",
    path: "/decreeLayout/deepDig",
  },
  {
    icon: icon3,
    activeIcon: icon3Active,
    name: "影响分析",
    path: "/decreeLayout/influence",
  }
]);

const activeTitle = ref('法案概况')

const handleClickMainHeaderBtn = (item) => {
  activeTitle.value = item.name;
  // window.sessionStorage.setItem('activeTitle', activeTitle.value)
  router.push(item.path);
};

const activeNavIndex = ref(0);

const handleClickNav = (index, item) => {
  activeNavIndex.value = index;
  router.push(item.path);
};

onMounted(() => {
  if(window.sessionStorage.getItem('activeTitle')) {
    activeTitle.value = window.sessionStorage.getItem('activeTitle')
  }
});
</script>

<style lang="scss" scoped>
.layout-container {
  width: 1920px;
  height: 1016px;
  background: rgba(249, 250, 252, 1);
  position: relative;
  // .layout-header {
  //   width: 1920px;
  //   height: 64px;
  //   // background: #0a121e;
  //   background: #fff;
  //   // border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  //   box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  //   // margin-bottom: 13px;
  //   display: flex;
  //   position: relative;
  //   z-index: 99;
  //   .layout-header-left {
  //     width: 480px;
  //     display: flex;
  //     .logo-box {
  //       width: 36px;
  //       height: 36px;
  //       margin: 14px;

  //       img {
  //         width: 100%;
  //         height: 100%;
  //         border-radius: 6px;
  //       }
  //     }
  //     .title-box {
  //       height: 64px;
  //       width: 350px;
  //       margin: 0 5px;
  //       color: #eee;
  //       line-height: 64px;
  //       font-size: 20px;
  //       font-weight: bold;
  //       color: rgba(10, 18, 30, 1);
  //       font-family: Microsoft YaHei;
  //       font-size: 22px;
  //       font-weight: 700;
  //       text-align: left;
  //     }
  //   }
  //   .layout-header-center {
  //     width: 700px;
  //     display: flex;
  //     justify-content: space-between;
  //     margin-left: 200px;
  //     .nav-item {
  //       border-radius: 5px;
  //       cursor: pointer;
  //       display: flex;
  //       &:hover {
  //         background: rgba(255, 255, 255, 0.2);
  //       }
  //       .nav-icon-box {
  //         width: 25px;
  //         height: 25px;
  //         margin: 22px 0 20px 5px;
  //         .nav-icon {
  //           width: 20px;
  //           height: 20px;
  //           img {
  //             width: 100%;
  //             height: 100%;
  //           }
  //         }
  //         .nav-icon-active {
  //           width: 20px;
  //           height: 20px;
  //           img {
  //             width: 100%;
  //             height: 100%;
  //           }
  //         }
  //       }
  //       .name-box {
  //         margin: 18px 5px;
  //         height: 30px;
  //         text-align: center;
  //         line-height: 30px;
  //         color: rgba(59, 65, 75, 1);
  //         letter-spacing: 2px;
  //         font-size: 18px;
  //       }
  //       // .nameActive {
  //       //   color: #ea9518;
  //       //   font-weight: bold;
  //       // }
  //     }
  //     .navItemActive {
  //       // background: #295dab;
  //       // border-bottom: 4px solid #ea9518;
  //       // &:hover {
  //       //   background: #295dab;
  //       //   border-bottom: 4px solid #ea9518;
  //       // }
  //     }
  //   }
  //   .layout-header-right {
  //     flex: 1;
  //     display: flex;
  //     justify-content: flex-end;

  //     .nav-search {
  //       width: 22px;
  //       height: 22px;
  //       margin: 21px 0;
  //     }

  //     .nav-message {
  //       width: 22px;
  //       height: 22px;
  //       margin: 21px 30px;
  //     }

  //     .nav-usr {
  //       width: 110px;
  //       display: flex;
  //       height: 40px;
  //       margin: 12px 5px 12px 0;
  //       .usr-img {
  //         margin-top: 4px;
  //         height: 32px;
  //         width: 32px;
  //         background: rgba(255, 255, 255, 0.5);
  //         border-radius: 100%;
  //         box-sizing: border-box;
  //         padding: 4px;
  //         // img {
  //         //   width: 100%;
  //         //   height: 100%;
  //         // }
  //       }
  //       .usr-info {
  //         height: 40px;
  //         line-height: 40px;
  //         text-align: center;
  //         font-size: 14px;
  //         margin-left: 10px;
  //       }
  //     }
  //   }
  // }
  .layout-main {
    width: 100%;
    height: 100%;
    .layout-main-header {
      height: 137px;
      background: rgba(255, 255, 255, 1);
      display: flex;
      justify-content: space-between;
      .layout-main-header-left-box {
        width: 800px;
        margin-left: 160px;
        margin-top: 13px;
        .left-box-top {
          height: 64px;
          display: flex;
          .icon {
            width: 64px;
            height: 64px;
          }
          .info {
            margin-left: 9px;
            .info-box1 {
              color: rgba(59, 65, 75, 1);
              font-family: Microsoft YaHei;
              font-size: 20px;
              font-weight: 600;
              line-height: 22px;
              letter-spacing: 0px;
              text-align: left;
              margin-top: 5px;
            }
            .info-box2 {
              margin-top: 5px;
              height: 22px;
              line-height: 22px;
              color: rgba(132, 136, 142, 1);
              font-family: Microsoft YaHei;
              font-size: 14px;
              font-weight: 400;
              line-height: 22px;
              letter-spacing: 0px;
              text-align: left;
              display: flex;
              margin-left: -10px;
              .info-box2-item{
                padding: 0 10px;
              }
            }
          }
        }
        .left-box-bottom {
          display: flex;
          height: 40px;
          margin-top: 21px;
          .left-box-bottom-item {
            display: flex;
            margin-right: 32px;
            margin-top: 3px;
            height: 35px;
            cursor: pointer;
            // &:hover{
            //   .name {
            //     color: rgba(22, 119, 255, 1);
            //   }
            // }
            .icon {
              margin-top: 1px;
              width: 16px;
              height: 16px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .name {
              color: rgba(95, 101, 108, 1);
              font-family: Microsoft YaHei;
              font-size: 14px;
              font-weight: 400;
              line-height: 22px;
              letter-spacing: 0px;
              text-align: left;
              margin-left: 3px;
            }
            .nameActive {
              color: rgba(20, 89, 187, 1);
              font-weight: 700;
            }
          }
          .leftBoxBottomItemActive {
            border-bottom: 3px solid rgba(20, 89, 187, 1);
          }
        }
      }
      .layout-main-header-right-box {
        width: 300px;
        margin-right: 150px;
        margin-top: 19px;
        .right-box-top {
          .time {
            height: 24px;
            line-height: 24px;
            color: rgba(95, 101, 108, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 400;
            line-height: 22px;
            letter-spacing: 0px;
            text-align: right;
          }
          .name {
            height: 24px;
            line-height: 24px;
            color: rgba(95, 101, 108, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 400;
            line-height: 22px;
            letter-spacing: 0px;
            text-align: right;
          }
        }
        .right-box-bottom {
          margin-top: 24px;
          text-align: right;
        }
      }
    }
    .layout-main-center {
      height: calc(100% - 137px);
      overflow-y: auto;
      overflow-x: hidden;
    }
  }
  .layout-report-box {
    position: absolute;
    z-index: 9999;
    top: 154px;
    left: 0;
    width: 100%;
    height: 926px;
    background: rgba(248, 249, 250, 1);
    .report-close {
      position: absolute;
      top: 24px;
      right: 178px;
      width: 32px;
      height: 32px;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .report-main {
      width: 1600px;
      height: 926px;
      margin: 0 auto;
      background: #fff;
      box-sizing: border-box;
      padding: 0 69px;
      .report-header {
        height: 77px;
        border-bottom: 1px solid rgba(240, 242, 244, 1);
        display: flex;
        justify-content: space-between;
        .report-header-left {
          display: flex;
          .text {
            margin-top: 32px;
            width: 70px;
            height: 14px;
            color: rgba(95, 101, 108, 1);
            font-family: Microsoft YaHei;
            font-size: 14px;
            font-weight: 400;
            line-height: 14px;
          }
          .select-box {
            margin-left: 8px;
            margin-top: 23px;
          }
        }
        .report-header-right {
          display: flex;
          margin-top: 24px;
          .btn {
            display: flex;
            width: 88px;
            height: 32px;
            margin-left: 8px;
            box-sizing: border-box;
            border: 1px solid rgba(230, 231, 232, 1);
            border-radius: 4px;
            background: rgba(255, 255, 255, 1);
            display: flex;
            justify-content: center;
            align-items: center;
            .icon {
              width: 16px;
              height: 16px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .text {
              margin-left: 8px;
              height: 32px;
              color: rgba(95, 101, 108, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 400;
              line-height: 32px;
            }
          }
        }
      }
      .report-content {
        display: flex;
        margin-top: 35px;
        .content-left {
          width: 680px;
          height: 786px;
          // background: #eee;
          // overflow-y: auto;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .content-right {
          margin-left: 89px;
          width: 680px;
          height: 786px;
          // background: #eee;
          // overflow-y: auto;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  // .tool-box {
  //   position: fixed;
  //   z-index: 10000;
  //   bottom: 80px;
  //   left: 0;
  //   width: 48px;
  //   height: 144px;
  //   border-radius: 0px 10px 10px 0px;
  //   box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
  //   background: rgba(255, 255, 255, 1);
  //   .tool1 {
  //     width: 17px;
  //     height: 18px;
  //     margin-top: 17px;
  //     margin-left: 16px;
  //     cursor: pointer;
  //     img {
  //       width: 100%;
  //       height: 100%;
  //     }
  //   }
  //   .tool2 {
  //     width: 22px;
  //     height: 20px;
  //     margin-top: 26px;
  //     margin-left: 14px;
  //     cursor: pointer;
  //     img {
  //       width: 100%;
  //       height: 100%;
  //     }
  //   }
  //   .tool3 {
  //     width: 20px;
  //     height: 20px;
  //     margin-top: 25px;
  //     margin-left: 15px;
  //     cursor: pointer;
  //     img {
  //       width: 100%;
  //       height: 100%;
  //     }
  //   }
  // }
}
</style>