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

import { defineComponent, reactive } from 'vue';
import styles from './index.module.less';
import { NButton, NModal, NScrollbar, NSpace, NTabPane, NTabs } from 'naive-ui';
import CardType from '@/components/card-type';
import AttendClass from '../../model/attend-class';

export default defineComponent({
  name: 'lesson-main',
  setup() {
    const forms = reactive({
      list: [
        {
          id: 1,
          type: 'IMG',
          url: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/24a8551d69b245e0aec1c8613bf50d46_mergeImage.png',
          title: '夏日曲演奏',
          isCollect: false, // 是否收藏
          isSelected: false // 是否精选
        },
        {
          id: 2,
          type: 'IMG',
          url: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/24a8551d69b245e0aec1c8613bf50d46_mergeImage.png',
          title: '欢乐颂',
          isCollect: true, // 是否收藏
          isSelected: true // 是否精选
        },
        {
          id: 3,
          type: 'IMG',
          url: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/24a8551d69b245e0aec1c8613bf50d46_mergeImage.png',
          title: '夏日曲演奏',
          isCollect: false, // 是否收藏
          isSelected: true // 是否精选
        },
        {
          id: 4,
          type: 'IMG',
          url: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/24a8551d69b245e0aec1c8613bf50d46_mergeImage.png',
          title: '欢乐颂',
          isCollect: true, // 是否收藏
          isSelected: false // 是否精选
        }
      ],
      showAttendClass: false // 开始上课
    });
    return () => (
      <div class={styles['lesson-main']}>
        <NTabs
          animated
          defaultValue="courseware"
          paneClass={styles.paneTitle}
          justifyContent="center"
          paneWrapperClass={styles.paneWrapperContainer}>
          <NTabPane name="courseware" tab="课件">
            <div class={styles.btnGroup}>
              <NSpace>
                <NButton type="default">编辑</NButton>
              </NSpace>

              <NSpace>
                <NButton type="default">预览</NButton>
                <NButton
                  type="primary"
                  onClick={() => (forms.showAttendClass = true)}>
                  开始上课
                </NButton>
              </NSpace>
            </div>

            <NScrollbar class={styles.listContainer}>
              <div class={styles.list}>
                {forms.list.map((item: any) => (
                  <CardType isShowCollect={false} item={item} />
                ))}
              </div>
            </NScrollbar>
          </NTabPane>
          <NTabPane name="train" tab="训练">
            <div class={styles.btnGroup}>
              <NSpace>
                <NButton type="default">添加训练</NButton>
                <NButton type="default">编辑</NButton>
              </NSpace>

              <NSpace>
                <NButton type="primary">布置训练</NButton>
              </NSpace>
            </div>
          </NTabPane>
        </NTabs>

        <NModal
          v-model:show={forms.showAttendClass}
          preset="card"
          showIcon={false}
          class={styles.attendClassModal}
          title={'选择班级'}
          blockScroll={false}>
          <AttendClass onClose={() => (forms.showAttendClass = false)} />
        </NModal>
      </div>
    );
  }
});