classroom-instruments/src/views/prepare-lessons/components/resource-main/components/resource-item/index.tsx

import { PropType, defineComponent, onMounted, reactive, watch } from 'vue';
import ResourceSearchGroup from './resource-search-group';
import { NScrollbar, NSpin, useDialog, useMessage } from 'naive-ui';
import styles from './index.module.less';
import CardType from '/src/components/card-type';
import { materialQueryPage } from '/src/views/natural-resources/api';
import TheEmpty from '/src/components/TheEmpty';
import { usePrepareStore } from '/src/store/modules/prepareLessons';
import { useThrottleFn } from '@vueuse/core';
import { saveCourseware } from '/src/views/prepare-lessons/api';

const formatType = (type: string) => {
  if (type === 'shareResources') {
    return 2;
  } else if (type === 'myResources') {
    return 3;
  } else if (type === 'myCollect') {
    return 4;
  }
};
export default defineComponent({
  name: 'share-resources',
  props: {
    type: {
      type: String as PropType<'shareResources' | 'myResources' | 'myCollect'>,
      default: 'shareResources'
    }
  },
  setup(props) {
    const prepareStore = usePrepareStore();
    const message = useMessage();
    const dialog = useDialog();
    const state = reactive({
      loading: false,
      finshed: false, // 是否加载完
      pagination: {
        page: 1,
        rows: 20
      },
      searchGroup: {
        type: props.type === 'shareResources' ? 'MUSIC' : '', //
        keyword: '',
        bookVersionId: null,
        subjectId: null,
        sourceType: formatType(props.type),
        enableFlag: true
      },
      tableList: [] as any
    });
    const getList = async () => {
      try {
        if (!prepareStore.getSubjectId) return;
        if (state.pagination.page === 1) {
          state.loading = true;
        }
        const { data } = await materialQueryPage({
          ...state.searchGroup,
          ...state.pagination,
          subjectId: prepareStore.getSubjectId
        });
        state.loading = false;
        const tempRows = data.rows || [];
        const temp: any = [];
        tempRows.forEach((row: any) => {
          const index = prepareStore.getCoursewareList.findIndex(
            (course: any) => course.materialId === row.id
          );
          temp.push({
            id: row.id,
            coverImg: row.coverImg,
            type: row.type,
            title: row.name,
            isCollect: !!row.favoriteFlag,
            isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
            content: row.content,
            exist: index !== -1 ? true : false // 是否存在
          });
        });
        state.tableList.push(...temp);
        state.finshed = data.pages <= data.current ? true : false;
      } catch {
        state.loading = false;
      }
    };

    const onSearch = async (item: any) => {
      state.pagination.page = 1;
      state.tableList = [];
      state.searchGroup = Object.assign(state.searchGroup, item);
      getList();
    };

    // 声部变化时
    watch(
      () => prepareStore.getSubjectId,
      () => {
        onSearch(state.searchGroup);
      }
    );
    watch(
      () => prepareStore.coursewareList,
      () => {
        state.tableList.forEach((item: any) => {
          const index = prepareStore.getCoursewareList.findIndex(
            (course: any) => course.materialId === item.id
          );
          item.exist = index !== -1 ? true : false; // 是否存在
        });
      },
      {
        deep: true,
        immediate: true
      }
    );

    const throttledFn = useThrottleFn(() => {
      state.pagination.page = state.pagination.page + 1;
      getList();
    }, 500);

    // 添加资源
    const onAdd = async (item: any) => {
      dialog.warning({
        title: '提示',
        content: `是否添加"${item.title}"资源？`,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
          try {
            console.log(item, 'any');
            const temp: any = [];
            prepareStore.getCoursewareList.forEach((item: any) => {
              temp.push({
                materialName: item.title,
                materialType: item.type,
                materialId: item.materialId,
                id: item.id
              });
            });

            // 保存课件
            await saveCourseware({
              coursewareDetailKnowledgeId: prepareStore.getSelectKey,
              lessonCoursewareId: prepareStore.getLessonCoursewareId,
              lessonCoursewareDetailId:
                prepareStore.getLessonCoursewareDetailId,
              materialList: [
                ...temp,
                {
                  materialName: item.title,
                  materialType: item.type,
                  materialId: item.id
                }
              ]
            });

            message.success('添加成功');
            prepareStore.setIsAddResource(true);
          } catch {
            //
          }
        }
      });
    };

    onMounted(() => {
      getList();
    });
    return () => (
      <div>
        <ResourceSearchGroup
          type={props.type}
          onSearch={(item: any) => onSearch(item)}
        />
        <NScrollbar
          class={[
            styles.listContainer,
            state.searchGroup.type !== 'MUSIC' ? styles.listNoMusic : ''
          ]}
          onScroll={(e: any) => {
            const clientHeight = e.target?.clientHeight;
            const scrollTop = e.target?.scrollTop;
            const scrollHeight = e.target?.scrollHeight;
            // 是否到底，是否加载完
            if (
              clientHeight + scrollTop + 20 >= scrollHeight &&
              !state.finshed &&
              !state.loading
            ) {
              throttledFn();
            }
          }}>
          <NSpin show={state.loading} size={'small'}>
            <div
              class={[
                styles.listSection,
                !state.loading && state.tableList.length <= 0
                  ? styles.emptySection
                  : ''
              ]}>
              {state.tableList.length > 0 && (
                <div class={styles.list}>
                  {state.tableList.map((item: any) => (
                    <CardType
                      isShowAdd
                      item={item}
                      onAdd={(item: any) => onAdd(item)}
                    />
                  ))}
                </div>
              )}
              {!state.loading && state.tableList.length <= 0 && <TheEmpty />}
            </div>
          </NSpin>
        </NScrollbar>
      </div>
    );
  }
});