<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)">
                    <van-card
                            :price="formatPrice(item.price)"
                            :desc="item.sellPoint"
                            :title="item.spuName"
                            :thumb="item.spuImage"
                            @click="skipProductSpuInfo(item.spuId)"
                    >
                    </van-card>
                    <template slot="right">
                        <van-button square type="danger" text="删除"/>
                    </template>

                </van-swipe-cell>
            </div>
        </van-list>
    </div>
</template>

<script>
    import {GetFavoritePage, DelFavorite} from "../../../api/user.js";
    export default {
        data() {
            return {
                loading: false,
                finished: false,
                list: [],
                page: 0,
                pageSize: 10
            }
        },
        methods: {
            formatPrice(data) {
                return (data / 100).toFixed(2);
            },
            skipProductSpuInfo(data) {
                // return getProductSpuInfo(data);
                this.$router.push('/product/'+data);
            },
            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.spuId).then(response => {
                                    this.$toast('删除成功');
                                    this.$router.go(0);
                                })
                                instance.close();
                            }).catch(() => {
                                // on cancel
                            });
                            break;
                    }
                }
            },
            onLoad() {
                let pageNo = this.page + 1;
                GetFavoritePage(pageNo, this.pageSize).then(response => {
                    this.page = pageNo;
                    this.list.push(...response.list);
                    // response.list.forEach(item => {
                    //     this.list.push(item);
                    // });
                    this.loading = false;
                    if (this.list.length >= response.total) {
                        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>