import { NTabPane, NTabs } from 'naive-ui'
import { defineComponent, h, onMounted, reactive } from 'vue'
import { useRoute } from 'vue-router'
import { getTabsCache, setTabsCaches } from '@/hooks/use-async'
import { appKey } from '@/utils/constant'
import { sysApplicationPage } from '@views/menu-manage/api'
import ProjectSetting from '@views/system-manage/param-settings/component/project-setting'

export default defineComponent({
  name: 'param-settings',
  setup() {
    const state = reactive({
      tabName: 'KT' as 'KT' | 'GYT' | 'KLX' | 'GYM',
      appKeyList: [] as any,
      appNameList: [] as any
    })
    const route = useRoute()
    getTabsCache((val: any) => {
      if (val.form.tabName) {
        state.tabName = val.form.tabName
      }
    })
    const setTabs = (val: any) => {
      setTabsCaches(val, 'tabName', route)
    }

    onMounted(async () => {
      // 获取应用APP信息
      {
        const appKeys = Object.keys(appKey)
        const { data } = await sysApplicationPage({ page: 1, rows: 99, parentId: 0 })
        const tempList = data.rows || []
        tempList.forEach((next: any) => {
          if (appKeys.includes(next.appKey)) {
            state.appKeyList.push(next.appKey)
            state.appNameList.push(next.appName)
          }
        })
      }
    })

    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)}
            >
              {state.appKeyList.map((app: any, index: number) => {
                return h(
                  NTabPane,
                  {
                    name: app,
                    tab: state.appNameList[index]
                  },
                  {
                    default: () => {
                      return h(ProjectSetting, { appKey: app })
                    }
                  }
                )
              })}
            </NTabs>
          </div>
        </div>
      )
    }
  }
})
