<template>
    <div class="fav-type" v-infinite-scroll="loadMore()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
        <ul class="fav-brand-list">
            <li v-for="item in brandData" track-by="$index" id="li-{{$index}}">
                <div class="fav-del-left {{editmodel ? 'delshow': ''}}" @click="showDelBtn($index)">
                    <span class="fav-del-span"><span class="icon icon-edit-del"></span></span>
                </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.brandName}}</span>
                        <span class="down" v-if="item.down">品牌已下架</span>
                    </div>
                </a>
                 <div class="fav-del-right hide" id="del-{{$index}}" @click="delItem($index, item.fav_id)">
                    <span class="icon icon-delete"></span>
                    <br/>
                    <span class="fav-del-txt">删除</span>
                </div>
            </li>
        </ul>

        <div class="fav-null-box {{ nullbox }}">
            <span class="fav-null">您暂无收藏任何品牌</span>
            <a slot="go-shopping" class="go-shopping" :href="brandUrl">随便逛逛</a>
        </div>
    </div>
</template>

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

    module.exports = {
        props: ['brandUrl'],
        data() {
            return {
                nullbox: 'hide',
                busy: false,
                editmodel: false,
                page: 0,
                brandData: []
            };
        },
        methods: {
            loadMore: function() {
                let _this = this;

                this.busy = true;
                $.ajax({
                    url: '/home/favorite/favpaging',
                    data: {
                        page: ++_this.page,
                        tab: 'brand'
                    }
                }).then(result => {
                    if (result.isend) {
                        _this.busy = true;
                    } else {
                        _this.busy = false;
                    }

                    if (result.list.length) {
                        result.list.forEach(function(o) {
                            _this.brandData.push(o);
                        });
                    }

                    _this.nullbox = _this.brandData.length ? 'hide' : '';
                }).fail(() => {
                    tip('网络错误');
                });
            },
            editModel(action) {
                this.editmodel = action;
                if (!action) {
                    this.hideDelBth();
                }
            },
            showDelBtn(index) {
                this.hideDelBth();
                let delBtn = $('#del-' + index);
                let width = delBtn.width();

                $('#li-' + index).css('transform', 'translateX(-' + width + 'px)');
                delBtn.removeClass('hide');
            },
            hideDelBth() {
                this.brandData.forEach(function(d, index) {
                    $('#li-' + index).css('transform', 'translateX(0px)');
                    $('#del-' + index).addClass('hide');
                });
            },
            delItem(index, id) {
                let _this = this;

                $.ajax({
                    method: 'POST',
                    url: '/home/del-favdel',
                    data: {
                        favId: id,
                        type: 'brand'
                    }
                }).then(function(data) {
                    if (data.code === 200) {
                        _this.brandData.splice(index, 1);
                        _this.hideDelBth();
                    } else if (data.code === 400) {
                        tip(data.message);
                    } else {
                        tip('刪除收藏失败');
                    }
                }).fail(function() {
                    tip('网络错误');
                });
            }
        }
    };
</script>

<style>
    .yoho-favorite-brand-page {
        width: 100%;
        height: auto;

        .fav-content {
            .fav-type {
                display: block;
            }

            .fav-brand-list {
                padding-left: 20px;
                list-style: none;

                li {
                    height: 135px;
                    overflow: hidden;
                    border-bottom: 1px solid #e0e0e0;
                }

                .fav-del-left {
                    display: none;
                    float: left;
                    width: 50px;
                    height: 100%;

                    .fav-del-span {
                        display: inline-block;
                        width: 35px;
                        height: 35px;
                        margin-right: 15px;
                        margin-top: 50px;
                    }

                    .icon-edit-del {
                        color: red;
                        font-size: 35px;
                    }
                }

                .delshow {
                    display: block;
                }

                .fav-del-right {
                    position: absolute;
                    top: 0;
                    right: -126px;
                    background: #ff3b30;
                    width: 126px;
                    height: 100%;
                    text-align: center;

                    .icon-delete {
                        display: inline-block;
                        color: white;
                        font-size: 35px;
                        margin-top: 30px;
                    }

                    .fav-del-txt {
                        font-size: 24px;
                        color: #fff;
                    }

                    .hide {
                        display: none;
                    }
                }

                .fav-img-box {
                    width: 160px;
                    height: 125px;
                    float: left;
                    margin-right: 24px;

                    img {
                        display: block;
                        overflow: hidden;
                        width: 100%;
                        height: 100%;
                    }
                }

                .fav-info-list {
                    color: #444;
                    font-size: 24px;
                    padding-bottom: 10px;
                    margin-right: 10px;
                    margin-top: 35px;
                    height: 100px;
                    overflow: hidden;
                    position: relative;

                    .title {
                        width: 430px;
                        color: #b0b0b0;
                        text-overflow: ellipsis;
                        font-size: 34px;
                        margin: 0;
                    }
                }

                span {
                    &.down {
                        float: right;
                        padding: 5px 18px;
                        color: #fffefe;
                        background: #b0b0b0;
                        border-radius: 20px;
                        font-size: 22px;
                    }
                }
            }

            .fav-null {
                font-size: 22px;
                color: #444;
                display: block;
                margin-top: 100px;
                text-align: center;

                &:before {
                    content: "";
                    display: block;
                    width: 188px;
                    height: 171px;
                    background: resolve("home/fav-null.png");
                    background-size: 100% 100%;
                    margin: 0 auto 45px;
                }
            }

            .go-shopping {
                width: 472px;
                height: 88px;
                line-height: 88px;
                margin: 80px auto 0;
                background: #444;
                text-align: center;
                color: #fff;
                display: block;
                font-size: 26px;
                border-radius: 0.2rem;
            }
        }
    }
</style>