<template>
  <div id="videoDetail" class="app">
    <van-sticky :offset-top="0" v-if="videoDetail.videoFlag === 'V'">
      <video-player
        class="video-player-box"
        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 v-if="videoDetail.id">
      <van-cell-group>
        <van-cell :title="videoDetail.title" :value="videoDetail.publishTime" />
        <div
          @click="showIntrodu = !showIntrodu"
          :class="{ introduction: true, 'van-ellipsis': !showIntrodu }"
          v-text="videoDetail.normalizedContent"
          v-if="videoDetail.normalizedContent"
        ></div>
      </van-cell-group>
    </div>
    <van-empty v-else description="内容没找到" />
    <comment-list
      :commentList="videoDetail.commentList"
      :isFablous="!!videoDetail.fabulous"
      :isCollect="!!videoDetail.collection"
      :diggCount="videoDetail.diggCount"
      :readCount="videoDetail.readCount"
      :commentCount="videoDetail.commentCount"
      v-if="$pageParams"
      :id="$pageParams.id"
      :more="more"
      @changeFab="changeFab"
      @changeColl="collection"
      @upset="upset"
    ></comment-list>
  </div>
</template>

<script>
import {
  articleDetail,
  collectCancel,
  getCommentList,
  diggCancel,
  progress,
  collect,
  digg
} from "@/api/article/article.js";
import { currentUrlToParams } from "@/utils/common.js";
import {
  Cell as vanCell,
  CellGroup as vanCellGroup,
  Sticky as vanSticky,
  Empty as vanEmpty,
  Toast
} from "vant";
import "vant/lib/cell-group/style";
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 CommentList from "../../../components/Comment/Comment";

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

export default {
  name: "app",
  maxPro: 0,
  data: function() {
    return {
      showIntrodu: true,
      videoDetail: {},
      playerOptions: {},
      more: false
    };
  },
  timeout: null,
  methods: {
    onPlayerPlay() {
      console.log("开始播放");
    },
    onPlayerPause() {
      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.$pageParams.id,
        progress: pro
      });
    },
    onPlayerCanplay() {
      console.log("允许播放");
    },
    onPlayerCanplaythrough() {
      console.log("允许播放通过");
    },
    playerStateChanged() {
      console.log("播放状态改变");
    },
    playerReadied() {
      console.log("准备好");
    },
    collection() {
      let collectData = this.videoDetail.collection;
      this.$set(this.videoDetail, "collection", !collectData);
      !collectData
        ? collect(this.$pageParams.id).then(() => {
            Toast("收藏成功！");
          })
        : collectCancel(this.$pageParams.id).then(() => {
            Toast("取消收藏！");
          });
    },
    changeFab(val) {
      // 点赞
      this.$set(this.videoDetail, "fabulous", val);
      val
        ? digg(this.$pageParams.id).then(() => {
            Toast("点赞成功！");
            this.$set(
              this.videoDetail,
              "diggCount",
              this.videoDetail.diggCount + 1
            );
          })
        : diggCancel(this.$pageParams.id).then(() => {
            Toast("取消点赞！");
            this.$set(
              this.videoDetail,
              "diggCount",
              this.videoDetail.diggCount - 1
            );
          });
    },
    upset() {
      let list = this.videoDetail.commentList
        ? this.videoDetail.commentList
        : [];
      this.more = true;
      let p = {};
      list.length ? (p.lastId = list[list.length - 1].id) : "";
      getCommentList(p, this.$pageParams.id).then(res => {
        this.more = false;
        list.push(...(res || []));
        this.$set(this.videoDetail, "commentList", list);
        this.$set(
          this.videoDetail,
          "commentCount",
          this.videoDetail.commentCount + 1
        );
      });
    }
  },
  mounted() {
    this.$pageParams = currentUrlToParams();
    articleDetail(this.$pageParams.id).then(res => {
      this.videoDetail = res || {};
      this.playerOptions = {
        // videojs options
        muted: true,
        width: "100%",
        aspectRatio: "16:9",
        language: "zh-CN",
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        sources: [
          {
            type: "video/mp4",
            src: this.videoDetail.videoUrl
          }
        ],
        poster: "/static/images/author.jpg"
      };
      this.timeout = new Date() - 0;
    });
  },
  beforeDestroy: function() {},
  components: {
    videoPlayer,
    vanCell,
    vanCellGroup,
    CommentList,
    vanSticky,
    vanEmpty
  }
};
</script>
<style lang="scss" scoped>
#videoDetail {
  .video-js {
    .vjs-big-play-button {
      top: 50%;
      left: 50%;
    }
  }
  .introduction {
    padding: 0.5em;
    font-size: 0.14rem;
    color: #969799;
    text-indent: 2em;
  }
}
</style>
