<template>
    <div>
        <ul class="item-action">
            <li><a v-brand-href="brand"><i class="icon icon-store"></i><span
                class="action-text">{{brand && brand.brand_name
                }}</span></a></li>
            <li><i class="icon"
                   :class="{'icon-focus': entity.is_collect !== 'Y', 'icon-focused': entity.is_collect === 'Y'}"
                   @click="toggleFavorite"></i><span
                class="action-text">收藏
            </span></li>
            <li><i class="icon icon-share2" @click="share"></i><span class="action-text">分享</span></li>
        </ul>
    </div>
</template>
<style>
    .item-action {
        height: 103px;
        font-size: 0;
        text-align: center;

        li {
            position: relative;
            display: inline-block;
            margin-top: 70px;
            text-align: center;
            font-size: 22px;
            width: 250px;

            &:first-child {
                 float: left;
                 width: 210px;
            }

            &:last-child {
                float: right;
                width: 210px;
            }
        }

        li .action-text {
            display: inline-block;
            max-width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        li .icon {
            position: absolute;
            margin-left: -20px;
            top: -50px;
            left: 50%;
            font-size: 36px;
        }
    }
</style>
<script>
    import $ from 'yoho-jquery';
    import yoho from 'yoho';
    import tip from 'common/tip';
    import cookie from 'yoho-cookie';
    import qs from 'yoho-qs';

    export default {
        name: 'operation-bar',
        props: {
            brand: {
                type: Object,
                return() {
                    return {};
                }
            },
            entity: {
                type: Object,
                return() {
                    return {};
                }
            },
            shareTitle: String,
            shareImg: String
        },
        data() {
            return {};
        },
        methods: {
            share() {
                const origin = location.origin;
                const pathname = location.pathname;
                const channel = cookie.get('_Channel') || 'men';
                const queryStr = $.param(Object.assign(qs, {channel}));

                yoho.goShare({
                    title: this.shareTitle || '',
                    des: '我在BLK发现了一个不错的商品，快来看看吧！',
                    img: location.protocol + this.shareImg,
                    url: `${origin}${pathname}?${queryStr}`
                });
            },
            toggleFavorite: function() {
                $.post('/product/favorite.json', {
                    operation: this.entity.is_collect === 'Y' ? 'remove' : 'add',
                    id: this.entity.product_id
                }).then((result)=> {
                    if (result.code === 200) {
                        tip(this.entity.is_collect === 'Y' ? '取消收藏成功' : '收藏成功');
                        this.entity.is_collect = this.entity.is_collect === 'Y' ? 'N' : 'Y';
                        yoho.store.set('productReload', true);
                    } else if (result.code === 401) {
                        yoho.goLogin('', () => {
                            this.toggleFavorite();
                        });
                    }
                });
            }
        }
    };
</script>