<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1;" enable-back-to-top="true">
  <!-- #endif -->
    <view class="uni-container" :class="isDarkMode ? 'theme-dark' : 'theme-light'">
      <view v-if="!hasLeftWin" class="uni-header-logo">
        <image class="uni-header-image" src="/static/apiIndex.png"></image>
      </view>
      <view v-if="!hasLeftWin" class="uni-text-box">
        <text class="hello-text">以下将演示uni-app x接口能力，详细文档见：</text>
        <u-link class="hello-text" :href="'https://doc.dcloud.net.cn/uni-app-x/api/'" :text="'https://doc.dcloud.net.cn/uni-app-x/api/'"
          :inWhiteList="true"></u-link>
      </view>
      <uni-collapse>
        <uni-collapse-item ref="categoryRef" v-for="menuItem in menu" :key="menuItem.id" :title="menuItem.name"
          class="uni-panel">
          <template v-for="childMenuItem in menuItem.items" :key="childMenuItem.id">
            <view v-if="childMenuItem.items.length==0" class="pl" hover-class="is--active"
              :class="{'uni-navigate-item':childMenuItem.path !== 'set-tab-bar' || windowWidth <= 768}"
               @click="goPage(`/${childMenuItem.path}`)">
              <template v-if="childMenuItem.path !== 'set-tab-bar' || windowWidth <= 768">
                <text class="uni-navigate-text"
                  :class="{'left-win-active': leftWinActive === childMenuItem.path && hasLeftWin}">{{ childMenuItem.style["navigationBarTitleText"] }}</text>
                <image :src="arrowRightIcon" class="uni-icon-size"></image>
              </template>
            </view>
            <uni-collapse v-else style="width: 100%;border-top: 1px solid #f0f0f0;">
              <uni-collapse-item :title="childMenuItem.name" class="uni-panel"
                style="margin-bottom: 0;">
                <view class="uni-navigate-item pl" hover-class="is--active"
                  v-for="grandChildMenuItem in childMenuItem.items" :key="grandChildMenuItem.path"
                  @click="goPage(`/${grandChildMenuItem.path}`)">
                  <text class="uni-navigate-text" :class="{
                      'left-win-active':
                        leftWinActive === grandChildMenuItem.path && hasLeftWin,
                    }">{{ grandChildMenuItem.style["navigationBarTitleText"] }}</text>
                  <image :src="arrowRightIcon" class="uni-icon-size"></image>
                </view>
              </uni-collapse-item>
            </uni-collapse>
          </template>
        </uni-collapse-item>
      </uni-collapse>
      <!-- #ifdef MP || WEB -->
      <view v-if="!hasLeftWin" ref="popRef" @click="hidePop()" class="popup" @touchmove.prevent="stopPropagation">
      <!-- #endif -->
      <!-- #ifndef MP || WEB -->
      <view v-if="!hasLeftWin" ref="popRef" @click="hidePop()" class="popup">
      <!-- #endif -->
        <view style="width: 90%; background-color: white" @click.stop="stopClickPop">
          <api-set-tabbar></api-set-tabbar>
        </view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup lang="uts">
  defineOptions({
    styleIsolation: 'app'
  })

  const activeIndex = inject<Ref<number>>('tabBarCurrentIndex', ref(0))

  const instance = getCurrentInstance()!.proxy!

  import { generateMenu, MenuItem } from './generateMenu.uts'
  const menuData = generateMenu('pages/API')
  import { state } from '@/store/index.uts'

  // Template refs
  const popRef = ref<UniElement | null>(null)
  const categoryRef = ref<ComponentPublicInstance[] | null>(null)

  const menu = ref(menuData as MenuItem[])
  const arrowRightIcon = ref('/static/icons/arrow-right.png')

  const hasLeftWin = computed((): boolean => {
    return !state.noMatchLeftWindow
  })

  const leftWinActive = computed((): string => {
    return state.leftWinActive.slice(1)
  })

  const windowWidth = computed((): number => {
    return uni.getWindowInfo().windowWidth
  })

  const isDarkMode = computed((): boolean => {
    return state.isDarkMode
  })

  const netless = computed((): boolean => {
    return state.netless
  })

  function showPop() {
    const popElement = popRef.value
    if (popElement != null) {
      popElement.style.setProperty("display", "flex")
    }
  }

  function goPage(url : string) {
    if (url == '/set-tab-bar') {
      showPop()
    }else {
      if (hasLeftWin.value) {
        uni.reLaunch({ url })
      } else {
        uni.navigateTo({ url })
      }
    }
  }

  function hidePop() {
    const popElement = popRef.value
    if (popElement != null) {
      popElement.style.setProperty("display", "none")
    }
  }

  function stopClickPop(e : PointerEvent) {
    e.stopPropagation() //点击到pop的非灰色区域，拦截点击事件
  }

  function stopPropagation() {

  }

  // #ifdef APP-HARMONY
  watch(netless, (netlessValue) => {
    if (netlessValue) {
      menu.value = menu.value.filter(item => {
        return !['unicloud'].includes(item.id)
      })
    }
  }, { immediate: true })
  // #endif

  // #ifdef WEB
  // Note: This watch is for web platform routing, keeping minimal getInstance usage for $route and $nextTick
  watch(() => (instance as any).$route, (newRoute: any) => {
    if (newRoute.matched.length) {
      const activeCategoryIndex = menu.value.findIndex(menuItem => menuItem?.items.some(item => leftWinActive.value !== "" && leftWinActive.value === item?.path))
      if (activeCategoryIndex > -1) {
        nextTick(() => {
          const categoryRefs = categoryRef.value
          if (categoryRefs != null && categoryRefs[activeCategoryIndex] != null) {
            categoryRefs[activeCategoryIndex].$callMethod('openCollapse', true)
          }
        })
      }
    }
  }, { immediate: true })
  // #endif

  // #ifdef APP-ANDROID
  const testOpenDialogPage = () => {
    uni.openDialogPage({
      url: '/pages/API/dialog-page/dialog-5'
    });
  }

  const testCloseDialogPage = () => {
    uni.closeDialogPage();
  }

  defineExpose({
    testOpenDialogPage,
    testCloseDialogPage
  })
  // #endif
</script>

<style>

  .pl{
    padding-left: 18px
  }

  .popup {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    display: none;
    background-color: rgba(16, 16, 16, 0.5);
  }
</style>