<template>
	<section class="base-info__section">
		<div class="base-info__stars"></div>
		<h1 class="base-info__product-name">
			{{ dataSource.title }}
		</h1>
		<images-section
			:data-source="dataSource.images"
			:alt="dataSource.title"
		/>
		<div class="base-info__summary__items" v-html="dataSource.summary" />
		<div class="base-info__guarantee" v-if="dataSource.hasGuarantee">
			<img
				src="@/assets/images/guarantee.png"
				alt=""
				class="base-info__guarantee__image"
				width="41"
				height="32"
				loading="eager"
			/>
			{{ dataSource.guaranteeValue }} {{ $t("guaranteeMonth") }}
		</div>
		<action-btn
			class="base-info__download-btn"
			:text="$t('download the manual')"
			icon="icon-description"
			@click="downloadFile"
			v-if="hasFile"
		>
			{{ $t("download the manual") }}
		</action-btn>
	</section>
</template>
<script>
import actionBtn from "@/components/shared/other/action_btn.vue";
import imagesSection from "./product_base_info_images";

export default {
	name: "ProductBaseInfo",
	components: {
		actionBtn,
		imagesSection
	},
	computed: {
		hasFile() {
			return this.dataSource.files.length > 0;
		}
	},
	methods: {
		downloadFile() {
			window.open(this.dataSource.files[0].url);
		}
	},
	props: {
		dataSource: {
			required: true,
			type: Object
		}
	}
};
</script>
<style lang="scss" scoped>
.base-info {
	&__section {
		background: $color-white;
		box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
		padding: $padding-default;
		position: relative;
	}

	&__stars {
		background-image: url("~assets/images/black_star.png");
		background-repeat: repeat-x;
		background-size: contain;
		height: 18px;
		left: $padding-default;
		position: absolute;
		top: 18px;
		width: 90px;
	}

	&__product-name {
		display: block;
		margin: 0 auto;
		font-size: 16px;
		font-weight: bold;
		padding: 0;
	}

	&__summary {
		&__title {
			font-size: 14px;
			font-weight: bold;
		}

		&__items {
			border-top: 1px solid $color-border;
			color: $color-text--light;
			line-height: 2;
			padding-top: $padding-default;

			/deep/ p {
				font-size: 13px;
				margin: 0 auto;
				padding: 0;
			}
		}
	}

	&__download-btn {
		display: block;
		margin: $padding-default/2 auto 0 auto;
	}

	&__guarantee {
		color: $color-text--light;
		display: block;
		text-align: right;

		&__image {
			display: inline-block;
			margin-left: 5px;
			vertical-align: middle;
		}
	}

	@media (min-width: $tablet) {
		&__section {
			border-radius: $border-radius;
			margin: 0 $padding-default;

			&::before {
				background: $color-border;
				content: "";
				height: 100%;
				position: absolute;
				right: 33%;
				top: 0;
				width: 1px;
			}

			&:after {
				content: "";
				clear: both;
				display: block;
			}
		}

		&__product-name {
			margin-bottom: $padding-default;
			padding-right: calc(33% + #{$padding-default * 2});
			padding-top: $padding-default * 2;
		}

		&__summary {
			&__items {
				border-top: none;
				height: 180px;
				overflow: hidden;
				padding-top: $padding-default/2;
			}
		}

		&__guarantee {
			float: right;
			margin-top: $padding-default/2;
		}

		&__download-btn {
			margin-left: 0;
			float: left;
		}
	}

	@media (min-width: $desktop) {
		&__section::before {
			right: 25%;
		}
		&__product-name {
			padding-right: calc(25% + #{$padding-default * 2});
		}

		&__summary {
			&__items {
				height: 155px;

				:deep(p) {
					font-size: 14px;
				}
			}
		}
	}
}
[data-lang="en"] {
	.base-info {
		&__summary {
			&__items {
				/deep/ p {
					text-align: left !important;
				}
			}
		}

		&__stars {
			left: auto;
			right: $padding-default;
		}

		&__guarantee {
			text-align: left;

			&__image {
				margin-left: 0;
				margin-right: 5px;
			}
		}

		@media (min-width: $tablet) {
			&__section {
				&::before {
					left: 33%;
					right: unset;
				}
			}

			&__product-name {
				padding-left: calc(33% + #{$padding-default * 2});
				padding-right: 0;
			}

			&__guarantee {
				float: left;
			}

			&__download-btn {
				margin-left: auto;
				margin-right: 0;
				float: right;
			}
		}

		@media (min-width: $desktop) {
			&__section::before {
				left: 25%;
				right: unset;
			}
			&__product-name {
				padding-left: calc(25% + #{$padding-default * 2});
				padding-right: 0;
			}
		}
	}
}
</style>