import { NTab, NTabPane, NTabs } from 'naive-ui'
import { defineComponent, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import ExaminationSiteManagement from './examination-site-management'
import styles from './index.module.less'
import QuestionBank from './question-bank'
import { getTabsCache, setTabsCaches } from '@/hooks/use-async'
import UnitTestIndex from './unit-test-index'

/**过滤多级数组字段长度为0,导致分类组件空白的问题
 * @param list 需要过滤的数组
 * @param key 嵌套的数组字段名
 * @returns list 过滤后的list
 */
export const filterPointCategory = (list: any[], key: any): any[] => {
  if (!Array.isArray(list)) return list
  for (let i = 0; i < list.length; i++) {
    if (!list[i][key]) {
      continue
    }
    if (Array.isArray(list[i]?.[key]) && !list[i][key].length) {
      list[i][key] = ''
    } else {
      list[i][key] = filterPointCategory(list[i][key], key)
    }
  }
  return list
}
export default defineComponent({
  name: 'unit-test',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const query = route.query
    const data = reactive({
      active: query.active || '1'
    })
    getTabsCache((val: any) => {
      if (val.form.active) {
        data.active = val.form.active
      }
    })
    const setTabs = (val: any) => {
      setTabsCaches(val, 'active', route)
    }
    return () => (
      <div class="system-menu-container">
        <div class="section-container">
          <div class={styles.unitTest}>
            <NTabs
              v-model:value={data.active}
              type="card"
              onUpdate:value={(val: any) => setTabs(val)}
            >
              <NTabPane name="1" tab="阶段自测" v-auth="unitExamination/page1614564155343577090">
                <UnitTestIndex />
              </NTabPane>
              <NTabPane
                name="2"
                tab="测验题库"
                v-auth="examinationQuestion/page1750912451611721729"
              >
                <QuestionBank />
              </NTabPane>
              <NTabPane
                name="3"
                tab="考点管理"
                v-auth="examinationKnowledgePointCategory/page1750912814834253826"
              >
                <ExaminationSiteManagement />
              </NTabPane>
            </NTabs>
          </div>
        </div>
      </div>
    )
  }
})
