<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" v-if="item.children && item.children.length">
              <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" @click="handleClickTab(tab)">
            <div class="text text-tip-1" :class="{ 'text-active': tab.active }">{{ tab.meta.title }}</div>
            <el-tooltip content="关闭当前标签" placement="top">
              <div class="icon" @click.stop="handleCloseCurTab(tab, index)">
                <img v-if="!tab.active" src="./assets/icons/close.svg" alt="">
                <img v-else src="./assets/icons/close-active.svg" alt="">
              </div>
            </el-tooltip>

          </div>
        </div>
        <div class="main-box">
          <router-view v-slot="{ Component }">
            <!-- <keep-alive :include="tagsViewStore.cachedViews">
              <component :is="Component" :key="route.fullPath" />
            </keep-alive> -->
            <keep-alive>
              <component :is="Component" :key="route.fullPath" />
            </keep-alive>
          </router-view>
        </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.name, // 对应组件的 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: '科技政令',
    path: '/dataDecree',
    icon: Icon2,
    active: false,
    isExpanded: false,
    children: [

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

    ]
  },
  {
    name: '出口管制',
    icon: Icon4,
    active: false,
    isExpanded: false,
    children: [
      {
        name: '实体清单',
        path: '/dataEntityList',
        active: false,
      },
      {
        name: '商业管制清单',
        path: '/dataCommerceControlList',
        active: false,
      },
      {
        name: '实体清单事件',
        path: '/dataEntityListEvent',
        active: false,
      },
      {
        name: '商业管制清单事件',
        path: '/dataCommerceControlListEvent',
        active: false,
      },
    ]
  },
  // {
  //   name: '合作限制',
  //   icon: Icon5,
  //   active: false,
  //   isExpanded: false,
  //   children: [
  //   ]
  // },
  {
    name: '投融资限制',
    icon: Icon6,
    active: false,
    isExpanded: false,
    children: [
      {
        name: 'SDN清单',
        path: '/sDNList',
        active: false,
      },
      {
        name: '涉军企业清单',
        path: '/mREList',
        active: false,
      },
      {
        name: 'SDN清单事件',
        path: '/sDNListEvent',
        active: false,
      },
      {
        name: '涉军企业清单事件',
        path: '/mREListEvent',
        active: false,
      },
    ]
  },
  {
    name: '市场准入限制',
    icon: Icon7,
    active: false,
    isExpanded: false,
    children: [
      {
        name: '337调查',
        path: '/case337',
        active: false,
      },
      {
        name: '232调查',
        path: '/case232',
        active: false,
      },
      {
        name: '301调查',
        path: '/case301',
        active: false,
      },
    ]
  },
  // {
  //   name: '规则限制',
  //   icon: Icon8,
  //   active: false,
  //   isExpanded: false,
  //   children: [

  //   ]
  // },
  {
    name: '美国科技人物观点',
    icon: Icon9,
    active: false,
    isExpanded: false,
    children: [
      {
        name: '国会议员',
        path: '/congressMan',
        active: false,
      },
      {
        name: '科技企业领袖',
        path: '/technologyLeader',
        active: false,
      },
      {
        name: '机构主官',
        path: '/minister',
        active: false,
      },
      {
        name: '智库研究人员',
        path: '/thinkTankResearcher',
        active: false,
      },
    ]
  },
  {
    name: '美国主要创新主体',
    icon: Icon10,
    active: false,
    isExpanded: false,
    children: [
      {
        name: '科技企业',
        path: '/technologyCompany',
        active: false,
      },
      {
        name: '研究型大学',
        path: '/researchUniversity',
        active: false,
      },
      {
        name: '重点实验室',
        path: '/keyLab',
        active: false,
      },
    ]
  },
  // {
  //   name: '美国科研资助体系',
  //   icon: Icon11,
  //   active: false,
  //   isExpanded: false,
  //   children: [
  //     {
  //       name: '美国科研资助体系1',
  //       active: false,
  //     },
  //     {
  //       name: '美国科研资助体系2',
  //       active: false,
  //     },
  //   ]
  // },

])

const handleSiderItem = (item) => {
  siderList.value.forEach(val => {
    val.active = false
  })
  item.active = true
  item.isExpanded = !item.isExpanded
  if (item.path) {
    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 openedTabList = computed(() => {
  const tagsViewStore = useTagsViewStore()
  const arr = tagsViewStore.visitedViews
  return arr
})

const handleClickTab = (tab) => {
  const tagsViewStore = useTagsViewStore()
  tagsViewStore.visitedViews.forEach(val => {
    val.active = false
  })
  tab.active = true
  router.push(
    {
      path: tab.path
    }
  )
  siderList.value.forEach(val => {
    val.active = false
    if (val.children && val.children.length) {
      val.children.forEach(vall => {
        vall.active = false
      })
    }
  })

  siderList.value.forEach(val => {
    if (!val.children.length) {
      if (val.name === tab.meta.title) {
        val.active = true
        return
      }
    } else {
      val.children.forEach(vall => {
        if (vall.name === tab.meta.title) {
          vall.active = true
          val.active = true
          return
        }
      })
    }

  })
}

// 关闭当前标签页
const handleCloseCurTab = (tab, index) => {

  let activeTab

  if (!tab.active) {
    const tagsViewStore = useTagsViewStore()
    tagsViewStore.delView(tab)
  } else {
    siderList.value.forEach(val => {
      val.active = false
      if (val.children && val.children.length) {
        val.children.forEach(vall => {
          vall.active = false
        })
      }
    })
    if (index === openedTabList.value.length - 1) {
      const tagsViewStore = useTagsViewStore()
      tagsViewStore.delView(tab)
      setTimeout(() => {
        tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1].active = true
        activeTab = tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1]
        router.push({
          path: tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1].path
        })

        siderList.value.forEach(val => {
          if (!val.children.length) {
            if (val.name === activeTab.meta.title) {
              val.active = true
              return
            }
          } else {
            val.children.forEach(vall => {
              if (vall.name === activeTab.meta.title) {
                vall.active = true
                val.active = true
                return
              }
            })
          }
        })

      })
    } else {
      const tagsViewStore = useTagsViewStore()
      tagsViewStore.delView(tab)

      tagsViewStore.visitedViews[index].active = true
      activeTab = tagsViewStore.visitedViews[index]
      router.push({
        path: tagsViewStore.visitedViews[index].path
      })

      siderList.value.forEach(val => {
        if (!val.children.length) {
          if (val.name === activeTab.meta.title) {
            val.active = true
            return
          }
        } else {
          val.children.forEach(vall => {
            if (vall.name === activeTab.meta.title) {
              vall.active = true
              val.active = true
              return
            }
          })
        }
      })
    }
  }




}



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>