orchestra-app/src/views/exercise-after-class/index.tsx

import { Icon, Popup, 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.png'
import { postMessage } from '@/helpers/native-message'
// import iconLoop from '../coursewarePlay/image/icon-loop.svg'
// import iconLoopActive from '../coursewarePlay/image/icon-loop-active.svg'
// import iconplay from '../coursewarePlay/image/icon-play.svg'
// import iconpause from '../coursewarePlay/image/icon-pause.svg'
// import iconGoPractice from '../coursewarePlay/image/icon-go-practice.svg'
// import iconVideobg from '../coursewarePlay/image/icon-videobg.png'
import { browser, getSecondRPM } 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 item from '@/student/coupons/item'
import { usePageVisibility } from '@vant/use'
import CoursewareTips from '../coursewarePlay/component/courseware-tips'

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: 'setTitleBarVisibility',
      //   content: {
      //     status: type
      //   }
      // })
      // 安卓的状态栏
      postMessage({
        api: 'setStatusBarVisibility',
        content: {
          isVisibility: type
        }
      })
    }
    handleInit()
    onUnmounted(() => {
      handleInit(1)
    })

    const route = useRoute()
    const router = useRouter()
    const query = route.query
    const browserInfo = browser()
    const headeRef = ref()
    const data = reactive({
      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 onTitleTip = (type: "phaseGoals" | "checkItem", text: string) => {
      console.log(type, text, 'text')
      handleStopVideo()
      popupData.pointOpen = true
      popupData.pointContent = text
      if(type === "checkItem") {
        popupData.pointTitle = '检查事项'
      } else if(type === "phaseGoals") {
        popupData.pointTitle = '阶段目标'
      }
    }
    // 获取课后练习记录
    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 //自动播放
          }
        })
        
        data.itemList = data.trainings.filter((n: any) => n.materialId == route.query.materialId)
        data.videoData = data.itemList[0]
        console.log(data.trainings, 'trainings', data.itemList)
        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)
      handleCheckVip()

      console.log(activeData.model, data.itemList, 'itemList')
    })
    // 返回
    const goback = () => {
      postMessage({ api: 'back' })
    }

    const swipeRef = ref()
    const popupData = reactive({
      pointOpen: false,
      pointContent: "", 
      pointTitle: "",
      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 {
        const res: any = 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()
              }
              if (nextItem?.type === materialType.曲目) {
                handleInit(1)
                goback()
                const parmas = qs.stringify({
                  id: nextItem.content,
                  courseScheduleId: query.courseScheduleId,
                  lessonTrainingId: query.lessonTrainingId,
                  materialId: nextItem.materialId
                })
                const src = `${location.origin}/orchestra-music-score/?` + parmas
                postMessage({
                  api: 'openAccompanyWebView',
                  content: {
                    url: src,
                    orientation: 0,
                    c_orientation: 0,
                    isHideTitle: true,
                    statusBarTextColor: false,
                    isOpenLight: true
                  }
                })
              }
            } 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)
          }
        )
      }
    })

    // 去练习
    const gotoPractice = (e: any) => {
      handleStopVideo()
      e.stopPropagation()
      const parmas = qs.stringify({
        id: data.videoData.materialMusicId
      })
      const src = `${location.origin}/orchestra-music-score/?` + parmas
      console.log(src, 'src')
      postMessage({
        api: 'openAccompanyWebView',
        content: {
          url: src,
          orientation: 0,
          c_orientation: 0,
          isHideTitle: true,
          statusBarTextColor: false,
          isOpenLight: true
        }
      })
    }

    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, mIndex: number) => {
              return (
                <SwipeItem>
                  <>
                    <VideoClass
                      item={m}
                      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}>
                  <Icon name={iconBack}  onClick={() => goback()} />
                  <div class={styles.titleSection}>
                    <div class={styles.title}>{popupData.tabName}</div>
                      <div class={styles.titleContent}>
                        <p>{data.itemList[0]?.materialName}</p>
                        {/* {data.detail?.lessonTargetDesc ? <span onClick={() => onTitleTip('phaseGoals', data.detail?.lessonTargetDesc)}>阶段目标</span>: ""} */}
                        {data.itemList[0]?.checkItem ? <span onClick={() => onTitleTip('checkItem', data.itemList[0]?.checkItem)}>检查事项</span> : ""}
                      </div>
                  </div>
                </div>
                {/* 判断作业是否过期 */}
                {!data.expireTimeFlag && (
                  <div class={styles.nums}>
                    <div class={styles.timeLoad}></div>
                    <div>
                      观看视频模仿并练习：{data.videoData?.trainingTimes || 0}/
                      {data.videoData?.trainingContent?.practiceTimes || 0}
                    </div>
                  </div>
                )}
              </div>
            )}
          </Transition>
          {/* <Transition name="right"> */}

          {/* 学校端不显示按钮 */}
          {data.videoData?.materialMusicId &&
            state.platformType !== 'SCHOOL' &&
            !data.videoData?.expired && (
              <div
                class={[styles.goPractice, activeData.model ? '' : styles.hide]}
                onClick={gotoPractice}
              ></div>
            )}

          {/* // <div class={styles.btnGroup}>
            //   <div class={styles.btnItem} onClick={gotoPractice}>
            //     <img src={iconGoPractice} class={styles.btnImg} />
            //     <span>去练习</span>
            //   </div>
            // </div> */}

          {/* {item.value.materialMusicId && (
              <div
                class={[styles.goPractice, data.showBar ? '' : styles.hide]}
                onClick={gotoAccomany}
              ></div>
            )} */}
          {/* </Transition> */}
        </div>

        <Popup
          class={[styles.popup, styles.popupPoint]}
          round
          style={{ background: 'transparent !important' }}
          v-model:show={popupData.pointOpen}>
          <CoursewareTips show onClose={() => {
            popupData.pointOpen = false
          }} content={popupData.pointContent} titleName={popupData.pointTitle} />
        </Popup>
      </div>
    )
  }
})