<template>
    <cheader :title="title" :class="{ghost: shareData.isBlkShop}" :fixed="shareData.isBlkShop" v-ref:header>
        <template slot="right" v-on:scroll="">
            <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>
    .blk-header {
        transition: 0.3s all;
    }

    .ghost .blk-header {
        color: #fff;
    }
</style>

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

    module.exports = {
        data() {
            return {};
        },
        props: {
            shareData: {
                type: Object
            }
        },
        computed: {
            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);
            },

            goBack() {
                yoho.goBack();
            },

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

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

                if (topHeight > 100) {
                    topChange = false;
                }

                this.$refs.header.$el.classList.toggle('ghost', topChange);
            }
        },
        created() {
            this.domain = this.shareData.domain;

            if (this.shareData.isBlkShop) {
                window.onscroll = this.changeTopStatus;
            }
        }
    };
</script>