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

import { computed, defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './index.module.less';
import { NIcon, NSpin, NScrollbar, NModal, NImage } from 'naive-ui';
import {
  lessonCoursewareDetail,
  lessonCoursewarePage,
  tagUseCourseware
} from '../../api';
import SelectLessonware from './select-lessonware';
import TheEmpty from '/src/components/TheEmpty';
import { usePrepareStore } from '/src/store/modules/prepareLessons';
import { useUserStore } from '/src/store/modules/users';
import { useRoute } from 'vue-router';
import { eventGlobal } from '/src/utils';
import TheNoticeBar from '/src/components/TheNoticeBar';
import { getSubjectList2 } from '/src/api/user';

export default defineComponent({
  name: 'directory-main',
  setup() {
    const route = useRoute();
    const prepareStore = usePrepareStore();
    const userStore = useUserStore();
    const show = ref(true);
    const forms = reactive({
      lastUseCoursewareId: route.query.lastUseCoursewareId
        ? route.query.lastUseCoursewareId + ''
        : null, // 专辑编号
      unit: route.query.unit ? route.query.unit + '' : null, // 声部
      showSelectBookStatus: false,
      coursewareStatus: false
    });

    const getLessonCourseware = async () => {
      try {
        const { data } = await lessonCoursewarePage({
          page: 1,
          rows: 99,
          type: 'COURSEWARE',
          enableFlag: 1
        });
        const result = data.rows || [];
        if (result.length > 0) {
          // 判断是否有默认数据
          const selectItem = result.find(
            (item: any) =>
              item.id ===
              (forms.lastUseCoursewareId ||
                userStore.getUserInfo?.lastUseCoursewareId)
          );
          let id: any = null;
          let instrumentIds: any = null;
          if (selectItem) {
            prepareStore.setBaseCourseware(selectItem);
            id = selectItem.id;
            instrumentIds = selectItem.instrumentIds;
          } else {
            prepareStore.setBaseCourseware(result[0]);
            id = result[0]?.id;
            instrumentIds = result[0].instrumentIds;
          }
          setLastUseCoursewareId(id);

          if (instrumentIds) {
            const { data } = await getSubjectList2({ instrumentIds });
            prepareStore.setInstrumentList(data);
          }
        }

        forms.showSelectBookStatus = true;
      } catch {
        //
      }
    };

    const getLessonCoursewareDetail = async () => {
      try {
        const baseCourseware: any = prepareStore.getBaseCourseware;
        if (!baseCourseware.id) return;
        const { data } = await lessonCoursewareDetail({
          id: baseCourseware.id
        });
        const tempList: any = data.lessonList || [];
        const defaultUnitIds = formatParentId(forms.unit, tempList);
        tempList.forEach((item: any, index: number) => {
          item.selected = false;
          // 处理从备课页面带过来的参数
          if (defaultUnitIds.length > 1) {
            if (item.id === defaultUnitIds[0]) {
              item.selected = true;
              item.knowledgeList.forEach((know: any) => {
                if (know.id === defaultUnitIds[1]) {
                  prepareStore.setSelectKey(know?.id);
                  prepareStore.setLessonCoursewareId(know?.lessonCoursewareId);
                  prepareStore.setLessonCoursewareDetailId(
                    know?.lessonCoursewareDetailId
                  );
                }
              });
            }
          } else {
            if (index === 0) {
              item.selected = true;
              const temp = item['knowledgeList'][0];
              prepareStore.setSelectKey(temp?.id);
              prepareStore.setLessonCoursewareId(temp?.lessonCoursewareId);
              prepareStore.setLessonCoursewareDetailId(
                temp?.lessonCoursewareDetailId
              );
            }
          }
        });
        prepareStore.setTreeList(tempList);
      } catch {
        //
      }
    };

    const formatParentId = (id: any, list: any, ids = [] as any) => {
      for (const item of list) {
        if (item.knowledgeList && item.knowledgeList.length > 0) {
          const cIds: any = formatParentId(id, item.knowledgeList, [
            ...ids,
            item.id
          ]);
          if (cIds.includes(id)) {
            return cIds;
          }
        }
        if (item.id === id) {
          return [...ids, id];
        }
      }
      return ids;
    };

    const setLastUseCoursewareId = async (id: any) => {
      try {
        await tagUseCourseware({ coursewareId: id });
        userStore.getInfo();
      } catch {
        //
      }
    };

    const clickDetail = (child: any) => {
      prepareStore.setSelectKey(child.id);
      prepareStore.setLessonCoursewareId(child.lessonCoursewareId);
      prepareStore.setLessonCoursewareDetailId(child.lessonCoursewareDetailId);
    };

    const onChangeClass = async (item: any) => {
      show.value = true;
      forms.lastUseCoursewareId = item.lastUseCoursewareId;
      forms.unit = item.unit;
      await getLessonCourseware();
      await getLessonCoursewareDetail();
      show.value = false;
    };

    const changeCourseware = async (item: any) => {
      prepareStore.setBaseCourseware(item);
      // prepareStore.setSubjectList(item.subjectList);

      if (item.instrumentIds) {
        const { data } = await getSubjectList2({
          instrumentIds: item.instrumentIds
        });
        prepareStore.setInstrumentList(data);

        let status = false;
        let tempInstrumentId: any = null;
        data.forEach((item: any, index: number) => {
          if (Array.isArray(item.instruments)) {
            item.instruments.forEach((child: any, j: number) => {
              if (child.id === prepareStore.getInstrumentId) {
                status = true;
              }
              if (index === 0 && j === 0) {
                tempInstrumentId = child.id;
              }
            });
          }
        });
        // 判断教材里面是否有当前选择的声部，如果没有则默认选择第一个
        if (status) {
          const instrumentId = tempInstrumentId;
          sessionStorage.removeItem('prepareLessonCourseWareSubjectIsNull');
          prepareStore.setInstrumentId(instrumentId);
        }
      }

      getLessonCoursewareDetail();
      setLastUseCoursewareId(item.id);
    };

    const formatInstrumentNames = computed(() => {
      const names = prepareStore.getBaseCourseware.instrumentNames;
      if (!names) {
        return '';
      }
      return names.split(',').join('、');
    });

    onMounted(async () => {
      show.value = true;
      await getLessonCourseware();
      await getLessonCoursewareDetail();
      show.value = false;

      // 切换班级时触发
      eventGlobal.on('onChangeClass', async (item: any) => {
        onChangeClass(item);
      });
    });
    return () => (
      <div class={styles.directoryList}>
        {forms.showSelectBookStatus &&
          (prepareStore.getBaseCourseware.id ? (
            <div id="lessons-0" class={styles['select-directory-info']}>
              <div
                class={styles.itemImg}
                onClick={() => (forms.coursewareStatus = true)}>
                <NImage
                  objectFit="cover"
                  src={prepareStore.getBaseCourseware.coverImg}
                  lazy
                  previewDisabled={true}
                  onLoad={e => {
                    (e.target as any).dataset.loaded = 'true';
                  }}
                />
              </div>
              <div class={styles.itemContent}>
                <h2>
                  <TheNoticeBar text={prepareStore.getBaseCourseware.name} />
                </h2>
                <div class={styles.subjects}>
                  <TheNoticeBar
                    text={formatInstrumentNames.value}
                    time={formatInstrumentNames.value.length > 15 ? 10 : 5}
                  />
                </div>
                <div
                  class={styles.changeDir}
                  onClick={() => (forms.coursewareStatus = true)}>
                  <svg
                    width="11px"
                    height="10px"
                    viewBox="0 0 11 10"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg">
                    <title>切片</title>
                    <g
                      stroke="none"
                      stroke-width="1"
                      fill="none"
                      fill-rule="evenodd">
                      <g
                        transform="translate(-279.000000, -210.000000)"
                        fill="#0378EC"
                        fill-rule="nonzero">
                        <g transform="translate(132.000000, 96.000000)">
                          <g transform="translate(32.000000, 24.000000)">
                            <g transform="translate(103.000000, 10.000000)">
                              <g transform="translate(0.000000, 71.000000)">
                                <g transform="translate(12.000000, 9.000000)">
                                  <path d="M10.4116565,3.89985699 C10.6551462,3.89985699 10.8747497,3.75140792 10.9680437,3.52360884 C11.0613377,3.29606287 11.0096883,3.03384082 10.8376072,2.85944797 L8.08018279,0.0692888872 C7.98888976,-0.0230962957 7.8410701,-0.0230962957 7.74977708,0.0692888872 L7.22840639,0.59689687 C7.13711336,0.689282053 7.13711336,0.838996672 7.22840639,0.931255299 L8.95772133,2.68113191 L0.230858792,2.68113191 C0.103423738,2.68113191 0,2.78566638 0,2.91475252 L0,3.66636293 C0,3.79532253 0.10329868,3.89998355 0.230858792,3.89998355 L10.4116565,3.89998355 L10.4116565,3.89985699 Z M10.877501,6.10001645 L0.699579677,6.10001645 C0.456089932,6.10001645 0.236486444,6.24846552 0.143192479,6.4762646 C0.0498985147,6.70381057 0.101547854,6.96603263 0.273628948,7.14042548 L3.03105338,9.93071111 C3.12234641,10.0230963 3.27016607,10.0230963 3.36145909,9.93071111 L3.88282978,9.40310313 C3.97412281,9.31071795 3.97412281,9.16100333 3.88282978,9.0687447 L2.15351484,7.31874154 L10.877501,7.31874154 C11.0065618,7.31874154 11.1111111,7.21281496 11.1111111,7.08233671 L11.1111111,6.33654783 C11.1111111,6.20594302 11.0065618,6.10001645 10.877501,6.10001645 Z"></path>
                                </g>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </g>
                  </svg>
                  <span>切换教材</span>
                </div>
              </div>
            </div>
          ) : (
            <div
              id="lessons-0"
              class={styles['select-directory']}
              onClick={() => (forms.coursewareStatus = true)}>
              <span
                class={['cr-ellipsis']}
                title={prepareStore.getBaseCourseware.name}>
                {prepareStore.getBaseCourseware.name || '请选择教材'}
              </span>
              <NIcon class={styles.iconArrow}>
                <svg
                  width="11px"
                  height="15px"
                  viewBox="0 0 11 15"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg">
                  <g
                    stroke="none"
                    stroke-width="1"
                    fill="none"
                    fill-rule="evenodd"
                    opacity="0.699999988">
                    <g
                      transform="translate(-445.000000, -137.000000)"
                      fill="#131415">
                      <g transform="translate(152.000000, 120.000000)">
                        <path
                          d="M299.326227,20.2118001 L304.934089,28.4366632 C305.245211,28.8929759 305.127511,29.515105 304.671198,29.8262273 C304.505147,29.9394437 304.308836,30 304.107861,30 L292.892139,30 C292.339854,30 291.892139,29.5522847 291.892139,29 C291.892139,28.7990254 291.952695,28.6027139 292.065911,28.4366632 L297.673773,20.2118001 C297.984895,19.7554873 298.607024,19.6377872 299.063337,19.9489096 C299.16663,20.0193364 299.255801,20.1085074 299.326227,20.2118001 Z"
                          id="三角形"
                          transform="translate(298.500000, 24.500000) rotate(-270.000000) translate(-298.500000, -24.500000) "></path>
                      </g>
                    </g>
                  </g>
                </svg>
              </NIcon>
            </div>
          ))}

        <NScrollbar class={styles.scrollBar}>
          <NSpin show={show.value}>
            <div
              class={[
                styles.listSection,
                !show.value && prepareStore.getTreeList.length <= 0
                  ? styles.emptySection
                  : ''
              ]}>
              {prepareStore.getTreeList.map((item: any, index: number) => (
                <div class={styles.treeParent} key={'parent' + index}>
                  <div
                    class={[styles.treeItem, styles.parentItem]}
                    onClick={() => {
                      prepareStore.getTreeList.forEach((child: any) => {
                        if (item.id !== child.id) {
                          child.selected = false;
                        }
                      });
                      item.selected = item.selected ? false : true;
                    }}>
                    {item.knowledgeList && item.knowledgeList.length > 0 && (
                      <span
                        class={[
                          styles.arrow,
                          item.selected ? styles.arrowSelect : ''
                        ]}></span>
                    )}
                    <p
                      class={[
                        styles.title,
                        item.selected ? styles.titleSelect : ''
                      ]}>
                      <span
                        class={[
                          styles.dir,
                          item.selected ? styles.dirSelect : ''
                        ]}></span>
                      {item.name}
                    </p>
                  </div>

                  {item.selected &&
                    item.knowledgeList &&
                    item.knowledgeList.map((child: any, j: number) => (
                      <div
                        key={'child' + j}
                        class={[
                          styles.treeItem,
                          styles.childItem,
                          styles.animation,
                          prepareStore.getSelectKey === child.id
                            ? styles.childSelect
                            : ''
                        ]}
                        onClick={() => {
                          if (prepareStore.getIsEditResource) {
                            eventGlobal.emit('pageBeforeLeave', () =>
                              clickDetail(child)
                            );
                          } else {
                            clickDetail(child);
                          }
                        }}>
                        <span class={styles.childArrow}></span>
                        <p class={styles.title}>{child.name}</p>
                      </div>
                    ))}
                </div>
              ))}
            </div>
            {!show.value && prepareStore.getTreeList.length <= 0 && (
              <TheEmpty />
            )}
          </NSpin>
        </NScrollbar>

        {/* 选择教材 */}
        <NModal
          v-model:show={forms.coursewareStatus}
          preset="card"
          showIcon={false}
          class={['modalTitle background', styles.coursewareModal]}
          title={'切换教材'}
          blockScroll={false}>
          <SelectLessonware
            onClose={() => (forms.coursewareStatus = false)}
            onConfirm={(item: any) => {
              if (prepareStore.getIsEditResource) {
                eventGlobal.emit('pageBeforeLeave', () =>
                  changeCourseware(item)
                );
              } else {
                changeCourseware(item);
              }
            }}
          />
        </NModal>
      </div>
    );
  }
});