classroom-instruments/src/views/prepare-lessons/model/subject-sync/index.tsx

import { defineComponent, onMounted, ref } from 'vue';
import styles from './index.module.less';
import {
  NButton,
  NScrollbar,
  NSpace,
  NTabPane,
  NTabs,
  useMessage
} from 'naive-ui';
import { useCatchStore } from '/src/store/modules/catchData';
import iconSelect from '../../images/icon-select.png';
import { usePrepareStore } from '/src/store/modules/prepareLessons';
import { PageEnum } from '/src/enums/pageEnum';

export default defineComponent({
  name: 'subject-sync',
  props: {
    subjectId: {
      type: [String, Number],
      default: ''
    }
  },
  emits: ['close', 'confirm'],
  setup(props, { emit }) {
    const catchStore = useCatchStore();
    const prepareStore = usePrepareStore();
    const tabId = ref('' as any);
    const message = useMessage();
    const selectSubjectIds = ref([] as any);
    const subjectList = ref([] as any);

    const subjectImgs = {
      Panpipes: 'https://oss.dayaedu.com/ktqy/17103860536976fd4a751.png',
      // Ocarina: 'https://oss.dayaedu.com/ktqy/171038605369851874b22.png',
      Ocarina: 'https://oss.dayaedu.com/ktqy/17143623857205dba41a5.png',
      Whistling: 'https://oss.dayaedu.com/ktqy/1714362351692fcf8c0b8.png',
      Woodwind: 'https://oss.dayaedu.com/ktqy/17103860536966826c50d.png',
      'Tenor Recorder':
        'https://oss.dayaedu.com/ktqy/17103860536950592e357.png',
      Nai: 'https://oss.dayaedu.com/ktqy/1710386053697af4aa985.png',
      'Baroque Recorder':
        'https://oss.dayaedu.com/ktqy/1710386053698031e847a.png'
    } as any;
    /*
      https://oss.dayaedu.com/ktqy/17103860536950592e357.png
      https://oss.dayaedu.com/ktqy/17103860536966826c50d.png
      https://oss.dayaedu.com/ktqy/1710386053697af4aa985.png
      https://oss.dayaedu.com/ktqy/17103860536976fd4a751.png
      https://oss.dayaedu.com/ktqy/171038605369851874b22.png
      https://oss.dayaedu.com/ktqy/1710386053698031e847a.png
    */
    const onSubmit = () => {
      if (selectSubjectIds.value.length <= 0) {
        message.error('至少选择一个声部进行同步');
        return;
      }

      const subjectCode: any[] = [];
      // subjectList.value.forEach((subject: any) => {
      //   if (selectSubjectIds.value.includes(subject.id)) {
      //     subjectCode.push({
      //       materialId: subject.id,
      //       coverImg: subjectImgs[subject.code] || subjectImgs.Panpipes,
      //       dataJson: null,
      //       title: subject.name,
      //       isCollect: false,
      //       isSelected: false,
      //       content: subject.code
      //     });
      //   }
      // });
      selectSubjectIds.value.forEach((id: any) => {
        const item = subjectList.value.find(
          (subject: any) => subject.id === id
        );
        console.log(item, 'item');
        if (item) {
          subjectCode.push({
            materialId: item.id,
            coverImg: subjectImgs[item.code] || subjectImgs.Panpipes,
            dataJson: null,
            title: item.name,
            isCollect: false,
            isSelected: false,
            content: item.code
          });
        }
      });
      emit('confirm', { subjectIds: selectSubjectIds.value, subjectCode });
    };

    const formatSubjectList = () => {
      const subjects = catchStore.getEnableSubjects;
      const temp: any = [];
      subjects.forEach((subject: any) => {
        if (tabId.value === '' && subject.instruments) {
          temp.push(...subject.instruments);
        } else if (
          tabId.value &&
          subject.instruments &&
          Number(tabId.value) === subject.id
        ) {
          temp.push(...subject.instruments);
        }
      });

      subjectList.value = temp;
    };
    onMounted(async () => {
      // 获取教材分类列表
      // await catchStore.getMusicInstrument();
      // subjectList.value = catchStore.getMusicInstruments;
      await catchStore.getSubjects();

      formatSubjectList();
      // const teachingSubjectList = prepareStore.getSubjectList; // 教材自带声部；
      // const tempSubjectList: any = [];
      // baseAllSubjectList.forEach((subject: any) => {
      //   const index = teachingSubjectList.findIndex(
      //     (t: any) => t.id == subject.id
      //   );
      //   if (index != -1) {
      //     tempSubjectList.push(subject);
      //   }
      // });

      // subjectList.value = tempSubjectList;
      if (props.subjectId) {
        selectSubjectIds.value = [Number(props.subjectId)];
      }
    });
    return () => (
      <div class={styles.subjectSync}>
        {/* <div class={styles.tips}>
          请选择当前课件可使用的乐器
          <span>（勾选后则对应乐器下的课件内容将被当前课件内容全部替换）</span>
        </div> */}

        <NTabs
          defaultValue=""
          paneClass={styles.paneTitle}
          justifyContent="start"
          paneWrapperClass={styles.paneWrapperContainer}
          value={tabId.value}
          onUpdate:value={(val: any) => {
            tabId.value = val;
            formatSubjectList();
          }}>
          {[{ name: '全部声部', id: '' }, ...catchStore.getEnableSubjects].map(
            (item: any) => (
              <NTabPane
                name={`${item.id}`}
                tab={item.name}
                displayDirective="if"></NTabPane>
            )
          )}
        </NTabs>
        <NScrollbar style={{ maxHeight: '50vh', minHeight: '50vh' }}>
          <div class={styles.subjectList}>
            {subjectList.value.map((subject: any) => (
              <div
                class={[
                  styles.subjectItem,
                  selectSubjectIds.value.includes(subject.id)
                    ? styles.subjectSelect
                    : ''
                ]}
                onClick={() => {
                  if (selectSubjectIds.value.includes(subject.id)) {
                    const index = selectSubjectIds.value.indexOf(subject.id);
                    selectSubjectIds.value.splice(index, 1);
                  } else {
                    selectSubjectIds.value.push(subject.id);
                  }
                }}>
                <div class={styles.imgSection}>
                  <img src={subject.img} />

                  {selectSubjectIds.value.includes(subject.id) && (
                    <img src={iconSelect} class={styles.iconSelect} />
                  )}
                </div>

                <p class={styles.subjectName}>{subject.name}</p>
              </div>
            ))}
          </div>
        </NScrollbar>

        <NSpace class={styles.btnGroupModal} justify="center">
          <NButton round onClick={() => emit('close')}>
            取消
          </NButton>
          <NButton round type="primary" onClick={onSubmit}>
            确定
          </NButton>
        </NSpace>
      </div>
    );
  }
});