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

import { defineComponent, reactive, toRefs, watch, ref } 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';
import { state } from '@/state';

export default defineComponent({
  name: 'chapter',
  props: {
    detail: {
      type: Object,
      default: () => []
    },
    itemActive: {
      type: String,
      default: ''
    },
    active: {
      type: String,
      default: ''
    }
  },
  emits: ['handleSelect'],
  setup(props, { emit }) {
    const { detail, itemActive, active } = toRefs(props);
    console.log(6666,itemActive.value,active.value,detail.value)
    const pointData = reactive({
      active: active.value,
      coursewareList: [],
      parentItem: {},
    });
    const showSelectCourseware = ref(false);

    watch(
      () => props.itemActive,
      () => {
        // console.log(itemActive.value, active.value, detail.value, 'active');
        pointData.active = active.value;
      }
    );
    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 (itemActive.value == know.id) {
                              return;
                            }
                            if (!know.containMaterial) {
                              showToast('该章节暂无课件');
                              return;
                            }
                            emit('handleSelect', {
                              itemActive: know.id,
                              itemName: know.name,
                              coursewareNum: know.coursewareNum,
                              tabActive: item.id,
                              tabName: item.name
                            });
                            const lastTimeKey =
                              'lastTime' + (state?.user?.data?.phone ?? '');
                            localStorage.setItem(lastTimeKey, know.id);
                          }}>
                          <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>
    );
  }
});