import { defineComponent, reactive } from 'vue';
import styles from './index.module.less';
import {
  NButton,
  NImage,
  NInput,
  NModal,
  NScrollbar,
  NSpace,
  NSpin
} from 'naive-ui';
import add from '@/views/studentList/images/add.png';
import WorkSection from '../../../model/work-section';
import { eventGlobal } from '/src/utils';

export default defineComponent({
  name: 'train-presets',
  emits: ['change'],
  setup(props, { emit }) {
    const forms = reactive({
      editTitleVisiable: false,
      removeVisiable1: false
    });
    return () => (
      <div class={styles.trainPresets}>
        <div class={styles.btnGroup}>
          <NSpace>
            <NButton
              type="primary"
              class={styles.addPreset}
              onClick={() => {
                // 设置右侧栏状态
                eventGlobal.emit('teacher-slideshow', true);
                emit('change', { status: true });
              }}
              v-slots={{
                icon: () => (
                  <>
                    <NImage
                      class={styles.addBtnIcon}
                      previewDisabled
                      src={add}></NImage>
                  </>
                )
              }}>
              添加作业预设
            </NButton>
          </NSpace>
        </div>

        <NScrollbar
          class={[
            styles.listContainer
            // forms.drag ? styles.listContainerDrag : ''
          ]}>
          {/* <NSpin></NSpin> */}
          <div class={[styles.list]}>
            <WorkSection
              onEditTitle={() => {
                forms.editTitleVisiable = true;
              }}
              onEdit={() => {
                // 设置右侧栏状态
                eventGlobal.emit('teacher-slideshow', true);
                emit('change', { status: true });
              }}
              onConfirm={() => {
                //
              }}
              onDelete={() => (forms.removeVisiable1 = true)}
            />
          </div>
        </NScrollbar>

        <NModal
          v-model:show={forms.removeVisiable1}
          preset="card"
          class={['modalTitle', styles.removeVisiable1]}
          title={'删除作业'}>
          <div class={styles.studentRemove}>
            <p>请确认是否删除【2024年01月17日-课后作业】，删除后不可恢复</p>

            <NSpace class={styles.btnGroupModal} justify="center">
              <NButton round onClick={() => (forms.removeVisiable1 = false)}>
                取消
              </NButton>
              <NButton
                round
                type="primary"
                onClick={() => {
                  // forms.trainList.forEach((item: any) => {
                  //   forms.removeIds.push(item.id);
                  // });
                  // forms.trainList = [];
                  // forms.removeVisiable1 = false;
                }}>
                确定
              </NButton>
            </NSpace>
          </div>
        </NModal>

        <NModal
          v-model:show={forms.editTitleVisiable}
          preset="card"
          class={['modalTitle', styles.removeVisiable1]}
          title={'作业重命名'}>
          <div class={styles.studentRemove}>
            <NInput placeholder="请输入作业名称" />

            <NSpace class={styles.btnGroupModal} justify="center">
              <NButton round onClick={() => (forms.editTitleVisiable = false)}>
                取消
              </NButton>
              <NButton
                round
                type="primary"
                onClick={() => {
                  // forms.trainList.forEach((item: any) => {
                  //   forms.removeIds.push(item.id);
                  // });
                  // forms.trainList = [];
                  // forms.removeVisiable1 = false;
                }}>
                确定
              </NButton>
            </NSpace>
          </div>
        </NModal>
      </div>
    );
  }
});