<template>
  <div class="data-library-wrapper">
    <div class="data-library-header">
      <div class="header-left">
        <div class="icon">
          <img src="@/assets/icons/overview/logo.png" alt="">
        </div>
        <div class="title text-title-1-show">{{ '数据资源库' }}</div>
      </div>
      <div class="header-right">
        <div class="search-box"></div>
        <div class="info-box" @click="handleClickToolBox">
          <div class="mail">
            <img src="@/assets/icons/overview/mail.png" alt="" />
          </div>
          <div class="user">
            <img src="@/assets/icons/overview/user.png" alt="" />
          </div>
          <div class="name">{{ "管理员" }}</div>
        </div>
      </div>
    </div>
    <div class="data-library-main">
      <div class="data-library-sider">
        <div class="sider-item-box" v-for="item, index in siderList" :key="index">
          <div class="sider-item" @click="handleSiderItem(item)">
            <div class="sider-icon">
              <img :src="item.icon" alt="">
            </div>
            <div class="sider-name text-compact-bold" :class="{ 'sider-name-active': item.active }">{{ item.name }}
            </div>
            <div class="sider-arrow">
              <img v-if="!item.isExpanded" src="./assets/icons/arrow-down.svg" alt="">
              <img v-else src="./assets/icons/arrow-up.svg" alt="">
            </div>
          </div>
          <div class="sider-second-item-box" v-if="item.isExpanded">
            <div class="sider-second-item text-compact" :class="{ 'sider-second-item-acitve': val.active }"
              v-for="val, idx in item.children" :key="idx" @click="handleSiderSecondItem(val)">
              {{ val.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="data-library-content">
        <div class="tab-box">
          <div class="tab-item" :class="{ 'tab-item-active': tab.active }" v-for="tab, index in openedTabList"
            :key="index">
            <div class="text text-tip-1" :class="{ 'text-active': tab.active }">{{ tab.name }}</div>
            <div class="icon">
              <img v-if="!tab.active" src="./assets/icons/close.svg" alt="">
              <img v-else src="./assets/icons/close-active.svg" alt="">
            </div>
          </div>
        </div>
        <div class="main-box">
          <router-view v-slot="{ Component }">
            <keep-alive :include="tagsViewStore.cachedViews">
              <component :is="Component" :key="route.fullPath" />
            </keep-alive>
          </router-view>
        </div>
        <!-- <div class="select-box"></div>
        <div class="info-box">
          <div class="switch-box" @click="handleSwitchChartData">
            <img v-if="!isShowChart" src="./assets/icons/chart-active.svg" alt="">
            <img v-else src="./assets/icons/data-active.svg" alt="">
          </div>
          <div class="num-box text-title-3-bold">
            {{ `共 ${totalNum} 条数据` }}
          </div>
        </div>

        <div class="content-box"></div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import Icon1 from './assets/icons/sider-icon1.svg'
import Icon2 from './assets/icons/sider-icon2.svg'
import Icon3 from './assets/icons/sider-icon3.svg'
import Icon4 from './assets/icons/sider-icon4.svg'
import Icon5 from './assets/icons/sider-icon5.svg'
import Icon6 from './assets/icons/sider-icon6.svg'
import Icon7 from './assets/icons/sider-icon7.svg'
import Icon8 from './assets/icons/sider-icon8.svg'
import Icon9 from './assets/icons/sider-icon9.svg'
import Icon10 from './assets/icons/sider-icon10.svg'
import Icon11 from './assets/icons/sider-icon11.svg'

import { useRouter, useRoute } from 'vue-router'
import useTagsViewStore from '@/stores/tagsView.js'

const router = useRouter()
const route = useRoute()
const tagsViewStore = useTagsViewStore()


// 在路由全局守卫中处理
router.beforeEach((to, from, next) => {
  const tagsViewStore = useTagsViewStore()
  // 路由允许添加标签（排除掉隐藏的布局页如 /404, /login 等）
  if (to.meta?.title && !to.meta?.hiddenTag) {
    tagsViewStore.addView({
      path: to.path,
      name: to.meta.title, // 对应组件的 name，用于缓存
      meta: { ...to.meta },
      active: true
    })
  }
  next()
})

const siderList = ref([
  {
    name: '科技法案',
    icon: Icon1,
    active: true,
    isExpanded: true,
    children: [
      {
        name: '国会法案',
        path: '/countryBill',
        active: true,
      },
      {
        name: '州法案',
        path: '/stateBill',
        active: false,
      },
    ]
  },
  {
    name: '科技政令',
    icon: Icon2,
    active: false,
    isExpanded: false,
    children: [

    ]
  },
  {
    name: '美国科技智库',
    icon: Icon3,
    active: false,
    isExpanded: false,
    children: [

    ]
  },
  {
    name: '出口管制',
    icon: Icon4,
    active: false,
    isExpanded: false,
    children: [
      {
        name: '实体清单',
        active: false,
      },
      {
        name: '商业管制清单',
        active: false,
      },
       {
        name: '实体清单事件',
        active: false,
      },
       {
        name: '商业管制清单事件',
        active: false,
      },
    ]
  },
  // {
  //   name: '合作限制',
  //   icon: Icon5,
  //   active: false,
  //   isExpanded: false,
  //   children: [
  //   ]
  // },
  {
    name: '投融资限制',
    icon: Icon6,
    active: false,
    isExpanded: false,
    children: [
      {
        name: 'SDN清单',
        active: false,
      },
      {
        name: '涉军企业清单',
        active: false,
      },
       {
        name: 'SDN清单事件',
        active: false,
      },
       {
        name: '涉军企业清单事件',
        active: false,
      },
    ]
  },
  {
    name: '市场准入限制',
    icon: Icon7,
    active: false,
    isExpanded: false,
    children: [
      {
        name: '337调查',
        active: false,
      },
      {
        name: '232调查',
        active: false,
      },
       {
        name: '301调查',
        active: false,
      },
    ]
  },
  // {
  //   name: '规则限制',
  //   icon: Icon8,
  //   active: false,
  //   isExpanded: false,
  //   children: [
     
  //   ]
  // },
  {
    name: '美国科技人物观点',
    icon: Icon9,
    active: false,
    isExpanded: false,
    children: [
      {
        name: '国会议员',
        active: false,
      },
      {
        name: '科技企业领袖',
        active: false,
      },
       {
        name: '机构主官',
        active: false,
      },
       {
        name: '智库研究人员',
        active: false,
      },
    ]
  },
  {
    name: '美国主要创新主体',
    icon: Icon10,
    active: false,
    isExpanded: false,
    children: [
      {
        name: '科技企业',
        active: false,
      },
      {
        name: '研究型大学',
        active: false,
      },
      {
        name: '重点实验室',
        active: false,
      },
    ]
  },
  // {
  //   name: '美国科研资助体系',
  //   icon: Icon11,
  //   active: false,
  //   isExpanded: false,
  //   children: [
  //     {
  //       name: '美国科研资助体系1',
  //       active: false,
  //     },
  //     {
  //       name: '美国科研资助体系2',
  //       active: false,
  //     },
  //   ]
  // },

])

const handleSiderItem = (item) => {
  item.active = !item.active
  item.isExpanded = !item.isExpanded
  // router.push({
  //   path: item.path
  // })
}

const handleSiderSecondItem = (item) => {
  siderList.value.forEach(item => {
    if(item.children.length) {
      item.children.forEach(val => {
        val.active = false
      })
    }
  })
  item.active = true
  router.push({
    path: item.path
  })
}

// 图表/数据
const isShowChart = ref(true)

const handleSwitchChartData = () => {
  isShowChart.value = !isShowChart.value
}

// 总计数据
const totalNum = ref(0)

// 打开的tab列表
// const openedTabList = ref(
//   [
//     {
//       name: '国会法案',
//       isCurrentShow: true
//     },
//     {
//       name: '总统行政令',
//       isCurrentShow: false
//     },
//     {
//       name: '美国科技智库',
//       isCurrentShow: false
//     }
//   ]
// )

const openedTabList = computed(() => {
  const tagsViewStore = useTagsViewStore()
  const arr = tagsViewStore.visitedViews


  return arr
})


const handleClickToolBox = () => {
  ElMessage.warning("当前功能正在开发中，敬请期待！");
};


</script>



<style lang="scss">
.data-library-wrapper {
  width: 1920px;
  height: 1080px;

  // background: orange;
  .data-library-header {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 37px 0 24px;
    border-bottom: 1px solid rgba(234, 236, 238, 1);
    box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
    background: linear-gradient(180deg, rgba(246, 250, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);

    .header-left {
      display: flex;
      gap: 23px;
      align-items: center;

      .icon {
        width: 30px;
        height: 30px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .title {
        color: var(--color-primary-100);
      }
    }

    .header-right {
      display: flex;

      .info-box {
        display: flex;
        align-items: center;

        .mail {
          width: 32px;
          height: 32px;
          margin-right: 14px;
          cursor: pointer;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .user {
          width: 32px;
          height: 32px;
          margin-right: 11px;
          cursor: pointer;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .name {
          width: 48px;
          height: 30px;
          color: rgba(59, 65, 75, 1);
          font-family: Microsoft YaHei;
          font-style: Regular;
          font-size: 16px;
          font-weight: 400;
          line-height: 30px;
          letter-spacing: 0px;
        }
      }
    }
  }

  .data-library-main {
    height: calc(100% - 64px);
    background: #F7F8F9;
    display: flex;

    .data-library-sider {
      width: 320px;
      background: rgb(255, 255, 255);
      border-right: 1px solid rgba(234, 236, 238, 1);

      .sider-item {
        height: 54px;
        padding: 0 26px;
        border-bottom: 1px solid rgba(234, 236, 238, 1);
        display: flex;
        gap: 12px;
        align-items: center;
        cursor: pointer;

        .sider-name {
          width: 207px;

          &:hover {
            color: var(--color-primary-100);
          }

        }

        .sider-name-active {
          color: var(--color-primary-100);
        }
      }

      .sider-second-item {
        height: 54px;
        padding: 15px 24px 15px 60px;
        border-bottom: 1px solid rgba(234, 236, 238, 1);
        cursor: pointer;

        &:hover {
          background: var(--color-primary-10);
          color: var(--color-primary-100);
        }
      }

      .sider-second-item-acitve {
        background: var(--color-primary-10);
        color: var(--color-primary-100);
        border-right: 4px solid var(--color-primary-100);
      }
    }

    .data-library-content {
      width: 1600px;


      .tab-box {
        height: 48px;
        background: rgba(255, 255, 255);
        border-bottom: 2px solid var(--bg-black-5);
        display: flex;

        .tab-item {
          height: 48px;
          display: flex;
          gap: 8px;
          align-items: center;
          padding: 0 12px 0 16px;
          border-bottom: 2px solid var(--bg-black-5);
          cursor: pointer;

          // animation: all ease 0.5s;
          &:hover {

            // border-bottom: 2px solid var(--color-primary-100);
            .text {
              color: var(--color-primary-100);
            }
          }

          .text-active {
            color: var(--color-primary-100);
          }

          .icon {
            width: 16px;
            height: 16px;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .tab-item-active {
          border-bottom: 2px solid var(--color-primary-100);
        }
      }

      .main-box {
        width: 1600px;
        height: 968px;
        overflow: hidden;
      }

      .select-box {
        width: 1568px;
        height: 112px;
        border-radius: 10px;
        background: rgb(255, 255, 255);
        border: 1px solid var(--bg-black-5);
        margin: 16px auto;
      }

      .info-box {
        margin: 0 auto;
        width: 1568px;
        height: 30px;
        display: flex;
        justify-content: space-between;
      }

      .switch-box {
        width: 160px;
        border-radius: 20px;
        border: 1px solid var(--color-primary-100);
        height: 30px;
        cursor: pointer;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .num-box {
        color: var(--color-red-100);
      }

      .content-box {
        margin: 0 auto;
        margin-top: 16px;
        width: 1568px;
        height: 766px;
        border-radius: 10px;
        background: rgba(255, 255, 255);
        border: 1px solid var(--bg-black-5);
      }
    }
  }
}
</style>