<template>
    <cheader :title="title" :class='topClass'>
        <template slot="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>
        </template>
    </cheader>
</template>

<style>
    .top-box {
        .blk-header {
            background-color: transparent;
            color: #fff;
        }

        .blk-header-gap {
            display: none;
        }
    }

    .top-change {
        .blk-header {
            background-color: #fff;
            color: #000;
        }

        .blk-header-gap {
            display: block;
        }
    }
</style>

<script>
    const yoho = require('yoho');
    const $ = require('jquery');
    const cheader = require('component/header.vue');

    module.exports = {
        data() {
            return {
                topChange: false
            };
        },
        props: {
            shareData: {
                type: Object
            }
        },
        computed: {
            topClass() {
                return {
                    'top-change': this.topChange || !this.shareData.isBlkShop,
                    'top-box': true
                };
            },
            title() {
                let result = '';

                if (!this.shareData.isBlkShop) {
                    result = this.shareData.brandName;
                }

                return result;
            }
        },
        components: {
            cheader
        },
        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;
            window.onscroll = this.changeTopStatus.bind(this);
        }
    };
</script>