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: 'city-manage',
  setup() {
    const state = reactive({
      tabName: 'MusicList' as 'MusicList' | 'TagList' | 'CategroryList',
      searchId: 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">
          <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="MusicList" tab="曲目管理"
                  //v-auth="musicSheet/page1602301588206350338"
              >
                <MusicList searchId={state.searchId} />
              </NTabPane>
              {/* <NTabPane name="TagList" tab="曲目标签管理" v-auth="musicTag/page1602301689389740033">
                <TagList />
              </NTabPane> */}
              <NTabPane
                name="CategroryList"
                tab="曲目分类管理"
                //v-auth="/musicCategrory1607664813521346561"
              >
                <MusicSheetCategoriesList onSetTabName={setTabName} />
              </NTabPane>
            </NTabs>
          </div>
        </div>
      )
    }
  }
})
