import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'
import Plyr from 'plyr'
import 'plyr/dist/plyr.css'
import { Button, Icon } from 'vant'

import iconVideoPlay from '@/common/images/icon_video_play.png'
import { browser } from '@/helpers/utils'
export default defineComponent({
  name: 'col-video',
  props: {
    trySee: {
      // 是否试看
      type: Boolean,
      default: false
    },
    // 试看比例
    freeRate: {
      type: Number,
      default: 100
    },
    setting: {
      type: Object,
      default: () => {}
    },
    controls: Boolean,
    height: String,
    src: {
      type: String,
      default: ''
    },
    poster: {
      type: String,
      default: ''
    },
    styleValue: {
      type: Object,
      default: () => ({})
    },
    preload: {
      type: String as PropType<'auto' | 'metadata' | 'none'>,
      default: 'auto'
    },
    currentTime: {
      type: Boolean,
      default: true
    },
    playsinline: {
      type: Boolean,
      default: true
    },
    onPlay: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      player: null as any,
      // playTime: 0,
      loading: true, // 首次进入加载中
      trySeeOver: false, // 试看是否结束
      showSeeStatus: true // 是否显示试看状态
    }
  },
  mounted() {
    this._init()
  },
  computed: {
    computedSeeStatus() {
      console.log(
        this.showSeeStatus,
        this.trySee,
        this.trySeeOver,
        'this.showSeeStatus, this.trySee'
      )
      return this.showSeeStatus && this.trySee
    },
    playTime() {
      // 允许播放时间
      const player = this.player
      const playTime = (player.duration * this.freeRate) / 100
      return playTime || 0
    }
  },
  methods: {
    _init() {
      // controls: [
      //   'play-large' ,  // 中间的大播放按钮
      //   'restart' ,  // 重新开始播放
      //   'rewind' ,  // 按寻道时间倒带（默认 10 秒）
      //   'play' ,  // 播放/暂停播放
      //   'fast-forward' ,  // 快进查找时间（默认 10 秒）
      //   'progress' ,  // 播放和缓冲的进度条和滑动条
      //   'current-time' ,  // 播放的当前时间
      //   ' duration' ,  // 媒体的完整持续时间
      //   'mute' ,  // 切换静音
      //   'volume', // 音量控制
      //   'captions' ,  // 切换字幕
      //   'settings' ,  // 设置菜单
      //   'pip' ,  // 画中画（当前仅 Safari）
      //   'airplay' ,  // Airplay（当前仅 Safari）
      //   'download ' ,  // 显示一个下载按钮，其中包含指向当前源或您在选项中指定的自定义 URL 的链接
      //   'fullscreen' ,  // 切换全屏
      // ] ;
      let controls = [
        'play-large',
        'play',
        'progress',
        'captions',
        'fullscreen'
      ]
      if (this.currentTime) {
        controls.push('current-time')
      }
      const params: any = {
        controls: controls,
        ...this.setting,
        invertTime: false
      }

      if (browser().iPhone) {
        params.fullscreen = {
          enabled: true,
          fallback: 'force',
          iosNative: true
        }
      }

      this.player = new Plyr((this as any).$refs.video, params)

      // fullscreen: {
      //     enabled: true,
      //     fallback: 'force',
      //     iosNative: true
      //   }
      this.player.elements.container
        ? (this.player.elements.container.style.height = this.height || '210px')
        : null

      if (this.preload === 'none') {
        this.loading = false
      }
      this.player.on('loadedmetadata', () => {
        this.loading = false
        console.log('loading 1111')
        if (this.trySee) {
          this.domPlayVisibility()
        } else {
          this.domPlayVisibility(false)
        }

        // 监听播放事件
        const _this = this
        this.player.on('timeupdate', () => {
          const players = _this.player
          if (players.currentTime >= this.playTime && _this.trySee) {
            players.pause()
            _this.trySeeOver = true
            _this.showSeeStatus = true
            _this.domPlayVisibility() // 试看结束后隐藏播放按钮
          }
        })
      })

      this.player.on('play', () => {
        this.onPlay && this.onPlay()
      })
    },
    // 操作功能
    domPlayVisibility(hide = true) {
      const controls = document.querySelector('.plyr__controls')
      const controls2 = document.querySelector('.plyr__control--overlaid')
      if (hide) {
        controls?.setAttribute('style', 'display:none')
        controls2?.setAttribute('style', 'display:none')
      } else {
        controls?.removeAttribute('style')
        setTimeout(() => {
          controls2?.removeAttribute('style')
        }, 200)
      }
    },
    onClickPlay() {
      this.player.play()
      this.domPlayVisibility(false)
      this.showSeeStatus = false
    },
    onBuy() {
      this.$router.back()
    },
    onReplay() {
      this.player.restart()
      this.player.play()
      this.domPlayVisibility(false)
      this.trySeeOver = false
      this.showSeeStatus = false
    }
  },
  unmounted() {
    this.player?.destroy()
  },
  render() {
    return (
      <div class={styles['video-container']}>
        <video
          ref="video"
          class={styles['video']}
          src={this.src}
          playsinline={this.playsinline}
          poster={this.poster}
          preload={this.preload}
          style={{ ...this.styleValue }}
        />
        {/* 加载视频使用 */}
        {this.loading && (
          <div
            class={styles.loadingVideo}
            style={{
              height: this.height || '210px'
            }}
          ></div>
        )}
        {/* 试看结束 */}
        {this.trySee && this.computedSeeStatus && !this.loading && (
          <div
            class={[styles.loadingVideo, styles.playOver]}
            style={{
              height: this.height || '210px'
            }}
          >
            {!this.trySeeOver ? (
              <>
                <Icon
                  name={iconVideoPlay}
                  size={50}
                  onClick={this.onClickPlay}
                />
                <p class={styles.freeTxt}>免费试看</p>
                {/* <p class={styles.freeRate}>每课时可试看{this.freeRate}%</p> */}
              </>
            ) : (
              <>
                <p class={styles.tips}>免费试看结束，购买完整课程后继续学习</p>
                <Button
                  class={styles.btn}
                  type="primary"
                  round
                  size="small"
                  onClick={this.onBuy}
                >
                  立即购买
                </Button>
                <div class={styles.replay} onClick={this.onReplay}>
                  <Icon
                    name="replay"
                    style={{ marginRight: '5px' }}
                    size={16}
                  />
                  重播
                </div>
              </>
            )}
          </div>
        )}
      </div>
    )
  }
})
