<template>
    <div class="top-box clearfix">
        <i class="back" @click="goBack()"></i>
        <div class="right">
            <i class="favorite"></i>
            <i class="share" @click="goShare()"></i>
            <i class="filter"></i>
        </div>
    </div>
</template>

<style>
    .top-box {
        width: 100%;
        height: 60px;
        position: fixed;
        top: 60px;
        left: 0;
        z-index: 99;

        .back {
            width: 60px;
            height: 60px;
            float: left;
            background: url("/channel/back.png") no-repeat;
        }

        .right {
            height: 60px;
            float: right;

            i {
                width: 60px;
                height: 60px;
                margin: 0 5px;
                display: inline-block;
            }

            .favorite {
                background: url("/channel/favorite.png") no-repeat;
            }

            .share {
                background: url("/channel/share.png") no-repeat;
            }

            .filter {
                background: url("/channel/filter.png") no-repeat;
            }
        }
    }
</style>

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

    module.exports = {
        props: {
            shareData: {
                type: Object
            }
        },
        methods: {
            goShare() {

                // TODO 这边应该需要一个分享后的页面链接，需要与 APP 确定分享要传的参数
                let link = this.shareData.title +
                        this.shareData.link +
                        this.shareData.img;

                yoho.goShare({link: link}, function() {}, function() {});
            },
            goBack() {
                yoho.goBack({}, function() {}, function() {});
            }
        }
    };
</script>