import { NTabPane, NTabs } from 'naive-ui'
import { defineComponent, h, reactive, resolveDynamicComponent } from 'vue'
import { useRoute } from 'vue-router'
import { getTabsCache, setTabsCaches } from '@/hooks/use-async'
import Mec from "@views/music-library/project-music-sheet/module/mec/mec";
import Jmedu from "@views/music-library/project-music-sheet/module/jmedu/jmedu";
import CooleshowEdu from "@views/music-library/project-music-sheet/module/cooleshow-edu/cooleshow-edu";
export default defineComponent({
  name: 'project-music-sheet',
  setup() {
    const state = reactive({
      tabName: 'mec' as 'mec' | 'jmedu' | 'cooleshow' | 'cooleshow-edu',
      searchId: null
    })
    const route = useRoute()
    const setTabs = (val: any) => {
      setTabsCaches(val, 'tabName', route)
    }
    return () => {
      return (
        <div class="system-menu-container">
          <h2>项目曲目管理</h2>

          <div class={['section-container']} style="padding-top: 0">
            <NTabs
              type="line"
              size="large"
              v-model:value={state.tabName}
              onUpdate:value={(val: any) => setTabs(val)}
            >
              <NTabPane name="mec" tab="管乐迷"
                  //v-auth="musicSheet/page1602301588206350338"
              >
                <Mec></Mec>
              </NTabPane>
              {/* <NTabPane name="TagList" tab="曲目标签管理" v-auth="musicTag/page1602301689389740033">
                <TagList />
              </NTabPane> */}
              <NTabPane
                name="jmedu"
                tab="管乐团"
              >
                <Jmedu></Jmedu>
              </NTabPane>
              <NTabPane
                  name="cooleshow"
                  tab="酷乐秀"
              >
                <Jmedu></Jmedu>
              </NTabPane>
              <NTabPane
                  name="cooleshow-edu"
                  tab="音乐数字课堂"
              >
                <CooleshowEdu></CooleshowEdu>
              </NTabPane>
            </NTabs>
          </div>
        </div>
      )
    }
  }
})
