import { NPageHeader, NSpin, NSteps, NTabPane, NTabs } from 'naive-ui'
import { defineComponent, onMounted, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { lessonCoursewareDetail } from '../api'
import CourseConfiguration from './components/courseConfiguration'
import CreateCourseware from './components/createCourseware'
import styles from './index.module.less'
import { useTabsViewStore } from '@/store/modules/tabsView'
export default defineComponent({
  name: 'courseware-detail',
  setup(props, ctx) {
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      loading: true,
      current: 1,
      course: null as any
    })
    const updateCurrent = (val: any) => {
      state.current = val
    }
    const tabsViewStore = useTabsViewStore()
    const gotoBack = () => {
      tabsViewStore.closeCurrentTab(route)
      router.push({
        path: '/coursewareManage'
      })
    }

    const getDetail = async () => {
      if (!route.query.id) {
        state.loading = false
        return
      }
      updateCurrent(2)
      state.loading = true
      try {
        const { data } = await lessonCoursewareDetail(route.query.id)
        state.course = data
      } catch (error) {}
      state.loading = false
    }
    onMounted(() => {
      getDetail()
    })
    return () => (
      <div class="system-menu-container">
        <NPageHeader
          on-back={() => gotoBack()}
          title={state.course ? state.course.name : '新建课件'}
        ></NPageHeader>
        <div class={['section-container']}>
          <div>
            <NSteps current={state.current} onUpdateCurrent={updateCurrent}>
              <n-step title="基础信息" description="基础信息设置" />
              <n-step
                title="课程配置"
                description="课件及训练、测验配置"
                disabled={route.query.id ? false : true}
              />
            </NSteps>
            <NSpin v-model:show={state.loading}>
              <NTabs class={styles.createWrap} type="line" v-model:value={state.current}>
                <NTabPane name={1}>
                  {!state.loading && (
                    <CreateCourseware
                      course={state.course as any}
                      onNext={() => {
                        getDetail()
                        updateCurrent(2)
                      }}
                    />
                  )}
                </NTabPane>
                <NTabPane name={2}>
                  {!state.loading && <CourseConfiguration course={state.course as any} />}
                </NTabPane>
              </NTabs>
            </NSpin>
          </div>
        </div>
      </div>
    )
  }
})
