<template>
	<div id="normal-container" class="launches-content" v-loading.fullscreen.lock="fullscreenLoading">
		<IntegratedLayout>
			<div class="content">
				<div class="bread-menu">
					<span class="gradient-color crumbs">AI Launches</span>
				</div>
				<div class="launches-header">
					<h1 class="launches-title-text">
						AI Launches
					</h1>
					<p class="launches-subtitle-text">A daily curated selection of the newest AI applications and products. Explore the most talked-about innovations, trending technologies, and hot new releases shaping the AI landscape. Stay ahead by discovering what’s capturing attention in the AI community.</p>
				</div>
				<div class="flex justify-center">
					<SwitchDate v-model="currentMode" />
				</div>
				<div class="list-header flex-between-center">
					<SwitchSort v-model="sortType" />
					<div class="flex items-center gap-40">
						<SwitchMonth v-show="currentMode === 'Daily'" v-model="currentMonth" />
						<SwitchYear v-model="currentYear" />
					</div>
				</div>
				<div class="card list-container">
					<OptionDates :year="currentYear" :mode="currentMode" :month="currentMonth" @select="handleDateSelect" @month-change="handleMonthChange" />
					<div class="diver"></div>
					<div class="list">
						<ListItem v-for="(it, i) in articleList" :key="it.id" :config="it" :sort-index="i + 1" />
					</div>
				</div>
				<div class="flex-bottom-right">
					<Pagination :current-page="currentPage" :total-pages="totalPages" @page-change="handlePageChange" />
				</div>
			</div>
		</IntegratedLayout>
	</div>
</template>

<script>
import SwitchDate from "@/pages/Launches/components/SwitchDate.vue";
import SwitchSort from "@/pages/Launches/components/SwitchSort.vue";
import SwitchYear from "@/pages/Launches/components/SwitchYear.vue";
import SwitchMonth from "@/pages/Launches/components/SwitchMonth.vue";
import ListItem from "@/pages/Launches/components/ListItem.vue";
import OptionDates from "@/pages/Launches/components/OptionDates.vue";

const SEARCH_CACHE_KEY = 'launches_search_cache';

export default {
	components: {
		SwitchDate,
		SwitchSort,
		SwitchYear,
		ListItem,
		OptionDates,
		SwitchMonth,
	},
	data() {
		return {
			lastSelectedValue: null,
			currentPage: 1,
			totalPages: 1,
			pageSize: 10,
			total: 0,
			currentYear: new Date().getFullYear(),
			currentMode: 'Daily',
			currentMonth: new Date().getMonth() + 1,
			articleList: [],
			sortType: 'popular',
			fullscreenLoading: false,
		}
	},
	watch: {
		total() {
			this.calculateTotalPages();
		},
		pageSize() {
			this.calculateTotalPages();
		},
		sortType(newVal, oldVal) {
			if (oldVal !== null) { // 避免初始化时触发
				let startTime = '';
				let endTime = '';
				if (this.lastSelectedValue) {
					try {
						const selectedValue = JSON.parse(this.lastSelectedValue);
						if (selectedValue instanceof Array) {
							startTime = selectedValue[0] + ' 00:00:00';
							endTime = selectedValue[1] + ' 23:59:59';
						} else {
							startTime = selectedValue + ' 00:00:00';
							endTime = selectedValue + ' 23:59:59';
						}
					} catch (e) {
						console.error('解析时间参数失败', e);
					}
				}
				this.saveSearchCache();
				// 重新获取文章列表，传入新的排序类型
				this.getArticleListData(this.currentPage, this.pageSize, startTime, endTime, newVal);
			}
		},
		// 监听其他搜索条件变化
		currentPage() {
			this.saveSearchCache();
		},
		currentYear() {
			this.saveSearchCache();
		},
		currentMode() {
			this.saveSearchCache();
		},
		currentMonth() {
			this.saveSearchCache();
		},
		lastSelectedValue() {
			this.saveSearchCache();
		}
	},
	methods: {
		handleMonthChange(month) {
			this.currentMonth = month;
			// 无论当前模式是什么，都更新lastSelectedValue
			const [start, end] = this.getMonthRange(this.currentYear, month);
			this.lastSelectedValue = JSON.stringify([start, end]);
		},
		getMonthRange(year, month) {
			const start = new Date(year, month - 1, 1);
			const end = new Date(year, month, 0);
			// 格式化为 yyyy-mm-dd HH:MM:SS
			const formatDate = (date, isStart = true) => {
				const y = date.getFullYear();
				const m = String(date.getMonth() + 1).padStart(2, '0');
				const d = String(date.getDate()).padStart(2, '0');
				const time = isStart ? '00:00:00' : '23:59:59';
				return `${y}-${m}-${d} ${time}`;
			};
			return [formatDate(start), formatDate(end)];
		},
		// 保存搜索条件到sessionStorage
		saveSearchCache() {
			const cacheData = {
				currentPage: this.currentPage,
				currentYear: this.currentYear,
				currentMode: this.currentMode,
				currentMonth: this.currentMonth,
				sortType: this.sortType,
				lastSelectedValue: this.lastSelectedValue
			};
			try {
				sessionStorage.setItem(SEARCH_CACHE_KEY, JSON.stringify(cacheData));
			} catch (e) {
				console.error('保存搜索缓存失败', e);
			}
		},
		// 从sessionStorage加载搜索条件
		loadSearchCache() {
			try {
				const cachedData = sessionStorage.getItem(SEARCH_CACHE_KEY);
				if (cachedData) {
					const parsedData = JSON.parse(cachedData);
					// 恢复各个搜索条件
					if (parsedData.currentPage !== undefined) {
						this.currentPage = parsedData.currentPage;
					}
					if (parsedData.currentYear !== undefined) {
						this.currentYear = parsedData.currentYear;
					}
					if (parsedData.currentMode !== undefined) {
						this.currentMode = parsedData.currentMode;
					}
					if (parsedData.currentMonth !== undefined) {
						this.currentMonth = parsedData.currentMonth;
					}
					if (parsedData.sortType !== undefined) {
						this.sortType = parsedData.sortType;
					}
					if (parsedData.lastSelectedValue !== undefined) {
						this.lastSelectedValue = parsedData.lastSelectedValue;
					}

					// 确保数据同步：在月模式下，如果currentMonth和lastSelectedValue不一致，以currentMonth为准
					this.$nextTick(() => {
						if (this.currentMode === 'Monthly' && this.currentMonth) {
							// 解析lastSelectedValue获取其中的月份
							let cachedMonth = null;
							try {
								if (this.lastSelectedValue) {
									const selectedValue = JSON.parse(this.lastSelectedValue);
									if (Array.isArray(selectedValue) && selectedValue.length > 0) {
										// 从日期字符串中提取月份
										const dateParts = selectedValue[0].split('-');
										if (dateParts.length >= 2) {
											cachedMonth = parseInt(dateParts[1], 10);
										}
									}
								}
							} catch (e) {
								console.error('解析lastSelectedValue失败', e);
							}

							// 如果lastSelectedValue中的月份与currentMonth不一致，更新lastSelectedValue
							if (cachedMonth !== this.currentMonth) {
								this.handleMonthChange(this.currentMonth);
							}
						}

						// 从lastSelectedValue中提取时间参数并重新请求数据
						let startTime = '';
						let endTime = '';
						if (this.lastSelectedValue) {
							try {
								const selectedValue = JSON.parse(this.lastSelectedValue);
								if (selectedValue instanceof Array) {
									startTime = selectedValue[0];
									endTime = selectedValue[1];
								} else {
									startTime = selectedValue;
									endTime = selectedValue;
								}
							} catch (e) {
								console.error('解析时间参数失败', e);
							}
						}
						// 调用数据加载方法
						this.getArticleListData(this.currentPage, this.pageSize, startTime, endTime, this.sortType);
					});
				}
			} catch (e) {
				console.error('加载搜索缓存失败', e);
			}
		},
		calculateTotalPages() {
			// 当 total 为 0 时 totalPages 为 1
			// 否则向上取整计算总页数
			this.totalPages = this.total === 0 ? 1 : Math.ceil(this.total / this.pageSize);
		},
		handleDateSelect(selectedValue) {
			// 确保selectedValue已经包含时分秒
			let valueToSave = selectedValue;

			// 处理日期字符串或日期范围数组，添加时分秒
			if (typeof selectedValue === 'string' && !selectedValue.includes(' ')) {
				// 单个日期，添加时间
				valueToSave = selectedValue + ' 00:00:00';
			} else if (Array.isArray(selectedValue) && selectedValue.length === 2) {
				// 日期范围数组，确保每个日期都有时间
				const start = selectedValue[0].includes(' ') ? selectedValue[0] : selectedValue[0] + ' 00:00:00';
				const end = selectedValue[1].includes(' ') ? selectedValue[1] : selectedValue[1] + ' 23:59:59';
				valueToSave = [start, end];
			}

			const stringValue = JSON.stringify(valueToSave);
			if (this.lastSelectedValue === stringValue) {
				return;
			}
			this.lastSelectedValue = stringValue;

			// 获取开始和结束时间
			let startTime = '';
			let endTime = '';
			if (valueToSave instanceof Array) {
				startTime = valueToSave[0];
				endTime = valueToSave[1];
			} else {
				startTime = valueToSave;
				endTime = valueToSave;
			}
			this.getArticleListData(this.currentPage, this.pageSize, startTime, endTime, this.sortType);
		},
		// 获取文章列表
		async getArticleListData(page = 1, limit = 10, startTime, endTime, sortType = 'popular') {
			const params = {page, limit, startTime, endTime, articleType: 'launches'};
			if (sortType === 'popular') {
				params.isHot = 1;
			} else {
				params.sortField = 'publish_time';
				params.sortOrder = 'desc';
			}
			this.fullscreenLoading = true;
			const {data: res} = await this.$api.article.getArticleList(params);
			const {code, data} = res;
			if (code === 0 && data.list) {
				this.articleList = data.list;
				this.total = data.total;
				this.calculateTotalPages();
			} else {
				this.articleList = [];
				this.total = 0;
				this.calculateTotalPages();
			}
			this.fullscreenLoading = false;
		},
		handlePageChange(pageNumber) {
			this.currentPage = pageNumber;
			// 从 lastSelectedValue 中提取时间参数
			let startTime = '';
			let endTime = '';
			if (this.lastSelectedValue) {
				try {
					const selectedValue = JSON.parse(this.lastSelectedValue);
					if (selectedValue instanceof Array) {
						startTime = selectedValue[0] + ' 00:00:00';
						endTime = selectedValue[1] + ' 23:59:59';
					} else {
						startTime = selectedValue + ' 00:00:00';
						endTime = selectedValue + ' 23:59:59';
					}
				} catch (e) {
					console.error('解析时间参数失败', e);
				}
			}
			this.getArticleListData(pageNumber, this.pageSize, startTime, endTime, this.sortType);
		},
	},
	mounted() {
		this.loadSearchCache();
	}
}
</script>

<style scoped lang="scss">
.gap-40 {
	gap: 40px;
}
.card {
	padding: 20px 30px;
	background-color: #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.08);
}
.launches-content {
	flex: 1;
	overflow-y: auto;
	position: relative;
	.content {
		padding-top: 25px;
		padding-bottom: 100px;

		.bread-menu {
			font-size: 18px;
			font-family: 'Poppins-Medium';
			margin-bottom: 25px;

			.crumbs {
				font-family: 'Poppins-SemiBold';
				font-weight: 600;
			}
		}

		.launches-header {
			margin-bottom: 25px;
			.launches-title-text {
				margin: 0;
				font-size: 40px;
				font-weight: bold;
				font-family: 'Poppins-Bold';
			}
			.launches-subtitle-text {
				font-family: 'Poppins-Medium';
				color: #64748B;
				margin-top: 10px;
			}
		}
		.list-header {
			margin-top: 25px;
		}
		.list-container {
			margin-top: 30px;
			margin-bottom: 40px;
			.diver {
				height: 1px;
				border-top-color: #E2E8F0;
				border-top-style: solid;
				border-top-width: 2px;
				margin-top: 15px;
				margin-bottom: 15px;
			}
			.list {
				gap: 30px;
				display: flex;
				flex-direction: column;
			}
		}
	}
}
</style>
