import { defineComponent, onMounted, reactive } from 'vue';
import styles from './index.module.less';
import {
  NButton,
  NImage,
  NInput,
  NModal,
  NScrollbar,
  NSelect,
  NSpace,
  useDialog,
  useMessage
} from 'naive-ui';
import AddTeaching, {
  BOOK_DATA
} from '/src/views/natural-resources/model/add-teaching';
import { lessonCoursewarePage, lessonCoursewareRemove } from '../../../api';
import iconUploadBg from '../images/icon-upload-bg.svg';

export default defineComponent({
  name: 'select-lessonware',
  emits: ['close', 'confirm'],
  setup(props, { emit }) {
    const dialog = useDialog();
    const message = useMessage();
    const forms = reactive({
      currentGradeNum: null,
      bookType: null,
      list: [] as any[],
      teachingStatus: false,
      selectItem: {} as any
    });

    const getLessonCourseware = async () => {
      try {
        const { data } = await lessonCoursewarePage({
          page: 1,
          rows: 99,
          type: 'COURSEWARE',
          enableFlag: 1
        });

        console.log(data.rows, 'data');
        forms.list = data.rows;
      } catch {
        //
      }
    };

    // 删除教材
    const onDelete = async (item: any) => {
      dialog.warning({
        title: '提示',
        content: '是否删除该教材?',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
          try {
            await lessonCoursewareRemove({ id: item.id });
            message.success('删除成功');
          } catch {
            //
          }
        }
      });
    };

    const onDetail = (item: any) => {
      emit('confirm', item);
      emit('close');
    };

    onMounted(() => {
      getLessonCourseware();
    });
    return () => (
      <div class={styles.selectLessonware}>
        <div class={styles.attendClassSearch}>
          <NInput placeholder="请输入班级名称" clearable>
            {{
              prefix: () => <span class="icon-search-input"></span>
            }}
          </NInput>
          <NSelect
            placeholder="版本"
            clearable
            options={[
              {
                label: '一年级',
                value: '1'
              },
              {
                label: '二年级',
                value: '2'
              }
            ]}
          />
          <NSelect
            placeholder="请选择年级"
            options={BOOK_DATA.grades}
            v-model:value={forms.currentGradeNum}
            clearable
            filterable
          />
          <NSelect
            placeholder="请选择册别"
            options={BOOK_DATA.bookTypes}
            v-model:value={forms.bookType}
            clearable
          />
        </div>
        <NScrollbar class={styles.classList}>
          <div class={styles.content}>
            <NSpace size={[50, 40]}>
              <div
                class={styles.item}
                key={`item--1`}
                onClick={() => {
                  forms.selectItem = {};
                  forms.teachingStatus = true;
                }}>
                <div class={styles.cover}>
                  <div class={styles.itemImg}>
                    <div class={styles.itemBg}></div>
                    <NImage
                      objectFit="cover"
                      src={iconUploadBg}
                      lazy
                      previewDisabled={true}
                      onLoad={e => {
                        (e.target as any).dataset.loaded = 'true';
                      }}
                    />
                  </div>
                </div>
              </div>
              {forms.list.map((item: any, index: number) => {
                return (
                  <div
                    class={styles.item}
                    key={`item-${index}`}
                    onClick={() => onDetail(item)}>
                    <div class={styles.cover}>
                      <div class={styles.itemImg}>
                        <div class={styles.itemBg}></div>
                        <NImage
                          objectFit="cover"
                          src={item.coverImg}
                          lazy
                          previewDisabled={true}
                          onLoad={e => {
                            (e.target as any).dataset.loaded = 'true';
                          }}
                        />
                        {item.customFlag && (
                          <>
                            <div class={styles.iconCustom}></div>
                            <div class={styles.editContainer}>
                              <div class={styles.editBtnGroup}>
                                <NButton
                                  size="small"
                                  class={styles.delBtn}
                                  color="#EA4132"
                                  onClick={(e: MouseEvent) => {
                                    e.stopPropagation();
                                    onDelete(item);
                                  }}>
                                  删除
                                </NButton>
                                <NButton
                                  size="small"
                                  class={styles.editBtn}
                                  color="#FFFFFF"
                                  onClick={(e: MouseEvent) => {
                                    e.stopPropagation();
                                    forms.selectItem = item;
                                    forms.teachingStatus = true;
                                  }}>
                                  编辑
                                </NButton>
                              </div>
                            </div>
                          </>
                        )}
                      </div>
                    </div>
                    <div class={styles.itemName}>{item.name}</div>
                  </div>
                );
              })}
            </NSpace>
          </div>
        </NScrollbar>

        {/* 添加自定义教材 */}
        <NModal
          v-model:show={forms.teachingStatus}
          preset="card"
          showIcon={false}
          class={['modalTitle background', styles.teachingModal]}
          title={'自定义教材'}
          blockScroll={false}>
          <AddTeaching
            item={forms.selectItem}
            onClose={() => (forms.teachingStatus = false)}
            onConfirm={() => {
              getLessonCourseware();
              forms.selectItem = {};
            }}
          />
        </NModal>
      </div>
    );
  }
});