<template>
  <div class="videoList-wrap">
    <swiper :options="swiperOption">
      <!-- 幻灯内容 -->
      <swiper-slide v-for="(item, index) in videoList"
                    :key="index">
        <div>
          <videos ref="videos"
                  :videoList="item"
                  :index="index"
                  @addVideoCount="handleAddVideoCount"></videos>

          <div class="jump-icon"
               :style="userType!==1?'justify-content: flex-end':''">
            <i @click="jumpUpload"
               v-show="userType===1"><img src="../../static/imgs/home.png"
                   alt=""></i>
            <router-link to="/search"><img src="../../static/imgs/search-icon.png"
                   alt=""></router-link>
          </div>
        </div>
        <info-bar @addLike="handleAddLike"
                  @showComment="handleShowComment"
                  @addAttention="handleAttention"
                  @cancelLike="handleCancelLike"
                  :videoList="item"
                  :isAttention="item.IsFollow"
                  :isLike="item.IsLike"></info-bar>
      </swiper-slide>
    </swiper>
    <comment @submitComment="onSubmitComment"
             @closeComment="onCloseComment"
             :showComment="showComment"
             :commentList="commentList"
             :totalItemCount="totalItemCount"></comment>
    <van-overlay :show="show" />
    <van-loading class="loading-btn"
                 size=".24rpx"
                 color="#fff"
                 vertical
                 v-show="isLoading">加载中...</van-loading>
  </div>
</template>

<script>
  import { Swiper, SwiperSlide } from "vue-awesome-swiper";
  import videos from "../../components/shortVideo/Videos";
  import infoBar from "../../components/shortVideo/InfoBar";
  import comment from "../../components/shortVideo/Comment";
  import {
    addFollow,
    cancelLike,
    addLike,
    addComment,
    getCommentList,
    addPlay,
    getUserInfo,
    getVideoById
  } from "../../api/ShortVideo/ShortVideo";
  export default {
    data() {
      return {
        userType: '',   // 用户信息
        show: false,    // 遮罩层
        hasMoreVideo: true,   // 是否还有更多视频
        isLoading: false,   // 是否显示加载按钮
        totalItemCount: 0, // 评论数据总数
        commentList: [], // 评论列表
        commentParams: {
          pageIndex: 1,
          pageSize: 10000,
          id: ""
        }, // 评论分页数据
        videoCommentList: [], // 评论数据
        showComment: false,
        videoList: [],
        page: 1,
        swiperOption: {
          direction: "vertical",
          grabCursor: true,
          setWrapperSize: true,
          autoHeight: true, // 自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
          slidesPerView: 1,
          mousewheel: true,
          preventClicksPropagation: true,
          mousewheelControl: true,
          height: window.innerHeight, // 高度设置，占满设备高度
          resistanceRatio: 0,
          observeParents: true,
          on: {
            tap: () => {
              this.playAction(this.page - 1);
              event.stopPropagation();
            }
          }
        }
      };
    },
    components: {
      Swiper,
      SwiperSlide,
      videos,
      infoBar,
      comment
    },
    mounted() {
      this._getUserInfo();
      //使用微信访问，获取代理
      var ua = navigator.userAgent;
      var version = "000000";
      var key = "TBS/";
      var start = ua.indexOf(key);
      if (start !== -1) {
        start = start + key.length;
        version = ua.substr(start, ua.indexOf(" ", start) - start);
      }
      if (version.indexOf("000000") !== -1) {
      } else {
        this.$notify({
          message: "您当前播放设置已影响了视频的观看，请修正设置。点击查看修正方法>>",
          color: "#fff",
          background: "#2f2f2f",
          duration: 0,
          onClick: _ => {
            this.$notify.clear();
            this.$router.push({ name: 'Explain' })
          }
        })
      }
      this.videoList = [];
      this.getList();
    },
    methods: {
      // 跳转上传视频页面
      jumpUpload() {
        // window.location.replace('http://ue.360lj.com/api/Home/Login?identity=2&backurl=http://ue.360lj.com/dist/uploadFile')
        // window.location.replace('http://linyi.natapp1.cc/api/Home/Login?identity=2&backurl=http://linyi.natapp1.cc/dist/uploadFile')
        // var doctorUserLoginUrl = process.env.VUE_APP_DoctorUserLoginUrl.replace('SignUp', 'uploadFile')
        // console.log("uploadUrl: ", doctorUserLoginUrl)
        // window.location.replace(doctorUserLoginUrl)
        this.$router.push('/specialist')

      },
      // 获取用户基本信息
      _getUserInfo() {
        getUserInfo()
          .then(({ data }) => {
            if (data.success) {
              const { userRoles } = data.result
              let findResult = userRoles.find(item => item.userRoleType === 1)
              this.userType = findResult.userRoleType
            } else {
              this.$toast.fail(data.message)
            }
          })
          .catch(error => {
            console.log(error)
          })
      },
      // 新增视频播放次数
      handleAddVideoCount(e) {
        addPlay({ "ID": e.videoData.id })
      },

      // 获取评论数据
      getVideoCommentList() {
        getCommentList({ ...this.commentParams })
          .then(res => {
            this.commentList = res.data.resultObject;
            this.totalItemCount = res.data.pager.totalItemCount;
          })
          .catch(error => { });
      },
      // 加载数据
      async getList() {
        /* 根据URL中的ID获取视频 */
        const ID = this.getUrlParams('id')
        console.log("传递过来的视频ID： ", ID)
        console.log(getVideoById)
        const { data: response } = await getVideoById({ id: ID })
        console.log("response: ", response)
        if (!response.isSuccess) return this.$toast(response.resultMsg)
        this.videoList = [response.resultObject]
        console.log("this.videoList: ", this.videoList)
      },

      // 用户取消点赞
      handleCancelLike(id) {
        cancelLike({ ...id })
          .then(res => { })
          .catch(error => { });
      },

      // 用户点赞
      handleAddLike(id) {
        addLike({ ...id })
          .then(res => { })
          .catch(error => { });
      },

      // 关注用户
      handleAttention(e) {
        addFollow({ id: e.id })
          .then(res => {
            this.videoList = this.videoList.map((item) => {
              if (item.doctorID === e.id) {
                item.isFollow = true
              }
              return item;
            })
            console.log(this.videoList);
          })
          .catch(error => { });
      },

      // 用户点击后播放或者暂停视频
      playAction(index) {
        this.$refs.videos[index].playOrStop();
      },
      // 监听用户提交评论
      onSubmitComment(e) {
        addComment({ videoID: this.commentParams.id, content: e.content })
          .then(res => {
            this.$notify({
              type: "success",
              message: "评论成功",
              duration: 1000
            });
            // 关闭评论窗口
          })
          .catch(error => { });
        // 重新请求接口获取评论
        setTimeout(() => {
          this.getVideoCommentList();
        }, 500);
      },

      // 监听用户关闭评论
      onCloseComment(e) {
        this.showComment = false;
        // this.getVideoCommentList();
        console.log("this.pageIndex: ", this.page - 1);
        console.log(e.commentCount);
        this.videoList[this.page - 1].commentFrequency = e.commentCount;
      },

      handleShowComment(id) {
        this.commentParams.id = id.id;
        this.getVideoCommentList();
        // 显示评论界面
        this.showComment = true;
      }
    }
  };
</script>

<style lang="less" scoped>
  .videoList-wrap {
    background-color: #1d1d1d;
  }

  /deep/ .vjs-custom-skin > .video-js {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    // width: 80%;
  }

  /deep/ .vjs-custom-skin > .video-js .vjs-big-play-button {
    font-size: 2em;
  }

  /deep/ .video-js .vjs-tech {
    height: 90%;
  }

  .loading-btn {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
    .van-loading__text {
      color: #fff;
    }
  }

  .jump-icon {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.2rem;
    width: 100%;
    top: 0;
    z-index: 9999;
    background-color: #333333;
    img {
      width: 0.64rem;
      height: 0.64rem;
    }
  }
</style>
