<script setup>
	import {
		ref,
		reactive,
		onBeforeMount,
		onBeforeUnmount,
        onActivated,
		onMounted
	} from "vue";
	import {
		GetProductDetailApi
	} from "@/service/api.js";
	// 语言判断
	import langToCheck from "@/hook/lang.js";
	import {
		useI18n
	} from "vue-i18n";
	import topBar from "@/components/top/title-bar.vue";
	import footBar from "@/components/bottom/foot-bar.vue";    
    // // 折叠面板
    // import collapse from "./components/collapse.vue";
    // //详细参数，查看更多
    // import detailParams from "./components/detail-params.vue";
	import {
		useRoute
	} from '#imports';    
    const {
    	t
    } = useI18n();
	const route = useRoute();    
    const langIs = ref('');
    onBeforeMount(()=>{
        langIs.value = langToCheck()
    })
	//监听返回顶部
	let proId = ref("");
	let proName = ref("");
	let proImgPath = reactive({
		data: []
	});
	const productSpecs = reactive({
		data: []
	});

	// 展示
	let tabCollection = reactive([]);
	let isMaskShow = ref(true); //是否显示遮罩层

	onBeforeMount(() => {
		tabCollection.push({
			name: t("detail.summary"),
			value: 0,
		});
		tabContent.value = tabCollection[0].name
		if (route.query.id) {
			proId.value = route.query.id;
			GetSpaceRequest(proId.value);
		}
	});
	onBeforeUnmount(()=>{
		window.removeEventListener('scroll', HandleScroll);
		window.removeEventListener('resize', UpdateDropdown);
	})
	
	// 监听页面滚动事件
	onMounted(() => {
	    window.addEventListener('scroll', HandleScroll);
		window.addEventListener('resize', UpdateDropdown);
	});

	const GetSpaceRequest = (Id) => {
		let parmas = {
			locale: langIs.value,
			product_id: Id,
		};
		GetProductDetailApi(parmas).then((res) => {
			if (res.info.children[0]) {
				let received = res.info.children[0];
				productSpecs.data = received.product_specs;
				if (productSpecs.data.length > 0) {
					tabCollection.push({
						name: t("detail.specs"),
						value: 1
					}
					// ,{
					// 	name: t("page.support"),
					// 	value: 2
					// }
					)					
				}
				proImgPath.data = received.product_detail_imgs;
				proName.value = received.product_name;
				document.title = received.product_name;
				isMaskShow.value = false
			}
		}).catch(isMaskShow.value = false)
	};
	let tabValue = ref(0);
	let tabContent = ref("");
	let tabChange = (item,index) => {
		tabValue.value = index;
		tabContent.value = item.name;
	};
	let scrollTop = ref(0); // 监听滚动事件得到的值	
	const isDropOpen = ref(false);	//遮罩关闭跟隐藏
	const UpdateDropdown = () =>{
		isDropOpen.value = false
	}
	// 滚动监听
	const HandleScroll = () => {
	    scrollTop.value = window.scrollY 
		|| document.documentElement.scrollTop;
		isDropOpen.value = false
	};
	
</script>

<template>
	<div class="page">
		<topBar></topBar>
		<div class="sticky-page-layout" id="sticky-page-layout">
			<div class="nav-sticky" :class="{ 'nav-sticky--active': scrollTop >= 100 }">
				<div class="nav-sticky__center">
					<h1 class="nav-sticky__center__left">{{ proName }}</h1>
					 <div class="nav-sticky__center__right" @click="isDropOpen = !isDropOpen">
						 <div class="nav-sticky__center__right__item" 
						 :class="{'nav-sticky__center__right--Active': tabValue == item.value}" 
						    @click="tabChange(item,index)" v-for="(item, index) in tabCollection"
							 :key="'detail' + index">
						 	{{ item.name }}
						 </div>
						 <div class="nav-sticky__center__right__dropdown">							
							<div class="nav-sticky__center__right__dropdown__up">
							  {{tabContent}}
							  <span class="arrow-down iconfont icon-xiajiantou"></span>
							</div>
							<ul class="nav-sticky__center__right__dropdown__menu" v-if="isDropOpen">
							  <li @click="tabChange(item,index)" 
							    class="nav-sticky__center__right__dropdown__menu__item"
								:class="{'nav-sticky__center__right__dropdown__menu__item--Active': tabValue == item.value}" 
							   v-for="(item, index) in tabCollection" 
							   :key="'detail-dropdown' + index">{{item.name}}</li>
							</ul> 
						 </div>
					  </div>
				</div>
			</div>
			<div v-if="tabValue == 0">
				<div class="detail-banner">
					<img class="detail-banner__avater" v-lazy="proImgPath.data[0]" />
				</div>
				<!-- 介绍方格 -->
				<div class="product__box">
					<img class="product__box__avater" v-lazy="proImgPath.data[1]" />
				</div>
				<!-- 液晶显示屏-->
				<div class="screen" style="background-color: #1b1b1b">
					<div class="screen__box">
						<img class="screen__box__img" v-lazy="proImgPath.data[2]" />
					</div>
				</div>
				<!-- 断电 -->
				<div class="outage">
					<img class="outage__avater__img" v-lazy="proImgPath.data[3]" />
				</div>
				<!-- 切换面板 -->
				<div class="switchboard">
					<img class="screen__box__avater__img" v-lazy="proImgPath.data[4]" />
				</div>
				<!-- 端口介绍 -->
				<div class="port" style="background-color: #0b0d0f">
					<div class="port__box">
						<div class="port__box__content">
							<div class="port__box__content__detail">
								<img class="port__box__content__detail__avater" v-lazy="proImgPath.data[5]" />
							</div>
						</div>
					</div>
				</div>
				<!-- 循环 -->
				<div class="loop">
					<div class="loop__box">
						<img class="loop__box__avater" v-lazy="proImgPath.data[6]" />
					</div>
				</div>
				<!-- 保护系统-->
				<div class="protection">
					<div class="protection__box">
						<div class="protection__box__avater">
							<img class="protection__box__avater__picture" v-lazy="proImgPath.data[7]" />
						</div>
					</div>
				</div>
				<!-- 展示 -->
				<div class="show">
					<div class="show__box">
						<div class="protection__box__avater">
							<img class="protection__box__avater__picture" v-lazy="proImgPath.data[8]" />
						</div>
					</div>
				</div>
			</div>
			<div v-else-if="tabValue == 1">
				<!-- <detail-params :detailList="productSpecs.data"></detail-params> -->
			</div>
			<div v-else>
				<!-- <collapse></collapse> -->
			</div>
		</div>
		<foot-bar></foot-bar>
		<!-- 尾部 -->
		<div class="load-mask" v-if="isMaskShow">
			<div class="spinner">
				<div class="spinner__item bounce1"></div>
				<div class="spinner__item bounce2"></div>
				<div class="spinner__item bounce3"></div>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>	
	.page {
		background: #000;
		color: #fff;
		font-family: MiSans-Light;
	}

	$tone-color: #fff; //字体主色调

	@mixin detailWidth {
		width: 9.8rem;

		@media (max-width: 1600px) {
			width: 750px;
		}

		@media (max-width: 1000px) {
			width: 90%;
		}
	}

	img {
		width: 100%;
		height: 100%;
	}

	.detail-banner {
		width: 100%;
		color: $tone-color;

		&__avater {
			width: 100%;
			height: auto;
		}
		
		@media (max-width: 850px) {
			padding-top: 1.7rem;
		}

		@media (max-width: 650px) {
			padding-top: 2.5rem;
		}
	}

	// 方框介绍
	.product__box {
		padding: 2rem 0 0rem;
		@include detailWidth;

		@media (max-width: 1000px) {
			padding: 3rem 0 0;
			width: 95%;
		}

		margin: 0 auto;
		height: auto;
		color: $tone-color;

		&__avater {
			width: inherit;
			height: inherit;
		}
	}

	//液晶显示屏
	.screen {
		margin-top: 2rem;
		width: 100%;

		@media (max-width: 600px) {
			margin-top: 5rem;
		}

		&__box {
			margin: 0 auto;
			text-align: center;
			padding: 150px 0 70px;

			@media (max-width: 1000px) {
				padding: 3rem 0 4rem;
			}

			@include detailWidth;
		}
	}

	// 切换面板
	.switchboard {
		@include detailWidth;
		margin: 1.5rem auto;
	}

	//端口介绍
	.port {
		padding: 2.5rem 0;
		margin: 0.3rem 0 2rem;

		@media (max-width: 1000px) {
			padding: 3rem 0 0;
			margin: 2rem auto 5rem;
		}

		&__box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			&__content {
				@include detailWidth;
			}
		}
	}

	// 循环
	.loop {
		&__box {
			margin: 3rem auto 0;

			@media (max-width: 1000px) {
				margin: 4rem auto 3rem;
			}

			display: flex;
			@include detailWidth;
		}
	}

	// 保护系统
	.protection {
		&__box {
			@include detailWidth;
			margin: 3rem auto 2rem;

			@media (max-width: 1000px) {
				width: 90%;
				margin: 3rem auto 5rem;
			}
		}
	}

	//展示
	.show {
		margin: 0 auto;
		@include detailWidth;
		padding-bottom: 3rem;

		@media (max-width: 1000px) {
			width: 100%;
			padding-bottom: 5rem;
		}
	}
</style>