<template>
  <div class="myCillection">
    <van-nav-bar title="我的收藏" left-arrow :fixed="true" @click-left="onClickLeft" />
    <van-list v-model="loading" :finished="Finished" finished-text="没有更多了" @load="onLoad">
      <ul class="list">
        <li v-for="(n, i) in list" :key="i">
          <van-swipe-cell>
            <div class="box">
              <img :src="n.coverUrl ? n.coverUrl : require('@/assets/def.png')" alt="" />
              <h3>{{ n.baseName }}</h3>
              <div>
                <van-icon name="location" />
                {{ n.province + n.city + n.address }}
              </div>
              <p>{{ n.baseInfo }}</p>
            </div>
            <template #right>
              <van-button square text="删除" type="danger" class="delete-button" @click="DeleteMyCollect(n.id)" />
            </template>
          </van-swipe-cell>
        </li>
      </ul>
      <van-empty
        class="custom-image"
        image="https://img.yzcdn.cn/vant/custom-empty-image.png"
        description="暂无收藏"
        v-if="list.length == 0"
      />
    </van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: 1,
      loading: false,
      Finished: false,
      userInfo: '',
    }
  },
  created() {
    var userInfo = localStorage.getItem('userInfo')
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo)
    }
    this.GetMycollectList(1)
  },
  methods: {
    onClickLeft() {
      history.back()
    },
    onLoad() {
      var that = this
      setTimeout(() => {
        that.page++
        that.GetMycollectList(that.page)
      }, 1000)
    },
    GetMycollectList(page) {
      var that = this
      this.http
        .GetMycollectList({
          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.list = that.list.concat(res.data.items)
            }
            that.loading = false
            if (res.data.items.length < 10) {
              that.Finished = true
            }
          }
        })
    },
    DeleteMyCollect(id) {
      var that = this
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否删除该基地？',
        })
        .then(() => {
          this.$toast.loading({
            message: '请求中...',
          })
          this.DeleteMyCollect({
            id: id,
          }).then(function(res) {
            that.$toast.clear()
            if (res.status == 1) {
              that.$toast.success('删除成功')
              that.GetMycollectList()
            }
          })
        })
        .catch(() => {
          // on cancel
        })
    },
  },
}
</script>

<style lang="stylus" scoped>
.myCillection{
	position fixed
	top 0
	left 0
	right 0
	bottom 0
	background-color #F7F7F7
}
.list{
	margin-top 100px
	li{
		padding 40px
		box-sizing border-box
		.box{
			background-color white
			position relative
			box-sizing border-box
			padding 20px 20px 20px 240px
			min-height 220px
			border-radius 10px
			img{
				position absolute
				left 40px
				top 20px
				width 180px
				height 180px
				border-radius px
			}
			h3{
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				font-size 1.6rem
				margin 0px
			}
			p{
				color #BE9A80
				font-size 1.4rem
				margin 0
			}
			div{
				padding-left 40px
				position relative
				box-sizing border-box
				color #B4B4B4
				font-size 1.2rem
				margin 10px 0
				i{
					position absolute
					left 0
					top 0
					font-size 1.4rem
				}
			}
		}
	}
}
.delete-button {
    height: 100%;
}
</style>