<template>
  <div class="find">
    <form action="1" class="searchBox">
      <van-search v-model="searchValue" shape="round" placeholder="搜索相关故事" input-align="center" @search="onSearch" />
    </form>
    <div class="areaList">
      <div class="box">
        <span :class="areaActive == 0 ? 'active' : ''" @click="areaClick(0, '')"><b>最新</b><u></u></span>
        <span
          :class="areaActive == item.area_code ? 'active' : ''"
          @click="areaClick(item.area_code, item.area_name)"
          v-for="(item, index) in AreaList"
          :key="index"
          ><b>{{ item.area_name.substring(0, 2) }}</b
          ><u></u
        ></span>
      </div>
    </div>
    <ul class="likeList">
      <li v-for="(n, i) in likeList" :key="i" @click="gostoryDetail(n.id)">
        <div class="top">
          <span>故事</span>
          <div class="position">
            <van-icon name="location" />
            <b>杭州</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="zan">
              <van-icon name="good-job-o" />
              <span>{{ n.likeCount }}</span>
            </div>
          </div>
        </div>
      </li>
      <van-empty
        class="custom-image"
        image="https://img.yzcdn.cn/vant/custom-empty-image.png"
        description="暂无故事"
        v-if="likeList.length == 0"
      />
    </ul>
    <div class="appendMore" v-if="likeList.length < likeCount" @click="likeMore">查看更多</div>
    <BottomNav :BottomNav="navActive"></BottomNav>
    <div :is="background"></div>
  </div>
</template>

<script>
import BottomNav from '../components/BottomNav.vue'
import Background from '../components/Background.vue'
export default {
  components: {
    BottomNav,
    Background,
  },
  data() {
    return {
      navActive: 2,
      searchValue: '',
      AreaList: '',
      areaActive: 0,
      likeList: [],
      likePage: 1,
      likeCount: 0,
      isNew: 1,
      areaName: '',
      background: '',
    }
  },
  created() {
    this.GetZJSysAreaList()
    this.GetStoryList(1)
  },
  methods: {
    gostoryDetail(id) {
      this.$router.push({ path: '/StoryDetail', query: { id: id } })
    },
    GetZJSysAreaList() {
      var that = this
      this.http
        .GetZJSysAreaList({
          cityCode: this.projectCityCode,
        })
        .then(function(res) {
        if (res.status == 1) {
          that.AreaList = res.data
        }
      })
    },
    GetStoryList(page) {
      var that = this
      this.http
        .GetStoryList({
          pageIndex: page,
          pageSize: 10,
          title: this.searchValue,
          city: this.areaName,
          isNew: this.isNew,
          cs: this.projectCity,
        })
        .then(function (res) {
          if (res.status == 1) {
            that.likeCount = res.data.count
            that.likeList = that.likeList.concat(res.data.items)
          }
        })
    },
    likeMore() {
      this.likePage++
      this.GetStudyBaseList(this.likePage)
    },
    areaClick(id, name) {
      this.areaActive = id
      if (id != 0) {
        this.isNew = 0
        this.areaName = name
      } else {
        this.isNew = 1
        this.areaName = ''
      }
      this.likeList = []
      this.likePage = 1
      this.GetStoryList(1)
    },
    onSearch() {
      this.likeList = []
      this.likePage = 1
      this.GetStoryList(1)
    },
    backgroundShow(text) {
      this.background = text
    },
  },
  filters: {},
}
</script>
<style lang="stylus" scoped>
.find{
	padding 0 40px 120px 40px
	box-sizing border-box
	.appendMore{
		background-color #F7F7F7
		border-radius 10px
		text-align center
		padding 220px 0
		color #64B1FF
		font-size 1.2rem
		margin-bottom 20px
	}
	.areaList{
		width 100%
		overflow auto
		padding 20px 0
		div{
			width 1200px
			span{
				display inline-block
				width 100px
				text-align center
				font-size 1.6rem
				color #202228
				font-weight 500
				vertical-align middle
			}
			span.active{
				position relative
				font-size 2rem
				b{
					position relative
					z-index 100
				}
				u{
					width 100%
					height 16px
					border-radius 100px
					background-image linear-gradient(to right,#3FCC95,#ffffff)
					position absolute
					bottom 0
					left 0
				}
			}
		}
	}
	.likeList{
		overflow hidden
		li{
			float left
			width 50%
			box-sizing border-box
			margin-bottom 20px
			.top{
				position relative
				span{
					position absolute
					background-image linear-gradient(#5EFFC1,#10E693)
					left 20px
					top 20px
					z-index 100
					padding 6px 10px
					border-radius 6px
				}
				img{
					width 100%
					object-fit cover
					border-radius 20px
				}
				.position{
					position absolute
					bottom 20px
					left 20px
					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 10px 10px
				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 10px 0
					img{
						width 40px
						height 40px
						border-radius 50%
						display inline-block
						vertical-align middle
						margin-right 10px
					}
					span.name{
						display inline-block
						vertical-align middle
						color #7E7F81
						font-size 1.2rem
					}
					div.zan{
						position absolute
						right 20px
						bottom 6px
						font-size 1.2rem
						color #7E7F81
						i{
							font-size 1.4rem
							vertical-align top
						}
						span{
							display inline-block
							vertical-align top
						}
					}
				}
			}
		}
		li:nth-child(2n){
			padding-left 20px
		}
		li:nth-child(2n+1){
			padding-right 20px
		}
	}
}
</style>