<template>
  <div id="audioDetail" class="app" ref="elementAsconten">
    <div class="head">
      <audio-player
        ref="audioEle"
        color="#e42417"
        @playing="playing"
        :show-prev-button="false"
        :show-next-button="false"
        :show-playback-rate="false"
        :audio-list="[item.videoUrl]"
        :before-play="onBeforePlay"
      ></audio-player>
    </div>
    <div v-if="item.id">
      <van-cell-group>
        <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, 'van-ellipsis': !showIntrodu }"
          v-text="item.normalizedContent"
          v-if="item.normalizedContent"
        ></div>
      </van-cell-group>
    </div>
    <van-empty v-else description="内容没找到" />
  </div>
</template>

<script>
// import { articleDetail } from "@/api/article/article.js";
import { currentUrlToParams } from "@/utils/common.js";
import {
  Cell as vanCell,
  CellGroup as vanCellGroup,
  Empty as vanEmpty
} from "vant";
import "video.js/dist/video-js.css";
import "vant/lib/cell-group/style";
import "vant/lib/nav-bar/style";
import "vant/lib/empty/style";
import "vant/lib/cell/style";
import "vant/lib/toast/style";
import "@liripeng/vue-audio-player/lib/vue-audio-player.css";
import AudioPlayer from "@liripeng/vue-audio-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 {
      chosenAddressId: "1",
      showIntrodu: true,
      value: "",
      more: false,
      pleayStatus: false,
      audioList: []
    };
  },
  timeout: null,
  filters: {
    read(v) {
      if (isNaN(v)) return 0;
      let o = v;
      if (v > 10000) {
        o = (v / 10000).toFixed(2) + "万";
      }
      return o;
    }
  },
  methods: {
    goBack() {
      history.go(-1);
    },
    // 播放前做的事
    onBeforePlay(next) {
      this.playing();
      next(); // 开始播放
    },
    playing() {
      const duration = (this.$refs.audioEle.duration * 1000).toFixed(0) - 0;
      const currentTime =
        (this.$refs.audioEle.currentTime * 1000).toFixed(0) - 0;
      let timeout = new Date() - 0;
      let pro = (currentTime / 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
      // });
      window.Progress.progress = pro;
    },
    autoPlay(pageStatus) {
      console.log("客户端调用", pageStatus);
      this.$refs.audioEle.pause();
      if (pageStatus === "show" && this.pageStatus) {
        this.$refs.audioEle.play();
      } else {
        this.pageStatus = this.$refs.audioEle.isPlaying;
      }
    }
  },
  mounted() {
    window.webkit &&
      window.webkit.messageHandlers &&
      window.webkit.messageHandlers.setWebviewHeight &&
      window.webkit.messageHandlers.setWebviewHeight.postMessage({
        height: this.$refs.elementAsconten.offsetHeight
      });
    window.H5Listener &&
      window.H5Listener.setWebviewHeight &&
      window.H5Listener.setWebviewHeight(
        this.$refs.elementAsconten.offsetHeight
      );
    this.$pageParams = currentUrlToParams();
    this.timeout = new Date();
    let _this = this;
    this.$refs.audioEle &&
      (window["autoPlay"] = function(pageStatus) {
        _this.autoPlay(pageStatus);
      });
  },
  beforeDestroy: function() {},
  components: {
    vanCellGroup,
    AudioPlayer,
    vanEmpty,
    vanCell
  }
};
</script>
<style lang="scss" scoped>
#audioDetail {
  padding-top: 6em;
  .van-button {
    border: none;
  }
  .video-js {
    .vjs-big-play-button {
      top: 50%;
      left: 50%;
    }
  }
  .introduction {
    padding: 0.5em;
    font-size: 0.14rem;
    color: #969799;
    text-indent: 2em;
  }
  .head {
    padding: 4em 2em 2em 2em;
    background-image: url("../../assets/image/audiobg.png");
    background-size: 100% 100%;
  }

  .selectText {
    color: #ee0a24;
  }
}
</style>
