<template>
    <div>
        <header-box title="浏览记录" ref="header">
            <div slot="right">
                <span class="right-btn" @click="clearAllRecords">清空</span>
            </div>
        </header-box>
        <div v-if="hasdata">
            <div class='nav'>
                <div class="fixed">
                    <v-touch
                        tag="span"
                        :class="{focus2:cate.focus}"
                        v-for="(cate, index) in category"
                        :key="cate.category_id"
                        @tap="focusCate(cate.category_id,index, $event)">{{cate.category_name}}</v-touch>
                </div>
            </div>
            <swiper-list
                :list="list"
                @showbutton="showbutton"
                @hidebutton="hidebutton"
                @deleteskn="deleteskn"></swiper-list>
        </div>
        <div v-if="nodata">
            <!--<div class='title-wrap'>浏览记录</div>-->
            <div class="nodata">
                <i></i>
                <div class="tip1">暂无浏览记录</div>
                <div class="tip2">You have no recently viewed items</div>
                <a class="go" href="/product/new">随便逛逛</a>
            </div>
        </div>
    </div>
</template>

<script>
import yoho from 'yoho';
import $ from 'jquery';
import swiperList from 'component/me/swiperList.vue';
import modal from 'common/modal';
import interceptClick from 'common/intercept-click';
import HeaderBox from 'component/header.vue';
let originList, originCategory, categoryLen;

export default {
    data() {
        return {
            list: [],
            category: [],
            hasdata: 0,
            nodata: 0
        };
    },
    components: {
        swiperList,
        HeaderBox
    },
    methods: {
        imgerror() {
            // 图片报错时，给个默认透明图片
            this.headIco = 'data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw==';
        },
        reload() {
            if (yoho.isLogin()) {
                $.ajax({
                    url: '/me/recordDataNew'
                }).then(result => {
                    if (result.data && result.data.total) {
                        originList = result.data.product_list;
                        let list = originList;

                        for (let i = 0; i < list.length; i++) {
                            list[i].image = list[i].image.replace(/(\{width\}x\{\height})/g, '150x203');
                            list[i].isshowbtn = false;
                            list[i].show = true;
                        }
                        this.list = list;


                        originCategory = result.data.category_list;
                        originCategory.forEach(function(item) {
                            item.focus = false;
                        });
                        originCategory.splice(0, 0, {
                            category_name: '全部',
                            focus: true,
                            category_id: 0
                        });
                        categoryLen = originCategory.length;
                        this.category = originCategory;

                        this.hasdata = 1;
                        this.nodata = 0;

                        //  绑定清空事件
                        // yoho.addNativeMethod('clearRecords', this.clearAllRecords);
                    } else {
                        this.nodata = 1;
                        this.hasdata = 0;
                    }
                });
            }
        },
        showbutton(i) {
            event.preventDefault();
            this.list[i].isshowbtn = true;
        },
        hidebutton(i) {
            event.preventDefault();
            this.list[i].isshowbtn = false;
        },
        deleteskn(i) {
            event.preventDefault();
            let id = this.list[i].category_id;
            let skn = this.list[i].product_skn;

            this.list.splice(i, 1);
            for (let j in originList) {
                if (originList[j].product_skn === skn) {
                    originList.splice(j, 1);
                }
            }
            if (!originList.length) {
                this.nodata = 1;
                this.hasdata = 0;
                this.updateNavBar();
            } else {
                let deleteId = true;

                for (let k in this.list) {
                    if (this.list[k].category_id === id) {
                        deleteId = false;
                    }
                }
                if (deleteId) {
                    for (let w = 0; w < categoryLen; w++) {
                        if (this.category[w].category_id === id) {
                            this.category.splice(w, 1);
                            categoryLen--;

                            // 更新页面
                            this.refreshRecords();
                            break;
                        }
                    }
                }
            }

            $.ajax({
                url: '/me/deleteRecordData',
                data: {
                    skn: skn
                }
            }).then(() => {});
        },
        clearAllRecords() {
            let that = this;
            let name, id, index;

            //  寻找类别
            for (let i = 0; i < categoryLen; i++) {
                if (this.category[i].focus === true) {
                    name = this.category[i].category_name;
                    id = this.category[i].category_id;
                    index = i;
                    break;
                }
            }

            // 弹出框
            modal.confirm('确定清空"' + (name || '无类别') + '"下的浏览记录', '确定清空？', function() {
                let skn = [];

                for (let i in that.list) { // eslint-disable-line
                    skn.push(that.list[i].product_skn);
                }

                //  删除商品
                function deepDelete() {
                    for (let i in originList) {
                        if (originList[i].category_id === id) {
                            originList.splice(i, 1);
                            deepDelete();
                        }
                    }
                }
                deepDelete();

                // 删除标签
                that.category.splice(index, 1);
                categoryLen--;

                // 是否没有数据了
                if (!index || !originList.length) {
                    that.nodata = 1;
                    that.hasdata = 0;
                    that.updateNavBar();
                } else {

                    //  更新页面
                    that.refreshRecords();
                }

                $.ajax({
                    url: '/me/deleteRecordData',
                    data: {
                        skn: skn
                    }
                }).then(() => {

                });
                this.hide();
                return false;
            });
        },
        focusCate(id, index, event) {
            if (event) {
                let el = event.target;

                event.preventDefault();

                //  标签移动
                if (el.getBoundingClientRect().right > window.innerWidth) {
                    el.parentNode.scrollLeft += el.getBoundingClientRect().right - window.innerWidth + 10;
                }
            }
            let list = Object.assign([], originList);
            let newList;

            if (id) {
                newList = list.filter(function(item) {
                    return item.category_id === id;
                });
            } else {
                newList = list;
            }
            this.list = newList;

            for (let i = 0; i < categoryLen; i++) {
                this.category[i].focus = false;
            }
            this.category[index].focus = true;
        },
        refreshRecords() {
            this.list = originList;
            this.focusCate(0, 0);
        },
        updateNavBar() {
            const header = Object.assign({}, interceptClick.defaultTitleMap[3]);

            header.right.des = '';
            yoho.updateNavigationBar({
                header: header
            });
        }
    },
    mounted() {
        this.reload();

        $('#setting').on('click', function() {
            yoho.goSetting();
            return false;
        });

        document.addEventListener('visibilitychange', () => {
            if (!document.hidden) {
                this.reload();
            }
        });
    }
};
</script>

<style>
    .title-wrap {
        height: 94px;
        font-size: 40px;
        color: #000;
        text-align: center;
        line-height: 94px;

        .clear {
            position: absolute;
            right: 0;
            color: #b0b0b0;
            margin: 30px 30px 0 0;
            font-size: 30px;
            line-height: 1;
        }
    }

    .nav {
        position: relative;
        height: 88px;

        .fixed {
            position: fixed;
            height: 88px;
            width: 100%;
            border-bottom: 1px solid #eee;
            border-top: 1px solid #eee;
            line-height: 88px;
            overflow-x: auto;
            white-space: nowrap;
            z-index: 10;
            background: #fff;
        }

        span {
            padding: 8px 20px;
            color: #b0b0b0;
            border: 2px solid #b0b0b0;
            border-radius: 20px;
            font-size: 22px;
            line-height: 22px;
            margin-left: 30px;
        }

        .focus2 {
            border-color: #000;
            color: #000;
        }
    }

    .nodata {
        color: #b0b0b0;

        i {
            width: 207px;
            height: 183px;
            background: resolve("me/norecords.png") no-repeat;
            display: block;
            background-size: 100% 100%;
            margin: 300px auto 56px;
        }

        .tip1 {
            font-size: 34px;
            text-align: center;
        }

        .tip2 {
            font-size: 20px;
            margin-top: 32px;
            text-align: center;
            margin-bottom: 60px;
        }

        .go {
            width: 414px;
            height: 94px;
            background: #000;
            color: #fff;
            line-height: 94px;
            margin: auto;
            text-align: center;
            font-size: 28px;
            display: block;
        }
    }


</style>