<template>
  <view class="container" style="background-color: #000; position: relative">
    <view style="width: 100%; height: 200px">
      <!-- 倒计时提示 -->
      <view v-if="showCountDown" class="showCountDownd">
        <view class="">
          <text class="nextText">{{ secondCountDown }} 秒后播放下一个视频</text><br />
          <view>
            <text class="cancelNext" @click="hideNextVideo">取消下一个</text>
          </view>
        </view>
      </view>

      <!-- 错误提示 -->
      <view
        v-if="show"
        style="height: 100%;display: flex;align-items:center;justify-content:center;color: #fff;font-size: 38rpx;text-align: center;"
      >
        {{ errorTxt }}
      </view>

      <!-- 视频播放器容器 -->
      <div
        v-else
        style="background-color: #000"
        ref="videoContent"
        @tap="renderScript.handleClick"
        id="url-player-test"
        :videoData="videoData"
        :winWidth="winWidth"
        :winHeight="winHeight"
        :currentVideoList="currentVideoList"
        :firstTime="firstTime"
        :isfresh="isfresh"
        :platform="platform"
        :isSetFirstTime="isSetFirstTime"
        :isChange="isChange"
        :change:videoData="renderScript.receiveMsg"
        :replayVideoFlag="replayVideoFlag"
        :change:winWidth="renderScript.receiveWinWidth"
        :change:winHeight="renderScript.receiveWinHeight"
        :change:firstTime="renderScript.receiveFirstTime"
        :change:replayVideoFlag="renderScript.receiveReplayVideoFlag"
        :change:isSetFirstTime="renderScript.receiveisSetFirstTime"
        :change:isfresh="renderScript.receiveIsfresh"
        :change:platform="renderScript.receiveplatform"
        :change:isChange="renderScript.receiveIsChange"
        :change:currentVideoList="renderScript.receiveVideoList"
      ></div>

      <!-- 隐藏的通信元素 -->
      <div @tap="renderScript.emitData" ref="videoContent1" v-show="false" class="videoContent1">
        直接调用renderjs中的emitData的方法,传递当前播放时长
      </div>
      <div @tap="renderScript.endEmitData" ref="videoContent2" v-show="false" class="videoContent2">
        监听结束方法，记录播放时长
      </div>
      <div @tap="renderScript.changeVideoData" ref="videoContent3" v-show="false" class="videoContent3">
        监听切换视频方法
      </div>
      <div @tap="renderScript.emitSetData" ref="videoContent4" v-show="false" class="videoContent4">
        监听切换视频方法
      </div>
      <div @tap="renderScript.emitopenShow" ref="videoContent5" v-show="false" class="videoContent5">
        打开视频提示
      </div>
      <div @tap="renderScript.emitLoadNextVideo" ref="videoContent6" v-show="false" class="videoContent6">
        播放下一条
      </div>
      <div @tap="renderScript.emitHideNextVideo" ref="videoContent7" v-show="false" class="videoContent7">
        隐藏播放下一条界面
      </div>
      <div @tap="renderScript.emitReplayVideoFlagFalse" ref="videoContent8" v-show="false" class="videoContent8">
        隐藏播放下一条界面
      </div>
      <div @tap="renderScript.emitUnlockChangeVideo" ref="videoContent9" v-show="false" class="videoContent9">
        释放切换键锁
      </div>

      <!-- 全屏按钮 -->
      <div class="fullScreenButton-container">
        <div
          :class="`prism-fullscreen-btn ${isFullScreen ? 'fullscreen' : ''}`"
          @tap="renderScript.changeVideoScreen"
        ></div>
      </div>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
import { videoApi } from '@/api/modules/video'
import type {
  IVideoInfo,
  IVideoData,
  IRecordTimeData,
  IScreenChangeData,
  IOpenShowData,
  PlatformType
} from '@/types/video'

// Props 定义
interface Props {
  currentVideo?: IVideoInfo
  currentVideoList?: IVideoInfo[]
  videoTitle?: string
  secondCountDown?: number
  noRecored?: boolean
}

const props = defineProps<Props>()

// 使用 computed 来处理默认值
const secondCountDown = computed(() => props.secondCountDown ?? 10)
const noRecored = computed(() => props.noRecored ?? false)

// Emits 定义
const emit = defineEmits<{
  'child-event': [timer: any]
  'changeScreen': [isFullScreen: boolean]
  'changeScreenLoading': [loading: boolean]
  'hideNextVideo': []
  'startNextVideoCountDown': []
  'unlockChangeVideo': []
}>()

// 获取当前实例
const instance = getCurrentInstance()

// 响应式数据
// 响应式数据
const reaquestFlag = ref(false)
const show = ref(false)
const platform = ref<PlatformType>(null)
const isFullScreen = ref(false)
const isfresh = ref(false)
const isChange = ref(false)
const isControl = ref(true)
const timer = ref<any>(null)
const replayVideoFlag = ref(false)
const showCountDown = ref(false)
const playEndBlank = ref(false)
const videoList = ref<any[]>([])
const replayVideoLock = ref(false)
const firstTime = ref(0)
const options = ref<any>({})
const playAuth = ref('')
const currentTime = ref<string>('')
const videoId = ref('')
const videoData = ref<IVideoData>({} as IVideoData)
const isSetFirstTime = ref(false)
const screenType = ref<any>(null)
const videoUrl = ref<string | null>(null)
const errorTxt = ref('此设备暂不支持观看当前视频请移步到安卓手机进行学习！')
const winWidth = ref(0)
const winHeight = ref(0)
const changeVideoLock = ref(false)

// 方法: 重播视频
const replayVideo = () => {
  if (!replayVideoLock.value) {
    replayVideoLock.value = true
    getLive(true, props.currentVideo)
    console.log('重播视频:', props.currentVideo.id)
    hideNextVideo()
    replayVideoFlag.value = true
    setTimeout(() => {
      replayVideoLock.value = false
    }, 1000)
  }
}

// 方法: 重置重播标志
const replayVideoFlagFalse = () => {
  console.log('复原replayVideoFlag', replayVideoFlag.value)
  replayVideoFlag.value = false
}

// 方法: 解锁视频切换
const UnlockChangeVideo = () => {
  emit('unlockChangeVideo')
}

// 方法: 隐藏下一个视频提示
const hideNextVideo = () => {
  console.log(11111111111111)
  showCountDown.value = false
  playEndBlank.value = false
  emit('hideNextVideo')
}

// 方法: 加载下一个视频
const loadNextVideo = () => {
  playEndBlank.value = true
  const _list = [...props.currentVideoList].map(item => item.id)
  
  const thisIndex = _list.findIndex(item => item == props.currentVideo.id)
  console.log('播放列表', _list, props.currentVideo.id, thisIndex)
  
  if (thisIndex < props.currentVideoList.length - 1) {
    showCountDown.value = true
    emit('startNextVideoCountDown')
  }
}

// 方法: 显示错误提示
const openShow = (data: IOpenShowData) => {
  errorTxt.value = data.msg || '此设备暂不支持观看当前视频请移步到安卓手机进行学习'
  show.value = true
}

// 方法: 切换视频数据
const changeVideoData = () => {
  show.value = false
  isChange.value = false
}

// 方法: 切换视频
const changeVideo = async (data: IVideoInfo) => {
  console.log('changeVideo+++++++++', data)
  currentTime.value = ''
  firstTime.value = 0
  isSetFirstTime.value = false
  
  // 先设置为 false，然后在 getData 中切换为 true 来触发 renderjs
  isChange.value = false
  
  await getLive(true, data)
}

// 方法: 屏幕状态改变
const screenChange = (data: IScreenChangeData) => {
  console.log('status at line 这是当前的状态158:', data.status, data.primary)
  isFullScreen.value = !data.status
  emit('changeScreen', isFullScreen.value)
}

// 方法: 控制器显示隐藏
const controlChange = (e: any) => {
  isControl.value = e.detail.show
}

// 方法: 播放器初始化
const init = async (data: any, isChangeParam: boolean) => {
  try {
    console.log('===== init() 方法被调用 =====', data)
    show.value = false
    
    // 获取平台信息
    // @ts-ignore
    platform.value = (typeof uni !== 'undefined' && uni.getSystemInfoSync) 
      ? uni.getSystemInfoSync().platform === 'ios' ? 'ios' : 'android'
      : 'h5'
    
    isfresh.value = true
    isChange.value = false  // 先设置为 false，后面切换时才能触发 change
    console.log('初始化播放器, 平台:', platform.value)
    
    // 获取本地存储的播放记录
    try {
      const storedList = uni.getStorageSync('videoOssList')
      if (storedList) {
        videoList.value = JSON.parse(storedList)
      }
    } catch (e) {
      console.warn('读取本地播放记录失败:', e)
      videoList.value = []
    }
    
    options.value = data.currentVideo || {}
    videoId.value = options.value.video || options.value.videoId || ''
    console.log('视频ID:', videoId.value)
    
    await getLive(isChangeParam, options.value)
  } catch (error) {
    console.error('初始化播放器失败:', error)
    show.value = true
    errorTxt.value = '播放器初始化失败'
  }
}

// 方法: 配置播放项
const getData = async (data: IVideoData, isChangeParam: boolean) => {
  try {
    if (!isSetFirstTime.value) {
      const netWork = data.userCourseVideoPositionEntity?.position || 0
      let list: any[] = []
      
      // 安全地获取本地存储
      try {
        const storedList = uni.getStorageSync('videoOssList')
        if (storedList) {
          list = JSON.parse(storedList)
        }
      } catch (e) {
        console.warn('读取本地播放记录失败:', e)
        list = []
      }
      
      const index = list.findIndex((e) => e.id == data.id)
      console.log('视频ID:', data.id, '本地记录索引:', index)
      
      // 计算初始播放时间(取本地和服务器的最大值)
      if (netWork > 0) {
        if (index >= 0) {
          firstTime.value = Math.max(list[index].time || 0, netWork)
        } else {
          firstTime.value = netWork
        }
      } else {
        if (index >= 0) {
          firstTime.value = list[index].time || 0
        } else {
          firstTime.value = 0
        }
      }
      
      videoData.value = {
        ...data,
        firstTime: firstTime.value
      }
      
      console.log('初始播放时间:', firstTime.value)
      console.log('videoData 已设置:', videoData.value)
      console.log('videoData.value.playAuth:', videoData.value.playAuth)
      console.log('videoData.value.videoId:', videoData.value.videoId)
      
      // 触发 renderjs 更新 - 切换 isChange 的值（从 false 到 true）
      isChange.value = true
      console.log('触发 isChange:', isChange.value)
      
      // 强制更新以触发 renderjs 响应
      if (instance?.proxy) {
        instance.proxy.$forceUpdate()
        console.log('已调用 $forceUpdate()')
      }
      
      // 安全地保存到本地存储
      try {
        uni.setStorageSync('videoOssList', JSON.stringify(list))
      } catch (e) {
        console.warn('保存本地播放记录失败:', e)
      }
    }
    isSetFirstTime.value = true
  } catch (error) {
    console.error('配置播放数据失败:', error)
    // 设置默认值
    videoData.value = { ...data, firstTime: 0 }
    firstTime.value = 0
    isSetFirstTime.value = true
  }
}

// 方法: 记录播放时间到本地
const recordTime = (data: IRecordTimeData) => {
  currentTime.value = data.time
  
  let list: any[] = []
  if (uni.getStorageSync('videoOssList')) {
    list = JSON.parse(uni.getStorageSync('videoOssList'))
  }
  
  const index = list.findIndex((e) => e.id == videoData.value.id)
  
  if (list.length > 0 && index >= 0) {
    list[index] = {
      ...videoData.value,
      time: data.time
    }
  } else {
    list.push({
      ...videoData.value,
      time: data.time
    })
  }
  
  uni.setStorageSync('videoOssList', JSON.stringify(list))
}

// 方法: 获取播放凭证
const getLive = async (isChangeParam: boolean, newVideoData?: IVideoInfo) => {
  if (reaquestFlag.value) {
    uni.showToast({
      title: '操作太快了,歇一下吧',
      icon: 'none'
    })
    return
  }
  
  reaquestFlag.value = true
  isfresh.value = false
  
  let data: any = { ...options.value }
  if (isChangeParam && newVideoData) {
    data = { ...newVideoData }
  }
  
  try {
    const res = await videoApi.checkVideo(data)
    console.log('获取播放凭证成功', res.video)
    reaquestFlag.value = false
    
    // iOS 兼容性处理
    if (platform.value === 'ios') {
      if (res.video.type == '1' && (!res.video.m3u8Url || res.video.m3u8Url === '')) {
        show.value = true
        errorTxt.value = '抱歉，苹果手机不支持此加密视频格式'
        
        // 记录 iOS 不支持的视频
        try {
          await videoApi.addErrorCourse({
            chapterId: res.video.chapterId || 0,
            videoId: res.video.id,
            sort: res.video.sort || 0
          })
          console.log('记录iOS不支持的视频成功')
        } catch (error) {
          console.log('记录iOS不支持的视频失败:', error)
        }
        
        UnlockChangeVideo()
        
        uni.showModal({
          content: '抱歉，苹果手机不支持此加密视频格式，您可以在安卓端观看本视频',
          confirmText: '知道了',
          showCancel: false
        })
        return
      }
    }
    
    let videoDataTemp: any = { ...res.video }
    
    if (res.video.type == '1') {
      const playAuthValue = (res.video.playAuth || '').replace(/=/g, '')
      videoDataTemp = {
        ...videoDataTemp,
        videoId: res.video.video || res.video.videoId,
        playAuth: playAuthValue
      }
      playAuth.value = playAuthValue
      await getData(videoDataTemp, isChangeParam)
    } else {
      console.log('普通视频处理', res.video)
      videoDataTemp = {
        ...videoDataTemp,
        playAuth: String(new Date().getTime())
      }
      await getData(videoDataTemp, isChangeParam)
    }
    
    console.log('视频数据处理完成', videoDataTemp)
  } catch (e) {
    console.error('获取播放凭证失败:', e)
    reaquestFlag.value = false
    show.value = true
    errorTxt.value = '获取播放地址失败'
  }
}

// 方法: 处理播放结束
const handleEnd = async () => {
  const list = JSON.parse(uni.getStorageSync('videoOssList'))
  const data = list.find((e: any) => e.id == videoData.value.id)
  currentTime.value = data.time
  console.log('this.currentTime at line 这是结束的时候掉的存储视频:', currentTime.value)
  await setVideoTime()
}

// 方法: 保存播放时间到服务器
const setVideoTime = async (time?: number) => {
  console.log('是否走了存储视屏,' + videoData.value.id, time, currentTime.value)
  const _time = time || currentTime.value
  
  const data = {
    videoId: videoData.value.id,
    position: _time
  }
  
  try {
    const res = await videoApi.saveCoursePosition(data)
    console.log('存储视屏时长接口返回信息', res)
  } catch (e) {
    console.log('存储进度报错', e)
  }
}

// 方法: 设置初始播放时间
const setVideoFirtsetTime = async (data: { time: number }) => {
  currentTime.value = firstTime.value
  console.log('setVideoFirtsetTime播放时间:', data.time)
  await setVideoTime(data.time)
}

// 监听 timer 变化
watch(timer, (newValue) => {
  emit('child-event', newValue)
})

// 生命周期: 挂载
onMounted(() => {
  console.log('视频播放器组件已挂载')
  
  // 获取窗口尺寸
  try {
    const systemInfo = uni.getSystemInfoSync()
    winWidth.value = systemInfo.windowWidth
    winHeight.value = systemInfo.windowHeight
  } catch (e) {
    console.warn('获取系统信息失败:', e)
  }
})

// 生命周期: 卸载前
onBeforeUnmount(async () => {
  console.log('视频播放器组件即将卸载')
  
  try {
    // 保存播放进度
    await handleEnd()
    
    // 清除定时器
    if (timer.value) {
      clearInterval(timer.value)
      timer.value = null
    }
    
    // 恢复屏幕方向
    if (typeof plus !== 'undefined' && plus.screen) {
      plus.screen.lockOrientation('portrait-primary')
    }
  } catch (error) {
    console.error('组件卸载处理失败:', error)
  }
})

// 暴露方法给父组件
defineExpose({
  init,
  changeVideo,
  replayVideo,
  hideNextVideo,
  loadNextVideo
})
</script>


<script module="renderScript" lang="renderjs">
// RenderJS 模块 - 保持 Vue2 写法
var videoData = null
var currentVideoList = null
var _seconds = 0
var ReplayVideoFlag = false
var curStatus = null
var diff = 0
var pauseTime = 0
var myplayer = undefined

// jQuery 在 RenderJS 中通过全局变量访问
var $ = window.jQuery || window.$

export default {
  mounted() {
    console.log(this.options, '这是monted')
    this.loadWebPlayerSDK()
  },
  
  data() {
    return {
      player: null,
      videoTimer: null
    }
  },
  
  methods: {
    handleClick(event, ownerInstance) {
      console.log('是否了走了点击video事件', event)
    },
    
    emitData(event, ownerInstance) {
      ownerInstance.callMethod('recordTime', {
        time: _seconds,
        status: curStatus
      })
    },
    
    receiveReplayVideoFlag(newValue, oldValue, ownerVm, vm) {
      console.log('newValue重新播放', newValue, myplayer)
      ReplayVideoFlag = newValue
      if (newValue) {
        $('.videoContent8').click()
      }
    },
    
    emitReplayVideoFlagFalse(event, ownerInstance) {
      ownerInstance.callMethod('replayVideoFlagFalse')
    },
    
    emitUnlockChangeVideo(event, ownerInstance) {
      ownerInstance.callMethod('UnlockChangeVideo')
    },
    
    async receiveFirstTime(newValue, oldValue, ownerVm, vm) {
      // 接收 firstTime 变化
    },
    
    async receiveisSetFirstTime(newValue, oldValue, ownerVm, vm) {
      console.log('是否刚开始设置播放时间', newValue, this.firstTime, myplayer)
    },
    
    emitSetData(event, ownerInstance) {
      ownerInstance.callMethod('setVideoFirtsetTime', {
        time: _seconds
      })
    },
    
    emitHideNextVideo(event, ownerInstance) {
      ownerInstance.callMethod('hideNextVideo')
    },
    
    emitLoadNextVideo(event, ownerInstance) {
      ownerInstance.callMethod('loadNextVideo')
    },
    
    emitopenShow(event, ownerInstance) {
      ownerInstance.callMethod('openShow', {
        msg: '播放出错啦！'
      })
    },
    
    // 全屏切换事件
    changeVideoScreen(event, ownerInstance) {
      var status = myplayer.fullscreenService.getIsFullScreen()
      console.log('this.$platform--------', this.platform)
      
      if (this.platform != 'ios') {
        ownerInstance.callMethod('screenChange', {
          status: status,
          primary: status ? 'portrait' : 'landscape'
        })
      }
      
      if (status) {
        if (this.platform != 'ios') {
          console.log('恢复竖版')
          setTimeout(() => {
            plus.screen.lockOrientation('portrait-primary')
            myplayer.fullscreenService.cancelFullScreen()
          }, 100)
        }
      } else {
        myplayer.fullscreenService.requestFullScreen()
        if (this.platform != 'ios') {
          setTimeout(() => {
            plus.screen.lockOrientation('landscape-primary')
          }, 100)
        } else {
          console.log('不要旋转, 使用原生全屏')
        }
      }
    },
    
    changeVideoData(event, ownerInstance) {
      ownerInstance.callMethod('changeVideoData')
    },
    
    endEmitData(event, ownerInstance) {
      ownerInstance.callMethod('handleEnd')
    },
    
    // renderjs阿里云播放器引入与配置
    getLive() {
      console.log('阿里云播放器引入与配置:', this.firstTime, videoData)
      
      $('#url-player-test').empty()
      pauseTime = 0
      
      var fullScreenButtonComponent = Aliplayer.Component({
        init: function(status, toAddress) {
          this.fullScreenStatus = status
          this.$html = $('.fullScreenButton-container')
        },
        
        createEl: function(el) {
          this.$html.find('.ad').attr('src', this.adAddress)
          var $adWrapper = this.$html.find('.ad-wrapper')
          $adWrapper.attr('href', this.toAddress)
          $adWrapper.click(function() {})
          $(el).find('.prism-time-display').after(this.$html)
        },
        
        playing: function(player, e) {
          this.$html.show()
        }
      })
      
      var playerOptions = {
        id: 'url-player-test',
        width: '100%',
        height: '100%',
        qualitySort: 'asc',
        cover: '',
        autoplay: true,
        isLive: false,
        rePlay: false,
        playsinline: true,
        controlBarVisibility: 'hover',
        useH5Prism: true,
        components: [
          {
            name: 'adComponent',
            type: fullScreenButtonComponent,
            args: ['http://101.201.146.165:8088/Pf-EH/statics/uploadFile/2024-05-10/b0f420c7-9178-41ad-9dd6-f59a64a6e190.png']
          },
          {
            name: 'RateComponent',
            type: AliPlayerComponent.RateComponent
          }
        ],
        skinLayout: [
          { name: 'bigPlayButton', align: 'blabs', x: 30, y: 80 },
          { name: 'H5Loading', align: 'cc' },
          { name: 'errorDisplay', align: 'tlabs', x: 0, y: 0 },
          { name: 'infoDisplay' },
          { name: 'tooltip', align: 'blabs', x: 0, y: 56 },
          { name: 'thumbnail' },
          {
            name: 'controlBar',
            align: 'blabs',
            x: 0,
            y: 0,
            children: [
              { name: 'progress', align: 'blabs', x: 0, y: 44 },
              { name: 'playButton', align: 'tl', x: 15, y: 12 },
              { name: 'timeDisplay', align: 'tl', x: 10, y: 7 },
              { name: 'prism-speed-selector', align: 'tr', x: 15, y: 12 },
              { name: 'volume', align: 'tr', x: 5, y: 10 }
            ]
          }
        ]
      }
      
      // 根据视频类型配置播放器
      console.log('视频类型判断:', 'type=', videoData.type, 'm3u8Url=', videoData.m3u8Url, 'videoUrl=', videoData.videoUrl)
      
      if (videoData.type == 1) {
        if (videoData.m3u8Url == null || videoData.m3u8Url == '') {
          console.log('这是私有加密的视频')
          if (this.platform == 'ios') {
            $('.videoContent5').click()
          } else {
            playerOptions = {
              ...playerOptions,
              vid: videoData.videoId,
              playauth: videoData.playAuth,
              encryptType: 1,
              playConfig: {
                EncryptType: 'AliyunVoDEncryption'
              }
            }
            console.log('配置私有加密播放器:', playerOptions)
          }
        } else if (videoData.m3u8Url != null && videoData.m3u8Url != '') {
          playerOptions = {
            ...playerOptions,
            source: videoData.m3u8Url
          }
          console.log('这是标准加密的视频', videoData.id, videoData.m3u8Url)
          console.log('播放器配置:', playerOptions)
        }
      } else {
        playerOptions = {
          ...playerOptions,
          source: videoData.videoUrl
        }
        console.log('这是没有加密的视频')
      }
      
      var player = new Aliplayer(playerOptions, function(player) {})
      this.player = player
      myplayer = player
      
      // 播放器事件监听
      player.on('ready', function() {
        console.log('播放器准备就绪，开始播放')
        player.play()
        $('.videoContent9').click()
      })
      
      player.on('play', function() {
        var videoDurationTimes = parseInt(player.getDuration())
        console.log('开始播放------', videoDurationTimes, pauseTime)
        $('.videoContent7').click()
        
        if (pauseTime > 0) {
          if (pauseTime == videoDurationTimes) {
            return
          } else {
            player.seek(pauseTime)
          }
        }
      })
      
      player.one('canplay', function() {
        var videoDurationTimes = parseInt(player.getDuration())
        console.log('视频总长度', parseInt(player.getDuration()), parseInt(player.getCurrentTime()))
        if (videoData.firstTime < videoDurationTimes) {
          player.seek(videoData.firstTime)
        } else {
          player.seek(0)
        }
      })
      
      myplayer.on('playing', function() {
        console.log('正在播放...')
      })
      
      myplayer.on('timeupdate', function() {
        var _time = parseInt(player.getCurrentTime())
        curStatus = player.getStatus()
        
        if (_seconds != _time) {
          _seconds = _time
          diff++
          if (diff % 60 === 0) {
            console.log('符合---------')
            $('.videoContent4').click()
            diff = 0
          }
          $('.videoContent1').click()
        }
      })
      
      myplayer.on('ended', function() {
        console.log('播放完毕')
        $('.videoContent2').click()
        $('.videoContent6').click()
      })
      
      player.on('pause', function() {
        pauseTime = parseInt(player.getCurrentTime())
        player.pause(true)
        console.log('触发暂停', pauseTime)
      })
      
      myplayer.on('error', function() {
        console.log('播放出错')
        $('.videoContent5').click()
      })
    },
    
    async receiveIsfresh(newValue) {
      console.log('是否走了刷新销毁方法:', myplayer)
      if (myplayer) {
        myplayer.dispose()
      }
    },
    
    async receiveplatform(newValue) {
      // 接收 platform 变化
    },
    
    async receiveIsChange(newValue) {
      console.log('receiveIsChange 触发:', newValue, 'videoData:', videoData, 'currentVideoList:', currentVideoList)
      if (newValue) {
        // 检查数据是否准备好
        if (videoData && videoData.playAuth && currentVideoList) {
          console.log('数据已准备好，开始播放')
          this.getLive()
        } else {
          console.log('数据未准备好，等待...', 'videoData:', !!videoData, 'playAuth:', !!videoData?.playAuth, 'currentVideoList:', !!currentVideoList)
        }
      }
    },
    
    receiveVideoList(newValue, oldValue, ownerVm, vm) {
      console.log('receiveVideoList 接收到视频列表:', newValue)
      currentVideoList = newValue
      // 只赋值，不触发播放，等待 isChange 触发
    },
    
    receiveMsg(newValue, oldValue, ownerVm, vm) {
      console.log('receiveMsg 接收到新数据:', newValue)
      videoData = newValue
      // 只赋值，不触发播放，等待 isChange 触发
    },
    
    receiveWinWidth(newValue, oldValue, ownerVm, vm) {
      console.log('newValue', newValue)
    },
    
    receiveWinHeight(newValue, oldValue, ownerVm, vm) {
      console.log('newValue', newValue)
    },
    
    checkValue() {
      console.log('checkValue 检查:', 'videoData=', videoData, 'currentVideoList=', currentVideoList)
      // 不再无限循环检查，而是等待 receiveMsg 和 receiveVideoList 触发
      if (videoData && videoData.playAuth && currentVideoList && currentVideoList.length > 0) {
        console.log('数据已准备好，开始播放')
        this.getLive()
      } else {
        console.log('等待数据准备...')
      }
    },
    
    loadWebPlayerSDK() {
      return new Promise((resolve, reject) => {
        // 先加载 jQuery
        if (!window.jQuery && !window.$) {
          const jquery_tag = document.createElement('script')
          jquery_tag.type = 'text/javascript'
          jquery_tag.src = 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js'
          jquery_tag.charset = 'utf-8'
          jquery_tag.onload = () => {
            // jQuery 加载完成后,更新全局变量
            $ = window.jQuery || window.$
            this.loadAliPlayerSDK(resolve, reject)
          }
          jquery_tag.onerror = () => {
            console.error('jQuery 加载失败')
            reject(new Error('jQuery 加载失败'))
          }
          document.body.appendChild(jquery_tag)
        } else {
          // jQuery 已存在
          $ = window.jQuery || window.$
          this.loadAliPlayerSDK(resolve, reject)
        }
      })
    },
    
    loadAliPlayerSDK(resolve, reject) {
      const s_tag = document.createElement('script')
      s_tag.type = 'text/javascript'
      s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js'
      s_tag.charset = 'utf-8'
      s_tag.onload = () => {
        const s_tag1 = document.createElement('script')
        s_tag1.type = 'text/javascript'
        s_tag1.src = 'https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js'
        s_tag1.charset = 'utf-8'
        s_tag1.onload = () => {
          this.checkValue()
          resolve()
        }
        s_tag1.onerror = () => {
          console.error('阿里云播放器组件加载失败')
          reject(new Error('阿里云播放器组件加载失败'))
        }
        document.body.appendChild(s_tag1)
      }
      s_tag.onerror = () => {
        console.error('阿里云播放器 SDK 加载失败')
        reject(new Error('阿里云播放器 SDK 加载失败'))
      }
      document.body.appendChild(s_tag)
      
      const l_tag = document.createElement('link')
      l_tag.rel = 'stylesheet'
      l_tag.href = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css'
      document.body.appendChild(l_tag)
    }
  }
}
</script>

<style scoped>
.cancelNext {
  display: inline-block;
  margin-right: 20rpx;
  border-radius: 10rpx;
  margin-top: 10rpx;
  padding: 10rpx 20rpx !important;
  background-color: #fff !important;
  color: #000;
  text-align: center;
  line-height: 50rpx;
}

.showCountDownd {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #fff;
  font-size: 38rpx;
  text-align: center;
  position: absolute;
  top: 0;
  right: 10rpx;
  z-index: 4;
}

.container {
  width: 100vw;
  height: auto;
}

.fullScreenButton-container {
  color: #fff;
  float: right;
  height: 35px;
  margin-top: 6px;
  margin-right: 5px;
  display: flex;
  align-items: center;
  position: relative;
}
</style>
