classroom-app/src/views/courseware-play/component/chapter.tsx

import { defineComponent, reactive, toRefs } from 'vue';
import styles from './chapter.module.less';
import iconMenuChapter from '../image/icon-menu-chapter.svg';
import { Collapse, CollapseItem, Icon, Image, showToast } from 'vant';
import chapterDown from '../image/chapter-down-arrow.svg';
import chapterDefault from '../image/chapter-default-arrow.svg';
import chapterVideo from '../image/chapter-video.svg';

export default defineComponent({
  name: 'chapter',
  props: {
    detail: {
      type: Object,
      default: () => []
    },
    itemActive: {
      type: String,
      default: ''
    }
  },
  emits: ['handleSelect'],
  setup(props, { emit }) {
    const { detail, itemActive } = toRefs(props);
    const pointData = reactive({
      active: ''
    });
    return () => (
      <div class={styles.container}>
        <div class={styles.pointHead}>
          <img src={iconMenuChapter} />
          切换章节
        </div>
        <div class={styles.content}>
          <Collapse
            class={styles.collapse}
            modelValue={pointData.active}
            onUpdate:modelValue={(val: any) => {
              pointData.active = val;
            }}
            border={false}
            accordion>
            {detail.value.map((item: any) => (
              <CollapseItem
                center
                class={[
                  styles.collapseItem,
                  pointData.active === item.id ? styles.activeItem : ''
                ]}
                border={false}
                isLink={false}
                title={item.name}
                titleClass={'van-ellipsis'}
                titleStyle={{ width: '80%' }}
                name={item.id}>
                {{
                  default: () => (
                    <>
                      {item.knowledgeList.map((know: any) => (
                        <div
                          class={[
                            styles.item,
                            itemActive.value == know.id ? styles.itemActive : ''
                          ]}
                          onClick={() => {
                            if (!know.containMaterial) {
                              showToast('暂无课件，不法切换');
                              return;
                            }
                            emit('handleSelect', {
                              itemActive: know.id,
                              tabActive: item.id,
                              tabName: item.name
                            });
                          }}>
                          <Image src={chapterVideo} class={styles.itemImage} />
                          <span style={{ width: '80%' }} class="van-ellipsis">
                            {know.name}
                          </span>
                        </div>
                      ))}
                    </>
                  ),
                  icon: () => (
                    <img
                      class={styles.arrow}
                      src={
                        pointData.active === item.id
                          ? chapterDown
                          : chapterDefault
                      }
                    />
                  )
                }}
              </CollapseItem>
            ))}
          </Collapse>
        </div>
      </div>
    );
  }
});