<template>
  <view class="simple-video-player">
    <view class="debug-info" v-if="showDebug">
      <text>平台: {{ platform }}</text>
      <text>状态: {{ status }}</text>
      <text>播放状态: {{ isPlaying ? '播放中' : '已暂停' }}</text>
    </view>
    
    <!-- APP平台使用web-view -->
    <!-- #ifdef APP-PLUS -->
    <web-view 
      v-if="webviewUrl"
      ref="videoWebview"
      :src="webviewUrl" 
      class="video-webview"
      @message="handleMessage"
    ></web-view>
    <!-- #endif -->
    
    <!-- H5平台直接使用iframe -->
    <!-- #ifdef H5 -->
    <view v-if="iframeUrl" class="h5-iframe-container">
      <iframe 
        :src="iframeUrl" 
        class="h5-iframe"
        allow="autoplay; fullscreen"
        allowfullscreen
      ></iframe>
    </view>
    <!-- #endif -->
    
    <!-- APP平台：使用 cover-view -->
    <!-- #ifdef APP-PLUS -->
    <cover-view class="control-buttons-cover" v-if="!loading && webviewUrl">
      <cover-view class="control-btn-cover play-btn-cover" @click="togglePlay">
        <cover-view class="btn-text">{{ isPlaying ? '⏸ 暂停' : '▶ 播放' }}</cover-view>
      </cover-view>
      <cover-view class="control-btn-cover refresh-btn-cover" @click="refresh">
        <cover-view class="btn-text">🔄 刷新</cover-view>
      </cover-view>
    </cover-view>
    <!-- #endif -->
    
    <!-- H5平台：使用普通按钮 -->
    <!-- #ifdef H5 -->
    <view class="control-buttons" v-if="!loading && iframeUrl">
      <button class="control-btn play-btn" @click="togglePlay">
        {{ isPlaying ? '⏸ 暂停' : '▶ 播放' }}
      </button>
      <button class="control-btn refresh-btn" @click="refresh">
        🔄 刷新
      </button>
    </view>
    <!-- #endif -->
    
    <view v-if="loading" class="loading">
      <text>{{ loadingText }}</text>
    </view>
    
    <view v-if="error" class="error">
      <text>{{ errorText }}</text>
      <button @click="retry">重试</button>
      
      <!-- 即使有错误也显示控制按钮 -->
      <view class="error-controls">
        <button class="control-btn play-btn" @click="togglePlay">
          {{ isPlaying ? '⏸ 暂停' : '▶ 播放' }}
        </button>
        <button class="control-btn refresh-btn" @click="refresh">
          🔄 刷新
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'EzvizVideoPlayerSimple',
  props: {
    showDebug: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      platform: '',
      status: '未初始化',
      webviewUrl: '',    // APP平台使用
      iframeUrl: '',     // H5平台使用
      loading: false,
      loadingText: '',
      error: false,
      errorText: '',
      config: null,
      isPlaying: true // 默认自动播放
    }
  },
  mounted() {
    this.detectPlatform()
  },
  methods: {
    detectPlatform() {
      // #ifdef H5
      this.platform = 'H5'
      // #endif
      
      // #ifdef APP-PLUS
      this.platform = 'APP'
      // #endif
      
      console.log('[简单播放器] 平台:', this.platform)
    },
    
    initEzuikit(config) {
      console.log('[简单播放器] 初始化:', config)
      
      if (!config || !config.accessToken || !config.play_url) {
        this.error = true
        this.errorText = '配置参数不完整'
        return
      }
      
      this.config = config
      this.loading = true
      this.loadingText = '正在加载播放器...'
      this.status = '加载中'
      
      try {
        // #ifdef APP-PLUS
        // APP平台：使用本地HTML文件
        const token = encodeURIComponent(config.accessToken)
        const url = encodeURIComponent(config.play_url)
        this.webviewUrl = `/static/html/ezviz-iframe.html?accessToken=${token}&playUrl=${url}`
        console.log('[简单播放器] APP平台 - 使用本地HTML文件')
        // #endif
        
        // #ifdef H5
        // H5平台：直接构建萤石云iframe URL
        this.iframeUrl = 'https://open.ys7.com/ezopen/h5/iframe?' +
          'url=' + encodeURIComponent(config.play_url) +
          '&accessToken=' + encodeURIComponent(config.accessToken) +
          '&width=100%' +
          '&height=100%' +
          '&autoplay=1' +
          '&audio=1' +
          '&controls=1'
        console.log('[简单播放器] H5平台 - 直接使用萤石云iframe')
        // #endif
        
        setTimeout(() => {
          if (this.loading) {
            this.loading = false
            this.status = '播放器已加载'
          }
        }, 3000)
        
      } catch (err) {
        console.error('[简单播放器] 错误:', err)
        this.error = true
        this.errorText = err.message
        this.loading = false
      }
    },
    
    handleMessage(event) {
      console.log('[简单播放器] 收到消息:', event)
      
      try {
        const data = event.detail.data
        const msg = Array.isArray(data) ? data[0] : data
        
        if (msg && msg.type === 'success') {
          this.loading = false
          this.status = '播放成功'
        } else if (msg && msg.type === 'error') {
          this.loading = false
          this.error = true
          this.errorText = msg.message || '播放失败'
        }
      } catch (err) {
        console.error('[简单播放器] 消息处理错误:', err)
      }
    },
    
    retry() {
      this.error = false
      this.errorText = ''
      if (this.config) {
        this.initEzuikit(this.config)
      }
    },
    
    // 切换播放/暂停
    togglePlay() {
      console.log('[简单播放器] 切换播放状态:', this.isPlaying ? '暂停' : '播放')
      
      // 通过重新加载URL来实现播放/暂停
      // 因为iframe播放器不支持直接控制，所以采用重新加载的方式
      if (this.isPlaying) {
        // 暂停：清空URL
        // #ifdef APP-PLUS
        this.webviewUrl = ''
        // #endif
        // #ifdef H5
        this.iframeUrl = ''
        // #endif
        
        this.isPlaying = false
        this.status = '已暂停'
        
        // 触发状态变化事件
        this.$emit('playStateChange', false)
      } else {
        // 播放：重新设置URL
        if (this.config) {
          // #ifdef APP-PLUS
          const token = encodeURIComponent(this.config.accessToken)
          const url = encodeURIComponent(this.config.play_url)
          this.webviewUrl = `/static/html/ezviz-iframe.html?accessToken=${token}&playUrl=${url}`
          // #endif
          
          // #ifdef H5
          this.iframeUrl = 'https://open.ys7.com/ezopen/h5/iframe?' +
            'url=' + encodeURIComponent(this.config.play_url) +
            '&accessToken=' + encodeURIComponent(this.config.accessToken) +
            '&width=100%' +
            '&height=100%' +
            '&autoplay=1' +
            '&audio=1' +
            '&controls=1'
          // #endif
          
          this.isPlaying = true
          this.status = '播放中'
          
          // 触发状态变化事件
          this.$emit('playStateChange', true)
        }
      }
      
      // 返回新的播放状态
      return this.isPlaying
    },
    
    // 获取当前播放状态
    getPlayState() {
      return this.isPlaying
    },
    
    // 刷新播放器
    refresh() {
      console.log('[简单播放器] 刷新播放器')
      
      if (this.config) {
        uni.showToast({
          title: '正在刷新...',
          icon: 'loading',
          duration: 1000
        })
        
        // 先清空再重新加载
        // #ifdef APP-PLUS
        this.webviewUrl = ''
        // #endif
        // #ifdef H5
        this.iframeUrl = ''
        // #endif
        
        setTimeout(() => {
          // #ifdef APP-PLUS
          const token = encodeURIComponent(this.config.accessToken)
          const url = encodeURIComponent(this.config.play_url)
          this.webviewUrl = `/static/html/ezviz-iframe.html?accessToken=${token}&playUrl=${url}`
          // #endif
          
          // #ifdef H5
          this.iframeUrl = 'https://open.ys7.com/ezopen/h5/iframe?' +
            'url=' + encodeURIComponent(this.config.play_url) +
            '&accessToken=' + encodeURIComponent(this.config.accessToken) +
            '&width=100%' +
            '&height=100%' +
            '&autoplay=1' +
            '&audio=1' +
            '&controls=1'
          // #endif
          
          this.isPlaying = true
          this.status = '播放中'
          
          uni.showToast({
            title: '刷新成功',
            icon: 'success',
            duration: 1500
          })
        }, 500)
      }
    }
  }
}
</script>

<style scoped>
.simple-video-player {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
}

.debug-info {
  position: absolute;
  top: 10rpx;
  left: 10rpx;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 10rpx;
  font-size: 24rpx;
  z-index: 100;
}

.debug-info text {
  display: block;
  margin: 5rpx 0;
}

.video-webview {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* H5平台iframe容器 */
.h5-iframe-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
}

.h5-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.8);
  color: white;
  font-size: 28rpx;
  z-index: 50;
}

.error {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,0,0,0.8);
  color: white;
  font-size: 28rpx;
  z-index: 50;
  padding: 40rpx;
}

.error text {
  margin-bottom: 30rpx;
  text-align: center;
}

.error button {
  background: white;
  color: #333;
  padding: 20rpx 40rpx;
  border-radius: 10rpx;
}

/* 错误状态下的控制按钮 */
.error-controls {
  display: flex;
  gap: 20rpx;
  margin-top: 30rpx;
  justify-content: center;
}

.error-controls .control-btn {
  flex: 1;
  max-width: 200rpx;
  height: 60rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  font-weight: bold;
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-controls .play-btn {
  background: linear-gradient(135deg, #46a049 0%, #4caf50 100%);
}

.error-controls .refresh-btn {
  background: linear-gradient(135deg, #2196f3 0%, #21cbf3 100%);
}

/* 控制按钮 */
.control-buttons {
  position: absolute;
  bottom: 30rpx;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20rpx;
  z-index: 100;
}

.control-btn {
  background: rgba(0, 0, 0, 0.75);
  color: white;
  border: 2rpx solid rgba(255, 255, 255, 0.6);
  padding: 16rpx 32rpx;
  border-radius: 40rpx;
  font-size: 24rpx;
  font-weight: 600;
  min-width: 140rpx;
  backdrop-filter: blur(10rpx);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.control-btn:active {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(0.96);
}

.play-btn {
  background: rgba(46, 125, 50, 0.85);
  border-color: rgba(76, 175, 80, 0.9);
}

.play-btn:active {
  background: rgba(46, 125, 50, 1);
}

.refresh-btn {
  background: rgba(25, 118, 210, 0.85);
  border-color: rgba(33, 150, 243, 0.9);
}

.refresh-btn:active {
  background: rgba(25, 118, 210, 1);
}
</style>

