<template>
  <div id="home-index">
    <SlideList key1="父" style="width: 100vw;">
      <SlideItem style="font-size: 40px;">
        <SlideList key1="父" style="width: 100vw;">
          <SlideItem style="font-size: 40px;overflow:auto;">
            <div>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
              <p>同城页</p>
            </div>

          </SlideItem>
          <SlideItem style="font-size: 40px">
            <SlideList key1="子" direction="column">
              <SlideItem style="background: white">
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
              </SlideItem>
              <SlideItem style="background: red;">
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
              </SlideItem>
              <SlideItem style="background: yellow">
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
              </SlideItem>
            </SlideList>
          </SlideItem>
          <SlideItem style="font-size: 40px">
            <SlideList key1="子" direction="column" @slide="slide">
              <SlideItem style="background: white">
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
                <p>111111111111</p>
              </SlideItem>
              <SlideItem style="background: red;">
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
                <p>222222222222</p>
              </SlideItem>
              <SlideItem style="background: yellow">
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
                <p>3333333333333</p>
              </SlideItem>
            </SlideList>
          </SlideItem>
        </SlideList>
      </SlideItem>
      <SlideItem style="font-size: 40px;overflow:auto;">
        <div>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
          <p>详情页</p>
        </div>
      </SlideItem>
    </SlideList>
  </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'
import SlideItem from './SlideItem.vue'
import SlideList from './SlideList.vue'

export default {
  name: "HomeIndex",
  components: {Footer, Comment, Share, Other, SlideList, SlideItem},
  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: {
    slide(){
      console.log('slide')
    },
    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 {
  height: 100%;
  width: 100%;
}
</style>