<template>
  <div class="allLoveGo">
    <div class="likeGO"><b>大家都爱去</b></div>
    <van-list v-model="loading" :finished="Finished" finished-text="没有更多了" @load="onLoad">
      <ul class="likeList">
        <li v-for="(n, i) in likeList" :key="i">
          <div class="top" @click="gostoryDetail(n.id)">
            <span>故事</span>
            <div class="position">
              <van-icon name="location" />
              <b>{{ n.city }}</b>
            </div>
            <img :src="n.coverUrl" alt="" />
          </div>
          <div class="bottom">
            <h3>{{ n.title }}</h3>
            <div>
              <img :src="n.faceUrl ? n.faceUrl : require('../assets/boy.png')" alt="" />
              <span class="name">{{ n.name }}</span>
              <div :class="n.likeId > 0 ? 'zan active' : 'zan'" @click="zanbtn(n.likeId, n.id, i)">
                <van-icon name="good-job-o" />
                <span>{{ n.likeCount }}</span>
              </div>
            </div>
          </div>
        </li>
        <!-- <p v-if="likeList.length === likeCount" class="noMove">没有更多了</p> -->
        <van-empty
          class="custom-image"
          image="https://img.yzcdn.cn/vant/custom-empty-image.png"
          description="暂无推荐故事"
          v-if="likeList.length == 0"
        />
      </ul>
    </van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      likeList: [],
      likePage: 1,
      likeCount: '',
      userInfo: '',
      loading: false,
      Finished: false,
    }
  },

  // mounted() {
  // 	 window.addEventListener("scroll", this.handleScroll);
  // },
  // beforeDestroy() {
  // 	window.removeEventListener("scroll",this.handleScroll)
  // },
  created() {
    var userInfo = localStorage.getItem('userInfo')
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo)
    }
    this.GetStoryList(1)
  },
  methods: {
    onLoad() {
      var that = this
      setTimeout(() => {
        that.likePage++
        that.GetStoryList(that.likePage)
      }, 1000)
    },
    zanbtn(id, nid, index) {
      if (id > 0) {
        this.DeleteStoryLike(id, index)
      } else {
        this.AddStoryLike(nid, index)
      }
    },
    AddStoryLike(id, index) {
      var that = this
      this.http
        .AddStoryLike({
          type: 1,
          storyId: id,
          userId: this.userInfo ? this.userInfo.centerNo : 0,
        })
        .then(function(res) {
          if (res.status == 1) {
            setTimeout(function() {
              that.likeList = []
              that.GetStoryList(1)
            }, 1000)
          }
        })
    },
    DeleteStoryLike(id, index) {
      var that = this
      this.http
        .DeleteStoryLike({
          type: 1,
          id: id,
        })
        .then(function(res) {
          if (res.status == 1) {
            setTimeout(function() {
              that.likeList = []
              that.GetStoryList(1)
            }, 1000)
          }
        })
    },
    gostoryDetail(id) {
      this.$router.push({ path: '/StoryDetail', query: { id: id } })
    },
    handleScroll() {
      var that = this //变量scrollTop是滚动条滚动时，距离顶部的距离
      //window.onscroll = function(){
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop //变量windowHeight是可视区的高度
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight //变量scrollHeight是滚动条的总高度
      var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight //滚动条到底部的条件
      if (scrollTop + windowHeight == scrollHeight) {
        if (that.likeList.length < that.likeCount) {
          likePage++
          that.GetStoryList(likePage)
        } //写后台加载数据的函数 //console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
      } // }
    },
    GetStoryList(page) {
      var that = this
      this.http
        .GetStoryList({
          pageIndex: page,
          pageSize: 6,
          userId: this.userInfo ? this.userInfo.centerNo : 0,
          cs: this.projectCity,
        })
        .then(function(res) {
          if (res.status == 1) {
            if (res.data.items.length > 0) {
              that.likeCount = res.data.count
              that.likeList = that.likeList.concat(res.data.items)
            }
            that.loading = false
            if (res.data.items.length < 10) {
              that.Finished = true
            }
          }
        })
    },
  },
}
</script>

<style lang="stylus" scoped>
.allLoveGo{
	.likeGO{
		color #202228
		font-size 2rem
		margin-bottom 15px
		b{
			position relative
		}
		b::after{
			content ''
			display inline-block
			height 3px
			width 100%
			background-image linear-gradient(to right,#3FCC95,#ffffff)
			position absolute
			left 0
			bottom -5px
		}
	}
	.likeList{
		overflow hidden
		li{
			float left
			width 50%
			box-sizing border-box
			margin-bottom 10px
			.top{
				position relative
				img{
					width 100%
					height 168px
					object-fit cover
					border-radius 10px
				}
				span{
					position absolute
					background-image linear-gradient(#5EFFC1,#10E693)
					left 10px
					top 10px
					z-index 100
					padding 3px 5px
					border-radius 3px
				}
				.position{
					position absolute
					bottom 10px
					left 10px
					i{
						color #06CB67
						vertical-align middle
						font-size 1.8rem
					}
					b{
						display inline-block
						vertical-align middle
						color white
						font-size 1.8rem
					}
				}
			}
			.bottom{
				background-color white
				border-radius 0 0 5px 5px
				h3{
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					margin 0
					font-size 1.6rem
				}
				div{
					position relative
					padding 5px 0
					img{
						width 20px
						height 20px
						border-radius 50%
						display inline-block
						vertical-align middle
						margin-right 5px
					}
					span.name{
						display inline-block
						vertical-align middle
						color #7E7F81
						font-size 1.2rem
					}
					div.zan{
						position absolute
						right 10px
						bottom 3px
						font-size 1.2rem
						color #7E7F81
						i{
							font-size 1.4rem
							vertical-align top
						}
						span{
							display inline-block
							vertical-align top
						}
					}
					.zan.active{
						i{
							color #0080FF
						}
					}
				}
			}
		}
		li:nth-child(2n){
			padding-left 10px
		}
		li:nth-child(2n+1){
			padding-right 10px
		}
	}
}
</style>