<template>
    <div class="shop-fav">
        <ul class="item-action">
            <li><a-link :href="brandHref"><i class="icon icon-store"></i><span
                class="action-text">{{entity.brand_info && entity.brand_info.brand_name
                }}</span></a-link></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-share1" @click="share"></i><span class="action-text">分享</span></li>
        </ul>
    </div>
</template>
<script>
import {PRODUCT_FAVORITE} from 'store/product/types';
export default {
    name: 'operation-bar',
    props: {
        entity: {
            type: Object,
            return() {
                return {};
            }
        }
    },
    computed: {
        brandHref() {
            return this.entity.brand_info && `/product/shop/${this.entity.brand_info.brand_domain}`;
        }
    },
    methods: {
        share() {
            this.$yoho.goShare({
                title: this.shareTitle || '',
                des: '我在BLK发现了一个不错的商品，快来看看吧！',
                img: location.protocol + this.shareImg,
                url: location.href
            });
        },
        toggleFavorite: function() {
            this.$store.dispatch(PRODUCT_FAVORITE, {
                product_id: this.entity.product_id,
                is_collect: this.entity.is_collect
            }).then(res => {
                if (res.code === 200) {
                    this.$message.success(this.entity.is_collect === 'Y' ? '取消收藏成功' : '收藏成功');
                } else if (res.code === 401) {
                    this.$message.warning('请登录');
                    this.$yoho.goLogin('', () => {
                        this.toggleFavorite();
                    });
                }
            });
        }
    }
};
</script>

<style lang="scss">
.shop-fav {
    padding-top: 25px;
    padding-bottom: 25px;

    .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>