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';
import CoursewareHead from './courseware-head';
import { NButton, NSpace } from 'naive-ui';

export default defineComponent({
  name: 'lesson-main',
  setup() {
    const prepareStore = usePrepareStore();
    const state = reactive({
      editCoursewareShow: false, // 是否编辑课件
      coursewareType: 'create' as 'create' | 'edit',
      addParam: {
        isAdd: false, // 是否添加
        id: null,
        addName: '' // 添加的名称
      },
      editCourseware: {} as any, //
      // editWorkShow: false, // 是否编辑预设
      editWork: {} as any // 预设模板编号
    });
    const coursewareHeadRef = ref();

    // 取消
    const onCancelCourseware = () => {
      eventGlobal.emit('coursewareClosed', coursewareHeadRef.value?.getForms());
    };

    const onSaveCourseware = () => {
      // console.log(
      //   coursewareHeadRef.value,
      //   coursewareHeadRef.value?.getForms(),
      //   '12'
      // );
      eventGlobal.emit('coursewareSave', coursewareHeadRef.value?.getForms());
    };

    return () => (
      <div
        class={[state.editCoursewareShow && styles.coursewareSection]}
        style={{ height: '100%' }}>
        {/* 编辑作业头部标题 */}
        {state.editCoursewareShow && (
          <div class={styles.coursewareHeader}>
            <CoursewareHead ref={coursewareHeadRef} />
          </div>
        )}

        <div class={styles['lesson-main']}>
          {state.editCoursewareShow ? (
            <Courseware
              groupItem={state.editCourseware}
              onChange={(val: any) => {
                if (val.addParam) {
                  state.addParam = val.addParam;
                }
                state.editCoursewareShow = val.status;
                prepareStore.setIsEditResource(val.status);
                if (!val.status) {
                  eventGlobal.emit('teacher-slideshow', false);
                }
              }}
            />
          ) : (
            <CoursewarePresets
              addParam={state.addParam}
              onChange={(val: any) => {
                state.coursewareType = val.type;
                state.editCoursewareShow = val.status;
                prepareStore.setIsEditResource(val.status);
                state.editCourseware = val.groupItem;
                state.addParam = {
                  isAdd: false, // 是否添加
                  id: null,
                  addName: '' // 添加的名称
                };
              }}
            />
          )}
        </div>

        {/* 编辑作业底部操作 */}
        {state.editCoursewareShow && (
          <div class={styles.coursewareFooter}>
            <NSpace>
              <NButton
                bordered={false}
                type="error"
                onClick={onCancelCourseware}>
                取消
              </NButton>
              <NButton type="primary" onClick={onSaveCourseware}>
                保存课件
              </NButton>
            </NSpace>
          </div>
        )}
      </div>
    );
  }
});