import { defineComponent, nextTick, onMounted, toRefs } from 'vue';
import 'plyr/dist/plyr.css';
import Plyr from 'plyr';
import { ref } from 'vue';
import styles from './video.module.less';
import iconplay from '../image/icon-pause.png';
import iconpause from '../image/icon-play.png';
import iconReplay from '../image/icon-replay.png';

export default defineComponent({
  name: 'video-play',
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    isEmtry: {
      type: Boolean,
      default: false
    }
  },
  emits: ['loadedmetadata', 'togglePlay', 'ended', 'reset'],
  setup(props, { emit, expose }) {
    const { item, isEmtry } = toRefs(props);
    const videoRef = ref();
    const videoItem = ref<Plyr>();
    const controlID = 'v' + Date.now() + Math.floor(Math.random() * 100);
    const playBtnId = 'play' + Date.now() + Math.floor(Math.random() * 100);
    const replayBtnId = 'replay' + Date.now() + Math.floor(Math.random() * 100);
    const toggleHideControl = (isShow: false) => {
      videoItem.value?.toggleControls(isShow);
    };
    const togglePlay = (e: Event) => {
      e.stopPropagation();
      videoItem.value?.togglePlay();
    };
    const toggleReplay = () => {
      const replayBtn = document.getElementById(replayBtnId);
      if (!replayBtn || !videoItem.value) return;
      videoItem.value.restart();
    };
    const onDefault = () => {
      document
        .getElementById(controlID)
        ?.addEventListener('click', (e: Event) => {
          e.stopPropagation();
          emit('reset');
        });
      document.getElementById(playBtnId)?.addEventListener('click', togglePlay);
      document
        .getElementById(replayBtnId)
        ?.addEventListener('click', toggleReplay);
    };

    const changePlayBtn = (code: string) => {
      const playBtn = document.getElementById(playBtnId);
      if (!playBtn) return;
      if (code == 'play') {
        playBtn.classList.remove(styles.btnPause);
        playBtn.classList.add(styles.btnPlay);
      } else {
        playBtn.classList.remove(styles.btnPlay);
        playBtn.classList.add(styles.btnPause);
      }
    };
    const controls = `
            <div id="${controlID}" class="plyr__controls bottomFixed ${styles.controls}">
                <div class="${styles.actions}">
                    <div class="${styles.actionWrap}">
                        <button id="${playBtnId}" class="${styles.actionBtn}">
                            <div class="van-loading van-loading--circular" aria-live="polite" aria-busy="true"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(255, 255, 255);"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
                            <img class="${styles.playIcon}" src="${iconplay}" />
                            <img class="${styles.playIcon}" src="${iconpause}" />
                        </button>
                    </div>
                    <div class="${styles.time}">
                        <div class="plyr__time plyr__time--current" aria-label="Current time">00:00</div><span class="${styles.line}">/</span>
                        <div class="plyr__time plyr__time--duration" aria-label="Duration">00:00</div>
                    </div>
                </div>
                <div class="${styles.slider}">
                    <div class="plyr__progress">
                        <input data-plyr="seek" type="range" min="0" max="100" step="0.01" value="0" aria-label="Seek">
                        <progress class="plyr__progress__buffer" min="0" max="100" value="0">% buffered</progress>
                        <span role="tooltip" class="plyr__tooltip">00:00</span>
                    </div>

                </div>
                <div class="${styles.actions}" style="padding-right: 0;">
                    <button id="${replayBtnId}" class="${styles.actionBtn} ${styles.loopBtn}">
                        <img class="loop" src="${iconReplay}" />
                    </button>
                </div>
            </div>`;

    // <div class="${styles.actionWrap}">
    //             <button id="${playBtnId}" class="${styles.actionBtn}">
    //                 <div class="van-loading van-loading--circular" aria-live="polite" aria-busy="true"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(255, 255, 255);"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
    //                 <img class="${styles.playIcon}" src="${iconplay}" />
    //                 <img class="${styles.playIcon}" src="${iconpause}" />
    //             </button>

    //         </div>
    //         <div>${item.value.name}</div>

    onMounted(() => {
      videoItem.value = new Plyr(videoRef.value, {
        autoplay: false,
        controls: controls,
        autopause: true, // 一次只允许
        ratio: '16:9', // 强制所有视频的纵横比
        hideControls: false, // 在 2 秒没有鼠标或焦点移动、控制元素模糊（制表符退出）、播放开始或进入全屏时自动隐藏视频控件。只要移动鼠标、聚焦控制元素或暂停播放，控件就会立即重新出现。
        clickToPlay: false, // 单击（或点击）视频容器将切换播放/暂停
        fullscreen: { enabled: false, fallback: false, iosNative: false } // 不适用全屏
      });
      if (videoItem.value) {
        videoItem.value.on('play', () => {
          if (videoItem.value) {
            videoItem.value.muted = false;
            videoItem.value.volume = 1;
          }

          // console.log('开始播放', item.value)
          if (
            !item.value.autoPlay &&
            !item.value.isprepare &&
            videoItem.value
          ) {
            // 加载完成后,取消静音播放

            console.log(videoItem.value);
            videoItem.value.pause();
          }
          changePlayBtn('');
          emit('togglePlay', videoItem.value?.paused);
        });
        videoItem.value.on('pause', () => {
          changePlayBtn('play');
          emit('togglePlay', videoItem.value?.paused);
        });
        videoItem.value.on('ended', () => {
          emit('ended');
          changePlayBtn('play');
        });
        videoItem.value.once('loadedmetadata', () => {
          changePlayBtn('play');
          if (item.value.autoPlay && videoItem.value) {
            videoItem.value.play();
          }
          emit('loadedmetadata', videoItem.value);
        });

        nextTick(() => {
          onDefault();
        });
      }
    });
    expose({
      changePlayBtn,
      toggleHideControl
    });
    return () => (
      <div class={styles.videoWrap}>
        <video
          style={{ width: '100%', height: '100%' }}
          src={isEmtry.value ? '' : item.value.content}
          ref={videoRef}
          playsinline="false"></video>
      </div>
    );
  }
});
