<template>
	<div class="product-page">
		<breadcrumb-base />
		<product-base-info :data-source="product" />
		<product-tabs-section :data-source="product" />

		<similar-products-section :category-id="productCategoryId"
		:product-id-to-exclude="product.id" />

		<div v-if="product.seoJsonLd"
			 v-html="product.seoJsonLd"></div>
	</div>
</template>
<script>
import breadcrumbBase from "@/components/shared/breadcrumb/breadcrumb_base";
import productBaseInfo from "@/components/product/product_base_info";
import productTabsSection from "@/components/product/product_tabs_section";
import similarProductsSection from "@/components/product/similar_products_section";
import LazyHydrate from "vue-lazy-hydration";

import { getProduct } from "@/api/api_list";

export default {
	name: "ProductsIndex",
	async asyncData({ $axios, params, i18n }) {
		const locale = i18n.locale;
		const slug = encodeURIComponent(params.slug);
		const product = await getProduct($axios, locale, slug);
		return {
			product,
			pageTitle: decodeURIComponent(product.title)
		};
	},
	components: {
		breadcrumbBase,
		productBaseInfo,
		productTabsSection,
		similarProductsSection,
		LazyHydrate
	},
	computed: {
		productCategoryId() {
			if (!this.product) return 0;
			const categories = this.product.categories;
			const hasCategory = categories && categories.length > 0;
			return hasCategory ? categories[0] : 0;
		}
	},
	head() {
		return {
			title: `${this.pageTitle} | ${this.$t("parsmega")}`,
			meta: [
				{
					hid: "description",
					name: "description",
					content: this.product.seoDescription || ""
				}
			]
		};
	}
};
</script>
<style lang="scss" scoped>
.product-page {
	margin: 0 auto;
	max-width: $app-max-width;
	width: 100%;
}
</style>