<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="fav_id" id="li-{{item.fav_id}}"
                v-touch:panstart="panstart(item.fav_id)"
                v-touch:panmove="panmove(item.fav_id)"
                v-touch:panend="panend(item.fav_id)">
                <div class="fav-del-left {{editmodel ? 'delshow': ''}}" @click="showDelBtn(item.fav_id)">
                    <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">
                            <span v-if="item.down">品牌已下架</span>
                        </span>
                    </div>
                </a>
                 <div class="fav-del-right hide" id="del-{{item.fav_id}}" @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');
    const yoho = require('yoho');

    module.exports = {
        props: ['brandUrl'],
        data() {
            return {
                nullbox: 'hide',
                busy: false,
                editmodel: false,
                page: 0,
                pageX: 0,
                currentX: 0,
                pandata: {},
                brandData: [],
                keys: {}
            };
        },
        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) {
                            if (!_this.keys[o.fav_id]) {
                                _this.keys[o.fav_id] = true;
                                _this.brandData.push(o);
                            }
                        });
                    }

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

                $('#li-' + id).css('transform', 'translateX(-' + width + 'px)');
                delBtn.removeClass('hide');
            },
            hideDelBth() {
                this.brandData.forEach(function(d) {
                    $('#li-' + d.fav_id).css('transform', 'translateX(0px)');
                    $('#del-' + d.fav_id).addClass('hide');
                });
                this.pandata = {};
            },
            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();
                        delete _this.keys[id];
                    } else if (data.code === 400) {
                        tip(data.message);
                    } else {
                        tip('刪除收藏失败');
                    }
                }).fail(function() {
                    tip('网络错误');
                });
            },
            panstart: function(id) {
                event.preventDefault();
                if (this.editmodel) {
                    return false;
                }

                $('#del-' + id).removeClass('hide');
                this.pageX = event.targetTouches[0].pageX;
                if (this.pandata.id !== id) {
                    if (this.pandata.id !== undefined) {
                        $('#li-' + this.pandata.id).css('transform', 'translateX(0px)');
                        $('#del-' + this.pandata.id).addClass('hide');
                    }

                    this.pandata.objX = 0;
                    this.pandata.id = id;
                }
            },
            panmove: function(id) {
                event.preventDefault();
                if (this.editmodel) {
                    return false;
                }

                let li = $('#li-' + id);
                let width = $('#del-' + id).width();
                let moveX = event.targetTouches[0].pageX;
                let X = moveX - this.pageX;

                if (this.pandata.objX == 0) {
                    if (X >= 0) {
                        this.currentX = 0;
                    } else {
                        this.currentX = -Math.min(Math.abs(X), width);
                    }
                    li.css('transform', "translateX(" + this.currentX + "px)");
                } else if (this.pandata.objX < 0) {
                    if (X >= 0) {
                        this.currentX = Math.min(Math.abs(X) - width, 0);
                    } else {
                        this.currentX = -width;
                    }
                    li.css('transform', "translateX(" + this.currentX + "px)");
                }
            },
            panend: function(id) {
                event.preventDefault();
                if (this.editmodel) {
                    return false;
                }

                let li = $('#li-' + id);
                let delBtn = $('#del-' + id);
                let width = delBtn.width();

                if (this.currentX > -(width / 2)) {
                    this.pandata.objX = 0;
                    delBtn.addClass('hide');
                } else {
                    this.pandata.objX = -width;
                }
                li.css('transform',"translateX(" + this.pandata.objX + "px)");
            }
        },
        created: function() {
            let _this = this;

            yoho.addNativeMethod('editModel', function(action) {
                _this.hideDelBth();
                _this.editmodel = action;
            });
        }
    };
</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;
                overflow: hidden;

                li {
                    position: relative;
                    height: 135px;
                    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;
                    height: 100%;
                    overflow: hidden;
                    position: relative;

                    .title {
                        color: #b0b0b0;
                        text-overflow: ellipsis;
                        font-size: 34px;
                        margin: 0;
                        line-height: 130px;
                    }

                    .down {
                        height: 100%;
                        line-height: 130px;
                        float: right;

                        span {
                            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>