<template>
<!--  :class="[ isIOS ? 'ios-height' : 'd-height' ]"-->
  <div class="video-list" :style="{'height': height}">
    <swiper class="video-list__swiper" ref="playerSwiper" :options="swiperOptions" v-if="videoList.length"
            @slideChange="_slideChange">
      <swiper-slide v-for="(item, index) in videoList" :key="item.id">
        <div class="video-list__item">
          <video-player :video-data="item" :is-current="index === activeIndex" :index="index"/>
          <div class="video-list__info" :class="[isHome ? 'bottom-70' : 'bottom-20']">
            <div class="video-list__author">@{{ item.username }}</div>
            <div class="video-list__title van-multi-ellipsis--l2">{{ item.title }}</div>
          </div>
          <div class="video-list__operating">
            <div class="video-list__avatar">
              <img :src="item.avatar" alt="">
              <div class="video-list__add" v-if="item.is_follow === 0">
                <van-icon name="plus" color="#fff" size="16"/>
              </div>
            </div>
            <div class="video-list__icon">
              <van-icon name="like" size="24" :color="item.is_like === 1 ? 'red' : ''" @click="_like(item)"/>
              <p>{{ item.like_num_str }}</p>
            </div>
            <div class="video-list__icon" @click="_comment(item)">
              <van-icon name="chat-o" size="24"/>
              <p>{{ item.comment_num_str }}</p>
            </div>
            <div class="video-list__icon">
              <van-icon class-prefix="fa fa-share" size="24"/>
              <p>{{ item.share_num_str }}</p>
            </div>
          </div>
        </div>
      </swiper-slide>
    </swiper>
    <van-action-sheet v-model="commentShow" :title="`${commentItem.comment_num_str} 条评论`" style="overflow-y: inherit;">
      <div class="video-comment__content" v-if="commentShow">
        <div style="height: 100%;overflow: auto">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <template v-for="(item, index) in commentList">
                <van-cell :key="index" @click="_reply(item)" :border="false">
                  <div class="comment-list__item">
                    <div class="d-flex flex-1">
                      <img class="comment-list__avatar" :src="item.avatar" alt="">
                      <div>
                        <p class="text1-2">{{ item.nickname || item.username }}</p>
                        <p class="comment-list__content">{{ item.content }} <span
                          class="text1-2">{{ item.mtime }}</span></p>
                      </div>
                    </div>
                    <div class="d-flex flex-column align-items-center">
                      <van-icon name="like" size="16" :color="item.is_like === 0 ? '#999999' : 'red'"
                                @click="_commentLike(item, index)"/>
                      <p class="text1-2">{{ item.like_num }}</p>
                    </div>
                  </div>
                </van-cell>
<!--                回复-->
                <template v-if="item.reply_num">
                  <!--<div class="comment-reply__item" v-for="(secondItem, index) in item.reply_info" :key="secondItem.id + index">
                    <img :src="secondItem.avatar" alt="">
                    <div class="flex-1 d-flex justify-space-between">
                      <div>
                        <p class="text1-2">{{ secondItem.nickname || secondItem.username }}</p>
                        <p>回复 <span class="text1-2">{{ item.nickname || item.username }}</span>：{{ secondItem.content }} <span
                          class="text1-2">{{ secondItem.mtime }}</span></p>
                      </div>
                      <div class="text-center">
                        <van-icon name="like" size="16" :color="secondItem.is_like === 0 ? '#999999' : 'red'"/>
                        <p class="text1-2">{{ secondItem.like_num }}</p>
                      </div>
                    </div>
                  </div>-->
                  <div class="comment-list__more link-1" :key="index" @click="_toReply(item)">{{ item.reply_num }}条回复 ></div>
                </template>
              </template>
            </van-list>
          </van-pull-refresh>
        </div>
      </div>
      <div class="video-comment__foot">
        <van-form @submit="_setComment">
          <van-field v-model="commentContent" ref="commentField" :placeholder="commentPlaceholder" @blur="_commentBlur" />
        </van-form>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import videoPlayer from './video_player'

export default {
  name: 'player',
  data () {
    return {
      swiperOptions: {
        direction: 'vertical'
      },
      page: 1,
      videoList: [],
      activeIndex: 0,
      commentShow: false,
      commentPage: 1,
      commentList: [],
      loading: false,
      finished: false,
      refreshing: false,
      commentId: '',
      commentContent: '',
      commentItem: {},
      isHome: true,
      commentPlaceholder: '有爱评论，说点儿好听的~',
      replyItem: null,
      isIOS: 0,
      height: 0
    }
  },
  components: { videoPlayer },
  computed: {
    swiper () {
      return this.$refs.playerSwiper.$swiper
    }
  },
  created () {
    if (/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)) {
      this.isIOS = 1
    }

    this.height = window.innerHeight + 'px'

    this._videoList()
    if (this.$route.path !== '/video') {
      this.isHome = true
    } else {
      this.isHome = false
    }
  },
  methods: {
    _toReply (item) {
      this.$router.push({
        name: 'commentReply',
        params: { item }
      })
    },
    _videoList () {
      this.$http.video.list({ page: this.page }).then(({ code, data }) => {
        if (code === 200) {
          if (this.page === 1) {
            this.videoList = data.list
          } else {
            this.videoList = this.videoList.concat(data.list)
          }
        }
      })
    },
    // swiper 切换
    _slideChange () {
      this.activeIndex = this.swiper.activeIndex
      this._resetComment()
      if (this.videoList.length - 3 === this.activeIndex) {
        this.page++
        this._videoList()
      }
    },
    _resetComment () {
      this.commentList = []
      this.loading = false
      this.finished = false
      this.refreshing = false
    },
    // 视频点赞
    _like (item) {
      if (item.is_like === 0) {
        this.$http.video.like({ vid: item.id }).then(({ code }) => {
          if (code === 200) {
            this.videoList[this.activeIndex].is_like = 1
            this.videoList[this.activeIndex].like_num += 1
          }
        })
      } else {
        this.$http.video.cancelLike({ vid: item.id }).then(({ code }) => {
          if (code === 200) {
            this.videoList[this.activeIndex].is_like = 0
            this.videoList[this.activeIndex].like_num -= 1
          }
        })
      }
    },
    _comment (item) {
      this.commentItem = item
      this.commentId = item.id
      this.commentShow = true
    },
    // 获取评论
    onLoad () {
      if (this.refreshing) {
        this.commentList = []
        this.refreshing = false
      }
      this.$http.video.commentList({ page: this.commentPage, vid: this.commentItem.id }).then(({ code, data }) => {
        this.loading = false
        if (code === 200) {
          if (data.total_page === 0 || data.total_page === data.current_page) {
            this.finished = true
          }
          this.commentItem.comment_num = data.total
          if (data.current_page === 1) {
            this.commentList = data.list
          } else {
            this.commentList = this.commentList.concat(data.list)
          }
        }
      })
    },
    onRefresh () {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    // 评论
    _setComment () {
      if (this.replyItem) {
        this.$http.video.comment({
          vid: this.commentId,
          content: this.commentContent,
          pid: this.replyItem.id
        }).then(({ code, msg }) => {
          if (code === 200) {
            this._commentCallback(msg)
            this.commentPlaceholder = '有爱评论，说点儿好听的~'
          }
        })
      } else {
        this.$http.video.comment({ vid: this.commentId, content: this.commentContent }).then(({ code, msg }) => {
          if (code === 200) {
            this._commentCallback(msg)
          }
        })
      }
    },
    _commentCallback (msg) {
      this.$toast.success(msg)
      this.commentContent = ''
      this.$refs.commentField.blur()
      this.onRefresh()
    },
    // 评论点赞
    _commentLike (item, index) {
      if (item.is_like === 0) {
        this.$http.video.commentLike({ comment_id: item.id }).then(({ code }) => {
          if (code === 200) {
            this.commentList[index].is_like = 1
            this.commentList[index].like_num += 1
          }
        })
      } else {
        this.$http.video.cancelCommentLike({ comment_id: item.id }).then(({ code }) => {
          if (code === 200) {
            this.commentList[index].is_like = 0
            this.commentList[index].like_num -= 1
          }
        })
      }
    },
    // 回复
    _reply (item) {
      this.replyItem = item
      this.commentPlaceholder = `回复@${item.nickname || item.username}`
      this.$refs.commentField.focus()
    },
    _commentBlur () {
      this.replyItem = null
      this.commentPlaceholder = '有爱评论，说点儿好听的~'
    }
  }
}
</script>

<style lang="scss" scoped>
  .d-height {
    height: 100vh;
  }
  .ios-height {
    height: calc(100vh - 75px);
  }
  .video-list {
    background-color: #000000;

    .van-overlay {
      background-color: transparent;
    }

    &__swiper {
      height: 100%;
    }

    &__item {
      position: relative;
      overflow: hidden;
      height: 100%;
    }

    &__info {
      position: absolute;
      left: 20px;
      right: 20px;
      color: #ffffff;
      z-index: 999;
    }

    .bottom-70 {
      bottom: 70px;
    }

    .bottom-20 {
      bottom: 20px;
    }

    &__author {
      font-size: 18px;
      margin-bottom: 8px;
    }

    &__operating {
      position: absolute;
      right: 10px;
      bottom: 150px;
      color: #ffffff;
      text-align: center;
      z-index: 999;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    &__icon {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      i {
        opacity: 0.75;
        margin-bottom: 8px;
      }
    }

    &__avatar {
      margin-bottom: 32px;
      position: relative;

      img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 1PX solid #ffffff;
        display: block;
      }
    }

    &__add {
      position: absolute;
      bottom: -10px;
      left: 50%;
      margin-left: -10px;
      background-color: red;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &__comment {
      background-color: hsla(0, 0%, 20%, 0.97);
      overflow-y: hidden;

      .van-action-sheet__header {
        position: absolute;
        left: 0;
        right: 0;
        font-size: 14px;
        color: #ffffff;
      }
    }
  }

  .video-comment {
    &__content {
      height: 60vh;
      padding-bottom: 40px;
    }

    &__head {
      z-index: 9;
      height: 50px;
      background-color: #21b7ff;
    }

    &__list {
      flex: 1;
      overflow-y: auto;
    }

    &__foot {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }

  .comment-list {
    &__item {
      font-size: 12px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }

    &__avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      margin-right: 8px;
    }

    &__content {
      font-size: 13px;

      span {
        font-size: 12px;
      }
    }
  }

  .comment-reply__item {
    display: flex;
    line-height: 24px;
    padding: 0 16px 10px 56px;
    img {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      margin-right: 8px;
    }
  }

  .comment-list__more {
    padding: 5px 0 5px 56px;
  }
</style>
