<template>
    <div class="collect">
      <!--<van-nav-bar title="我的收藏">
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>-->
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
        >
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </form>
      <van-tabs class="collect-tabs" v-model="active" :border="false" sticky animated>
        <van-tab title="视频">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <div class="collect-list">
                <div v-for="item in list" :key="item.id" class="collect-list__item" :style="`background-image: url(${item.thumb})`">
                  <div class="collect-list__like">
                    <van-icon name="like-o" />
                    <span>{{ item.like_num }}</span>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </van-tab>
        <van-tab title="图文">
          <div class="text1-2 text-center tip">功能暂未开发，敬请期待~</div>
        </van-tab>
      </van-tabs>
    </div>
</template>

<script>
export default {
  name: 'collect',
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      active: 0,
      value: '',
      page: 0
    }
  },
  methods: {
    onLoad () {
      this.$http.user.videoCollect({ page: this.refreshing ? this.page = 1 : this.page += 1 }).then(({ code, data }) => {
        if (this.refreshing) {
          this.list = []
          this.refreshing = false
        }
        if (code === 200) {
          if (data.total_page === data.current_page || data.total_page === 0) {
            this.finished = true
          }
          if (data.current_page === 1) {
            this.list = data.list
          } else {
            this.list = this.list.concat(data.list)
          }
        }
        this.loading = false
      })
    },
    onRefresh () {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    onSearch () {}
  }
}
</script>

<style lang="scss" scoped>
.collect {
  padding-bottom: 50px;
  .tip {
    line-height: 50px;
  }
  &-list {
    padding: 0 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    &__item {
      position: relative;
      height: 120px;
      background-size: cover;
      border-radius: 6px;
    }
    &__like {
      display: flex;
      align-items: center;
      color: #ffffff;
      position: absolute;
      bottom: 5px;
      left: 5px;
      i {
        margin-right: 8px;
      }
    }
  }
}
</style>
