lesson-course-play/src/views/exercise-after-class/index.tsx

import { Icon, showConfirmDialog, showToast, Swipe, SwipeItem } from 'vant';
import {
  defineComponent,
  onMounted,
  reactive,
  onUnmounted,
  ref,
  Transition,
  watch
} from 'vue';
import styles from './index.module.less';
import 'plyr/dist/plyr.css';
import request from '@/helpers/request';
import { state } from '@/state';
import { useRoute, useRouter } from 'vue-router';
import iconBack from '../coursewarePlay/image/back.svg';
import { postMessage } from '@/helpers/native-message';
import { browser } from '@/helpers/utils';
import qs from 'query-string';
import { Vue3Lottie } from 'vue3-lottie';
import playLoadData from '../coursewarePlay/datas/data.json';
// import { handleCheckVip } from '../hook/useFee';
import VideoClass from './video-class';
import { usePageVisibility } from '@vant/use';

const materialType = {
  视频: 'VIDEO',
  图片: 'IMG',
  曲目: 'SONG'
};

export default defineComponent({
  name: 'exercise-after-class',
  setup() {
    const pageVisibility = usePageVisibility();
    /** 设置播放容器 16:9 */
    const parentContainer = reactive({
      width: '100vw'
    });
    const setContainer = () => {
      const min = Math.min(screen.width, screen.height);
      const max = Math.max(screen.width, screen.height);
      const width = min * (16 / 9);
      if (width > max) {
        parentContainer.width = '100vw';
        return;
      } else {
        parentContainer.width = width + 'px';
      }
    };
    const handleInit = (type = 0) => {
      setContainer();
      // 横屏
      postMessage({
        api: 'setRequestedOrientation',
        content: {
          orientation: type
        }
      });
      // 安卓的状态栏
      postMessage({
        api: 'setStatusBarVisibility',
        content: {
          isVisibility: type
        }
      });
    };
    handleInit();
    onUnmounted(() => {
      handleInit(1);
    });

    const route = useRoute();
    const query = route.query;
    const browserInfo = browser();
    const headeRef = ref();
    const data = reactive({
      isMember: false, // 是否为会员
      videoData: null as any,
      trainings: [] as any[],
      expireTimeFlag: false, // 作业是否结束
      trainingTimes: 0,
      itemList: [] as any,
      showHead: true,
      loading: true,
      recordLoading: false,
      isPlayBaseStatus: true, // 初始状态是否播放完
      isPlayAll: true // 是否全部做完
    });
    const activeData = reactive({
      nowTime: 0,
      model: true, // 遮罩
      timer: null as any,
      item: null as any
    });
    // 获取课后练习记录
    const getTrainingRecord = async () => {
      try {
        const res: any = await request.post(
          state.platformApi +
            `/studentLessonTraining/trainingRecord/${query.courseScheduleId}?userId=${state.user?.data?.id}`,
          {
            hideLoading: true
          }
        );
        data.expireTimeFlag = res.data?.expireTimeFlag || false;
        if (Array.isArray(res?.data?.trainings)) {
          const trainings = res?.data?.trainings || [];
          const tempLessonTraining: any = [];
          trainings.forEach((item: any) => {
            tempLessonTraining.push(
              ...(item.studentLessonTrainingDetails || [])
            );
          });
          // 没有播放完
          tempLessonTraining.forEach((item: any) => {
            let trainingContent: any = {};
            try {
              trainingContent = JSON.parse(item.trainingContent);
            } catch (error) {
              trainingContent = '';
            }
            if (trainingContent.practiceTimes !== item.trainingTimes + '') {
              data.isPlayAll = false;
            }

            if (item.materialId == route.query.materialId) {
              popupData.tabName = item.knowledgePointName;
            }
          });

          return tempLessonTraining;
        }
      } catch (error) {
        //
      }
      return [];
    };
    const setRecord = async (trainings: any[]) => {
      if (Array.isArray(trainings)) {
        data.trainings = trainings.map((n: any) => {
          const materialRefs = n.materialRefs ? n.materialRefs : [];
          const materialMusicId =
            materialRefs.length > 0 ? materialRefs[0].resourceId : null;
          try {
            n.trainingContent = JSON.parse(n.trainingContent);
          } catch (error) {
            n.trainingContent = '';
          }
          return {
            ...n,
            materialMusicId,
            currentTime: 0,
            duration: 100,
            paused: true,
            loop: false,
            videoEle: null,
            timer: null,
            // muted: state.user.data?.vipMember ? false : true, // 静音
            muted: true,
            autoplay: state.user.data?.vipMember ? true : false //自动播放
          };
        });
        console.log(data.trainings, 'trainings');
        data.itemList = data.trainings.filter(
          (n: any) => n.materialId == route.query.materialId
        );
        data.videoData = data.itemList[0];
        handleExerciseCompleted();
      }
    };

    onMounted(async () => {
      const trainings = await getTrainingRecord();
      // 初始化状态
      trainings.forEach((record: any) => {
        let trainingContent: any = {};
        try {
          trainingContent = JSON.parse(record.trainingContent);
        } catch (error) {
          trainingContent = '';
        }
        if (trainingContent.practiceTimes !== record.trainingTimes + '') {
          data.isPlayBaseStatus = false;
        }
      });

      setRecord(trainings);
      // 是否为会员
      // data.isMember = handleCheckVip();
    });
    // 返回
    const goback = () => {
      postMessage({ api: 'back' });
    };

    const swipeRef = ref();
    const popupData = reactive({
      firstIndex: 0,
      open: false,
      activeIndex: -1,
      tabActive: '',
      tabName: '',
      itemActive: '',
      itemName: ''
    });

    // 达到指标,记录
    const addTrainingRecord = async (m: any) => {
      if (data.recordLoading || data.expireTimeFlag) return;
      console.log('记录观看次数');
      data.recordLoading = true;
      const query = route.query;
      const body = {
        materialType: 'VIDEO',
        record: {
          sourceTime: m.duration,
          clientType: state.platformType,
          feature: 'LESSON_TRAINING',
          deviceType: browserInfo.android
            ? 'ANDROID'
            : browserInfo.isApp
            ? 'IOS'
            : 'WEB'
        },
        courseScheduleId: query.courseScheduleId,
        lessonTrainingId: query.lessonTrainingId,
        materialId: data.videoData?.materialId || ''
      };
      try {
        await request.post(
          state.platformApi + '/studentLessonTraining/lessonTrainingRecord',
          {
            data: body,
            hideLoading: true
          }
        );
      } catch (error) {
        //
      }
      data.recordLoading = false;
      try {
        const trainings: any[] = await getTrainingRecord();
        if (Array.isArray(trainings)) {
          const item = trainings.find(
            (n: any) => n.materialId == data.videoData?.materialId
          );
          if (item) {
            data.videoData.trainingTimes = item.trainingTimes;
            handleExerciseCompleted();
          }
        }
      } catch (error) {
        //
      }
    };
    // 停止所有的播放
    const handleStopVideo = () => {
      data.itemList.forEach((m: any) => {
        m.videoEle?.pause();
      });
    };

    // 判断练习是否完成
    const handleExerciseCompleted = () => {
      if (
        data?.videoData?.trainingTimes != 0 &&
        data?.videoData?.trainingTimes + '' ===
          data.videoData?.trainingContent?.practiceTimes
      ) {
        let isLastIndex = false;
        let itemIndex = 0;
        // console.log(data.isPlayBaseStatus, data.isPlayAll, data.trainings)
        if (data.isPlayBaseStatus) {
          itemIndex = data.trainings.findIndex(
            (n: any) => n.materialId == data.videoData?.materialId
          );
          isLastIndex = itemIndex === data.trainings.length - 1;
        } else {
          let i = -1;
          let status = true;
          data.trainings.forEach((item: any, index: number) => {
            if (
              item.trainingContent.practiceTimes !== item.trainingTimes + '' &&
              i === -1
            ) {
              // console.log(i, item.trainingContent.practiceTimes, item.trainingTimes, index)
              i = index;
            }
            if (
              item.trainingContent.practiceTimes !==
              item.trainingTimes + ''
            ) {
              status = false;
            }
          });
          itemIndex = i != -1 ? i - 1 : -1;
          // console.log(status)
          isLastIndex = status;
        }

        showConfirmDialog({
          title: '课后作业',
          message: '你已完成该练习~',
          confirmButtonColor: 'var(--van-primary)',
          confirmButtonText: isLastIndex ? '完成' : '下一题',
          cancelButtonText: '继续'
        })
          .then(() => {
            if (!isLastIndex) {
              const nextItem = data.trainings[itemIndex + 1];
              data.videoData?.expired;
              if (nextItem.expired) {
                showToast('该资源已过期');
                return;
              }
              if (nextItem.knowledgePointName) {
                popupData.tabName = nextItem.knowledgePointName;
              }
              if (nextItem?.type === materialType.视频) {
                data.itemList = [nextItem];
                data.videoData = nextItem;
                handleExerciseCompleted();
              }
            } else {
              postMessage({ api: 'goBack' });
            }
          })
          .catch(() => {
            data.trainings[itemIndex].currentTime = 0;
          });
      }
    };

    watch(pageVisibility, (value: any) => {
      handleStopVideo();
      if (value == 'visible') {
        // 横屏
        postMessage(
          {
            api: 'setRequestedOrientation',
            content: {
              orientation: 0
            }
          },
          () => {
            // console.log(234);
          }
        );
      }
    });

    return () => (
      <div class={styles.playContent}>
        <div
          class={styles.coursewarePlay}
          style={{ width: parentContainer.width }}>
          <Swipe
            style={{ height: '100%' }}
            ref={swipeRef}
            showIndicators={false}
            loop={false}
            vertical
            lazyRender={true}
            touchable={false}
            duration={0}>
            {data.itemList.map((m: any) => {
              return (
                <SwipeItem>
                  <>
                    <VideoClass
                      item={m}
                      isMember={data.isMember}
                      modal={activeData.model}
                      onEnded={(m: any) => addTrainingRecord(m)}
                      onChangeModal={(status: boolean) => {
                        activeData.model = status;
                      }}
                    />
                    {m.muted && (
                      <div class={styles.loadWrap}>
                        <Vue3Lottie animationData={playLoadData}></Vue3Lottie>
                      </div>
                    )}
                  </>
                </SwipeItem>
              );
            })}
          </Swipe>

          <Transition name="top">
            {activeData.model && (
              <div class={styles.headerContainer} ref={headeRef}>
                <div class={styles.backBtn} onClick={() => goback()}>
                  <Icon name={iconBack} />
                  返回
                </div>
                <div class={styles.menu}>{popupData.tabName}</div>
                {/* 判断作业是否过期 */}
                {!data.expireTimeFlag && (
                  <div class={styles.nums}>
                    观看视频模仿并练习：{data.videoData?.trainingTimes || 0}/
                    {data.videoData?.trainingContent?.practiceTimes || 0}
                  </div>
                )}
              </div>
            )}
          </Transition>
        </div>
      </div>
    );
  }
});