<template>
	<div>
		<home-slider v-show="slidesDataSource"
					 :data-source="slidesDataSource" />
		<LazyHydrate when-visible>
			<properties-section :data-source="properties" />
		</LazyHydrate>
		<LazyHydrate when-visible>
			<products-section :data-source="productsDataSource" />
		</LazyHydrate>
			<about-section />
		</LazyHydrate>
		<LazyHydrate when-visible>
			<customers-section :data-source="customersDataSource" />
		</LazyHydrate>
		<LazyHydrate when-visible>
			<customization-section />
		</LazyHydrate>
		<LazyHydrate when-visible>
			<counters-section :customers-count="customerCount"
						  :products-count="productsCount"
						  :selled-products-count="selledProductsCount" />
		</LazyHydrate>
	
		<LazyHydrate when-visible>
			<blog-section :data-source="articlesDataSource" />
		</LazyHydrate>
	</div>
</template>
<script>
import aboutSection from "@/components/pages/home/home_about_section";
import blogSection from "@/components/pages/home/home_blog_section";
import countersSection from "@/components/pages/home/home_counters_section";
import customizationSection from "@/components/pages/home/home_customization_section";
import customersSection from "@/components/pages/home/home_customers_section";
import homeSlider from "@/components/pages/home/home_slider";
import productsSection from "@/components/pages/home/home_products_section";
import propertiesSection from "@/components/pages/home/home_properties_section";
import LazyHydrate from "vue-lazy-hydration";

import staticValues from "../store/static_values.json";
import {
	getSlides,
	getProductsByCategoryId,
	getCustomers,
	getArticles,
} from "../api/api_list";

export default {
	name: "Home",
	async asyncData({ $axios, i18n }) {
		const locale = i18n.locale;
		const slideCount = 3;
		const slides = await getSlides($axios, locale, slideCount);
		const homePageLastProductsCategoryId = 23;
		const products = await getProductsByCategoryId(
			$axios,
			locale,
			homePageLastProductsCategoryId
		);
		const customersCount = 18;
		const customers = await getCustomers($axios, locale, customersCount);
		const articleCount = 3;
		const articles = await getArticles($axios, locale, articleCount);
		return {
			slidesDataSource: slides,
			productsDataSource: (products || []).sort(
				(a, b) => a.order.order - b.order.order
			),
			customersDataSource: customers,
			articlesDataSource: articles,
		};
	},
	components: {
		aboutSection,
		blogSection,
		customersSection,
		countersSection,
		homeSlider,
		productsSection,
		propertiesSection,
		LazyHydrate,
		customizationSection
	},
	computed: {
		properties() {
			return staticValues.homeProperties;
		},
	},
	data() {
		return {
			customerCount: staticValues.customerCount,
			productsCount: staticValues.productsCount,
			selledProductsCount: staticValues.selledProductsCount,
		};
	},
	head() {
		const faTitle = "پارس‌مگا: طراح و تولید کننده انواع ترانسمیترهای وزن، نمایشگرهای وزن و تجهیزات اتوماسیون صنعتی";
		const enTitle = "ParsMega: designer and manufacturer of all types of weight transmitters, weight indicators, and Industrial automation equipment"
		const isEn = this.$i18n?.locale == "en";

		return {
			title: isEn ? enTitle : faTitle,
			meta: [
			{
					hid: "description",
					name: "description",
					content: isEn ? enTitle : faTitle,
				}
			],
		};
	},
};
</script>