classroom-instruments/src/views/home/modals/subject-modal/index.tsx

import { defineComponent, onMounted, ref } from 'vue';
import styles from './index.module.less';
import { NButton, NScrollbar, NSpace } from 'naive-ui';
import { useCatchStore } from '/src/store/modules/catchData';
import iconSelect from '../../../prepare-lessons/images/icon-select.png';

export default defineComponent({
  name: 'subject-sync',
  emits: ['close', 'confirm'],
  setup(props, { emit }) {
    const catchStore = useCatchStore();

    const selectSubjectId = ref(null as any);
    const subjectList = ref([] as any);

    const onSubmit = () => {
      const item = subjectList.value.find(
        (subject: any) => subject.id === selectSubjectId.value
      );

      emit('confirm', item);
    };
    onMounted(async () => {
      // await catchStore.getSubjects();
      await catchStore.getMusicInstrument();
      subjectList.value = catchStore.getMusicInstruments;
      if (subjectList.value.length > 0) {
        selectSubjectId.value = subjectList.value[0].id;
      }
    });
    return () => (
      <div class={styles.subjectSync}>
        {/* <div class={styles.tips}>
          请选择当前课件可使用的乐器
          <span>（勾选后则对应乐器下的课件内容将被当前课件内容全部替换）</span>
        </div> */}

        <NScrollbar style={{ maxHeight: '60vh' }}>
          <div class={styles.subjectList}>
            {subjectList.value.map((subject: any) => (
              <div
                class={[
                  styles.subjectItem,
                  selectSubjectId.value === subject.id
                    ? styles.subjectSelect
                    : ''
                ]}
                onClick={() => {
                  selectSubjectId.value = subject.id;
                }}>
                <div class={styles.imgSection}>
                  <img src={subject.img} />

                  {selectSubjectId.value === 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>
    );
  }
});