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',
          name: '其多列',
          title: '其多列',
          type: 'VIDEO',
          content:
            'https://gyt.ks3-cn-beijing.ksyuncs.com/courseware/1687844560120.mp4',
          url: 'https://gyt.ks3-cn-beijing.ksyuncs.com/courseware/1687844640957.png'
        },
        {
          id: '5',
          name: '歌曲表演 大鹿',
          title: '歌曲表演 大鹿',
          type: 'AUDIO',
          content:
            'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/1686819360752.mp3',
          url: 'https://gyt.ks3-cn-beijing.ksyuncs.com/courseware/1687916228530.png'
        },
        {
          id: '2',
          name: '其多列',
          title: '其多列',
          type: 'IMG',
          content:
            'https://gyt.ks3-cn-beijing.ksyuncs.com/courseware/1688007481564.jpg',
          url: 'https://gyt.ks3-cn-beijing.ksyuncs.com/courseware/1688007481564.jpg'
        },
        {
          id: '4',
          name: '歌曲 其多列',
          title: '其多列',
          type: 'SONG',
          content: '43541',
          url: 'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-first/1687847690372-1.png'
        }
      ],
      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>
    );
  }
});
