<template>
  <a-layout class="layout" :class="{ mobile: appStore.hideMenu }">
    <div v-if="navbar && !route?.meta?.isNewTab" class="layout-navbar">
      <NavBar />
    </div>
    <a-layout>
      <a-layout>
        <a-layout-sider
          v-if="renderMenu"
          v-show="!hideMenu && !route?.meta?.isNewTab"
          class="layout-sider"
          :breakpoint="'xl'"
          :collapsible="true"
          :width="menuWidth"
          :style="{ paddingTop: navbar ? '60px' : '' }"
          :hide-trigger="true"
          @collapse="setCollapsed"
        >
          <div class="menu-wrapper">
            <div class="left-side">
              <a-space>
                <img
                  alt="logo"
                  src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/dfdba5317c0c20ce20e64fac803d52bc.svg~tplv-49unhts6dw-image.image"
                />
                <a-typography-title>智能运维管理系统</a-typography-title>
              </a-space>
            </div>
            <Menu />
          </div>
        </a-layout-sider>
        <a-drawer
          v-if="hideMenu"
          :visible="drawerVisible"
          placement="left"
          :footer="false"
          mask-closable
          :closable="false"
          @cancel="drawerCancel"
        >
          <Menu />
        </a-drawer>
        <a-layout class="layout-content" :style="paddingStyle">
          <!-- <TabBar v-if="appStore.tabBar" /> -->
          <a-layout-content>
            <div v-if="showIframe" class="iframe-container">
              <iframe
                :src="iframeUrl"
                frameborder="0"
                class="web-iframe"
              ></iframe>
            </div>
            <PageLayout v-else />
          </a-layout-content>
          <Footer v-if="footer" />
        </a-layout>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<script lang="ts" setup>
import Footer from '@/components/footer/index.vue'
import Menu from '@/components/menu/index.vue'
import NavBar from '@/components/navbar/index.vue'
import TabBar from '@/components/tab-bar/index.vue'
import usePermission from '@/hooks/permission'
import useResponsive from '@/hooks/responsive'
import { useAppStore, useUserStore } from '@/store'
import { computed, onMounted, provide, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import PageLayout from './page-layout.vue'
import { getToken } from '@/utils/auth'

const isInit = ref(false)
const appStore = useAppStore()
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const permission = usePermission()
useResponsive(true)
const navbarHeight = route?.meta?.isNewTab ? '0' : `60px`
const navbar = computed(() => appStore.navbar)
const renderMenu = computed(() => appStore.menu && !appStore.topMenu)
const hideMenu = computed(() => appStore.hideMenu)
const footer = computed(() => appStore.footer)
const menuWidth = computed(() => {
  if (route?.meta?.isNewTab) return 0
  return appStore.menuCollapse ? 48 : appStore.menuWidth
})

console.log('route', route)
const showIframe = ref(false)
const iframeUrl = ref('')

const updateShowIframe = () => {
  const isWebPage = route?.meta?.is_web_page === true
  const webUrl = route?.meta?.web_url
  
  if (isWebPage && webUrl && typeof webUrl === 'string') {
    showIframe.value = true
    // Add token as query parameter to the URL
    const token = getToken()
    if (token && typeof token === 'string') {
      // Parse the URL and add token parameter
      try {
        const url = new URL(webUrl)
        url.searchParams.set('token', token)
        iframeUrl.value = url.toString()
      } catch (error) {
        // If URL is invalid, use it as is
        console.warn('Invalid URL provided for iframe:', webUrl)
        iframeUrl.value = webUrl
      }
    } else {
      // No token available, use URL as is
      iframeUrl.value = webUrl
    }
  } else {
    showIframe.value = false
    iframeUrl.value = ''
  }
}

// Watch for route changes to update iframe display
watch(
  () => [route.fullPath, route.meta],
  () => {
    updateShowIframe()
  },
  { immediate: true, deep: true }
)

const paddingStyle = computed(() => {
  const paddingLeft = renderMenu.value && !hideMenu.value ? { paddingLeft: `${menuWidth.value}px` } : {}
  const paddingTop = navbar.value ? { paddingTop: navbarHeight } : {}
  return { ...paddingLeft, ...paddingTop }
})
const setCollapsed = (val: boolean) => {
  if (!isInit.value) return // for page initialization menu state problem
  appStore.updateSettings({ menuCollapse: val })
}
watch(
  () => userStore.role,
  (roleValue) => {
    if (roleValue && !permission.accessRouter(route)) router.push({ name: 'notFound' })
  }
)
const drawerVisible = ref(false)
const drawerCancel = () => {
  drawerVisible.value = false
}
provide('toggleDrawerMenu', () => {
  drawerVisible.value = !drawerVisible.value
})
onMounted(() => {
  isInit.value = true
})
</script>

<style scoped lang="less">
@nav-size-height: 60px;
@layout-max-width: 1100px;

.layout {
  width: 100%;
  height: 100%;

  .layout-sider {
    background: var(--color-menu-dark-bg);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    height: 100%;
    padding-top: 0 !important;

    .left-side {
      display: flex;
      align-items: center;
      padding-left: 8px;
      background: var(--color-menu-dark-bg);
      height: 60px;

      .arco-typography {
        color: #fff;
        font-size: 18px;
        width: 200px;
      }
    }

    &::after {
      position: absolute;
      top: 0;
      right: -1px;
      display: block;
      width: 1px;
      height: 100%;
      background-color: var(--color-border);
      content: '';
    }

    > :deep(.arco-layout-sider-children) {
      overflow-y: hidden;
      top: 0;
    }

    .menu-wrapper {
      height: 100%;
      overflow: auto;
      overflow-x: hidden;

      :deep(.arco-menu) {
        height: calc(100% - 60px) !important;

        ::-webkit-scrollbar {
          width: 12px;
          height: 4px;
        }

        ::-webkit-scrollbar-thumb {
          border: 4px solid transparent;
          background-clip: padding-box;
          border-radius: 7px;
          background-color: var(--color-text-4);
        }

        ::-webkit-scrollbar-thumb:hover {
          background-color: var(--color-text-3);
        }
      }
    }
  }

  .layout-content {
    min-width: @layout-max-width;
    min-height: 100vh;
    overflow-y: hidden;
    background-color: var(--color-fill-2);
    transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);

    .layout-navbar {
      transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
      position: fixed;
      top: 0;
      left: 250px;
      z-index: 100;
      width: 100%;
      min-width: @layout-max-width;
      height: @nav-size-height;
    }
  }

  .arco-layout-sider-collapsed {
    .left-side {
      width: 50px;

      .arco-typography {
        color: transparent;
      }
    }

    + .layout-content {
      .layout-navbar {
        left: 50px !important;

        .navbar {
          width: calc(100% - 50px) !important;
        }
      }
    }
  }

  .iframe-container {
    width: 100%;
    height: 100%;
    min-height: calc(100vh - @nav-size-height);

    .web-iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
  }
}
</style>
