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

import {
  PropType,
  defineComponent,
  onMounted,
  onUnmounted,
  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 { favorite, materialQueryPage } from '/src/views/natural-resources/api';
import TheEmpty from '/src/components/TheEmpty';
import { usePrepareStore } from '/src/store/modules/prepareLessons';
import { useDebounceFn, useThrottleFn, useThrottle } from '@vueuse/core';
import { saveCourseware } from '/src/views/prepare-lessons/api';
import CardPreview from '/src/components/card-preview';
import { eventGlobal } from '/src/utils';
import Draggable from 'vuedraggable';

const formatType = (type: string) => {
  if (type === 'shareResources') {
    return 2;
  } else if (type === 'myResources') {
    return 3;
  } else if (type === 'myCollect') {
    return 4;
  } else if (type === 'relateResources') {
    return 5;
  }
};
export default defineComponent({
  name: 'share-resources',
  props: {
    type: {
      type: String as PropType<
        'shareResources' | 'myResources' | 'myCollect' | 'relateResources'
      >,
      default: 'relateResources'
    }
  },
  setup(props, { expose }) {
    const prepareStore = usePrepareStore();
    const message = useMessage();
    const dialog = useDialog();
    const state = reactive({
      loading: false,
      finshed: false, // 是否加载完
      pagination: {
        page: 1,
        rows: 20
      },
      searchGroup: {
        type: 'MUSIC', //
        name: '',
        bookVersionId: null,
        musicalInstrumentId: null,
        subjectId: null,
        audioPlayTypes: [], // 场景
        sourceType: formatType(props.type),
        enableFlag: true
      },
      tableList: [] as any,
      show: false,
      item: {} 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,
          lessonCoursewareKnowledgeId:
            props.type === 'relateResources' || props.type === 'shareResources'
              ? prepareStore.getSelectKey
              : null,
          relateLessonCoursewareKnowledgeMaterialIds: getIds()
          // 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,
            refFlag: row.refFlag,
            isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
            containAccompaniment: row.containAccompaniment,
            content: row.content,
            instrumentIds: row.instrumentIds,
            hasNotCheck: row.hasNotCheck,
            sourceForm: 'resource-item',
            audioPlayTypeArray: row.audioPlayTypes
              ? row.audioPlayTypes.split(',')
              : []
            // exist: index !== -1 ? true : false // 是否存在
          });
        });
        if (state.pagination.page === 1) {
          state.tableList = temp;
        } else {
          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();
    };

    const throttledFnSearch = useDebounceFn(item => {
      state.pagination.page = state.pagination.page + 1;
      state.pagination.page = 1;
      state.tableList = [];
      state.searchGroup = Object.assign(state.searchGroup, item);
      getList();
    }, 300);

    // 声部变化时
    watch(
      () => prepareStore.getInstrumentId,
      () => {
        onSearch(state.searchGroup);
      }
    );

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

    // 添加资源
    const onAdd = async (item: any) => {
      try {
        eventGlobal.emit('onPrepareAddItem', {
          materialId: item.id,
          coverImg: item.coverImg,
          refFlag: item.refFlag,
          type: item.type,
          title: item.title,
          isCollect: item.isCollect,
          isSelected: item.isSelected,
          audioPlayTypeArray: item.audioPlayTypeArray,
          instrumentIds: item.instrumentIds,
          hasNotCheck: item.hasNotCheck,
          content: item.content,
          removeFlag: false
        });
      } catch {
        //
      }
    };

    // 收藏
    const onCollect = async (item: any) => {
      try {
        await favorite({
          materialId: item.id,
          favoriteFlag: item.isCollect ? 0 : 1,
          type: item.type
        });
        item.isCollect = !item.isCollect;
      } catch {
        //
      }
    };
    const getIds = () => {
      let noRepeatIds: any = [];
      if (props.type === 'relateResources') {
        const materialIds: any = [];
        prepareStore.getCoursewareList.forEach((course: any) => {
          course.list?.forEach((item: any) => {
            materialIds.push(item.materialId);
          });
        });
        noRepeatIds = Array(...new Set(materialIds));
      }
      return noRepeatIds.join(',');
    };

    const onUpdate = () => {
      state.pagination.page = 1;
      state.tableList = [];
      getList();
    };

    onMounted(() => {
      // 加载的时候判断是否有资源数据
      onUpdate();

      if (props.type === 'relateResources') {
        eventGlobal.on('onCoursewareUpdate', onUpdate);
      }
    });
    onUnmounted(() => {
      eventGlobal.off('onCoursewareUpdate', onUpdate);
    });

    const getParams = () => {
      return state.searchGroup;
    };

    expose({
      getParams
    });

    return () => (
      <div>
        <ResourceSearchGroup
          type={props.type}
          onSearch={(item: any) => {
            state.searchGroup = Object.assign(state.searchGroup, item);
            throttledFnSearch(item);
          }}
        />
        <NScrollbar
          class={[
            styles.listContainer,
            'listContainerResource',
            state.searchGroup.type !== 'MUSIC' ||
            ['myResources', 'myCollect', 'relateResources'].includes(props.type)
              ? [styles.listNoMusic, 'listNoMusicResource']
              : ''
          ]}
          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,
                'listSectionResource',
                !state.loading && state.tableList.length <= 0
                  ? [styles.emptySection, 'emptySectionResource']
                  : ''
              ]}>
              {state.tableList.length > 0 && (
                <Draggable
                  v-model:modelValue={state.tableList}
                  itemKey="id"
                  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                  // @ts-ignore
                  // group="description"
                  group={{ name: 'description', pull: 'clone', put: false }}
                  animation={200}
                  sort={false}
                  onMove={(evt: any) => {
                    // console.log(evt, 'evt', evt.from !== evt.to);
                    return evt.from !== evt.to;
                  }}
                  componentData={{
                    draggable: 'row-nav',
                    itemKey: 'id',
                    tag: 'div',
                    pull: 'clone',
                    put: false,
                    animation: 200,
                    group: 'description'
                  }}
                  class={styles.list}>
                  {{
                    item: (element: any) => {
                      const item = element.element;
                      return (
                        <div
                          data-id={item.id}
                          class={['itemWrap', 'itemBlock', 'row-nav']}>
                          <div class={'itemWrapBox'}>
                            <CardType
                              isShowAdd
                              item={item}
                              isShowCollect={true}
                              draggable={false}
                              disabledMouseHover={false}
                              onClick={() => {
                                if (item.type === 'IMG') return;
                                state.show = true;
                                state.item = {
                                  instrumentId:
                                    state.searchGroup.musicalInstrumentId ||
                                    null,
                                  ...item
                                };
                              }}
                              onCollect={(item: any) => onCollect(item)}
                              // isShowAddDisabled={!prepareStore.getIsEditResource}
                              onAdd={(item: any) => onAdd(item)}
                            />
                          </div>
                        </div>
                        // <div
                        //   data-id={item.id}
                        //   class={[
                        //     styles.itemWrap,
                        //     styles.itemBlock,
                        //     'row-nav'
                        //   ]}>
                        //   <div class={styles.itemWrapBox}>
                        //     <CardType
                        //       class={[styles.itemContent]}
                        //       isShowCollect={false}
                        //       offShelf={item.removeFlag ? true : false}
                        //       // onOffShelf={() => onRemove(item)}
                        //       item={item}
                        //       disabledMouseHover={false}
                        //       onClick={() => {
                        //         if (item.type === 'IMG') return;
                        //         forms.show = true;
                        //         forms.item = item;
                        //       }}
                        //     />
                        //     <div class={styles.itemOperation}>
                        //       <img
                        //         src={iconDelete}
                        //         class={styles.iconDelete}
                        //         onClick={(e: MouseEvent) => {
                        //           e.stopPropagation();
                        //           onDelete(element.index, index);
                        //         }}
                        //       />
                        //     </div>
                        //   </div>
                        // </div>
                      );
                    }
                  }}
                </Draggable>
                // <div class={styles.list}>
                //   {state.tableList.map((item: any) => (
                //     <CardType
                //       isShowAdd
                //       item={item}
                //       isShowCollect={true}
                //       draggable
                //       disabledMouseHover={false}
                //       onClick={() => {
                //         if (item.type === 'IMG') return;
                //         state.show = true;
                //         state.item = item;
                //       }}
                //       onCollect={(item: any) => onCollect(item)}
                //       // isShowAddDisabled={!prepareStore.getIsEditResource}
                //       onAdd={(item: any) => onAdd(item)}
                //     />
                //   ))}
                // </div>
              )}
              {!state.loading && state.tableList.length <= 0 && <TheEmpty />}
            </div>
          </NSpin>
        </NScrollbar>

        {/* 弹窗查看 */}
        <CardPreview
          v-model:show={state.show}
          item={state.item}
          isDownload={false}
        />
      </div>
    );
  }
});