import { defineComponent } from 'vue';
import styles from './index.module.less';
import { NTabPane, NTabs } from 'naive-ui';
import Courseware from './courseware';
import Train from './train';
import { usePrepareStore } from '/src/store/modules/prepareLessons';

export default defineComponent({
  name: 'lesson-main',
  setup() {
    const prepareStore = usePrepareStore();

    return () => (
      <div class={styles['lesson-main']}>
        <NTabs
          defaultValue="courseware"
          paneClass={styles.paneTitle}
          justifyContent="center"
          paneWrapperClass={styles.paneWrapperContainer}
          value={prepareStore.getTabType}
          onUpdate:value={(val: string) => {
            prepareStore.setTabType(val);

            // 重置编辑状态
            prepareStore.setIsEditResource(false);
            prepareStore.setIsEditTrain(false);
          }}>
          <NTabPane name="courseware" tab="课件" displayDirective="show">
            <Courseware />
          </NTabPane>
          <NTabPane
            name="train"
            tab="作业"
            displayDirective="if"
            v-slots={{ tab: () => <span id="lessons-4">作业</span> }}
            {...{ id: 'lessons-4' }}>
            <Train />
          </NTabPane>
        </NTabs>
      </div>
    );
  }
});