<template>
    <div :style="{display: topBarDisplay}">
        <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 v-if="isiOS" class="icon" @touchstart="showFilter()">&#xe60b;</span>
                <span v-else class="icon" @click="showFilter()">&#xe60b;</span>
            </template>
        </cheader>
    </div>
</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');
    const tip = require('common/tip');

    module.exports = {
        data() {
            return {
                isiOS: yoho.isiOS
            };
        },
        props: {
            shareData: {
                type: Object,
            },
            showTopBar: false
        },
        computed: {
            title() {
                let result = '';

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

                return result;
            },
            topBarDisplay() {
                return this.showTopBar ? 'block' : 'none';
            }
        },
        components: {
            cheader
        },
        methods: {
            goShare() {

                // 删除两个多余的参数，两个参数是收藏时使用的
                delete this.shareData.shopId;
                delete this.shareData.isFav;
                if (this.shareData.img) {
                    this.shareData.img = location.protocol + this.shareData.img.replace('http:', '');
                }
                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);
                        if (this.shareData.isFav) {
                            tip('收藏成功');
                        } else {
                            tip('取消成功');
                        }
                    } else if (result.code === 403) {
                        yoho.goLogin('', this.collectShop);
                    }
                }).fail(() => {});
            },
            showFilter() {
                this.$parent.$refs.filter.isVisible = !this.$parent.$refs.filter.isVisible;
            },
            changeTopStatus() {
                if (!this.shareData.isBlkShop) {
                    return;
                }

                let ghost = true;
                let ghost2 = false;
                let ghost3 = false;

                if (window.scrollY > 100) {
                    ghost = false;
                    ghost2 = false;
                    ghost3 = false;
                } else if (window.scrollY > 70) {
                    ghost = false;
                    ghost3 = true;
                } else if (window.scrollY > 30) {
                    ghost = false;
                    ghost2 = true;
                }

                this.$refs.header.$el.classList.toggle('ghost', ghost);
                this.$refs.header.$el.classList.toggle('ghost-2', ghost2);
                this.$refs.header.$el.classList.toggle('ghost-3', ghost3);
            }
        },
        ready() {
            window.addEventListener('touchmove', () => {
                this.changeTopStatus();
            });

            window.addEventListener('scroll', () => {
                this.changeTopStatus();
            });
        }
    };
</script>