<template>
    <div class="top-box clearfix">
        <span class="icon back" @click="goBack()">&#xe606;</span>
        <div class="right">
            <span class="icon" v-bind:class="{'favorite': isFav}" @click="collectShop()">&#xe609;</span>
            <span class="icon share" @click="goShare()">&#xe60e;</span>
            <span class="icon filter" @click="showFilter()">&#xe60b;</span>
        </div>
    </div>
</template>

<style>
    .top-box {
        width: 100%;
        height: 60px;
        padding: 0 20px;
        position: fixed;
        top: 60px;
        left: 0;
        z-index: 99;
        color: #fff;
        font-size: 48px;

        .back {
            width: 60px;
            height: 60px;
            float: left;
        }

        .right {
            height: 60px;
            float: right;
            margin: 0;
            padding: 0;

            span {
                width: 60px;
                height: 60px;
                margin: 0 5px;
            }

            .favorite {
                color: #000;
            }
        }
    }
</style>

<script>
    const yoho = require('yoho');
    const $ = require('yoho-jquery');
    const tip = require('common/tip');

    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() {});
            },
            collectShop() {

                /* TODO 获取数据策略待确定 */
                let data = {
                    shopId: this.shareData.shopId,
                    favId: this.shareData.shopId,
                    isFav: this.shareData.isFav
                };

                $.ajax({
                    url: '/collect-shop',
                    data: data
                }).done(result => {

                    /* TODO 处理收藏状态 */
                }).fail(() => {
                    tip('网络错误');
                });
            },
            showFilter() {

            }
        }
    };
</script>