<template>
  <!-- 视频组件 -->
  <div class="video-player">
    <div class="title" v-if="datas.componentData['title']">
      <p>{{datas.componentData['title']}}</p>
    </div>
    <div class="main">
      <!-- url展示 -->
      <div class="isVideo" v-show="datas.componentData['type']<3">
        <video
          bindplay="pauseVideo"
          bindended="videoEnd"
          ref="videoPlayer"
          :show-center-play-btn="isPlay&&!datas.componentData['nativeControl']?true:false"
          type="video/mp4"
          width="100%"
          :src="videoUrl"
          :loop="datas.componentData['loopPlay']"
          :controls="datas.componentData['nativeControl']"
          :webkit-playsinline="true"
          :x5-video-player-type="'h5-page'"
          :x5-video-player-fullscreen="true"
          :playsinline="true"
          :poster="videoPoster"
        ></video>
      </div>
      <!-- 代码片段展示 -->
      <div
        class="isCodeSnippets"
        v-show="datas.componentData['type']==3&&datas.componentData['codeSnippet']!=''"
      >
      <wxParse :content="datas.componentData['codeSnippet']" />
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import wxParse from 'mpvue-wxparse'
export default {
  name: "video-player",
  props: {
    datas: {
      type: Object,
      default: function() {
        return {
          id: "",
          pageCode: 0,
          pageType: 0,
          queueNumber: 0,
          componentName: "视频",
          componentCode: "video-player",
          code: 1,
          componentData: {
            // 1:手动上传 2：网络地址 3：代码片段
            type: 1,
            //  是否展示原生控件
            nativeControl: false,
            // 是否循环播放
            loopPlay: false,
            // 是否全屏播放
            fullScreenPlay: false,
            title: "视频",
            videoUrl: "",
            codeSnippet: ""
          }
        };
      }
    }
  },
  components: {
    wxParse
  },
  data() {
    return {
      isPlay: true
    };
  },
  watch: {
    videoUrl() {
      this.$refs.videoPlayer.src = this.videoUrl;
    },
    videoPoster(){
      this.$refs.videoPlayer.poster = this.videoPoster;
      this.$refs.videoPlayer.src = this.videoUrl;
    }
  },
  computed: {
    videoUrl() {
      return this.datas.componentData["videoUrl"];
    },
    videoPoster() {
      return this.datas.componentData["poster"];
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 播放暂停
    pauseVideo() {
      if(this.datas.componentData['nativeControl'])return;
      this.$refs.videoPlayer.pause();
      this.isPlay = true;
    },
    // 播放开始
    playVideo() {
      if(!this.render)return;
      this.$refs.videoPlayer.play();
      this.isPlay = false;
    },
    // 播放结束
    videoEnd(){
      if(!this.datas.componentData['nativeControl']){
        this.isPlay=true;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import url("~mpvue-wxparse/src/wxParse.css");
.video-player {
  .title {
    font-size: 18px;
    padding: 10px 20px;
    color: #333;
    font-weight: bold;
  }
  .main {
    width: 100%;
    .isVideo {
      width: 100%;
      position: relative;
      .playerBtn {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 60px;
        height: 60px;
        margin-top: -30px;
        margin-left: -30px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 60px;
          height: 60px;
        }
      }
      video{
        width:100%;
      }
    }
    .isCodeSnippets {
      width: 100%;
      video{
        width: 100%;
      }
    }
  }
}
</style>