import { defineComponent, nextTick, reactive, ref, watch } from 'vue';
import styles from './index.module.less';
import { NTabPane, NTabs } from 'naive-ui';
import Courseware from './courseware/addCourseware';
import Train from './train';
import { usePrepareStore } from '/src/store/modules/prepareLessons';
import TrainPresets from './train-presets';
import { eventGlobal } from '/src/utils';
import CoursewarePresets from './courseware-presets';

export default defineComponent({
  name: 'lesson-main',
  setup() {
    const prepareStore = usePrepareStore();
    const state = reactive({
      editCoursewareShow: false, // 是否编辑课件
      coursewareType: 'create' as 'create' | 'edit',
      editCourseware: {} as any, //
      editWorkShow: false, // 是否编辑预设
      editWork: {} as any // 预设模板编号
    });
    const lessonMainRef = ref();

    // watch(
    //   () => [state.editWorkShow, state.editCoursewareShow],
    //   () => {
    //     nextTick(() => {
    //       lessonMainRef.value?.syncBarPosition();
    //     });
    //   }
    // );

    return () => (
      <div class={styles['lesson-main']}>
        <NTabs
          ref={lessonMainRef}
          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);

            eventGlobal.emit('teacher-slideshow', false);
            if (val !== 'train') {
              state.editWorkShow = false;
            }
          }}>
          {!state.editWorkShow && (
            <NTabPane
              name="courseware"
              tab={
                state.editCoursewareShow
                  ? state.coursewareType === 'create'
                    ? '创建课件'
                    : '编辑课件'
                  : '课件'
              }
              displayDirective="if">
              {state.editCoursewareShow ? (
                <Courseware
                  groupItem={state.editCourseware}
                  onChange={(val: any) => {
                    state.editCoursewareShow = val.status;
                    prepareStore.setIsEditResource(val.status);
                    if (!val.status) {
                      eventGlobal.emit('teacher-slideshow', false);
                    }
                  }}
                />
              ) : (
                <CoursewarePresets
                  onChange={(val: any) => {
                    state.coursewareType = val.type;
                    state.editCoursewareShow = val.status;
                    prepareStore.setIsEditResource(val.status);
                    state.editCourseware = val.groupItem;
                  }}
                />
              )}
            </NTabPane>
          )}

          {!state.editCoursewareShow && (
            <NTabPane
              name="train"
              // tab="作业"
              tab={state.editWorkShow ? '编辑作业' : '作业'}
              displayDirective="if"
              // v-slots={{
              //   tab: () =>
              //     state.editWorkShow ? (
              //       <span id="lessons-4">编辑作业</span>
              //     ) : (
              //       <span id="lessons-4">作业</span>
              //     )
              // }}
              // {...{ id: 'lessons-4' }}
            >
              <div>
                {state.editWorkShow ? (
                  <Train
                    lessonPreTraining={state.editWork}
                    onChange={(val: any) => {
                      state.editWorkShow = val.status;

                      if (!val.status) {
                        eventGlobal.emit('teacher-slideshow', false);
                      }
                    }}
                  />
                ) : (
                  <TrainPresets
                    onChange={(val: any) => {
                      state.editWorkShow = val.status;
                      state.editWork = {
                        ...val.lessonPreTraining,
                        title:
                          val.lessonPreTraining?.title ||
                          prepareStore.getSelectName + '课后作业'
                      };
                    }}
                  />
                )}
              </div>
            </NTabPane>
          )}
        </NTabs>
      </div>
    );
  }
});