import { defineComponent } from 'vue'
import styles from './index.module.less'
import Plyr from 'plyr'
import 'plyr/dist/plyr.css'
// import { browser } from "@/helpers/utils";
export default defineComponent({
  name: 'colVideo',
  props: {
    setting: {
      type: Object,
      default: () => {}
    },
    controls: Boolean,
    preview: {
      type: Boolean,
      default: false
    },
    previewControls: {
      type: Array,
      default: () => ['play', 'play-large']
    },
    height: String,
    src: {
      type: String,
      default: ''
    },
    poster: {
      type: String,
      default: ''
    },
    progress: {
      type: Boolean,
      default: true
    },
    volume: {
      type: Boolean,
      default: true
    },
    styleValue: {
      type: Object,
      default: () => ({})
    },
    type: {
      type: String,
      default: 'video'
    }
  },
  data() {
    return {
      player: null as any
    }
  },
  mounted() {
    this._init()
  },
  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' ,  // 切换全屏
      // ] ;
      // 'current-time',
      const controls = [
        'play',
        'progress',
        'fullscreen',
        'setting',
        'play-large',
        'current-time',
        'duration',
        'mute',
        'captions',
        'volume'
      ] as any
      // if (this.progress) {
      //   controls.push('progress')
      // }
      // if (this.volume) {
      //   controls.push('volume')
      // }
      this.player = new Plyr((this as any).$refs.video, {
        controls: this.preview ? this.previewControls : controls,
        ...this.setting
      })
      // console.log(this.player.elements.container)
      // this.player.elements.container
      //   ? (this.player.elements.container.style.height = this.height || '210px')
      //   : null
    }
  },
  render() {
    return (
      <div class={styles['video-container']}>
        {this.type == 'video' ? (
          <video
            object-fit="fill"
            ref="video"
            src={this.src}
            poster={this.poster}
            style={{ ...this.styleValue }}
          />
        ) : (
          <div class={styles.audios}>
            <audio
              object-fit="fill"
              ref="video"
              src={this.src}
              controls
              // poster={this.poster}
              style={{ ...this.styleValue }}
            />
          </div>
        )}
      </div>
    )
  }
})
