<template>
  <div class="video-wrapper">
    <status :item="item"></status>
    <div class="video-div" :id="'mui-player-' + item.id"></div>
    <video-bar :item="item" :barType="1"></video-bar>
    <banner v-if="type === 'bookDetail'" :item="item"></banner>
  </div>
</template>

<script setup>
/**
 * 视频组件通用模块
 */
import 'mui-player/dist/mui-player.min.css';
import MuiPlayer from 'mui-player';
import { onMounted } from 'vue';
import banner from './banner';
import videoBar from './videoBar';
import status from './status';
// 视频基础属性
const props = defineProps({
  item: Object,
  type: String,
});
// 视频播放事件回调
const emit = defineEmits(['on-play']);

onMounted(() => {
  const mp = new MuiPlayer({
    container: '#mui-player-' + props.item.id,
    title: props.item.title,
    src: props.item.video,
    poster: props.item.cover,
    autoFit: false,
    videoAttribute: [
      // 声明启用同层播放, 不让会自动全屏播放
      { attrKey: 'webkit-playsinline', attrValue: 'webkit-playsinline' },
      { attrKey: 'playsinline', attrValue: 'playsinline' },
      { attrKey: 'x5-video-player-type', attrValue: 'h5-page' },
    ],
  });
  const video = mp.video();
  // 监听原生video事件
  video &&
    video.addEventListener('play', function (event) {
      emit('on-play', {
        event,
        props: props.item,
      });
    });
});
</script>

<style lang="less" scoped >
.video-wrapper {
  position: relative;
  margin: 1rem;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);

  .video-div {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  .video-bar {
    color: #713610;
    padding: 1rem;
    padding-bottom: 0.5rem;

  }
}
</style>