import {NTabPane, NTabs} from 'naive-ui'
import {defineComponent, reactive} from 'vue'
import MusicList from './component/music-list'
import {useRoute} from 'vue-router'
import {getTabsCache, setTabsCaches} from '@/hooks/use-async'
import MusicSheetCategoriesList from "@views/music-library/music-sheet/component/music-sheet-categories-list";

export default defineComponent({
  name: 'music-sheet',
  setup() {
    const state = reactive({
      tabName: 'MusicList' as 'MusicList' | 'TagList' | 'CategroryList',
      searchId: null,
      musicCategoryId: null,
    })
    const route = useRoute()
    getTabsCache((val: any) => {
      if (val.form.tabName) {
        state.tabName = val.form.tabName
      }
    })
    const setTabName = (val: any) => {
      console.log('setTabName', val)
      state.tabName = val.tabName
      state.searchId = val.id
    }
    const setTabs = (val: any) => {
      setTabsCaches(val, 'tabName', route)
    }
    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)}
              >
                <NTabPane name="MusicList" tab="曲目列表"
                    //v-auth="musicSheet/page1602301588206350338"
                >
                  <MusicList searchId={state.searchId} musicCategoryId ={state.musicCategoryId}/>
                </NTabPane>
                <NTabPane
                    name="CategroryList"
                    tab="曲目分类管理"
                    //v-auth="/musicCategrory1607664813521346561"
                >
                  <MusicSheetCategoriesList
                      onSetTabName={setTabName}
                      onJump={(param: any) => {
                        state.tabName = param.tabName
                        state.musicCategoryId = param.musicCategoryId
                      }}
                  />
                  {/*<TagList />*/}
                </NTabPane>
              </NTabs>
            </div>
          </div>
      )
    }
  }
})