<script setup>
	import {
	ref,
	onBeforeMount,
	onActivated,
onDeactivated,
computed
} from 'vue'
import topBar from "@/components/top/title-bar.vue"
import footBar from "@/components/bottom/foot-bar.vue";
import {
	useRouter,
	useRoute
} from '#imports';
import { useI18n } from "#imports";
import { usePageTitle } from "@/composables/usePageTitle.js";
import { useImagePath } from "@/composables/useImagePath.js";

	const router = useRouter();
const route = useRoute();
const { t } = useI18n();
const { cdnImageUrl } = useImagePath();

// 设置页面标题
usePageTitle("page.product");

// 响应式数据定义 - 产品分类数据（使用computed确保国际化文本响应式更新）
const productCategories = computed(() => [
	{
		id: 'product-center',
		name: t('product.category.product-center'),
		icon: 'home',
		isExpanded: categoryExpandedState.value['product-center'] || false,
		children: [
			{ id: 'monitor', name: t('product.category.monitor'), isActive: activeCategory.value === 'monitor' },
			{ id: 'street-light', name: t('product.category.street-light'), isActive: activeCategory.value === 'street-light' }
		]
	}
]);

// 响应式数据定义 - 产品数据（使用computed确保国际化文本响应式更新）
const allProducts = computed(() => [
	// 监控摄像头产品
	{
		id: 'S01',
		name: 'S01',
		subtitle: t('product.s01.description'),
		image: cdnImageUrl('/static/product/monitor/S01.png'),
		category: 'monitor',
		specs: {
			[t('product.specs.number')]: 'S01',
			[t('product.specs.type')]: 'Camera',
			[t('product.specs.specification')]: '2MP',
			[t('product.specs.brand')]: 'SPM'
		}
	},
	{
		id: 'S02',
		name: 'S02',
		subtitle: t('product.s02.subtitle'),
		image: cdnImageUrl('/static/product/monitor/S02.png'),
		category: 'monitor',
		specs: {
			[t('product.specs.number')]: 'S02',
			[t('product.specs.type')]: 'Camera',
			[t('product.specs.specification')]: '2MP+2MP',
			[t('product.specs.brand')]: 'SPM'
		}
	},
	{
		id: 'S03',
		name: 'S03',
		subtitle: t('product.s03.subtitle'),
		image: cdnImageUrl('/static/product/monitor/S03.png'),
		category: 'monitor',
		specs: {
			[t('product.specs.number')]: 'S03',
			[t('product.specs.type')]: 'Camera',
			[t('product.specs.specification')]: '2MP',
			[t('product.specs.brand')]: 'SPM'
		}
	},
	{
		id: 'T05',
		name: 'T05',
		subtitle: t('product.t05.subtitle'),
		image: cdnImageUrl('/static/product/monitor/T05.png'),
		category: 'monitor',
		specs: {
			[t('product.specs.number')]: 'T05',
			[t('product.specs.type')]: 'Camera',
			[t('product.specs.specification')]: '4MP',
			[t('product.specs.brand')]: 'SPM'
		}
	},
	{
		id: 'T11',
		name: 'T11',
		subtitle: t('product.t11.description'),
		image: cdnImageUrl('/static/product/monitor/T11.png'),
		category: 'monitor',
		specs: {
			[t('product.specs.number')]: 'T11',
			[t('product.specs.type')]: 'Camera',
			[t('product.specs.brand')]: 'SPM'
		}
	},
	// 路灯产品
	{
		id: 'XA-01',
		name: 'XA-01',
		subtitle: t('product.xa01.description'),
		image: cdnImageUrl('/static/product/street_light/XA-01.png'),
		category: 'street-light',
		specs: {
			[t('product.specs.number')]: 'XA-01',
			[t('product.specs.type')]: 'Street Light',
			[t('product.specs.specification')]: '4MP',
			[t('product.specs.brand')]: 'SPM'
		}
	}
]);

// 左侧栏产品列表 - 从主产品列表中选择几个
const sidebarProducts = computed(() => {
	return allProducts.value.slice(0, 3);
});

// 分页相关
const currentPage = ref(1);
const pageSize = ref(6);
const totalProducts = computed(() => filteredProducts.value.length);
const totalPages = computed(() => Math.ceil(totalProducts.value / pageSize.value));

// 当前选中的分类
const activeCategory = ref('monitor');

// 分类展开状态管理
const categoryExpandedState = ref({
	'product-center': true
});

// 产品详情弹框
const showDetailModal = ref(false);
const selectedProduct = ref(null);

// 过滤后的产品
const filteredProducts = computed(() => {
	return allProducts.value.filter(product => product.category === activeCategory.value);
});

// 当前页显示的产品
const currentProducts = computed(() => {
	const start = (currentPage.value - 1) * pageSize.value;
	const end = start + pageSize.value;
	return filteredProducts.value.slice(start, end);
});

// 面包屑导航
const breadcrumbs = computed(() => {
	const categoryName = activeCategory.value === 'monitor' ? t('product.breadcrumb.monitor') : t('product.breadcrumb.street-light');
	return [
		{ name: t('product.breadcrumb.home'), path: '/' },
		{ name: t('product.breadcrumb.product-center'), path: '/product' },
		{ name: categoryName, path: `/product?category=${activeCategory.value}` }
	];
});

// 方法
const toggleCategory = (category) => {
	if (category.children) {
		// 切换分类的展开状态
		categoryExpandedState.value[category.id] = !categoryExpandedState.value[category.id];
	}
};

const selectCategory = (categoryId) => {
	// 现在activeCategory是响应式的，productCategories中的isActive状态通过computed自动计算
	// 只需要更新activeCategory即可，computed会自动更新isActive状态
	activeCategory.value = categoryId;
	currentPage.value = 1; // 重置到第一页
};

const goToPage = (page) => {
	if (page >= 1 && page <= totalPages.value) {
		currentPage.value = page;
	}
};

const goToProductDetail = (product) => {
	selectedProduct.value = product;
	showDetailModal.value = true;
};

const closeModal = () => {
	showDetailModal.value = false;
	selectedProduct.value = null;
};

// 生命周期
onBeforeMount(() => {
	// 初始化
});

onActivated(() => {
	document.title = t('page.product') + ' - ' + t('page.company-abbreviation');
});
</script>

<template>
	<div class="product-page">
		<topBar class="top-bar" />
		<div class="banner">
			<img :src="cdnImageUrl('/static/product/product-banner.png')" :alt="t('page.product')" />
		</div>
		
		<!-- 面包屑导航 -->
		<div class="breadcrumb">
			<div class="container">
				<span v-for="(item, index) in breadcrumbs" :key="index" class="breadcrumb-item">
					<i class="icon-location" v-if="index === 0"></i>
					<nuxt-link v-if="index < breadcrumbs.length - 1" :to="item.path">{{ item.name }}</nuxt-link>
					<span v-else>{{ item.name }}</span>
					<span v-if="index < breadcrumbs.length - 1" class="separator"> > </span>
				</span>
			</div>
		</div>

		<!-- 主内容区域 -->
		<div class="main-content">
			<div class="container">
				<!-- 左侧边栏 -->
				<div class="sidebar">
					<!-- 分类导航 -->
					<div class="category-nav">
						<div 
							v-for="category in productCategories" 
							:key="category.id"
							class="category-group"
						>
							<div 
								class="category-header"
								:class="{ active: category.isExpanded }"
								@click="toggleCategory(category)"
							>
								<i class="icon" :class="category.icon"></i>
								<span>{{ category.name }}</span>
								<i class="arrow" :class="{ expanded: category.isExpanded }"></i>
							</div>
							
							<div v-if="category.isExpanded && category.children" class="category-children">
								<div 
									v-for="child in category.children"
									:key="child.id"
									class="category-item"
									:class="{ active: child.isActive }"
									@click="selectCategory(child.id)"
								>
									<i class="arrow-right" v-if="!child.children"></i>
									<span>{{ child.name }}</span>
									<i 
										v-if="child.children" 
										class="expand-icon"
										:class="{ expanded: child.isExpanded }"
										@click.stop="toggleCategory(child)"
									></i>
								</div>
								
								<!-- 子分类 -->
								<template v-for="child in category.children">
									<div 
										v-if="child.children && child.isExpanded"
										:key="`sub-${child.id}`"
										class="sub-category-children"
									>
										<div 
											v-for="subChild in child.children"
											:key="subChild.id"
											class="sub-category-item"
											:class="{ active: subChild.isActive }"
											@click="selectCategory(subChild.id)"
										>
											{{ subChild.name }}
										</div>
									</div>
								</template>
							</div>
						</div>
					</div>
					
					<!-- 侧边栏产品列表 -->
					<div class="sidebar-products">
						<div 
							v-for="product in sidebarProducts"
							:key="product.id"
							class="sidebar-product-item"
							@click="goToProductDetail(product)"
						>
							<div class="product-image">
								<img :src="product.image" :alt="product.name" />
							</div>
							<div class="product-info">
								<div class="product-name">{{ product.name }}</div>
								<div class="product-desc">{{ product.subtitle }}</div>
							</div>
						</div>
								</div>
							</div>
				
				<!-- 右侧内容区 -->
				<div class="content-area">
					<!-- 分类标题 -->
					<div class="category-title">
						<h2>{{ activeCategory === 'monitor' ? t('product.category.monitor') : t('product.category.street-light') }}</h2>
					</div>
					
					<!-- 产品网格 -->
					<div class="product-grid">
						<div 
							v-for="product in currentProducts"
							:key="product.id"
							class="product-card"
							@click="goToProductDetail(product)"
						>
							<div class="product-image-wrapper">
								<img 
									:src="product.image" 
									:alt="product.name"
									class="product-image"
								/>
							</div>
							<div class="product-info">
								<h3 class="product-name">{{ product.name }}</h3>
								<p class="product-subtitle">{{ product.subtitle }}</p>
															<div class="product-action">
								<button class="learn-more-btn">{{ t('product.page.learn-more') }}</button>
							</div>
							</div>
						</div>
					</div>
					
					<!-- 分页 -->
					<div class="pagination" v-if="totalPages > 1">
						<button 
							class="page-btn"
							:disabled="currentPage === 1"
							@click="goToPage(1)"
						>
							&lt;&lt;
						</button>
						<button 
							class="page-btn"
							:disabled="currentPage === 1"
							@click="goToPage(currentPage - 1)"
						>
							&lt;
						</button>
						<button 
							v-for="page in totalPages"
							:key="page"
							class="page-btn"
							:class="{ active: page === currentPage }"
							@click="goToPage(page)"
						>
							{{ page }}
						</button>
						<button 
							class="page-btn"
							:disabled="currentPage === totalPages"
							@click="goToPage(currentPage + 1)"
						>
							&gt;
						</button>
						<button 
							class="page-btn"
							:disabled="currentPage === totalPages"
							@click="goToPage(totalPages)"
						>
							&gt;&gt;
						</button>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 产品详情弹框 -->
		<div v-if="showDetailModal" class="modal-overlay" @click="closeModal">
			<div class="modal-content" @click.stop>
				<button class="close-btn" @click="closeModal">&times;</button>
				
				<div class="modal-body" v-if="selectedProduct">
					<div class="modal-left">
						<div class="product-image-container">
							<img :src="selectedProduct.image" :alt="selectedProduct.name" />
						</div>
						
						<!-- 产品缩略图 -->
						<div class="product-thumbnails">
							<div class="thumbnail active">
								<img :src="selectedProduct.image" :alt="selectedProduct.name" />
							</div>
						</div>
					</div>
					
					<div class="modal-right">
						<h1 class="product-title">{{ selectedProduct.name }}</h1>
						
						<div class="product-specs">
							<div class="spec-row" v-for="(value, key) in selectedProduct.specs" :key="key">
								<span class="spec-label">{{ key }}</span>
								<span class="spec-separator">:</span>
								<span class="spec-value">{{ value }}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<footBar />
	</div>
</template>

<style lang="scss" scoped>
.product-page {
	background: #f6f6f6;
	min-height: 100vh;
}

.banner {
	width: 100%;
	height: 300px;
	overflow: hidden;
	
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.breadcrumb {
	background: #fff;
	padding: 12px 0;
	border-bottom: 1px solid #e5e5e5;
	
	.container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 20px;
	}
	
	.breadcrumb-item {
		color: #666;
		font-size: 14px;
		
		.icon-location {
			margin-right: 5px;
			color: #999;
		}
		
		a {
			color: #666;
			text-decoration: none;
			
			&:hover {
				color: #4f8cef;
			}
		}
		
		.separator {
			margin: 0 8px;
			color: #ccc;
		}
	}
}

.main-content {
	.container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px;
		display: flex;
		gap: 20px;

		// 4K 和超大屏幕
		@media (min-width: 2560px) {
			max-width: 1800px;
			padding: 40px 60px;
			gap: 40px;
		}

		@media (min-width: 1920px) and (max-width: 2559px) {
			max-width: 1400px;
			padding: 30px 40px;
			gap: 30px;
		}

		@media (min-width: 1440px) and (max-width: 1919px) {
			max-width: 1200px;
			padding: 25px 30px;
			gap: 25px;
		}

		@media (max-width: 1024px) {
			padding: 20px 24px;
			gap: 20px;
		}

		@media (max-width: 768px) {
			flex-direction: column;
			padding: 15px 20px;
			gap: 20px;
		}

		@media (max-width: 480px) {
			padding: 12px 16px;
			gap: 16px;
		}

		@media (max-width: 375px) {
			padding: 10px 12px;
			gap: 12px;
		}
	}
}

.sidebar {
	width: 260px;
	flex-shrink: 0;

	// 4K 和超大屏幕
	@media (min-width: 2560px) {
		width: 380px;
	}

	@media (min-width: 1920px) and (max-width: 2559px) {
		width: 330px;
	}

	@media (min-width: 1440px) and (max-width: 1919px) {
		width: 300px;
	}

	@media (max-width: 1024px) {
		width: 240px;
	}

	@media (max-width: 768px) {
		width: 100%;
		margin-bottom: 20px;
	}

	@media (max-width: 480px) {
		margin-bottom: 16px;
	}

	@media (max-width: 375px) {
		margin-bottom: 12px;
	}
	
	.category-nav {
		background: #fff;
		border-radius: 4px;
		overflow: hidden;
		margin-bottom: 20px;
		
		.category-group {
			.category-header {
				background: #4f8cef;
				color: white;
				padding: 15px 20px;
				cursor: pointer;
				display: flex;
				align-items: center;
				font-weight: 500;
				
				.icon {
					margin-right: 10px;
					font-size: 16px;
				}
				
				span {
					flex: 1;
				}
				
				.arrow {
					width: 0;
					height: 0;
					border-left: 5px solid transparent;
					border-right: 5px solid transparent;
					border-top: 6px solid white;
					transition: transform 0.3s;
					
					&.expanded {
						transform: rotate(180deg);
					}
				}
				
				&:hover {
					background: #4080e0;
				}
			}
			
			.category-children {
				background: #f8f9fa;
				
				.category-item {
					padding: 12px 20px 12px 40px;
					cursor: pointer;
					display: flex;
					align-items: center;
					color: #333;
					border-bottom: 1px solid #e9ecef;
					
					.arrow-right {
						width: 0;
						height: 0;
						border-top: 4px solid transparent;
						border-bottom: 4px solid transparent;
						border-left: 6px solid #666;
						margin-right: 10px;
					}
					
					&:hover {
						background: #e9ecef;
						color: #4f8cef;
					}
					
					&.active {
						background: #e3f2fd;
						color: #4f8cef;
						font-weight: 500;
						
						.arrow-right {
							border-left-color: #4f8cef;
						}
					}
					
					.expand-icon {
						margin-left: auto;
						width: 0;
						height: 0;
						border-left: 4px solid transparent;
						border-right: 4px solid transparent;
						border-top: 5px solid #666;
						transition: transform 0.3s;
						
						&.expanded {
							transform: rotate(180deg);
						}
					}
				}
				
				.sub-category-children {
					.sub-category-item {
						padding: 10px 20px 10px 60px;
						cursor: pointer;
						color: #666;
						font-size: 14px;
						border-bottom: 1px solid #e9ecef;
						
						&:hover {
							background: #e9ecef;
							color: #4f8cef;
						}
						
						&.active {
							background: #e3f2fd;
							color: #4f8cef;
							font-weight: 500;
						}
					}
				}
			}
		}
	}
	
	.sidebar-products {
		background: #fff;
		border-radius: 4px;
		overflow: hidden;

		.sidebar-product-item {
			display: flex;
			padding: 15px;
			border-bottom: 1px solid #e9ecef;
			cursor: pointer;
			transition: background-color 0.2s;
			
			&:hover {
				background: #f8f9fa;
			}
			
			&:last-child {
				border-bottom: none;
			}
			
			.product-image {
				width: 80px;
				height: 60px;
				margin-right: 15px;
				
				img {
					width: 90%;
					height: 90%;
					object-fit: contain;
					border-radius: 4px;
					margin: 5% auto;
					display: block;
				}
			}
			
			.product-info {
				flex: 1;
				
				.product-name {
					font-weight: 500;
					color: #333;
					margin-bottom: 5px;
					font-size: 14px;
				}
				
				.product-desc {
					color: #666;
					font-size: 12px;
					line-height: 1.4;
				}
			}
		}
	}
}

.content-area {
	flex: 1;
	
	.category-title {
		background: #fff;
		padding: 15px 20px;
		border-radius: 4px;
		margin-bottom: 15px;
		border-bottom: 3px solid #4f8cef;
		
		h2 {
			margin: 0;
			color: #333;
			font-size: 18px;
			font-weight: 500;
			font-family: var(--font-medium);
		}
	}
	
	.product-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
		margin-bottom: 30px;

		// 4K 和超大屏幕
		@media (min-width: 2560px) {
			grid-template-columns: repeat(4, 1fr);
			gap: 30px;
			margin-bottom: 50px;
		}

		@media (min-width: 1920px) and (max-width: 2559px) {
			grid-template-columns: repeat(4, 1fr);
			gap: 25px;
			margin-bottom: 40px;
		}

		@media (min-width: 1440px) and (max-width: 1919px) {
			grid-template-columns: repeat(3, 1fr);
			gap: 22px;
			margin-bottom: 35px;
		}

		@media (max-width: 1024px) {
			grid-template-columns: repeat(2, 1fr);
			gap: 18px;
			margin-bottom: 25px;
		}

		@media (max-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
			gap: 16px;
			margin-bottom: 20px;
		}

		@media (max-width: 480px) {
			grid-template-columns: 1fr;
			gap: 16px;
			margin-bottom: 20px;
		}

		@media (max-width: 375px) {
			gap: 12px;
			margin-bottom: 16px;
		}
		
		.product-card {
			background: #fff;
			border-radius: 8px;
			overflow: hidden;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			cursor: pointer;
			transition: all 0.3s ease;
			
			&:hover {
				box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
				transform: translateY(-2px);
				
				.product-image {
					transform: scale(1.05);
				}
				
				.learn-more-btn {
					background: #4f8cef;
					color: white;
				}
			}
			
			.product-image-wrapper {
				position: relative;
				height: 200px;
				overflow: hidden;
				background: #f8f9fa;
				
				.product-image {
					width: 85%;
					height: 85%;
					object-fit: contain;
					transition: transform 0.3s ease;
					margin: 7.5% auto;
					display: block;
				}
			}
			
			.product-info {
				padding: 18px;
				
				.product-name {
					font-size: 16px;
					font-weight: 500;
					color: #333;
					margin-bottom: 6px;
					font-family: var(--font-medium);
				}
				
				.product-subtitle {
					color: #666;
					font-size: 13px;
					margin-bottom: 12px;
					line-height: 1.3;
					font-family: var(--font-regular);
				}
				
				.product-action {
					.learn-more-btn {
						background: transparent;
						color: #666;
						border: 1px solid #ddd;
						padding: 6px 16px;
						border-radius: 16px;
						cursor: pointer;
						transition: all 0.3s ease;
						font-size: 13px;
						
						&:hover {
							background: #4f8cef;
							color: white;
							border-color: #4f8cef;
						}
					}
				}
			}
		}
	}
	
	.pagination {
		display: flex;
		justify-content: center;
		gap: 8px;
		
		.page-btn {
			padding: 8px 12px;
			border: 1px solid #ddd;
			background: #fff;
			color: #333;
			cursor: pointer;
			border-radius: 4px;
			transition: all 0.2s;
			
			&:hover:not(:disabled) {
				background: #4f8cef;
				color: white;
				border-color: #4f8cef;
			}
			
			&.active {
				background: #4f8cef;
				color: white;
				border-color: #4f8cef;
			}
			
			&:disabled {
				background: #f5f5f5;
				color: #ccc;
				cursor: not-allowed;
			}
		}
	}
}

// 产品详情弹框样式
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	
	.modal-content {
		background: white;
		border-radius: 8px;
		width: 90%;
		max-width: 900px;
		max-height: 90vh;
		overflow: auto;
		position: relative;
		
		.close-btn {
			position: absolute;
			top: 15px;
			right: 20px;
			background: none;
			border: none;
			font-size: 24px;
			color: #666;
			cursor: pointer;
			z-index: 1001;
			
			&:hover {
				color: #333;
			}
		}
		
		.modal-body {
			display: flex;
			padding: 30px;
			gap: 30px;
			
			.modal-left {
				flex: 1;
				
				.product-image-container {
					width: 100%;
					height: 400px;
					border: 1px solid #e5e5e5;
					border-radius: 4px;
					overflow: hidden;
					margin-bottom: 15px;
					background: #f9f9f9;
					
					img {
						width: 80%;
						height: 80%;
						object-fit: contain;
						background: #f9f9f9;
						margin: 10% auto;
						display: block;
					}
				}
				
				.product-thumbnails {
					display: flex;
					gap: 10px;
					
					.thumbnail {
						width: 60px;
						height: 60px;
						border: 2px solid transparent;
						border-radius: 4px;
						overflow: hidden;
						cursor: pointer;
						
						&.active {
							border-color: #4f8cef;
						}
						
						img {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
				}
			}
			
			.modal-right {
				flex: 1;
				
				.product-title {
					font-size: 28px;
					color: #333;
					margin-bottom: 30px;
					font-weight: 500;
				}
				
				.product-specs {
					.spec-row {
						display: flex;
						padding: 12px 0;
						border-bottom: 1px solid #f0f0f0;
						
						.spec-label {
							min-width: 80px;
							color: #666;
							font-weight: 500;
						}
						
						.spec-separator {
							margin: 0 15px;
							color: #999;
						}
						
						.spec-value {
							color: #4f8cef;
							font-weight: 500;
						}
					}
				}
			}
		}
	}
}

// 响应式设计已在上面的具体组件中处理

// 弹框响应式
@media (max-width: 768px) {
	.modal-content {
		.modal-body {
			flex-direction: column;
			padding: 20px;
			gap: 20px;
			
			.modal-left {
				.product-image-container {
					height: 300px;
				}
			}
			
			.modal-right {
				.product-title {
					font-size: 24px;
					margin-bottom: 20px;
				}
			}
		}
	}
}
</style>