import { NTabPane, NTabs } from 'naive-ui'
import { defineComponent, h, reactive, resolveDynamicComponent } from 'vue'
import LoginLog from './component/login-log'
import LoginStatistics from './component/login-statistics'
import LoginDevice from './component/login-device'
import { useRoute } from 'vue-router'
import { getTabsCache, setTabsCaches } from '@/hooks/use-async'
export default defineComponent({
  name: 'city-manage',
  setup() {
    const state = reactive({
      tabName: 'LoginLog' as 'LoginLog' | 'LoginStatistics' | 'LoginDevice'
    })
    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="LoginLog"
                tab="登录日志"
                //v-auth="sysUserLoginLog/page1597883965544714242"
              >
                <LoginLog />
              </NTabPane>
              <NTabPane
                name="LoginStatistics"
                tab="登录统计"
                //v-auth="sysUserLogin/page1597884090153291778"
              >
                <LoginStatistics />
              </NTabPane>
              <NTabPane
                name="LoginDevice"
                tab="登录设备"
                //v-auth="sysUserDevice/page1597884219157499905"
              >
                <LoginDevice />
              </NTabPane>
            </NTabs>
          </div>
        </div>
      )
    }
  }
})
