classroom-instruments/src/views/prepare-lessons/model/select-music/select-item/index.tsx

import { NScrollbar, NSpin, NTabPane, NTabs } from 'naive-ui';
import { defineComponent, onMounted, reactive } from 'vue';
import styles from './index.module.less';
import CardType from '@/components/card-type';
import SearchGroup from './search-group';
import TheEmpty from '/src/components/TheEmpty';
import { useDebounceFn, useThrottleFn, useResizeObserver } from '@vueuse/core';
import { usePrepareStore } from '/src/store/modules/prepareLessons';
import { musicSheetPage } from '../../../api';
import CardPreview from '/src/components/card-preview';
import { favorite, materialQueryPage } from '/src/views/natural-resources/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: 'select-music',
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  emits: ['add'],
  setup(props, { emit }) {
    const prepareStore = usePrepareStore();
    const state = reactive({
      searchHeight: '0px',
      loading: false,
      finshed: false, // 是否加载完
      pagination: {
        page: 1,
        rows: 20
      },
      searchGroup: {
        name: '',
        type: 'MUSIC', //
        musicSheetCategoriesId: '',
        sourceType: formatType(props.type),
        status: 1,
        versionFlag: false,
        subjectId: null
      },
      tableList: [] as any,
      show: false,
      item: {} as any,
      isShowAddDisabled: !prepareStore.getIsEditTrain
    });
    const className = 'musicSearchGroup' + +new Date();
    const getList = async () => {
      try {
        if (state.pagination.page === 1) {
          state.loading = true;
        }
        // material/queryPage
        // const { data } = await musicSheetPage({
        //   ...state.searchGroup,
        //   ...state.pagination,
        //   subjectId: prepareStore.getSubjectId
        // });
        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) => {
          temp.push({
            id: row.id,
            coverImg: row.musicSvg,
            type: 'MUSIC',
            title: row.musicSheetName,
            isCollect: false,
            isSelected: true,
            content: row.id,
            xmlFileUrl: row.xmlFileUrl
          });
        });
        state.tableList.push(...temp);

        state.finshed = data.pages <= data.current ? true : false;
      } catch {
        state.loading = false;
      }
    };

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

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

    // 收藏
    const onCollect = async (item: any) => {
      try {
        await favorite({
          materialId: item.id,
          favoriteFlag: item.isCollect ? 0 : 1,
          type: item.type
        });
        item.isCollect = !item.isCollect;
      } catch {
        //
      }
    };

    onMounted(() => {
      useResizeObserver(
        document.querySelector('.' + className) as HTMLElement,
        (entries: any) => {
          const entry = entries[0];
          const { height } = entry.contentRect;
          state.searchHeight = height + 'px';
        }
      );
      if (props.type === 'homework') {
        state.isShowAddDisabled = false;
      }
      getList();
    });
    return () => (
      <div class={styles.selectMusic}>
        <div class={className}>
          <SearchGroup onSearch={(item: any) => throttledFnSearch(item)} />
        </div>

        <NScrollbar
          class={styles.listContainer}
          style={{
            'max-height': `calc(85vh - var(--modal-lesson-tab-height) - ${state.searchHeight} - 12px) `
          }}
          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
              style={{
                'min-height': `calc(85vh - var(--modal-lesson-tab-height) - ${state.searchHeight} - 12px)`
              }}
              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
                      isShowCollect
                      item={item}
                      // isShowAddDisabled={state.isShowAddDisabled}
                      onAdd={() => emit('add', item)}
                      disabledMouseHover={false}
                      onClick={() => {
                        if (item.type === 'IMG') return;
                        state.show = true;
                        state.item = item;
                      }}
                      onCollect={(item: any) => onCollect(item)}
                    />
                  ))}
                </div>
              )}
              {!state.loading && state.tableList.length <= 0 && <TheEmpty />}
            </div>
          </NSpin>
        </NScrollbar>

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