<template>
    <layout-body :auto-hide-header="true" class="page-detail">
        <header-box slot="header" :auto-hide="true"></header-box>
        <product-swipe :goods="detail.goods_list" ref="imageSwiper"></product-swipe>
        <div class="detail-box border-bottom">
            <shop-fav :entity="detail" class="border-bottom"></shop-fav>
            <price-title :entity="detail" class="border-bottom"></price-title>
            <services :support-refund-exchange="detail.supportRefundExchange"></services>
            <product-add-cart v-if="yoho.env.isApp" class="add-cart" :value="detail" @add-cart="addCart"></product-add-cart>
            <product-intro :pid="detail.product_id" :skn="detail.product_skn"></product-intro>
        </div>
        <product-prefer :skn="detail.product_skn" :shop-id="detail.shop_id" title="You Might Also Like"></product-prefer>
        <shopping-bag></shopping-bag>
    </layout-body>
</template>

<script>
import {FETCH_PRODUCT_DETAIL, FETCH_CART_COUNT, PRODUCT_ADD_CART} from 'store/product/types';
import * as components from './components';
import {mapState} from 'vuex';

export default {
    name: 'ProductDetail',
    computed: {
        ...mapState(['yoho']),
        ...mapState(['product']),
        detail() {
            let productId = this.$route.params.pid;

            return this.product.items[productId];
        }
    },
    title() {
        return '商品详情页';
    },
    mounted() {
        this.$store.dispatch(FETCH_CART_COUNT);
    },
    asyncData({store, router}) {
        let product_id = router.params.pid;

        return store.dispatch(FETCH_PRODUCT_DETAIL, {product_id});
    },
    methods: {
        addCart(sku) {
            this.$store.dispatch(PRODUCT_ADD_CART, {productSku: sku.sku, buyNumber: 1}).then(() => {
                this.$message.success('添加成功');
            });
        }
    },
    components: {...components}
};
</script>

<style lang="scss">
.page-detail {
    background: #f6f6f6;

    .detail-box {
        padding-left: 30px;
        padding-right: 30px;
        background-color: #fff;
    }
    .border-top {
        border-top: 1px solid #eee;
    }
    .border-bottom {
        border-bottom: 1px solid #eee;
    }
}

</style>