<template>
  <div id="report-index">
    <audio
      ref="audioTag"
      preload="auto"
      @timeupdate="timeUpdated"
      id="audioplay0"
      v-if="$store.state.audiolist.length > 0 && isshowaudio"
    >
      <source
        :src="$store.state.audiolist[$store.state.playcount].video_url"
        type="audio/mpeg"
      />
      Your browser does not support the audio element.
    </audio>
    <div
      v-if="
        $store.state.audiolist.length > 0 &&
        $store.state.isshowplay &&
        playwinsize == 'small'
      "
      id="playwin"
    >
      <p @click="setwinbig">
        {{ $store.state.audiolist[$store.state.playcount].video_name }}
      </p>
      <img
        @click.stop="playaudiopause"
        v-if="$store.state.isplaying"
        src="~@/assets/img/newwhiteplaysmall.png"
        class="playpauseimg"
      />
      <img
        @click.stop="playaudioplay"
        v-else
        src="~@/assets/img/newwhitepausesmall.png"
        class="playpauseimg"
      />
      <img
        @click.stop="closeplaywin(0)"
        src="~@/assets/img/newclosesmall.png"
        style="height: 0.86rem; padding: 0.2rem; float: right"
      />
    </div>
    <div
      v-if="
        $store.state.audiolist.length > 0 &&
        $store.state.isshowplay &&
        playwinsize == 'big'
      "
      id="playwinbig"
    >
      <img
        @click="playwinsize = 'small'"
        src="~@/assets/img/newshouqi.png"
        class="shouqi"
      />
      <img
        @click.stop="closeplaywin(0)"
        src="~@/assets/img/newstopimg.png"
        class="closewin"
      />
      <p
        style="
          width: 100%;
          line-height: 1.2rem;
          font-size: 0.6rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: center;
        "
      >
        {{ $store.state.audiolist[$store.state.playcount].video_name }}
      </p>
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.5rem;
          text-align: center;
          margin: 0.4rem auto 0.3rem;
          overflow: hidden;
        "
      >
        <div class="inline-block" style="margin-right: 0.4rem">
          {{ timeCurrent }}
        </div>
        <progressBar
          :percent="percent"
          @percentChange="percentChange"
          style="display: inline-block; width: 65%; overflow: hidden"
        ></progressBar>
        <div id="audioTime" class="inline-block" style="margin-left: 0.4rem">
          {{
            transTime(
              $store.state.audiolist[$store.state.playcount].video_play_seconds
            )
          }}
        </div>
      </div>
      <div style="text-align: center; overflow: hidden">
        <img
          @click.stop="pretplay"
          v-if="$store.state.audiolist.length > 1"
          src="~@/assets/img/pre.png"
          class="playpauseimg"
        />
        <img
          @click.stop="playaudiopause"
          v-if="$store.state.isplaying"
          src="~@/assets/img/newwhiteplay.png"
          class="playpauseimg"
        />
        <img
          @click.stop="playaudioplay"
          v-else
          src="~@/assets/img/newwhitepause.png"
          class="playpauseimg"
        />
        <img
          @click.stop="nextplay"
          v-if="$store.state.audiolist.length > 1"
          src="~@/assets/img/next.png"
          class="playpauseimg"
        />
      </div>
    </div>
  </div>
</template>

<script>
import progressBar from "@/components/progress-bar.vue";
export default {
  components: { progressBar },
  computed: {
    percent() {
      return (
        this.currentTime /
        this.$store.state.audiolist[this.$store.state.playcount]
          .video_play_seconds
      );
    },
  },
  data() {
    return {
      isshowaudio: true, //是否加载音频audio
      playwinsize: "small", //音频窗口大小
      timeCurrent: "00:00", //总时长
      currentTime: null, //当前播放时长
      touching: false, //是否触碰进度条中
    };
  },
  mounted() {
    console.log(this.$store.state);
  },
  methods: {
    percentChange(precent) {
      const currentTime =
        this.$store.state.audiolist[this.$store.state.playcount]
          .video_play_seconds * precent;
      this.$refs.audioTag.currentTime = currentTime;
    },
    setwinbig() {
      //打开大窗口播放音频
      this.playwinsize = "big";
      // this.timeUpdated();
    },
    setisshowaudio(audioarr, i) {
      //父级注入的更新播放音频的方法
      console.log(audioarr, i);
      let that = this;
      that.$store.commit("setaudiolist", audioarr);
      that.audioplay(i);
    },
    audioplay(i) {
      //音频播放
      let that = this;
      that.$store.commit("setplaycount", i);
      that.audiopause();
      that.isshowaudio = false;
      setTimeout(function () {
        that.isshowaudio = true;
        that.$nextTick(function () {
          $("#audioplay0")[0].play();
          that.$store.commit("setplaystate", true);
          that.$store.commit("setshowplay", true);
          $("#audioplay0")[0].addEventListener(
            "ended",
            function () {
              that.$store.commit("setshowplay", false);
              that.$store.commit("setplaystate", false);
              that.timeCurrent = "00:00";
              if (that.$store.state.audiolist.length == 1) {
                // that.$store.commit('setaudiolist',null);
                return false;
              }
              if (i + 1 < that.$store.state.audiolist.length) {
                that.audioplay(i + 1);
              } else {
                that.audioplay(0);
              }
            },
            false
          );
        });
      }, 100);
    },
    audiopause(i) {
      //音频暂停
      if (this.$store.state.isplaying) {
        $("#audioplay0")[0].removeEventListener("ended", function () {}, false);
        $("#audioplay0")[0].pause();
        this.$store.commit("setplaystate", false);
      }
    },
    closeplaywin(i) {
      //关闭音频播放窗口
      this.audiopause();
      this.$store.commit("setshowplay", false);
      this.timeCurrent = "00:00";
    },
    nextplay() {
      //下一首
      let cindex = this.$store.state.playcount;
      if (cindex + 1 < this.$store.state.audiolist.length) {
        this.audioplay(cindex + 1);
      } else {
        this.audioplay(0);
      }
    },
    pretplay() {
      //上一首
      if (this.$store.state.playcount == 0) {
        this.audioplay(this.$store.state.audiolist.length - 1);
      } else {
        this.audioplay(this.$store.state.playcount - 1);
      }
    },
    playaudiopause() {
      //当前暂停
      $("#audioplay0")[0].pause();
      this.$store.commit("setplaystate", false);
    },
    playaudioplay() {
      //当前播放
      $("#audioplay0")[0].play();
      this.$store.commit("setplaystate", true);
      this.$store.commit("setshowplay", true);
    },
    transTime(time) {
      //转换音频时长显示
      let duration = parseInt(time);
      let minute = parseInt(duration / 60);
      let sec = (duration % 60) + "";
      let isM0 = ":";
      if (minute == 0) {
        minute = "00";
      } else if (minute < 10) {
        minute = "0" + minute;
      }
      if (sec.length == 1) {
        sec = "0" + sec;
      }
      return minute + isM0 + sec;
    },
    timeUpdated(e) {
      //更新播放进度
      this.currentTime = e.target.currentTime;
      this.timeCurrent = this.transTime(this.$refs.audioTag.currentTime);
      return false;
      if (this.playwinsize == "small") {
        return false;
      }
      let that = this;
      let audio = that.$refs.audioTag;
      that.$nextTick(function () {
        let timeline = that.$refs.timeline;
        let playhead = that.$refs.playhead;
        let timelineWidth = timeline.offsetWidth - playhead.offsetWidth;
        let playPercent = timelineWidth * (audio.currentTime / audio.duration);
        playhead.style.webkitTransform = "translateX(" + playPercent + "px)";
        playhead.style.transform = "translateX(" + playPercent + "px)";
        let timeCurrent = that.transTime(audio.currentTime);
        that.timeCurrent = timeCurrent;
        that.currentTime = audio.currentTime;
      });
    },
    timelineClick(e) {
      //进度条操作，拖拽和点击都需要调用
      let audio = $("#audioplay0")[0];
      let timeline = this.$refs.timeline;
      let playhead = this.$refs.playhead;
      let timelineWidth = timeline.offsetWidth - playhead.offsetWidth;
      // 更新坐标位置，e.pageX 鼠标点击位置，offsetLeft  元素 相对于它的直接父元素 的 偏移量timeline.offsetParent.offsetLeft/2
      let newLeft;
      if (this.IsPC()) {
        newLeft = e.offsetX - 10;
      } else {
        newLeft = e.pageX - (screen.width - timeline.offsetWidth) / 2 - 10;
      }
      let currentTime = (audio.duration * newLeft) / timelineWidth;
      if (newLeft >= 0 && newLeft <= timelineWidth) {
        playhead.style.transform = "translateX(" + newLeft + "px)";
      }
      if (newLeft < 0) {
        playhead.style.transform = "translateX(0)";
        currentTime = 0;
      }
      if (newLeft > timelineWidth) {
        playhead.style.transform = "translateX(" + timelineWidth + "px)";
        currentTime = audio.duration;
      }
      let timeCurrent = this.transTime(currentTime); // 更新时间
      this.timeCurrent = timeCurrent;
      this.currentTime = currentTime;
      audio.currentTime = currentTime;
    },
    touchStart(e) {
      // 进度条点击
      this.touching = true;
      let events = e.touches[0] || e;
      this.timelineClick(events);
    },
    touchMove(e) {
      if (this.touching !== true) {
        return false;
      }
      let events = e.touches[0] || e;
      this.timelineClick(events);
    },
    touchEnd(e) {
      this.touching = false;
    },
    IsPC() {
      var userAgentInfo = navigator.userAgent;
      var Agents = [
        "Android",
        "iPhone",
        "SymbianOS",
        "Windows Phone",
        "iPad",
        "iPod",
      ];
      var flag = true;
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false;
          break;
        }
      }
      return flag;
    },
  },
};
</script>

<style lang="scss">
#report-index {
  background: #f7f7f7;
  max-width: 1200px;
  margin: 0 auto;
  overflow: auto;
  .router-fade-enter-active,
  .router-fade-leave-active {
    transition: opacity 0.3s;
  }
  .router-fade-enter,
  .router-fade-leave-active {
    opacity: 0;
  }
  #playwin {
    width: 13.8rem;
    padding: 0.4rem 0.5rem;
    line-height: 0.86rem;
    box-sizing: border-box;
    background: rgba(76, 122, 253, 0.9);
    border-radius: 0.1rem;
    color: #fff;
    position: fixed;
    left: 50%;
    margin-left: -6.9rem;
    bottom: 0.4rem;
    z-index: 9999;
    overflow: hidden;
    p {
      float: left;
      width: 10rem;
      height: 1.26rem;
      font-size: 0.6rem;
      line-height: 1.26rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .playpauseimg {
      height: 0.86rem;
      padding: 0.2rem;
      float: left;
    }
  }
  #playwinbig {
    width: 13.8rem;
    height: 7rem;
    padding: 1.4rem 0.4rem 0.4rem;
    line-height: 1.2rem;
    box-sizing: border-box;
    background: rgba(76, 122, 253, 0.9);
    border-radius: 0.2rem;
    color: #fff;
    position: fixed;
    left: 50%;
    margin-left: -6.9rem;
    bottom: 0.4rem;
    z-index: 9999;
    overflow: hidden;
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    .shouqi {
      height: 0.5rem;
      padding: 0.5rem;
      position: absolute;
      left: 0;
      top: 0.1rem;
    }
    .closewin {
      height: 0.6rem;
      padding: 0.5rem;
      position: absolute;
      right: 0;
      top: 0;
    }
    .playpauseimg {
      display: inline-block;
      width: 1.1rem;
      height: 1.1rem;
      padding: 0.4rem;
      margin: 0rem 0.5rem;
    }
    .timeline {
      width: 60%;
      height: 20px;
      position: relative;
      bottom: -6px;
      overflow: hidden;
      .linesty {
        width: 100%;
        height: 2px;
        background: #d8d8d8;
        position: absolute;
        left: 0;
        top: 8px;
      }
      .playhead {
        background: #fff;
        width: 20px;
        height: 20px;
        border-radius: 100%;
        position: absolute;
        top: 0px;
        z-index: 999;
      }
    }
  }
  .inline-block {
    display: inline-block;
  }
  .commentsty {
    position: relative;
    padding: 0 0 0.6rem 1rem;
    box-sizing: border-box;
    color: #000;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 0.76rem;
  }
  .commentsty:before {
    position: absolute;
    top: 0rem;
    left: 0.6rem;
    content: " ";
    width: 0.2rem;
    height: 0.72rem;
    background: #1479fd;
  }
  p[data-f-id="pbf"] {
    display: none;
  }
  iframe {
    border: none;
  }
  .weui-toast__content {
    padding: 10px;
    box-sizing: border-box;
  }
  #resetcss {
    font-size: 0.72rem !important;
    color: #333;
    letter-spacing: 0.05rem;
  }
  ::-webkit-scrollbar {
    width: 0;
    height: 1px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
  }

  /* reset vant */
  .van-tab--active {
    font-weight: 600;
    font-size: 0.6rem !important;
  }
  .videoList_Container .van-tabs__line {
    width: 0.8rem !important;
    border-radius: 4px;
  }
  .videoList_Container .van-tabs {
    padding-right: 2rem;
    border-bottom: 0.04rem solid #e8e8e8;
  }
  .videoList_Container .van-hairline--top-bottom::after,
  .van-hairline-unset--top-bottom::after {
    border-width: 0;
  }
  // .videoList_Container .van-search__content {
  //   border: 0.5px solid #707070;
  // }
  .videoList_Container .van-picker .van-picker__cancel,
  .videoList_Container .van-picker .van-picker__confirm {
    color: #108ee9;
    font-size: 0.68rem;
  }
  .videoList_Container .van-picker .van-picker-column__item--selected {
    font-size: 0.68rem;
    border-top: solid 0.04rem #ddd;
    border-bottom: solid 0.04rem #ddd;
  }
  .videoList_Container .vjs-custom-skin > .video-js .vjs-big-play-button {
    width: 1.88rem !important;
    height: 1.88rem !important;
    border-radius: 50%;
    font-size: 3em;
    line-height: 1.88rem !important;
    transform: translate(-50%, -50%);
    margin: 0 !important;
  }
}
</style>
