import {NTabPane, NTabs} from 'naive-ui'
import {defineComponent, reactive} from 'vue'
import {useRoute} from 'vue-router'
import {getTabsCache, setTabsCaches} from '@/hooks/use-async'
import SubjectList from "@views/system-manage/subject-manage/subject/subject-list";
import CategorizeList from "@views/system-manage/subject-manage/subject-categorize/categorize-list";

export default defineComponent({
  name: 'subject-manage',
  setup() {
    const state = reactive({
      tabName: 'Subject' as 'Subject' | 'Categorize'
    })
    const route = useRoute()
    getTabsCache((val: any) => {
      if (val.form.tabName) {
        state.tabName = val.form.tabName
      }
    })
    const setTabs = (val: any) => {
      setTabsCaches(val, 'tabName', route)
    }
    return () => {
      // const Component = resolveDynamicComponent(state.componentName)
      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="Subject"
                    tab="声部列表"
                    //v-auth="sysUserLoginLog/page1597883965544714242"
                >
                  <SubjectList />
                </NTabPane>
                <NTabPane
                    name="Categorize"
                    tab="声部分类"
                    //v-auth="sysUserLogin/page1597884090153291778"
                >
                  <CategorizeList />
                </NTabPane>
              </NTabs>
            </div>
          </div>
      )
    }
  }
})
