import { NTabPane, NTabs } from 'naive-ui'
import { defineComponent, h, nextTick, onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getTabsCache, setTabsCaches } from '@/hooks/use-async'
import { appKey } from '@/utils/constant'
import { sysApplicationPage } from '@views/menu-manage/api'
import MusicSheetKt from '@views/music-library/project-music-sheet/module/kt/music-sheet-kt'
import MusicSheetGym from '@views/music-library/project-music-sheet/module/gym/music-sheet-gym'
import MusicSheetGyt from '@views/music-library/project-music-sheet/module/gyt/music-sheet-gyt'
import MusicSheetKlx from '@views/music-library/project-music-sheet/module/klx/music-sheet-klx'
import { disAuthCheckStatus } from '@/utils/directive/authDirective'

export default defineComponent({
  name: 'project-music-sheet',
  setup() {
    const state = reactive({
      tabName: 'KT' as 'KT' | 'GYT' | 'KLX' | 'GYM',
      appKeyList: [] as any,
      appNameList: [] as any
    })
    const tabsInstRef = ref()
    getTabsCache((val: any) => {
      if (val.form.tabName) {
        state.tabName = val.form.tabName
        nextTick(() => tabsInstRef.value?.syncBarPosition())
      }
    })
    const route = useRoute()
    const setTabs = (val: any) => {
      setTabsCaches(val, 'tabName', route)
    }

    onMounted(async () => {
      // 获取应用APP信息
      const appKeys = Object.keys(appKey)
      const { data } = await sysApplicationPage({ page: 1, rows: 99, parentId: 0 })
      const tempList = data.rows || []
      tempList.forEach((next: any) => {
        if (appKeys.includes(next.appKey)) {
          state.appKeyList.push(next.appKey)
          state.appNameList.push(next.appName)
        }
      })

      if (disAuthCheckStatus('musicSheet/pageByApplication1751225218734489601')) {
        state.tabName = 'KLX'
      } else if (disAuthCheckStatus('musicSheet/pageByApplication1751225314930851842')) {
        state.tabName = 'GYM'
      } else if (disAuthCheckStatus('musicSheet/pageByApplication1751225386909302786')) {
        state.tabName = 'KT'
      } else if (disAuthCheckStatus('musicSheet/pageByApplication1751225483038556162')) {
        state.tabName = 'GYT'
      }

      nextTick(() => tabsInstRef.value?.syncBarPosition())
    })

    return () => {
      return (
        <div class="system-menu-container">
          <div class={['section-container']} style="padding-top: 0">
            <NTabs
              ref={tabsInstRef}
              type="line"
              size="large"
              v-model:value={state.tabName}
              onUpdate:value={(val: any) => setTabs(val)}
            >
              {disAuthCheckStatus('musicSheet/pageByApplication1751225218734489601') && (
                <NTabPane name={'KLX'} tab={'酷乐秀'}>
                  <MusicSheetKlx appKey={'KLX'} />
                </NTabPane>
              )}

              {disAuthCheckStatus('musicSheet/pageByApplication1751225314930851842') && (
                <NTabPane name={'GYM'} tab={'管乐迷'}>
                  <MusicSheetGym appKey={'GYM'} />
                </NTabPane>
              )}

              {disAuthCheckStatus('musicSheet/pageByApplication1751225386909302786') && (
                <NTabPane name={'KT'} tab={'音乐数字课堂'}>
                  <MusicSheetKt appKey={'KT'} />
                </NTabPane>
              )}

              {disAuthCheckStatus('musicSheet/pageByApplication1751225483038556162') && (
                <NTabPane name={'GYT'} tab={'管乐团'}>
                  <MusicSheetGyt appKey={'GYT'} />
                </NTabPane>
              )}

              {/*{state.appKeyList.map((app: any, index: number) => (*/}
              {/*  <NTabPane name={app} tab={state.appNameList[index]}>*/}
              {/*    {app === 'KT' && (*/}
              {/*      <MusicSheetKt*/}
              {/*        v-auth="musicSheet/pageByApplication1751225386909302786"*/}
              {/*        appKey={app}*/}
              {/*      />*/}
              {/*    )}*/}
              {/*    {app === 'GYM' && (*/}
              {/*      <MusicSheetGym*/}
              {/*        v-auth="musicSheet/pageByApplication1751225314930851842"*/}
              {/*        appKey={app}*/}
              {/*      />*/}
              {/*    )}*/}
              {/*    {app === 'KLX' && (*/}
              {/*      <MusicSheetKlx*/}
              {/*        v-auth="musicSheet/pageByApplication1751225218734489601"*/}
              {/*        appKey={app}*/}
              {/*      />*/}
              {/*    )}*/}
              {/*    {app === 'GYT' && (*/}
              {/*      <MusicSheetGyt*/}
              {/*        v-auth="musicSheet/pageByApplication1751225483038556162"*/}
              {/*        appKey={app}*/}
              {/*      />*/}
              {/*    )}*/}
              {/*  </NTabPane>*/}
              {/*))}*/}
            </NTabs>
          </div>
        </div>
      )
    }
  }
})
