<template>
  <view
    class="container playerBox"
    id="playerBox"
    style="
      background-color: #fff;
      width: 100%;
      height: 200px;
      padding: 20rpx;
      box-sizing: border-box;
      position: relative;
    "
  >
    <cx-audio :list="list" ref="cxaudio" :autoplays="true" @curTime="recordTime" :firstTime="firstTime">
      <template slot="title" slot-scope="slotProps">
        <view style="color: #fff; text-align: center;font-size: 36rpx;"
          >{{ curriculumData.title }}
        </view>
        <view style="color: #fff; text-align: center;font-size: 28rpx;margin-top: 10px;"
          >音频
          {{ Number(currentVideoIndex+1)>10? Number(currentVideoIndex+1):'0'+ Number(currentVideoIndex+1) }}

          
        </view>
      </template>
    </cx-audio>
  </view>
</template>
<script>
import cxAudio from "./cx-audio-play.vue";

import store from "@/store/index.js";
import $http from "@/config/requestConfig.js";
import { mapState, mapMutations } from "vuex";
export default {
  components: {
    cxAudio,
  },
  props: {
    videoData: {
      type: Object,
      default: {},
    },
    curriculumData: {
      type: Object,
      default: {},
    },
    videoInfo: {
      type: Object,
      default: {},
    },
    firstTime: {
      type: Number,
      default: 0,
    },
    currentVideoIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      list: [],

      show: false, //视频提示显示
      isDipose: false, //视频提示显示
      content: "此设备暂不支持观看当前视频，请移步到安卓手机进行学习！",
      platform: null, //设备类型
      isFullScreen: false, //当前是否是全屏模式
      isOnLoad: false, //是否刷新
      isChange: false, //是否切换播放源
      videoList: [], //视频列表
      videoOssList: [], //本地视频列表
      options: {}, //父组件传参
      currentTime: "", //当前播放时间

      isSetFirstTime: false, //是否获取到初始播放时间

      urlList: {
        checkVideo: "sociology/course/checkVideo",
      },
    };
  },
  computed: {
    // ...mapState(["videoOssList"]),
  },

  watch: {
    timer(newValue) {
      this.$emit("child-event", newValue);
    },
    videoOssList: {
      immediate: true,
      handler(newValue) {
        if (this.videoOssList.length > 0) {
          uni.setStorageSync("videoOssList", JSON.stringify(this.videoOssList));
        }
      },
    },
  },
  //
  created() {
    this.platform = this.$platform;
    this.show = false;
    if (uni.getStorageSync("videoOssList")) {
      this.videoOssList = JSON.parse(uni.getStorageSync("videoOssList"));
    }
   this.list=[this.videoData.source]
  },
  mounted(){
 this.init();
  },
  //子组件销毁前
  beforeDestroy() {
    this.handleEnd();

    clearInterval(this.$store.state.videoTimer);
    plus.screen.lockOrientation("portrait-primary");
  },
  updated() {
    // console.log("触发了更新");
  },
  methods: {
    init() {
      console.log("at line 101:", "初始化");
     
      console.log('this.list.push at line 127:', this.list)
      this.$nextTick(() => {
        this.$refs.cxaudio.init();
      });
    },
    emitDispose1(status) {
      this.$emit("handleSuccessDispose", status);
    },
    destory() {
      // this.isDipose = true;
    },
    //ios不能播放私有加密提示信息
    openShow() {
      this.show = true;
    },

    changeVideoData() {
      this.show = false;
      this.isChange = false;
    },
    screenChange(data) {
      this.isFullScreen = !data.status;
      this.$emit("changeScreen", this.isFullScreen);
    },
    calcTimer(time){
    console.log('time at line 111111111111111151:', time)

    },
    //当前播放时间 存本地
    recordTime(time) {
      this.currentTime = time;
      var list = [...this.videoOssList];
      var index = list.findIndex((e) => e.id == this.currentVideoId);
      var setData = {
        id: this.currentVideoId,
        vid: this.videoData.vid,
        time: time,
      };
      if (list.length > 0 && index >= 0) {
        list[index] = setData;
      } else {
        list.push(setData);
      }
      this.videoOssList = list;
      if (this.currentTime % 60 == 0) {
        this.setVideoTime();
      }
    },

    //播放结束
    async handleEnd() {
     
      this.setVideoTime();
    },
    //存播放进度
    setVideoTime() {
      console.log('存播放进度',this.currentTime)
      if (!this.videoData.id) {
        return false;
      }
      var data = {
        videoId: this.videoData.id,
        position: this.currentTime ? this.currentTime : 0, //秒数
        loadAnimate: "none",
      };

      $http
        .request({
          url: `sociology/course/saveCoursePosition`,
          method: "Post",
          data,
          header: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {});
    },
    //定时器 存播放进度
    async setVideoFirtsetTime() {
      this.setVideoTime();
    },
  },
};
</script>

<style>
.container {
  width: 100vw;
  height: auto;

  /deep/.pause {
    width: 60rpx !important;
    height: 60rpx !important;
  }
}

.fds {
  background-color: blue;
  height: 600rpx;
  position: fixed;
  top: 60rpx;
}

.returnBack {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 88rpx;
  padding-left: 20rpx;
}

.txt {
  color: #fff;
}

.right_title {
  background: #000;
  height: 96rpx;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  margin-left: auto;
}

.return {
  flex-direction: row;
  align-items: center;
  color: #fff;
}

.right_handle {
  width: 200rpx;
  flex-direction: row;
  justify-content: flex-end;
  padding-right: 20rpx;
}

cover-view {
  display: block;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: auto;
}

cover-view {
  visibility: visible !important;
}

cover-image {
  visibility: visible !important;
}

.fullScreenButton-container {
  color: #fff;
  float: right;
  height: 35px;
  margin-top: 6px;
  margin-right: 5px;
  display: flex;
  align-items: center;
  position: relative;

  i {
    color: #fff;
    display: inline-block;
    font-size: 22px;
    display: block;
    margin-top: 7px;
    cursor: pointer;

    & + i {
      margin-left: 3px;
    }

    @media (min-width: 768px) {
      &:hover + .player-tooltip {
        display: block;
      }
    }
  }

  .player-tooltip {
    &.prev {
      left: -10px;
    }

    &.list {
      left: 5px;
    }

    &.next {
      right: -12px;
    }
  }
}

.playlist-content {
  position: absolute;
  right: 0;
  width: 0px;
  padding-bottom: 48px;
  box-sizing: border-box;
  height: 100%;
  transition: all 0.38s ease-in-out;
  overflow: hidden;

  .list {
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.3);
    height: 100%;
    overflow: auto;

    .video-item {
      color: #fff;
      padding: 0px 10px;
      line-height: 35px;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;

      &.active {
        background-color: #000;
        color: #00ddff;
      }

      @media (min-width: 768px) {
        &:hover {
          background-color: #000;
          color: #00ddff;
        }
      }
    }
  }
}

.player-tooltip {
  position: absolute;
  display: none;
  font-size: 12px;
  color: #fff;
  line-height: 28px;
  letter-spacing: 0;
  text-align: center;
  background: #3c3c3c;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  height: 28px;
  top: -48px;
  padding: 0 5px;
  white-space: nowrap;
}

.playlist-skip-tip {
  padding: 5px 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 30;
  line-height: 30px;
  font-size: 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.8);
  color: #000;
  text-align: center;
  transform: translate(-50%, -50%);
}

#rotating-div {
  width: 100vw;
  height: 100vh;
  background-color: #3498db;
  transform: rotate(90deg);
  /* 旋转90度 */
  transform-origin: center center;
  /* 设置旋转中心点在div中心 */
  position: fixed;
  /* 固定定位，全屏显示 */
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
.playerBox {
}
</style>
