<template>
  <div id="home-index">
    <div class="wrapper" :style="{left:wrapperLeft}"
         @touchstart="wrapperTouchstart($event)"
         @touchmove="wrapperTouchmove($event)"
         @touchend="wrapperTouchend($event)">
      <div class="left-container swiper-item">
        <div class="content-list" :style="{top:contentListTop}">
          <div class="content-item" v-for="(item,index) of data"
               @touchstart="contentItemTouchstart($event,index)"
               @touchmove="contentItemTouchmove($event)"
               @touchend="contentItemTouchend($event,index)">
            <div class="bg-video" v-bind:style="{'height':height+'px'}">
              <video :src="item.videoUrl" :poster="item.poster" ref="video" muted :autoplay="index === 0" loop>
                <p> 您的浏览器不支持 video 标签。</p>
              </video>
              <div class="float" @click="togglePlayVideo($event)">
                <transition name="pause">
                  <img src="../../assets/img/icon/play.svg" class="pause" v-show="!isPlaying"
                       @click.stop="togglePlayVideo($event)">
                </transition>
                <div class="toolbar mb10p">
                  <img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image mb15p"
                       @click.stop="goUserInfo(item)">
                  <div class="love mb15p" @click.stop="loved($event,index)">
                    <div>
                      <transition name="love">
                        <img src="../../assets/img/icon/love.svg" class="love-image" v-if="!item.isLoved">
<!--                        <img src="../../assets/img/icon/loved.svg" class="love-image" v-if="item.isLoved">-->
                      </transition>
                      <transition name="loved">
                      </transition>
                    </div>
                    <span class="f14">{{ item.loves }}</span>
                  </div>
                  <div class="message mb15p" @click.stop="showComment">
                    <img src="../../assets/img/icon/message.svg" alt="" class="message-image">
                    <span class="f14">{{ item.comments }}</span>
                  </div>
                  <div class="share mb35p" @click.stop="showShare">
                    <img src="../../assets/img/icon/share.svg" alt="" class="share-image">
                    <span class="f14">{{ item.shared }}</span>
                  </div>
                  <img src="../../assets/img/icon/head-image.jpeg" alt="" class="music" @click.stop="goMusic()">
                </div>
                <div class="content ml10p" @click.stop="goUserInfo()">
                  <div class="name mb10p">@TTentau</div>
                  <div class="description mb10p">
                    吴三二的光年之外, 您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。
                  </div>
                  <div class="music mb10p" @click.stop="goMusic()">
                    <img src="../../assets/img/icon/music.svg" alt="" class="music-image">
                    <marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 -
                      光年之外
                    </marquee>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <Comment v-bind:is-commenting.sync="isCommenting"/>
        <Share v-bind:is-sharing.sync="isSharing" ref="share"/>
        <Footer v-bind:init-tab="1"/>
      </div>
      <div class="right-container swiper-item">
        <Other ref="other" @back="backVideoList"/>
      </div>
    </div>
  </div>
</template>

<script>
import Comment from '../../components/Comment.vue'
import Other from '../../components/Other.vue'
import Share from '../../components/Share.vue'
import Footer from "../../components/Footer.vue"
import mp1 from '../../assets/video/1.mp4'
import src1Bg from '../../assets/img/poster/src1-bg.png'
export default {
  name: "HomeIndex",
  components: {Footer, Comment, Share, Other},
  data() {
    return {
      data: [
        {
          videoUrl: mp1,
          // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
          videoPoster: src1Bg,
          isLoved: false,
          loves: 1234,
          comments: 666,
          shared: 999
        },
        {
          videoUrl: mp1,
          // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
          videoPoster: src1Bg,
          isLoved: false,
          loves: 1234,
          comments: 666,
          shared: 999
        },
        {
          videoUrl: mp1,
          // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
          videoPoster: src1Bg,
          isLoved: false,
          loves: 1234,
          comments: 666,
          shared: 999
        },
      ],
      height: 0,
      width: 0,
      startLocationY: 0,
      startLocationX: 0,

      lastLocationY: 0,
      lastLocationX: 0,

      moveXDistance: 0,
      moveYDistance: 0,

      judgeValue: 10,

      startTime: 0,
      currentIndex: 0,
      currentSwiperItemIndex: 0,
      isDrawDown: false,
      isDrawRight: false,

      isCanDownWiping: false,
      isCanRightWiping: false,
      isNeedCheck: true,

      isPlaying: true,
      isCommenting: false,
      isSharing: false,

      wrapperLeft: 0,
      contentListTop: 0,

      commentHeight: 0,
      shareHeight: 0,
    }
  },
  mounted() {
    this.height = document.body.clientHeight
    this.width = document.body.clientWidth
  },
  methods: {
    goMusic() {
      this.$router.push('/music')
    },
    checkDirection() {
      if (!this.isNeedCheck) {
        return
      }
      if (Math.abs(this.moveXDistance) > this.judgeValue || Math.abs(this.moveYDistance) > this.judgeValue) {
        //X 除以 Y
        let angle = (Math.abs(this.moveXDistance) * 10) / (Math.abs(this.moveYDistance) * 10)
        if (angle > 0.7 && angle < 1.3) {
          this.isNeedCheck = false
          return
        }

        // console.log('x------------', moveXDistance)
        // console.log('y------------', moveYDistance)
        // console.log('角度------------', angle)

        if (angle < 0.6) {
          //上下划
          this.isCanDownWiping = true
          this.isCanRightWiping = false
          this.isNeedCheck = false
          return
        }
        if (angle > 5) {
          //左右划
          this.isCanDownWiping = false
          this.isCanRightWiping = true
          this.isNeedCheck = false
        }
      }
    },
    resetConfig() {
      this.isCanDownWiping = false
      this.isCanRightWiping = false
      this.isNeedCheck = true
      this.moveXDistance = 0
      this.moveYDistance = 0
    },
    wrapperTouchstart(e) {
      if (this.isSharing || this.isCommenting) {
        // this.isNeedCheck = this.isCommenting = this.isSharing = false
        this.isNeedCheck = false
        return
      }

      this.startLocationX = e.touches[0].pageX
      this.startTime = Date.now()
    },
    wrapperTouchmove(e) {
      this.lastLocationX = e.touches[0].pageX
      this.moveXDistance = this.lastLocationX - this.startLocationX
      this.isDrawRight = this.moveXDistance < 0
      this.checkDirection()
      if (this.isCanRightWiping) {
        if (this.isDrawRight) {
          this.wrapperLeft = -this.currentSwiperItemIndex * this.width + this.moveXDistance + this.judgeValue + 'px'
        } else {
          this.wrapperLeft = -this.currentSwiperItemIndex * this.width + this.moveXDistance - this.judgeValue + 'px'
        }
      }
    },
    wrapperTouchend(e) {
      if (!this.isCanRightWiping) {
        this.isNeedCheck = true
        return
      }
      let endTime = Date.now()
      let gapTime = endTime - this.startTime

      if (Math.abs(this.moveXDistance) < 20) {
        gapTime = 1000
      }
      if (Math.abs(this.moveXDistance) > (this.width / 3)) {
        gapTime = 100
      }
      if (gapTime < 150) {
        if (this.isDrawRight) {
          // console.log('往左划');
          if (this.currentSwiperItemIndex === 2 - 1) {
            return this.wrapperLeft = -this.width + 'px'
          }
          this.wrapperLeft = -(this.currentSwiperItemIndex + 1) * this.width + 'px'
          this.currentSwiperItemIndex += 1
        } else {
          // console.log('往右划');
          if (this.currentSwiperItemIndex === 0) {
            return this.wrapperLeft = 0 + 'px'
          }
          this.wrapperLeft = -(this.currentSwiperItemIndex - 1) * this.width + 'px'
          this.currentSwiperItemIndex -= 1
        }
      } else {
        this.wrapperLeft = -(this.currentSwiperItemIndex) * this.width + 'px'
      }

      //暂停播放视频
      let videos = this.$refs.video
      if (this.currentSwiperItemIndex === 0) {
        videos[this.currentIndex].play()
      } else {
        videos[this.currentIndex].pause()
      }

      this.resetConfig()
    },
    contentItemTouchstart(e, index) {
      // this.currentIndex = index
      this.startLocationY = e.touches[0].pageY
      this.startTime = Date.now()
    },
    contentItemTouchmove(e) {
      this.lastLocationY = e.touches[0].pageY

      this.moveYDistance = this.lastLocationY - this.startLocationY
      this.isDrawDown = this.moveYDistance < 0

      this.checkDirection()
      if (this.isCanDownWiping) {
        if (this.isDrawDown) {
          this.contentListTop = -this.currentIndex * this.height + this.moveYDistance + this.judgeValue + 'px'
          // contentList.css({top: -(currentIndex + 0) * height + moveYDistance + judgeValue})
        } else {
          this.contentListTop = -this.currentIndex * this.height + this.moveYDistance - this.judgeValue + 'px'
          // contentList.css({top: -(currentIndex + 0) * height + moveYDistance - judgeValue})
        }
      }
    },
    contentItemTouchend(e, index) {
      this.currentIndex = index

      if (!this.isCanDownWiping) {
        this.isNeedCheck = true
        return
      }
      let endTime = Date.now()
      let gapTime = endTime - this.startTime

      // 如果
      if (Math.abs(this.moveYDistance) < 20) {
        gapTime = 1000
      }
      if (Math.abs(this.moveYDistance) > (this.width / 3)) {
        gapTime = 100
      }
      if (gapTime < 150) {
        if (this.isDrawDown) {
          console.log('往下划')
          if (this.data.length < this.currentIndex + 4) {
            this.loadNewVideo()
          }
          this.contentListTop = -(this.currentIndex + 1) * this.height + 'px'
          this.currentIndex += 1
        } else {
          console.log('往上划')
          if (this.currentIndex === 0) {
            return this.contentListTop = 0
          }
          this.contentListTop = -(this.currentIndex - 1) * this.height + 'px'
          this.currentIndex -= 1
        }
        this.swipingVideo()
      } else {
        this.contentListTop = -this.currentIndex * this.height + 'px'
      }

      this.resetConfig()
    },
    //加载新的视频
    loadNewVideo() {
      this.data.push({
        videoUrl: mp1,
        // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
        videoPoster: src1Bg,
        isLoved: false,
        loves: 1234,
        comments: 666,
        shared: 999
      },)
    },

    //划动到下一个视频
    swipingVideo() {
      let videos = this.$refs.video
      if (this.currentIndex) {
        videos[this.currentIndex - 1].pause()
      }
      videos[this.currentIndex].play()
      videos[this.currentIndex].muted = false
      videos[this.currentIndex + 1].pause()


      this.isCommenting = false
      this.isSharing = false
      this.isPlaying = true
    },
    //切换视频状态
    togglePlayVideo(e) {
      if (this.isSharing) {
        this.isSharing = false
        return
      }
      if (this.isCommenting) {
        this.isCommenting = false
        return
      }
      let el = e.target
      let video = ''
      if (el.nodeName == 'IMG') {
        video = el.parentNode.previousSibling
      } else {
        video = el.previousSibling
      }
      if (video.paused) {
        video.play()
      } else {
        video.pause()
      }
      this.isPlaying = !video.paused
    },
    //展示评论
    showComment() {
      this.isCommenting = !this.isCommenting
    },
    showShare() {
      this.isSharing = !this.isSharing
    },
    loved(e, index) {
      this.data[index].isLoved = !this.data[index].isLoved
    },
    //前往用户中心
    goUserInfo(item) {
      this.wrapperLeft = '-100%'
    },
    //返回视频列表
    backVideoList() {
      this.wrapperLeft = '0'
    }
  },
  created() {

  },

}
</script>
<style scoped lang="scss">
#home-index {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .wrapper {
    /*transition: left 0.25s ease;*/
    transition: left 0.25s ease-out;
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;

    .swiper-item {
      /*flex-shrink: 0;*/
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .left-container {
      top: 0;
      left: 0;
      overflow: hidden;

      .content-list {
        position: absolute;
        transition: top 0.25s ease-out;
        height: 100%;
        width: 100%;

        .content-item {
          width: 100%;
          height: 100%;
          position: relative;

          .bg-video {
            position: relative;
            background: black;

            video {
              width: 100%;
              height: 100%;
              /*position: absolute;*/
            }

            .float {
              z-index: 1;
              position: absolute;
              top: 0;
              width: 100%;
              height: 100%;
              justify-content: center;
              align-items: center;

              .pause {
                width: 60px;
                height: 60px;
                opacity: 0.5;
                position: absolute;
                margin: auto;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
              }

              .toolbar {
                width: 40px;
                position: absolute;
                bottom: 35px;
                right: 20px;
                color: #fff;

                div {
                  text-align: center;
                }

                img {
                  width: 90%;
                  height: 90%;
                }

                .head-image, .music {
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
                }

                .love {
                  img {

                  }
                }

                .loved {
                  background: red;
                }

                .music {
                  animation: animations 4s linear forwards infinite;
                }

                @keyframes animations {
                  0% {
                    transform: rotate(0deg);;
                  }
                  100% {
                    transform: rotate(360deg);
                  }
                }
              }

              .content {
                color: #fff;
                position: absolute;
                bottom: 35px;
                width: 75%;

                .music {
                  position: relative;
                  width: 60%;

                  .music-image {
                    width: 20px;
                    height: 20px;
                    margin-top: 3px;
                    position: absolute;
                  }

                  marquee {
                    margin-left: 30px;
                  }

                }
              }
            }
          }
        }
      }
    }

    .right-container {
      top: 0;
      left: 100%;
      overflow: auto;

      .user-videos {
        height: 12000px;
      }
    }
  }
}
</style>
<style scoped lang="scss">

.pause-enter-active {
  transition: all .3s ease;
}

.pause-leave-active {
  /*transition: all 1s ease ;*/
}

.pause-enter, .pause-leave-to {
  transform: scale(2);
  opacity: 0;
}

.love-enter-active {
  transition: all .3s ease;
}

.love-leave-active {
  transition: all .3s ease;
}

.love-leave-to {
  transform: scale(2);
  opacity: 0;
}

.loved-enter-active {
  transition: all .3s ease;
}

.loved-leave-active {
  transition: all .3s ease;
}

.loved-leave-to {
  opacity: 0;
}


</style>
