<template>
    <div class="fav-type show" v-infinite-scroll="loadMore()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
        <ul class="fav-product-list">
            <li v-for="item in productData" track-by="fav_id">
                <div class="fav-del {{editmodel ? 'show': ''}}">
                    <button @click="delProduct($index, item.fav_id)">删除</button>
                </div>
                <a :href="item.link">
                    <div class="fav-img-box">
                        <img :src="item.imgUrl" alt=""/>
                    </div>
                    <div class="fav-info-list">
                        <span class="title">{{item.title}}</span>
                        <br/>
                        <div class="fav-price">
                            <span class="new-price" v-if="item.discountPrice">{{item.discountPrice}}</span>
                            <span class="fav-price {{ item.discountPrice ? 'price-underline' : ''}}">{{item.price}}</span>
                        </div>
                        <br/>
                        <div class="save-price">
                            <span class="sell-out" v-if="item.sellOut || item.invalidGoods">{{item.sellOut ? '已售罄' : '已下架'}}</span>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
        <div class="fav-null-box {{ nullbox }}">
            <span class="fav-null">您暂无收藏任何商品}}</span>
            <a slot="go-shopping" class="go-shopping" :href="productUrl">随便逛逛</a>
        </div>
    </div>
</template>

<script>
    const $ = require('yoho-jquery');
    const tip = require('common/tip');
    const Loading = require('common/loading');
    const modal = require('common/modal');
    const loading = new Loading();

    module.exports = {
        props: ['productUrl'],
        data() {
            return {
                nullbox : 'hide',
                busy: false,
                editmodel: false,
                page: 0,
                productData: []
            };
        },
        methods: {
            loadMore: function() {
                loading.show();

                let _this = this;
                this.busy = true;

                $.ajax({
                    url: '/home/favorite/favpaging',
                    data: {
                        page : ++_this.page
                    }
                }).then(result => {
                    if (result.length) {
                        result.forEach(function(o){
                            _this.productData.push(o);
                        });
                        _this.busy = false;
                    } else {
                        _this.busy = true;
                    }

                    _this.nullbox = _this.productData.length ? "hide" : "";
                    loading.hide();
                }).fail(() => {
                    tip('网络错误');
                });
            },
            editProduct(action) {
                this.editmodel = action;
            },
            delProduct(index, id) {
                let _this = this;
                $.modal.confirm('', '确定刪除该收藏吗？', function() {
                    this.hide();
                    $.ajax({
                        method: 'post',
                        url: '/home/favorite/favdel',
                        data: {
                            id: id
                        }
                    }).then(function(data) {
                        if (data.code === 200) {
                            _this.productData.splice(index, 1);
                        } else if (data.code === 400) {
                            $.modal.alert(data.message, '出错了！');
                        } else {
                            $.modal.alert('', '取消收藏失败');
                        }
                    }).fail(function() {
                        $.modal.alert('', '网络错误');
                    });
                });
            }
        }
    };
</script>