<template>
<div>
    <headerNav title="我的收藏"/>
    <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        >
        <div v-for="(item,index) in list" :key="index">
            <van-swipe-cell :right-width="65" :on-close="onClose(item)">
                <product-card :product='item' />
                    <span slot="right" >删除</span>
                </van-swipe-cell>
        </div>
    </van-list>
</div>
</template>

<script>
import { GetFavorite ,DelFavorite} from "../../../api/user.js";

export default {
    data(){
        return{
            loading:false,
            finished:false,
            list:[],
            page:0,
        }
    },
    methods:{
        onClose(item){
            return function(clickPosition, instance) {
                switch (clickPosition) {
                    case 'left':
                    case 'cell':
                    case 'outside':
                    instance.close();
                    break;
                    case 'right':
                        this.$dialog.confirm({
                            message: '确定删除吗？'
                        }).then(() => {
                            DelFavorite(item.id).then(response=>{
                                this.$toast('删除成功');
                                this.$router.go(0);  
                            })
                            instance.close();
                        }).catch(() => {
                        // on cancel
                        });
                    break;
                }
            }
        },
        onLoad() {
            this.page++;
            GetFavorite().then(response=>{
                response.list.forEach(item => {
                    this.list.push(item);
                });
                this.loading = false;
                if(response.TotalPage<=this.page){
                    this.finished = true;
                }
            
            })
        }
    },
}
</script>

<style lang="less">
.van-swipe-cell{
    &__left,
    &__right {
      color: #FFFFFF;
      font-size: 15px;
      width: 65px;
      height: 100px;
      display: inline-block;
      text-align: center;
      line-height: 100px;
      background-color: #F44;
    }
}
</style>