<template>
    <div class="top-box clearfix" v-bind:class='{"top-box-left" : this.$parent.$refs.filter.isVisible,"top-change" : topChange || !shareData.isBlkShop}' v-infinite-scroll="changeTopStatus()">
        <span class="icon icon-back back" @click="goBack()"></span>
        <span class="brand-name" v-if="!shareData.isBlkShop">{{shareData.brandName}}</span>
        <div class="right">
            <span v-if="shareData.isBlkShop" v-show="shareData.isFav" class="icon" @click="collectShop()">&#xe60d;</span>
            <span v-if="shareData.isBlkShop" v-show="!shareData.isFav" class="icon" @click="collectShop()">&#xe60c;</span>
            <span v-if="shareData.isBlkShop" class="icon" @click="goShare()">&#xe60e;</span>
            <span class="icon" @click="showFilter()">&#xe60b;</span>
        </div>
    </div>
</template>

<style>
    .top-box {
        width: 100%;
        height: 80px;
        padding: 10px 20px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        color: #fff;
        font-size: 48px;
        text-align: center;

        .back {
            width: 60px;
            height: 60px;
            float: left;
            font-size: 52px;
        }

        .brand-name {
            display: inline-block;
            max-width: 78%;
            height: 60px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .right {
            height: 60px;
            float: right;
            margin: 0;
            padding: 0;

            span {
                width: 60px;
                height: 60px;
                margin: 0 5px;
            }
        }
    }

    .top-box-left {
        left: -665px;
    }

    .top-change {
        background-color: #fff;
        color: #000;
        height: 80px;
        top: 0;
        padding: 5px 20px;
    }

    .app.ios {
        .top-box {
            top: 40px;
        }

        .top-change {
            top: 0;
            height: 120px;
            padding: 55px 20px 10px;
        }
    }
</style>

<script>
    const yoho = require('yoho');
    const $ = require('jquery');

    module.exports = {
        data() {
            return {
                topChange: false
            };
        },
        props: {
            shareData: {
                type: Object
            }
        },
        methods: {
            goShare() {

                // 删除两个多余的参数，两个参数是收藏时使用的
                delete this.shareData.shopId;
                delete this.shareData.isFav;
                yoho.goShare(this.shareData, function() {}, function() {});
            },
            goBack() {
                yoho.goBack({}, function() {}, function() {});
            },

            /* 收藏或者取消收藏店铺 */
            collectShop() {
                let data = {
                    shopId: this.shareData.shopId,
                    isFav: this.shareData.isFav
                };

                $.post({
                    url: '/product/shop/collect.json',
                    data: data
                }).done(result => {
                    if (result.code === 200) {
                        this.shareData.isFav = !this.shareData.isFav;
                    } else if (result.code === 403) {
                        yoho.goLogin('', this.collectShop);
                    }
                }).fail(() => {});
            },
            showFilter() {
                this.$parent.$refs.filter.isVisible = !this.$parent.$refs.filter.isVisible;
            },
            changeTopStatus() {
                let topHeight = document.body.scrollTop;

                if (topHeight > 100) {
                    this.topChange = true;
                } else {
                    this.topChange = false;
                }
            }
        },
        created() {
            this.domain = this.shareData.domain;
        }
    };
</script>