<template>
  <div class="wrap">
    <div class="header">
      <div class="header-top">
        <div class="left">
          <div class="icon">
            <img src="./assets/images/img1.png" alt="" />
          </div>
          <div class="info">
            <div class="title">{{ "337调查" }}</div>
            <div class="content">
              {{ '依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"' }}
            </div>
          </div>
        </div>
        <div class="right">
          <div class="icon">
            <img src="./assets/images/button-icon.png" alt="" />
          </div>
          <div class="text">{{ "查看官网" }}</div>
        </div>
      </div>
      <div class="header-footer">
        <div
          class="btn-item"
          :class="{ btnItemActive: activeBtnName === item.name }"
          v-for="(item, index) in btnList"
          :key="index"
          @click="handleClickBtn(item)"
        >
          <div class="icon">
            <img
              :src="item.acitveIcon"
              alt=""
              v-if="activeBtnName === item.name"
            />
            <img :src="item.icon" alt="" v-else />
          </div>
          <div
            class="text"
            :class="{ textActive: activeBtnName === item.name }"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <router-view />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import router from "@/router/index";
import icon1 from "./assets/images/icon1.png";
import icon1Active from "./assets/images/icon1_active.png";
import icon2 from "./assets/images/icon2.png";
import icon2Active from "./assets/images/icon2_active.png";

const btnList = ref([
  {
    name: "调查概况",
    icon: icon1,
    acitveIcon: icon1Active,
    path: "/marketAccessLayout/overview",
  },
  {
    name: "调查案件",
    icon: icon2,
    acitveIcon: icon2Active,
    path: "/marketAccessLayout/case",
  },
]);

const activeBtnName = ref("调查概况");

const handleClickBtn = (item) => {
  activeBtnName.value = item.name;
  router.push(item.path);
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 1920px;
  height: 1016px;
  .header {
    width: 1920px;
    height: 148px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(230, 231, 232, 1);
    background: rgba(255, 255, 255, 1);
    .header-top {
      display: flex;
      height: 100px;
      justify-content: space-between;
      .left {
        margin-left: 160px;
        margin-top: 24px;
        display: flex;

        .icon {
          width: 54px;
          height: 54px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .info {
          margin-left: 14px;
          margin-top: -1px;
          .title {
            height: 26px;
            color: rgba(59, 65, 75, 1);
            font-family: Microsoft YaHei;
            font-size: 20px;
            font-weight: 700;
            line-height: 26px;
          }
          .content {
            margin-top: 1px;
            height: 24px;
            color: rgba(95, 101, 108, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
          }
        }
      }
      .right {
        margin-top: 24px;
        margin-right: 160px;
        width: 120px;
        height: 36px;
        border-radius: 6px;
        background: var(--color-main-active);
        display: flex;
        cursor: pointer;
        .icon {
          width: 16px;
          height: 16px;
          margin-left: 16px;
          margin-top: 10px;
          position: relative;
          z-index: 99;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .text {
          margin-left: 8px;
          margin-top: 7px;
          height: 22px;
          color: rgba(255, 255, 255, 1);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 400;
          line-height: 22px;
        }
      }
    }
    .header-footer {
      height: 48px;
      margin-left: 160px;
      display: flex;
      .btn-item {
        display: flex;
        width: 92px;
        margin-right: 30px;
        cursor: pointer;
        .icon {
          width: 16px;
          height: 16px;
          margin-top: 16px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .text {
          margin-left: 2px;
          margin-top: 12px;
          height: 24px;
          color: rgba(59, 65, 75, 1);
          font-family: Microsoft YaHei;
          font-size: 18px;
          font-weight: 400;
          line-height: 24px;
        }
        .textActive {
          color: rgba(10, 87, 166, 1);
          font-weight: 700;
        }
      }
      .btnItemActive {
        border-bottom: 3px solid rgba(10, 87, 166, 1);
      }
    }
  }
  .main {
    width: 1920px;
    height: 868px;
    background: #f7f8f9;
  }
}
</style>