<template>
  <div id="video" class="app" ref="elementAsconten">
    <van-sticky :offset-top="0">
      <video-player
        class="video-player-box"
        autoplay="autoplay"
        ref="videoPlayer"
        :options="playerOptions"
        :playsinline="true"
        customEventName="customstatechangedeventname"
        @play="onPlayerPlay($event)"
        @pause="onPlayerPause($event)"
        @ended="onPlayerEnded($event)"
        @waiting="onPlayerWaiting($event)"
        @playing="onPlayerPlaying($event)"
        @loadeddata="onPlayerLoadeddata($event)"
        @timeupdate="onPlayerTimeupdate($event)"
        @canplay="onPlayerCanplay($event)"
        @canplaythrough="onPlayerCanplaythrough($event)"
        @statechanged="playerStateChanged($event)"
        @ready="playerReadied"
      >
      </video-player>
    </van-sticky>
    <div class="videoItem" v-if="item.id">
      <van-cell :title="item.title" use-label-slot>
        <div slot="label">
          <!-- <span
            style="font-size: 14px; color: #abb2b8;float:right"
            v-if="item.origSource || item.publishTime"
          >
            观看： {{ item.readCount | read }}
          </span> -->
          <span
            style="font-size: 14px; color: #abb2b8"
            v-if="item.origSource || item.publishTime"
            v-text="item.origSource + ' ' + item.publishTime"
          ></span>
        </div>
      </van-cell>
      <div
        @click="showIntrodu = !showIntrodu"
        :class="{ introduction: true }"
        v-text="item.normalizedContent"
        v-if="item.normalizedContent"
      ></div>
    </div>
    <van-empty v-else description="内容没找到" />
  </div>
</template>

<script>
// import { progress } from "@/api/article/article.js";
import { Sticky as vanSticky, Empty as vanEmpty, Cell as vanCell } from "vant";
import "vant/lib/sticky/style";
import "vant/lib/empty/style";
import "vant/lib/toast/style";
import "vant/lib/cell/style";
import "video.js/dist/video-js.css";
import { videoPlayer } from "vue-video-player";

import Config from "@/config/index.js";

export default {
  name: "app",
  maxPro: 0,
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    id: {
      type: String,
      default: ""
    }
  },
  data: function() {
    return {
      showIntrodu: true,
      video: {},
      playerOptions: {},
      more: false,
      pleayStatus: false
    };
  },
  timeout: null,
  filters: {
    read(v) {
      if (isNaN(v)) return 0;
      let o = v;
      if (v > 10000) {
        o = (v / 10000).toFixed(2) + "万";
      }
      return o;
    }
  },
  methods: {
    onPlayerPlay() {
      this.pleayStatus = true;
      console.log("开始播放");
    },
    onPlayerPause() {
      this.pleayStatus = false;
      console.log("暂停播放");
    },
    onPlayerEnded() {
      console.log("结束播放");
    },
    onPlayerWaiting() {
      console.log("等待播放");
    },
    onPlayerPlaying() {
      console.log("播放中");
    },
    onPlayerLoadeddata() {
      console.log("加载结束");
    },
    onPlayerTimeupdate(e) {
      let timeout = new Date() - 0;
      let pro = (e.cache_.currentTime / e.cache_.duration).toFixed(2);
      if (timeout - this.timeout < Config.proTimeout || pro <= this.maxPro)
        return;
      this.timeout = timeout;
      this.maxPro = pro;
      // progress({
      //   articleId: this.id,
      //   progress: pro
      // });
      window.Progress.progress = pro;
    },
    onPlayerCanplay() {
      console.log("允许播放");
    },
    onPlayerCanplaythrough() {
      console.log("允许播放通过");
    },
    playerStateChanged() {
      console.log("播放状态改变");
    },
    playerReadied() {
      console.log("准备好");
      window.webkit &&
        window.webkit.messageHandlers &&
        window.webkit.messageHandlers.setWebviewHeight.postMessage({
          height: this.$refs.elementAsconten.offsetHeight
        });
      window.H5Listener &&
        window.H5Listener.setWebviewHeight &&
        window.H5Listener.setWebviewHeight(
          this.$refs.elementAsconten.offsetHeight
        );
    },
    autoPlay(pageStatus) {
      console.log("客户端调用", pageStatus);
      this.$refs.videoPlayer.player.pause();
      if (pageStatus === "show" && this.pleayStatus) {
        this.$refs.videoPlayer.player.play();
      } else {
        this.pleayStatus = this.$refs.audioEle.isPlaying;
      }
      this.pleayStatus = !this.pleayStatus;
    }
  },
  mounted() {
    this.playerOptions = {
      // videojs options
      muted: false,
      width: "100%",
      aspectRatio: "16:9",
      language: "zh-CN",
      playbackRates: [0.5, 1.0, 1.5, 2.0],
      sources: [
        {
          type: "video/mp4",
          src: this.item.videoUrl
        }
      ],
      // poster: "/static/images/author.jpg",
      controlBar: {
        children: [
          "playToggle",
          "currentTimeDisplay",
          "progressControl",
          "durationDisplay",
          "fullscreenToggle"
        ],
        TimeDivider: false, //当前时间和持续时间的分隔符
        durationDisplay: true, //显示持续时间
        CurrentTimeDisplay: false,
        remainingTimeDisplay: false, //是否显示剩余时间功能
        playbackRateMenuButton: false, // 播放速度
        fullscreenToggle: true // 全屏按钮
      }
    };
    this.timeout = new Date() - 0;
    let _this = this;
    this.$refs.videoPlayer &&
      (window["autoPlay"] = function(pageStatus) {
        _this.autoPlay(pageStatus);
      });
  },
  beforeDestroy: function() {},
  components: {
    videoPlayer,
    vanSticky,
    vanEmpty,
    vanCell
  }
};
</script>
<style lang="scss">
#video {
  .video-js .vjs-time-control {
    display: block;
  }
}
</style>
<style lang="scss" scoped>
#video {
  .video-js {
    .vjs-big-play-button {
      top: 50%;
      left: 50%;
    }
  }
  .videoItem {
    padding: 0 0.5em;
    padding-left: 1 0px;
    .title {
      padding-top: 16px;
      color: #3d3d3d;
      font-size: 15px;
    }
    .publistTime {
      color: #919191;
      font-size: 12px;
      margin-top: 11px;
    }
    .introduction {
      margin-top: 17px;
      font-size: 0.12rem;
      color: #3d3d3d;
      text-indent: 2em;
    }
  }
}
</style>
