import { defineComponent, nextTick, reactive } from 'vue'
import requestOrigin from 'umi-request'
import { Skeleton, Empty, Popup, Button, Toast } from 'vant'
import store from 'store'
import unmuteAudio from 'unmute-ios-audio'
import smoothscroll from 'smoothscroll-polyfill'
import { typeById, ITypeContentItem } from '/src/constant/fingering'
import request from '/src/helpers/request'
import { postMessage, listenerMessage } from '/src/helpers/native-message'
import audiosInstance from '/src/helpers/multiple-audio'
import TvPopup from './tv-popup'
// import Suggestion from './suggestion'
import TickPopup from './tick-popup'
import Header from './header'
import MusicList from './list'
import Tips from './tips'
import Section from './section-box'
import Evaluating from './evaluating'
import { sync } from '/src/pages/state'
import state from './state'
import stateParent from '../state'
import appstate from '/src/state'
import runtime, * as RuntimeUtils from './runtime'
import NetworkError from '/src/components/network-error'
import MusicScore from '/src/components/music-score'
import MusicScoreEvent from '/src/components/music-score/event'
import { btnEvent } from '/src/pages/detail/right-buttons'
import SettingState from '/src/pages/detail/setting-state'
import EvaluatingTips from './evaluating-tips'
import FingeringInfo from './fingeringInfo'
import styles from './index.module.less'
import classnames from 'classnames'
import getTypes from '/src/components/fingering/types'
import { Fingering } from '/src/components/fingering/types'
import { getImageSize, useFingeringSrc, formatFixedKey } from '/src/components/fingering/index'
import DakaIcon from './icons/daka.png'
import { browser, setTongjiTag, getVoiceChinesName, getRequestHostname } from '/src/helpers/utils'
import {
  formatXML,
  onlyVisible,
  getVoicePartInfo,
  getAllNodes,
  isWithinScope,
  getCustomInfo,
  CustomInfo,
  idIsInClassIds,
  appoggianceFormate,
} from '/src/pages/detail/helpers'
import qs from 'query-string'
import { metronomeData } from '/src/helpers/metronome'

let dakaTimer: any = null

const browserInfo = browser()

smoothscroll.polyfill()

type TrainingPlayInfo = null | {
  isFinish: 0 | 1
  playTime: number
  trainEndDate: string
  trainStartDate: string
}

let player: any = null

export type FingeringViewInfo = {
  width: number
  height: number
  scale: number
  usedFixedKey?: number
  fullsrc?: string
  activeType?: Fingering
  detail?: ITypeContentItem
}

export default defineComponent({
  name: 'detail',
  data() {
    return {
      osmd: null as any,
      loading: true,
      error: false,
      libs: [] as any[],
      libIndex: 0,
      xmlStatus: 'init' as 'init' | 'success' | 'error',
      score: '',
      libshow: false,
      listShow: false,
      listShowed: false,
      dakaShow: false,
      dataed: false,
      tvShow: false,
      tvShowed: false,
      fingeringLoaded: false,
      svgHeight: 0,
      rendered: false,
      tree: [] as any[],
      parseXmlInfo: {
        parsedXML: '',
        showSpeed: true,
      } as CustomInfo,
      isSpecialBookCategory: false,
      trainingPlayInfo: null as TrainingPlayInfo,
      courseNum: 0,
      courseShow: false,
      dakaShowTime: 5,
      viewInfo: {
        width: 0,
        height: 0,
        scale: 1,
      } as FingeringViewInfo,
      fingeringWidth: 0,
      fingeringStatus: 'init' as 'init' | 'show' | 'hidden',
    }
  },
  beforeCreate() {
    const { mode }: any = this.$route.query
    if (mode) {
      state.mode = mode
    }
    unmuteAudio()
    // 进入页面设置常量
    postMessage({
      api: 'keepScreenLongLight',
      content: {
        isOpenLight: true,
      },
    })
    postMessage(
      {
        api: 'isSpecialShapedScreen',
      },
      (evt) => {
        const height = evt?.content.notchHeight
        state.notchHeight =
          (browser().ios ? height * 2 : height) || (evt?.content.isSpecialShapedScreen && browser().ios ? 100 : 0)
        state.isSpecialShapedScreen = evt?.content.isSpecialShapedScreen
      }
    )
    sync()
  },
  computed: {
    firstLib(): { [key: string]: any } {
      const route = (this as any).$route
      const saveSpeed = (store.get('speeds') || {})[route.params.id]
      if (this.libs[this.libIndex]) {
        const data = this as any
        const active = {
          ...data.libs[data.libIndex],
          speed: saveSpeed || data.libs[data.libIndex]?.speed || 90,
          originalSpeed: data.libs[data.libIndex]?.speed,
        }
        active.isAppPlay = active.playMode === 'XML'
        state.activeDetail = { ...active }
        return active
      }
      return {
        speed: saveSpeed || 90,
      }
    },
    fingeringDetail() {
      const firstLib = (this as any).firstLib
      if (firstLib) {
        const type = typeById[state.subjectId || firstLib.subjectId]
        // this.fingeringViewInfo(type)
        return type
      }
    },
    fingeringInfo() {
      const showShowFingering =
        this.firstLib && this.firstLib.isShowFingering && !runtime.evaluatingStatus && SettingState.sett.fingering
      const { fingering, mode } = this.$route.query
      if (mode === 'homework' && fingering != '1') {
        this.fingeringViewInfo()
        return null
      }
      const firstLib = (this as any).firstLib
      if (firstLib) {
        const subjectId = state.subjectId || firstLib.subjectId
        const type = typeById[subjectId]
        // console.log(subjectId, type)
        if (subjectId) {
          this.fingeringViewInfo(type)
        } else if (subjectId === -1) {
          this.fingeringViewInfo()
        }
      }
      if (showShowFingering) {
        console.log(
          'showShowFingering',
          typeById[state.subjectId || (this as any).firstLib.subjectId],
          state.subjectId,
          (this as any).firstLib.subjectId
        )
        return typeById[state.subjectId || (this as any).firstLib.subjectId]
      }
      return null
    },
    needFingeringLoadAndLoaded() {
      const status = (this as any).fingeringInfo && (this as any).fingeringLoaded
      if (!this.fingeringInfo) {
        return true
      }
      return status
    },
    fullLoading() {
      return (this as any).loading && !(this as any).needFingeringLoadAndLoaded
    },
    //   /** 根据教材ID获取顶部分类 用于区分不同的教材显示 */
    //   isSpecialBookCategory() {
    //     const isSpecialBookCategory = idIsInClassIds(this.tree, this.firstLib?.parentCategoriesId)
    //     console.log('isSpecialBookCategory', this.tree, this.firstLib?.parentCategoriesId, !isSpecialBookCategory)
    //     // console.log('idIsInClassIds', isSpecialBookCategory)
    //     // // @ts-ignore
    //     // const rootCategoriesId: number = isWithinScope(this.tree, this.firstLib?.parentCategoriesId)
    //     // /**
    //     //  * 合奏训练(42)
    //     //  * 考级曲目(40)
    //     //  * 流行曲目(41)
    //     //  * 测试合奏训练(100)
    //     //  * 测试流行曲目(102)
    //     //  */
    //     // const isSpecial = [39, 40, 41, 42, 100, 102].includes(rootCategoriesId)
    //     // state.isSpecialBookCategory = isSpecial
    //     // console.log('rootCategoriesId', rootCategoriesId)
    //     return isSpecialBookCategory
    //   }
  },
  watch: {
    dakaShow() {
      if (this.dakaShow) {
        this.dakaShowTime = 5
        dakaTimer = setInterval(() => {
          this.dakaShowTime--
          if (this.dakaShowTime === 0) {
            this.dakaShow = false
            clearInterval(dakaTimer)
          }
        }, 1000)
      } else {
        if (dakaTimer) {
          clearInterval(dakaTimer)
        }
      }
    },
  },
  methods: {
    // 提前获取指法图片尺寸
    async fingeringViewInfo(type?: ITypeContentItem) {
      // @ts-ignore
      const detail: ITypeContentItem = type || this.fingeringDetail
      // 该声部有指法情况
      if (detail) {
        const activeType: Fingering = await getTypes(detail.name)
        if (activeType) {
          const usedFixedKey = formatFixedKey(detail.name, state.fixedKey)
          const fullsrc = useFingeringSrc(activeType, detail.name, usedFixedKey.value)
          const { width, height } = await getImageSize(fullsrc.value)
          // @ts-ignore
          const containerHeight = this.$refs.main?.clientHeight || 0
          const w = runtime.evaluatingStatus ? 0 : width
          const scale = containerHeight / height
          this.fingeringWidth = containerHeight ? scale * w : w
          if (width) {
            this.fingeringStatus = 'show'
          }
          this.viewInfo = {
            width,
            height,
            scale,
            usedFixedKey: usedFixedKey.value,
            fullsrc: fullsrc.value,
            activeType,
            detail,
          }
        }
      } else {
        this.fingeringStatus = 'hidden'
      }
    },
    formatMp3() {
      // 后台管理，教学伴奏预览专用参数
      const webParams: any = qs.parse(location.search)

      return this.libs.map((item) => {
        let mp3Url
        if (webParams.platform == 'web') {
          mp3Url = !!Number(webParams.isOpenMetronome) ? item?.mp3Url : item?.metronomeMp3Url
        } else {
          mp3Url = item?.isOpenMetronome ? item?.mp3Url : item?.metronomeMp3Url
        }
        return { name: item.track, mp3Url }
      })
    },
    setMusicUrl() {
      if (this.firstLib) {
        const { partName } = getVoicePartInfo()
        const active = this.firstLib
        // 后台管理，教学伴奏预览专用参数
        const webParams: any = qs.parse(location.search)
        if (webParams.platform == 'web') {
          active.mp3Url = !!Number(webParams.isOpenMetronome) ? active?.mp3Url : active?.metronomeMp3Url
          active.url = !!Number(webParams.isOpenMetronome) ? active?.url : active?.metronomeUrl
        } else {
          active.mp3Url = active?.isOpenMetronome ? active?.mp3Url : active?.metronomeMp3Url
          active.url = active?.isOpenMetronome ? active?.url : active?.metronomeUrl
        }
        // 如果是合奏曲目则按照轨道设置mp3
        if (active?.track && this.libs.length > 1) {
          const data: any = {}
          const tmpMp3s = this.formatMp3()
          for (const mp3 of tmpMp3s) {
            data[mp3.name] = mp3.mp3Url
          }
          const url = data[partName as string]
          active.mp3Url = url
        }
        runtime.songs = {
          background: active?.url,
          music: active?.mp3Url,
          // music: '/m1.mp3'
        }
        console.log(runtime.songs, getVoicePartInfo())
        console.log('backgroundUrl', active?.url)
        console.log('musicUrl', active?.mp3Url)
        state.activeDetail = { ...active }
        // console.log(runtime.songs)
        if (!runtime.audiosInstance) {
          runtime.audiosInstance = new audiosInstance(Object.values(runtime.songs) as string[])
        }
      }
    },
    back() {
      if (browserInfo.isApp) {
        postMessage({
          api: 'back',
        })
      } else {
        const parentId = stateParent.parentId || (1 as any)
        this.$router.replace({
          path: '/list/' + parentId,
        })
      }
    },
    async loader() {
      this.loading = true
      await this.FetchList()
      await this.FetchXml()
      // console.log('this.firstLib', this.firstLib, this.tree)
      console.log('loader', 'isSpecialBookCategory', this.isSpecialBookCategory)
      this.loading = false
    },
    async FetchList() {
      const parseSearch = (this as any).$router.currentRoute.value.params || {}
      try {
        const res = await request.get('/sysMusicScoreAccompaniment/queryPage', {
          params: {
            clientType: 'SMART_PRACTICE',
            sysMusicScoreId: parseSearch.id,
          },
        })
        // 设置为0 重置为-1
        state.subjectId = (res as any).data[0]?.subjectId || -1
        ;(window as any).DYSubjectId = (res as any).data[0]?.subjectId
        // 后台管理，教学伴奏预览专用参数
        const webParams: any = qs.parse(location.search)
        if (webParams.platform == 'web') {
          state.needTick = !!Number(webParams.isOpenMetronome)
        } else {
          state.needTick = (res as any).data[0].isOpenMetronome
        }

        state.enableEvaluation = !!(res as any).data[0]?.enableEvaluation
        this.error = false
        this.libs = [...res.data]
        // state.baseSpeed = this.firstLib?.originalSpeed
      } catch (error) {
        console.log(error, 'error')
        this.error = true
      }
    },
    async FetchCourseInfo() {
      try {
        const res = await request('/activityUserMapper/getStudentNoCourseInfo')
        this.courseNum = res.data.courseNum
        if (this.courseNum === 0) {
          this.courseShow = false
        }
      } catch (error) {}
    },
    async queryUserTrainingPlayTime() {
      try {
        const res = await request('/tempLittleArtistTrainingCamp/queryUserTrainingPlayTime')
        this.trainingPlayInfo = res.data
      } catch (error) {}
    },
    onEvaluationResult(evt: any) {
      setTimeout(() => {
        if (this.courseNum > 0 && evt?.score <= 80) {
          this.courseShow = true
        }
      })
    },
    punchSuccessfully(evt: any) {
      this.courseShow = false
      // 未参与活动或者今日已完成
      if (!this.trainingPlayInfo || !this.trainingPlayInfo.isFinish) {
        return
      }
      // 大于20分钟表示打卡成功
      if (evt && evt.totalPlayTimeOfCurrentDate > 1200 && !this.dataed) {
        this.dataed = true
        setTimeout(() => {
          this.dakaShow = true
        }, 500)
      }
    },
    async FetchXml() {
      this.xmlStatus = 'init'
      try {
        const res = await request.get('/sysMusicScoreCategories/queryTree', {
          params: {
            parentId: 0,
            // 后台详情忽略是否启用分类
            enable: getRequestHostname() !== '/api-web',
          },
        })
        this.tree = res.data
        this.isSpecialBookCategory = !idIsInClassIds(this.tree, this.firstLib?.parentCategoriesId)
      } catch (error) {}
      try {
        const res = await requestOrigin.get(this.firstLib.xmlUrl, {
          //'/xml.xml', {
          // const res = await requestOrigin.get('/xml.xml', {
          mode: 'cors',
        })
        let partName = this.$route.query['part-index'] as string
        const partIndex = partName ? parseInt(partName) : 0
        state.partIndex = partIndex

        const parseXmlInfo = getCustomInfo(res)
        this.parseXmlInfo = parseXmlInfo
        this.score = appoggianceFormate(onlyVisible(formatXML(parseXmlInfo.parsedXML), partIndex))

        // 仅在合奏与流行曲目中读取xml声部，否则使用后台设置的声部
        this.setMusicUrl()
        if (this.isSpecialBookCategory) {
          state.subjectId = getVoicePartInfo().subjectId
        }
        console.log('state.subjectId', state.subjectId, 'isSpecialBookCategory', this.isSpecialBookCategory)
        // console.log(this.score)
        this.xmlStatus = 'success'
        // ;(wholeValue + numerator / denominator) * 4 * (60 / baseSpeed)
      } catch (error) {
        this.xmlStatus = 'error'
      }
    },
    mainTouchStart(evt: TouchEvent) {
      if (state.maskStatus) {
        evt.preventDefault()
        evt.stopPropagation()
        evt.stopImmediatePropagation()
      }
    },
    async getSvgHeight() {
      console.log('getSvgHeight', this.svgHeight)
      // state.renderLoading = false
      if (this.svgHeight > 0) {
        // let hint: any = Toast({
        //   duration: 0,
        //   message: '加载中...'
        // })
        // state.renderLoading = true
        if (runtime.osmd) {
          runtime.osmd.container.style.width = document.querySelector('.' + styles.main)?.clientWidth + 'px'
        }
        await runtime.osmd?.render()
        state.times = getAllNodes(runtime.osmd)
        state.renderLoading = false
        console.log('renderLoading', state.renderLoading)
        // if (hint) {
        //   hint.close()
        //   hint = null
        // }
      }
      setTimeout(() => {
        this.svgHeight =
          (runtime.osmd?.container as HTMLDivElement)?.querySelector('svg')?.getBoundingClientRect().height || 0
      })
    },
    openTv() {
      this.tvShow = true
    },
    stop() {
      if (player) {
        player.stop()
      }
      RuntimeUtils.resetPlayStatus()
      RuntimeUtils.clearIntervalTimeline()
    },
    rerenderMusicSheet() {
      if (this.svgHeight <= 0) {
        this.svgHeight = 1
      }
      if (this.fingeringDetail && this.fingeringDetail.direction === 'vertical') {
        state.renderLoading = true
        setTimeout(() => this.getSvgHeight())
      }
    },
    startEvaluatingEvent() {
      if (SettingState.sett.fingering) {
        this.rerenderMusicSheet()
      }
    },
    audition() {
      postMessage({
        api: 'openWebView',
        content: {
          url: location.origin + '/#/auditionLive',
          orientation: 1,
          isHideTitle: false,
          statusBarTextColor: false,
          isOpenLight: false,
        },
      })
    },
    visibilitychange() {
      if (document.visibilityState !== 'hidden' && this.courseNum > 0) {
        this.FetchCourseInfo()
      }
    },
  },
  async mounted() {
    if (getRequestHostname() === '/api-student') {
      this.queryUserTrainingPlayTime()
      this.FetchCourseInfo()
    }
    setTongjiTag(['_trackEvent', '云练习', '切换页面', '详情页面'])
    MusicScoreEvent.once('loaded', () => (this.rendered = true))
    await this.loader()
    listenerMessage('startPlay', () => {
      // this.start()
      RuntimeUtils.changeMode('background')
      RuntimeUtils.setPlayState()
    })
    listenerMessage('stopPlay', () => {
      // this.stop()
      RuntimeUtils.resetPlayStatus()
      RuntimeUtils.clearIntervalTimeline()
      RuntimeUtils.setCurrentTime(0)
      RuntimeUtils.stopTick()
    })
    RuntimeUtils.event.on('settingFingeringChange', this.rerenderMusicSheet)
    document.addEventListener('visibilitychange', this.visibilitychange, false)
    RuntimeUtils.event.on('updatePlayTimeSuccess', this.punchSuccessfully)
    RuntimeUtils.event.on('onEvaluationResult', this.onEvaluationResult)
    btnEvent.on('startEvaluating', this.startEvaluatingEvent)
    if (SettingState.sett.camera) {
      setTimeout(() => {
        postMessage({
          api: 'openCamera',
        })
      }, 1000)
    }
  },
  unmounted() {
    RuntimeUtils.event.off('settingFingeringChange', this.rerenderMusicSheet)
    RuntimeUtils.event.off('updatePlayTimeSuccess', this.punchSuccessfully)
    RuntimeUtils.event.off('onEvaluationResult', this.onEvaluationResult)
    btnEvent.off('startEvaluating', this.startEvaluatingEvent)
    document.removeEventListener('visibilitychange', this.visibilitychange, false)
  },
  render() {
    // console.log(this.fingeringInfo, this.viewInfo, this.fingeringWidth, this.fingeringStatus)
    const { mode }: any = this.$route.query || ''
    const partName = state.partListNames[state.partIndex]
    const calcWidh = this.fingeringInfo?.width || '0px'
    const calcRight = this.fingeringInfo?.paddingRight || '0px'
    const calcLeft = this.fingeringInfo?.paddingLeft || '0px'
    const calcRightWidth = this.fingeringInfo?.direction === 'vertical' ? '20px' : '0px'

    const partInfo = this.isSpecialBookCategory && partName ? ' - ' + getVoiceChinesName(partName) : ''
    return (
      <NetworkError
        isError={this.error}
        loading={this.fullLoading}
        onReload={() => {
          this.loader()
        }}
      >
        {this.xmlStatus !== 'error' ? (
          this.loading ? (
            <Skeleton class={styles.skeleton} row={6} />
          ) : (
            <div
              class={classnames(styles.detail, {
                [styles.homework]: SettingState.sett.camera || mode === 'homework',
                eyeProtection: SettingState.sett.eyeProtection,
                ipad: browserInfo.iPad,
                hideCursor: metronomeData.cursorMode === 3,
              })}
              key={this.firstLib?.examSongId}
            >
              <div class={styles.header} style={{ minHeight: '15px' }}>
                <Header
                  title={this.firstLib.examSongName + partInfo}
                  songs={{
                    background: this.firstLib?.mp3Url,
                    music: this.firstLib?.url,
                  }}
                  onActiveKeyChange={(key: number) => (state.fixedKey = key)}
                  lib={this.firstLib}
                  openLib={() => (this.libshow = true)}
                  openList={() => {
                    this.listShow = true
                    this.listShowed = true
                  }}
                />
              </div>
              {/* 评测Tips提示 */}
              <EvaluatingTips />
              <div
                class={classnames(styles.wraper, this.fingeringInfo ? styles[this.fingeringInfo.direction] : '')}
                style={{
                  marginLeft: state.isSpecialShapedScreen ? state.notchHeight / 2 + 'px' : 'auto',
                }}
              >
                <div
                  class={styles.main}
                  ref="main"
                  style={{
                    position: 'relative',
                    background: this.needFingeringLoadAndLoaded ? '' : 'transparent',
                    paddingTop: runtime.evaluatingTips ? '40PX' : '',
                    width: this.fingeringInfo
                      ? `calc(100% - ${calcWidh} - ${calcRight} - ${calcLeft} - ${calcRightWidth})`
                      : '',
                  }}
                  onTouchmove={this.mainTouchStart}
                >
                  {this.score ? (
                    // showPartNames={this.firstLib?.subjectId == 23}
                    // EngravingRules={{
                    //   MinSkyBottomDistBetweenSystems: this.firstLib?.subjectId == 23 ? 5 : 2
                    // }}
                    this.fingeringStatus !== 'init' ? (
                      <MusicScore
                        class={classnames(styles.score)}
                        score={this.score}
                        showPartNames={state.isPercussion}
                        opotions={{
                          // 如果是考级分类就显示速度信息否则不显示
                          drawMetronomeMarks: this.isSpecialBookCategory && this.parseXmlInfo.showSpeed,
                        }}
                        EngravingRules={{
                          MinSkyBottomDistBetweenSystems: state.isPercussion ? 5 : 2,
                          DYWorkSpecial: this.isSpecialBookCategory,
                        }}
                        onRerender={(osmd: any) => {
                          if (!this.fingeringInfo) {
                            // this.getSvgHeight()
                          }
                          if (osmd) {
                            const route = (this as any).$route
                            const saveSpeed = (store.get('speeds') || {})[route.params.id]
                            console.log('osmd', osmd)
                            runtime.osmd = osmd
                            if (this.isSpecialBookCategory) {
                              const bpm = osmd.sheet.userStartTempoInBPM
                              state.activeSpeed = saveSpeed || bpm || 100
                              state.baseSpeed = bpm || 100
                              state.activeDetail.originalSpeed = state.baseSpeed
                              // console.log(state.activeSpeed, state.baseSpeed)
                            } else {
                              state.activeSpeed = this.firstLib?.speed
                              state.baseSpeed = this.firstLib?.originalSpeed
                            }
                            console.table({
                              activeSpeed: state.activeSpeed,
                              baseSpeed: state.baseSpeed,
                            })
                            // state.times = getAllNodes(runtime.osmd)
                          } else {
                            this.xmlStatus = 'error'
                          }
                        }}
                      />
                    ) : null
                  ) : null}
                  {/* 小节覆盖层 */}
                  <Section
                    style={{
                      position: 'absolute',
                      width: '100%',
                      height: this.svgHeight + 'px',
                    }}
                  />
                  {/* xml加载动画 */}
                  <Skeleton
                    style={{
                      display: !runtime.osmd ? '' : 'none',
                      position: 'absolute',
                      left: '0',
                      right: '0',
                      top: '-30px',
                      matginTop: '0',
                    }}
                    class={styles.skeleton}
                    row={6}
                  />
                </div>
                {/* 节拍器弹窗 */}
                <TickPopup score={this.score} />
                {/* 指法展示 */}
                <FingeringInfo
                  ref="FingeringInfo"
                  firstLib={this.firstLib}
                  fingeringInfo={this.fingeringInfo}
                  viewInfo={this.viewInfo}
                  loaded={() => {
                    setTimeout(() => {
                      this.fingeringLoaded = true
                      // this.getSvgHeight()
                    })
                  }}
                />
              </div>
            </div>
          )
        ) : (
          <Empty class={styles.empty} image="error" description="曲谱信息获取错误">
            <Button class={styles.backbutton} onClick={this.back} type="primary" plain hairline color="#01c1b5">
              返回
            </Button>
          </Empty>
        )}
        {runtime.evaluatingStatus && !state.renderLoading ? <Evaluating /> : null}
        {mode !== 'homework' ? (
          <div class={styles.rightCtrls}>
            <TvPopup />
          </div>
        ) : null}
        {this.rendered && mode !== 'homework' ? <Tips /> : null}
        <Popup
          show={this.courseShow}
          round
          onClose={() => (this.courseShow = false)}
          teleport="body"
          position="top"
          overlay={false}
          style={{
            background: 'transparent',
            textAlign: 'center',
            paddingBottom: '20PX',
            // display: 'inline-block',
            left: '50%',
            transform: 'translateX(-50%)',
            paddingLeft: '20px',
            paddingRight: '20px',
            width: 'auto',
            zIndex: '9999',
          }}
        >
          <div class={styles.course}>
            <p style={{ whiteSpace: 'pre' }}>
              练习遇到问题啦？您还有 <span>{this.courseNum}</span> 节随心学真人辅导课哦～{' '}
            </p>
            <Button round class={styles.btn} onClick={this.audition}>
              立即约课
            </Button>
            <Button round class={styles.closebtn} onClick={() => (this.courseShow = false)} icon="cross"></Button>
          </div>
        </Popup>
        <Popup show={this.dakaShow} round onClose={() => (this.dakaShow = false)} teleport="body">
          {/* <div class={styles.course}>
            <p>
              <img src={DakaIcon} />
              今天已经打卡成功啦，再接再厉！
            </p>
            <Button round class={classnames(styles.btn, styles.btn2)} onClick={this.audition}>
              继续练习({this.dakaShowTime}s)
            </Button>
            <Button
              round
              class={styles.closebtn}
              onClick={() => (this.courseShow = false)}
              icon="cross"
            ></Button>
          </div> */}
          <div class={styles.daka}>
            <img src={DakaIcon} />
            <h4>打卡成功</h4>
            <p>今天已经打卡成功啦，再接再厉！</p>
            <Button round class={classnames(styles.btn, styles.btn2)} onClick={() => (this.dakaShow = false)}>
              继续练习({this.dakaShowTime}s)
            </Button>
          </div>
        </Popup>
        <Popup
          show={this.listShow}
          round
          closeable
          teleport="body"
          position="left"
          closeIcon="arrow-left"
          lazyRender={false}
          class={styles.listPopup}
          style={{ height: '100%', width: '50%' }}
          closeOnPopstate={true}
          onClickCloseIcon={() => {
            this.listShow = false
          }}
          onClickOverlay={() => {
            this.listShow = false
          }}
          onClosed={() => {
            this.listShow = false
            this.listShowed = false
          }}
        >
          {this.listShowed ? <MusicList /> : null}
        </Popup>
      </NetworkError>
    )
  },
})
