<template>
	<div class="case-wrapper">
		<div class="wrapper-header">
			<div class="header-filters">
				<div class="search-box">
					<el-input v-model="searchText" style="width: 360px; height: 32px" placeholder="搜索调查案件"
						@keyup.enter="handleSearch">
						<template #prefix>
							<el-icon>
								<Search />
							</el-icon>
						</template>
					</el-input>
				</div>
				<div class="dropdown-filters">
					<el-select v-model="filterStage" placeholder="全部阶段" class="filter-select" clearable>
						<el-option label="全部阶段" value="" />
						<el-option label="调查中" value="1" />
						<el-option label="调查结束" value="0" />
					</el-select>
					<el-select v-model="filterParty" placeholder="全部原告/被告" class="filter-select" clearable>
						<el-option label="全部原告/被告" value="" />
					</el-select>
					<el-select v-model="filterReason" placeholder="全部原因" class="filter-select" clearable>
						<el-option label="全部原因" value="" />
					</el-select>
				</div>
			</div>
			<div class="select-box">
				<el-select v-model="isSort" placeholder="发布时间" style="width: 166px">
					<template #prefix>
						<div style="display: flex; align-items: center; height: 100%">
							<img src="@/assets/icons/jiangxu1.png" style="width: 14px; height: 14px" />
						</div>
					</template>
					<el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
		</div>
		<div class="wrapper-main">
			<div class="left">
				<!-- 科技领域 -->
				<div class="left-box">
					<div class="left-header">
						<div class="icon"></div>
						<div class="title">{{ "科技领域" }}</div>
					</div>
					<div class="left-main">
						<el-checkbox-group class="checkbox-group" v-model="checkedAreaList" @change="handleCheckedAreasChange">
							<el-checkbox class="filter-checkbox" label="全部领域"> 全部领域 </el-checkbox>
							<el-checkbox v-for="area in surveyAreaList" :key="area.id" :label="area.id" class="filter-checkbox">
								{{ area.name }}
							</el-checkbox>
						</el-checkbox-group>

					</div>
				</div>
				<!-- 发布时间 -->
				<div class="left-box">
					<div class="left-header">
						<div class="icon"></div>
						<div class="title">{{ "发布时间" }}</div>
					</div>
					<div class="left-main">
						<el-checkbox-group class="checkbox-group" v-model="checkedSurveyYears" @change="handleCheckedYearsChange">
							<el-checkbox class="filter-checkbox" label="全部时间"> 全部时间 </el-checkbox>
							<el-checkbox v-for="year in displayedYearList" :key="year.id" :label="year.id" class="filter-checkbox">
								{{ year.name }}
							</el-checkbox>
							<div v-if="surveyYearList.length > 6" class="expand-btn" @click="isYearExpanded = !isYearExpanded">
								{{ isYearExpanded ? "收起" : "更早" }}
								<el-icon>
									<ArrowUp v-if="isYearExpanded" />
									<ArrowDown v-else />
								</el-icon>
							</div>
						</el-checkbox-group>
					</div>
				</div>
				<!-- 受调查国家/地区 -->
				<div class="left-box">
					<div class="left-header">
						<div class="icon"></div>
						<div class="title">{{ "受调查国家/地区" }}</div>
					</div>
					<div class="left-main">
						<el-checkbox-group class="checkbox-group" v-model="checkedCountryList"
							@change="handleCheckedCountriesChange">
							<el-checkbox class="filter-checkbox" label="全部"> 全部 </el-checkbox>
							<el-checkbox v-for="area in surveyCountryList" :key="area.id" :label="area.id" class="filter-checkbox">
								{{ area.name }}
							</el-checkbox>
						</el-checkbox-group>
					</div>
				</div>
			</div>
			<div class="right">
				<!-- <div class="right-header">
					<div class="icon">
						<img src="./assets/images/right-header-icon.png" alt="" />
					</div>
					<div class="title">{{ "337调查历程" }}</div>
				</div>
				<div class="right-main" v-loading="listLoading">
					<div class="timeline-item" v-for="(item, index) in surveyInfoList" :key="index"
						@click="handleToSingleCase(item)">
						<div class="timeline-date">
							<div class="date-text">{{ item.timeZH.slice(0,4) }}</div>
							<div class="date-text">{{ item.timeZH.slice(5) }}</div>
						</div>
						<div class="timeline-line-box">
							<div class="timeline-icon">
								<img v-if="item.sortImageUrl" :src="item.sortImageUrl" alt="" />
								<div v-else class="default-dot"></div>
							</div>
							<div class="timeline-line" v-if="index !== surveyInfoList.length - 1"></div>
						</div>
						<div class="timeline-content-card">
							<div class="card-header">
								<div class="tag-box">
									<div class="tag-337">{{ item.tag }}</div>
									<div class="title">{{ item.title }}</div>
								</div>
								<div class="status" :class="{ 'status-active': true }">
									<span class="dot">•</span> {{ item.status }}
								</div>
							</div>
							<div class="card-body">
								{{ item.content }}
							</div>
							<div class="card-footer">
								<div class="footer-left-tags">
									<AreaTag v-for="(area, idx) in item.areaList" :key="idx" :tagName="area"></AreaTag>
								</div>
								<div class="footer-right-flags">
									<div class="flag-icon" v-for="(flag, fidx) in item.countryList" :key="fidx">
										<img :src="flag" alt="" />
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="right-footer">
					<div class="footer-left">
						{{ `共${totalDiscussNum}项调查` }}
					</div>
					<div class="footer-right">
						<el-pagination @current-change="handleCurrentChange" :pageSize="pageSize" :current-page="currentPage"
							background layout="prev, pager, next" :total="totalDiscussNum" />
					</div>
				</div> -->
				<AnalysisBox title="337调查历程" width="1224px">
				<div class="right-main" v-loading="listLoading">
					<div class="timeline-item" v-for="(item, index) in surveyInfoList" :key="index"
						@click="handleToSingleCase(item)">
						<div class="timeline-date">
							<div class="date-text">{{ item.timeZH.slice(0,4) }}</div>
							<div class="date-text">{{ item.timeZH.slice(5) }}</div>
						</div>
						<div class="timeline-line-box">
							<div class="timeline-icon">
								<img v-if="item.sortImageUrl" :src="item.sortImageUrl" alt="" />
								<div v-else class="default-dot"></div>
							</div>
							<div class="timeline-line" v-if="index !== surveyInfoList.length - 1"></div>
						</div>
						<div class="timeline-content-card">
							<div class="card-header">
								<div class="tag-box">
									<div class="tag-337">{{ item.tag }}</div>
									<div class="title">{{ item.title }}</div>
								</div>
								<div class="status" :class="{ 'status-active': true }">
									<span class="dot">•</span> {{ item.status }}
								</div>
							</div>
							<div class="card-body">
								{{ item.content }}
							</div>
							<div class="card-footer">
								<div class="footer-left-tags">
									<AreaTag v-for="(area, idx) in item.areaList" :key="idx" :tagName="area"></AreaTag>
								</div>
								<div class="footer-right-flags">
									<div class="flag-icon" v-for="(flag, fidx) in item.countryList" :key="fidx">
										<img :src="flag" alt="" />
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="right-footer">
					<div class="footer-left">
						{{ `共${totalDiscussNum}项调查` }}
					</div>
					<div class="footer-right">
						<el-pagination @current-change="handleCurrentChange" :pageSize="pageSize" :current-page="currentPage"
							background layout="prev, pager, next" :total="totalDiscussNum" />
					</div>
				</div>
				</AnalysisBox>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from "vue";
import router from "@/router";
import { useRoute } from "vue-router";
import { Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import { getSearchAllArea, getSearchAllYear, getSurveyList, getSearchAllCountry } from "@/api/marketAccessRestrictions";

import AnalysisBox from "@/components/base/BoxBackground/AnalysisBox.vue"

const route = useRoute();

// 顶部过滤项
const searchText = ref("");
const filterStage = ref("");
const filterParty = ref("");
const filterReason = ref("");
const isSort = ref(false); // false 降序
const releaseTimeList = ref([
	{
		label: "按发布时间倒序",
		value: false
	},
	{
		label: "按发布时间升序",
		value: true
	}
]);



// 科技领域过滤
const surveyAreaList = ref([]);
const checkedAreaList = ref(['全部领域']);

const handleCheckedAreasChange = val => {
	if (val.includes("全部领域") && val.length > 1) {
		if (val[val.length - 1] === "全部领域") {
			checkedAreaList.value = ["全部领域"];
		} else {
			checkedAreaList.value = val.filter(item => item !== "全部领域");
		}
	} else if (val.length === 0) {
		checkedAreaList.value = ["全部领域"];
	}
};

// 发布时间过滤
const surveyYearList = ref([]);
const checkedSurveyYears = ref(['全部时间']);

const isYearExpanded = ref(false);

const displayedYearList = computed(() => {
	if (isYearExpanded.value) return surveyYearList.value;
	return surveyYearList.value.slice(0, 6);
});

const handleCheckedYearsChange = value => {
	// const checkedCount = value.length;
	// checkAllYears.value = checkedCount === surveyYearList.value.length;
	// isIndeterminateYears.value = checkedCount > 0 && checkedCount < surveyYearList.value.length;
	if (val.includes("全部时间") && val.length > 1) {
		if (val[val.length - 1] === "全部时间") {
			checkedSurveyYears.value = ["全部时间"];
		} else {
			checkedSurveyYears.value = val.filter(item => item !== "全部时间");
		}
	} else if (val.length === 0) {
		checkedSurveyYears.value = ["全部时间"];
	}
};

// 受调查国家/地区过滤
const surveyCountryList = ref([]);
const checkedCountryList = ref(['全部']);


const handleCheckedCountriesChange = val => {
	if (val.includes("全部") && val.length > 1) {
		if (val[val.length - 1] === "全部") {
			checkedCountryList.value = ["全部"];
		} else {
			checkedCountryList.value = val.filter(item => item !== "全部");
		}
	} else if (val.length === 0) {
		checkedCountryList.value = ["全部"];
	}
};

// 数据列表
const surveyInfoList = ref([]);
const totalDiscussNum = ref(0);
const pageSize = ref(10);
const currentPage = ref(1);
const isInitializing = ref(true);
const listLoading = ref(false);

const handleFetchSurveyList = async () => {
	listLoading.value = true;
	try {
		const params = {
			currentPage: currentPage.value - 1,
			pageSize: pageSize.value,
			sortCode: "337",
			publishYear: checkedSurveyYears.value[0] === '全部时间' ? null : checkedSurveyYears.value.toString(),
			Area: checkedAreaList.value[0] === '全部领域' ? null : checkedAreaList.value.toString(),
			searchCountry: checkedCountryList.value[0] === '全部' ? null : checkedCountryList.value.toString(),
			caseStatus: filterStage.value ? filterStage.value : null,
			keywords: searchText.value ? searchText.value : null,
			sortField: "date",
			sortOrder: isSort.value ? "asc" : "desc"
		};
		const res = await getSurveyList(params);
		if (res.code === 200 && res.data) {
			surveyInfoList.value = res.data.content.map(item => {
				return {
					time: item.searchdate,
					timeZH: item.searchdatezh,
					title: item.searchname,
					content: item.content,
					status: item.casestatus,
					areaList: item.searchArea || [],
					countryList: item.countryImage || [],
					tag: item.sortcode || "337",
					id: item.searchid,
					sortImageUrl: item.sortimageurl
				};
			});
			totalDiscussNum.value = res.data.totalElements || 0;
		}
	} catch (error) {
		console.error("获取调查列表失败", error);
	} finally {
		listLoading.value = false;
	}
};

const handleCurrentChange = val => {
	currentPage.value = val;
	handleFetchSurveyList();
};

const handleSearch = () => {
	currentPage.value = 1;
	handleFetchSurveyList();
};

const handleToSingleCase = item => {
	const curRoute = router.resolve({
		path: "/marketSingleCaseLayout/overview",
		query: {
			id: "337",
			searchId: item.id + ""
		}
	});
	window.open(curRoute.href, "_blank");
};

// 监听过滤条件
watch(
	[checkedSurveyYears, checkedAreaList, checkedCountryList, isSort, filterStage, filterParty, filterReason],
	() => {
		if (isInitializing.value) return;
		currentPage.value = 1;
		handleFetchSurveyList();
	}
);

const handleGetSearchAllArea = async () => {
	try {
		const res = await getSearchAllArea({ sortCode: "337" });
		if (res.code === 200 && res.data) {
			surveyAreaList.value = res.data.map(item => ({
				name: item.AREANAME,
				id: item.AREACODE
			}));
			handleCheckAllAreasChange(true);
		}
	} catch (error) { }
};

const handleGetSearchAllYear = async () => {
	try {
		const res = await getSearchAllYear({ sortCode: "337" });
		if (res.code === 200 && res.data) {
			const sortedYears = res.data.sort((a, b) => b - a);
			surveyYearList.value = sortedYears.map(item => ({
				name: item + "年",
				id: item
			}));
		}
	} catch (error) { }
};

const handleGetSearchAllCountry = async () => {
	try {
		const res = await getSearchAllCountry();
		if (res.code === 200 && res.data) {
			surveyCountryList.value = res.data.map(item => ({
				name: item.COUNTRYNAME,
				id: item.COUNTRYID
			}));
		}
	} catch (error) { }
};

onMounted(async () => {
	await Promise.all([handleGetSearchAllArea(), handleGetSearchAllYear(), handleGetSearchAllCountry()]);
	isInitializing.value = false;
	handleFetchSurveyList();
});
</script>

<style lang="scss" scoped>
.case-wrapper {
	width: 1600px;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 35px;

	.wrapper-header {
		height: 32px;
		margin-bottom: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.header-filters {
			display: flex;
			gap: 16px;
			align-items: center;

			.search-box {
				:deep(.el-input__wrapper) {
					background-color: #fff;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 4px;
				}
			}

			.dropdown-filters {
				display: flex;
				gap: 12px;

				.filter-select {
					width: 140px;

					:deep(.el-input__wrapper) {
						background-color: #fff;
					}
				}
			}
		}

		.select-box {
			.paixu-btn {
				display: flex;
				align-items: center;
				gap: 8px;
				height: 32px;
				border: 1px solid #e6e7e8;
				border-radius: 4px;
				background: #fff;
				cursor: pointer;
				padding: 0 12px;

				.text {
					font-size: 14px;
					color: #5f656c;
				}

				.icon2 {
					width: 10px;

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

	.wrapper-main {
		display: flex;
		justify-content: space-between;

		.left {
			width: 360px;
			min-height: 560px;
			height: fit-content;
			padding-bottom: 20px;
			border-radius: 10px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: #fff;

			.left-box {
				margin-top: 17px;

				.left-header {
					display: flex;
					align-items: center;

					.icon {
						width: 8px;
						height: 16px;
						background: var(--color-main-active);
						border-radius: 0 2px 2px 0;
					}

					.title {
						margin-left: 17px;
						color: var(--color-main-active);
						font-size: 16px;
						font-weight: 700;
					}
				}
			}

			.checkbox-group {
				padding: 10px 0 0 25px;
				// display: flex;
				// flex-direction: column;

				// .area-grid,
				// .year-grid,
				// .country-grid {
				// 	display: grid;
				// 	grid-template-columns: repeat(2, 1fr);
				// 	gap: 4px;
				// }

				.filter-checkbox {
					margin-bottom: 8px;
					height: 32px;

					:deep(.el-checkbox__label) {
						font-size: 16px;
						color: #5f656c;
					}
				}

				.expand-btn {
					color: var(--color-main-active);
					font-size: 14px;
					cursor: pointer;
					display: flex;
					align-items: center;
					margin-top: 4px;

					.el-icon {
						margin-left: 4px;
					}
				}
			}
		}

		.right {
			width: 1224px;
			// border-radius: 10px;
			// box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			// background: #fff;
			// padding-bottom: 20px;

			.right-header {
				height: 48px;
				display: flex;
				align-items: center;
				// border-bottom: 1px solid #eaeeef;
				padding: 0 20px;

				.icon {
					width: 22px;

					img {
						width: 100%;
					}
				}

				.title {
					margin-left: 12px;
					font-size: 20px;
					font-weight: 700;
					color: var(--color-main-active);
				}
			}

			.right-main {
				padding: 18px 27px 0 24px;
				border-top: 1px solid var(--bg-black-5);
				.timeline-item {
					display: flex;
					cursor: pointer;

					.timeline-date {
						width: 100px;
						text-align: right;
						padding-right: 20px;

						.date-text {
							height: 24px;
							font-size: 16px;
							font-weight: 700;
							color: var(--color-main-active);
							line-height: 24px;
							letter-spacing: 1px;
						}
					}

					.timeline-line-box {
						width: 40px;
						display: flex;
						flex-direction: column;
						align-items: center;
						position: relative;

						.timeline-icon {
							width: 32px;
							height: 32px;
							z-index: 2;
							background: #fff;
							display: flex;
							align-items: center;
							justify-content: center;

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

							.default-dot {
								width: 12px;
								height: 12px;
								border-radius: 50%;
								background: orange;
							}
						}

						.timeline-line {
							width: 2px;
							flex: 1;
							background: #eaeeef;
							margin: 4px 0;
						}
					}

					.timeline-content-card {
						flex: 1;
						border-radius: 8px;
						padding: 0 20px;
						margin-left: 10px;
						margin-bottom: 24px;
						transition: all 0.3s;

						&:hover {
							.card-header>.tag-box>.title {

								color: var(--color-main-active);
								text-decoration: underline;
							}

						}

						.card-header {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-bottom: 12px;



							.tag-box {
								display: flex;
								align-items: center;
								gap: 12px;

								.tag-337 {
									padding: 2px 10px;
									border: 1px solid #91caff;
									background: #e6f4ff;
									color: #055fc2;
									border-radius: 4px;
									font-weight: 700;
									font-size: 16px;
								}

								.title {
									font-size: 18px;
									font-weight: 700;
									color: #3b414b;


								}
							}

							.status {
								font-size: 16px;
								color: #84888e;

								.dot {
									margin-right: 4px;
								}
							}

							.status-active {
								color: var(--color-main-active);
							}
						}

						.card-body {
							font-size: 16px;
							color: #5f656c;
							line-height: 1.6;
							margin-bottom: 16px;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							overflow: hidden;
						}

						.card-footer {
							display: flex;
							gap: 8px;
							align-items: center;

							.footer-left-tags {
								display: flex;
								gap: 8px;

								.area-tag {
									padding: 2px 12px;
									background: #e6f7ff;
									border: 1px solid #91d5ff;
									color: #1890ff;
									border-radius: 4px;
									font-size: 14px;
								}
							}

							.footer-right-flags {
								display: flex;
								gap: 4px;

								.flag-icon {
									width: 24px;
									height: 24px;
									border-radius: 50%;
									overflow: hidden;
									border: 1px solid #eee;

									img {
										width: 100%;
										height: 100%;
										object-fit: cover;
									}
								}
							}
						}
					}
				}
			}

			.right-footer {
				height: 74px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 40px;
				border-top: 1px solid rgba(234, 236, 238, 1);

				.footer-left {
					font-size: 14px;
					color: #5f656c;
				}
			}
		}
	}
}

.filter-checkbox {
	width: 130px;
}
</style>
