<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)"
                v-touch-options:pan="{direction:'horizontal', threshold: 100}">
                <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 | brandUrl">
                    <div class="fav-img-box">
                        <img :src="item.imgUrl | resize 160 125" 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="/product/new">随便逛逛</a>
        </div>
    </div>
</template>

<script>
    const $ = require('jquery');
    const tip = require('common/tip');
    const interceptClick = require('common/intercept-click');
    const yoho = require('yoho');
    const bus = require('common/vue-bus');

    module.exports = {
        data() {
            return {
                nullbox: 'hide',
                busy: false,
                editmodel: false,
                page: 0,
                pageX: 0,
                currentX: 0,
                pandata: {},
                brandData: [],
                keys: {}
            };
        },
        methods: {
            loadMore() {
                this.busy = true;
                $.ajax({
                    url: '/me/collection/favpaging',
                    data: {
                        page: ++this.page,
                        tab: 'brand'
                    }
                }).then(data => {
                    if ($.isEmptyObject(data) || data.pageTotal === 0) {
                        this.busy = true;
                    } else {
                        if (data.pageTotal && this.page === data.pageTotal) {
                            this.busy = true;
                        } else {
                            this.busy = false;
                        }

                        const list = data.brandList || [];

                        list.forEach(o => {
                            if (!this.keys[o.brandId]) {
                                this.keys[o.brandId] = true;
                                this.brandData.push({
                                    fav_id: o.brandId,
                                    link: o.brandDomain,
                                    imgUrl: o.brandIco,
                                    brandName: o.brandName,
                                    down: o.status === 0
                                });
                            }
                        });
                    }

                    this.nullbox = this.brandData.length ? 'hide' : '';

                    if (this.page === 1) {
                        yoho.showLoading(false);
                        this.updateNavBar();
                    }
                }).fail(() => {
                    tip('网络错误');
                });
            },
            showDelBtn(id) {
                this.hideDelBth();
                let delBtn = $('#del-' + id);
                let width = delBtn.width();

                $('#li-' + id).css('transform', 'translateX(-' + width + 'px)');
                delBtn.removeClass('hide');
                this.pandata.id = id;
                this.pandata.objX = -width;
            },
            hideDelBth() {
                this.brandData.forEach(d => {
                    $('#li-' + d.fav_id).css('transform', 'translateX(0px)');
                    $('#del-' + d.fav_id).addClass('hide');
                });
                this.pandata = {};
            },
            delItem(index, id) {
                $.ajax({
                    method: 'POST',
                    url: '/me/del-favdel',
                    data: {
                        favId: id,
                        type: 'brand'
                    }
                }).then(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(() => {
                    tip('网络错误');
                });
            },
            panstart(id) {
                event.preventDefault();

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

                    if (delBtn.hasClass('hide')) {
                        delBtn.removeClass('hide');
                        this.pandata.objX = 0;
                        this.pandata.id = id;
                    }
                }
            },
            panmove(id) {
                event.preventDefault();
                if (this.pandata.id && this.pandata.id !== id) {
                    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(id) {
                event.preventDefault();
                if (this.pandata.id && this.pandata.id !== id) {
                    this.pandata = {};
                    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)');

                if (this.pandata.objX === 0) {
                    this.pandata = {};
                }
            },
            updateNavBar() {
                const header = $.extend({}, interceptClick.defaultTitleMap[5]);

                header.defaultSelectedIndex = '1';
                header.right.des = this.editmodel ? '完成' : '编辑';
                if (!this.brandData.length) {
                    header.right.des = '';
                }
                yoho.updateNavigationBar({
                    header: header
                });
            }
        },
        created() {
            yoho.addNativeMethod('editModel', () => {
                this.hideDelBth();
                this.editmodel = !this.editmodel;
                this.updateNavBar();
            });

            if (yoho.isApp) {
                bus.$on('app.favourite.tabChange', this.updateNavBar);
            }
        }
    };
</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("me/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>