import {NTabPane, NTabs} from 'naive-ui'
import {defineComponent, h, onMounted, reactive} 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";

export default defineComponent({
  name: 'project-music-sheet',
  setup() {
    const state = reactive({
      tabName: 'KT' as 'KT' | 'GYT' | 'KLX' | 'GYM',
      appKeyList: [] as any,
      appNameList: [] as any,
    })
    getTabsCache((val: any) => {
      console.log(val)
      if (val.form.tabName) {
        state.tabName = val.form.tabName
      }
    })
    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)
          }
        })
      }
    })


    return () => {
      return (
          <div class="system-menu-container">
            <div class={['section-container']} style="padding-top: 0">
              <NTabs
                  type="line"
                  size="large"
                  v-model:value={state.tabName}
                  onUpdate:value={(val: any) => setTabs(val)}
              >
                {state.appKeyList.map((app: any, index: number) => {
                  return h(
                      NTabPane,
                      {
                        name: app,
                        tab: state.appNameList[index]
                      },
                      {
                        default: () => {
                          if (app == 'KT') {
                            return h(MusicSheetKt, {'appKey': app})
                          } else if (app == 'GYM') {
                            return h(MusicSheetGym, {'appKey': app})
                          } else if (app == 'KLX') {
                            return h(MusicSheetKlx, {'appKey': app})
                          } else if (app == 'GYT') {
                            return h(MusicSheetGyt, {'appKey': app})
                          } else {
                            return h(MusicSheetKt)
                          }
                        }
                      }
                  )
                })}
              </NTabs>
            </div>
          </div>
      )
    }
  }
})
