<template>
    <cheader title="商品详情" class="product-header ghost" v-ref:header>
        <i class="icon icon-share" slot="right" @click="share()"></i>
    </cheader>
</template>
<style>
    .product-header {
        &.ghost {
            .blk-header-title {
                visibility: hidden;
            }
        }

        .blk-header-gap {
            display: none;
        }
    }
</style>
<script>
    const yoho = require('yoho');
    const cheader = require('component/header.vue');

    module.exports = {
        data() {
            return {
                yoho: yoho
            };
        },
        props: {
            title: String,
            img: String
        },
        components: {
            cheader
        },
        methods: {
            share: function() {
                yoho.goShare({
                    title: this.title || '',
                    des: '我在BLK发现了一个不错的商品，快来看看吧！',
                    img: this.img,
                    url: location.href
                });
            }
        },

        created() {
            window.onscroll = () => {
                let transparent = true;

                if (window.scrollY > 20) {
                    transparent = false;
                }

                this.$refs.header.$el.classList.toggle('ghost', transparent);
            };
        }
    };
</script>