<template>
  <div id="collection" class="app">
    <van-sticky :offset-top="0">
      <van-nav-bar title="我的收藏" />
    </van-sticky>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-swipe-cell v-for="item in list" :key="item.id">
        <van-card
          @click="() => toUrl(item.id)"
          :desc="item.normalizedContent"
          :title="item.title"
          class="goods-card"
          :thumb="item.imgUrl"
        />
        <template #right>
          <van-button
            square
            @click="() => collection(item.id)"
            text="取消收藏"
            type="danger"
            class="delete-button"
          />
        </template>
      </van-swipe-cell>
    </van-pull-refresh>
  </div>
</template>

<script>
import {
  Sticky as vanSticky,
  NavBar as vanNavBar,
  Button as vanButton,
  SwipeCell as vanSwipeCell,
  Card as vanCard,
  PullRefresh as vanPullRefresh
} from "vant";
import "vant/lib/sticky/style";
import "vant/lib/nav-bar/style";
import "vant/lib/button/style";
import "vant/lib/card/style";
import "vant/lib/pull-refresh/style";
import "vant/lib/swipe-cell/style";
import { articleCollect, collectCancel } from "@/api/article/article.js";

export default {
  name: "app",
  data: function() {
    return {
      list: [],
      isLoading: false
    };
  },
  methods: {
    onClickLeft() {
      console.log("--");
      location.href = "/";
    },
    toUrl(id) {
      console.log(id);
      location.href = "./newsDetail.html?id=" + id;
    },
    onRefresh() {
      articleCollect("").then(res => {
        this.isLoading = false;
        this.list = res;
      });
    },
    collection(id) {
      collectCancel(id).then(() => {
        articleCollect("").then(res => {
          console.log(res);
          this.list = res;
        });
      });
    }
  },
  mounted() {
    articleCollect("").then(res => {
      console.log(res);
      this.list = res;
    });
  },
  beforeDestroy: function() {},
  components: {
    vanSticky,
    vanNavBar,
    vanButton,
    vanSwipeCell,
    vanCard,
    vanPullRefresh
  }
};
</script>
<style lang="scss">
#collection {
  .delete-button {
    height: 100%;
  }
}
</style>
