<template>
	<div class="case-wrapper">
		<div class="wrapper-header">
			<div class="search-box">
				<el-input v-model="searchText" style="width: 360px; height: 32px" placeholder="搜索调查案件" @keyup.enter="handleSearch" :suffix-icon="Search"></el-input>
			</div>
			<div class="select-box">
				<div class="paixu-btn" @click="handleSwithSort">
					<div class="icon1">
						<img v-if="isSort" src="@/assets/icons/shengxu1.png" alt="" />
						<img v-else src="@/assets/icons/jiangxu1.png" alt="" />
					</div>
					<div class="text">{{ "发布时间" }}</div>
					<div class="icon2">
						<img v-if="isSort" src="@/assets/icons/shengxu2.png" alt="" />
						<img v-else src="@/assets/icons/jiangxu2.png" alt="" />
					</div>
				</div>
			</div>
		</div>
		<div class="wrapper-main">
			<div class="left">
        <!-- 科技领域 -->
				<div class="check-box">
					<div class="check-head">
						<div class="head-name">{{ "科技领域" }}</div>
					</div>
					<el-checkbox-group class="check-list" v-model="checkedAreaList" @change="handleCheckedAreasChange">
						<el-checkbox class="check-item" v-for="item in surveyAreaList" :key="item.id" :label="item.id">
							{{ item.name }}
						</el-checkbox>
					</el-checkbox-group>
				</div>
				<!-- 发布时间 -->
				<div class="check-box">
					<div class="check-head">
						<div class="head-name">{{ "发布时间" }}</div>
					</div>
					<div class="left-main">
						<el-checkbox-group class="check-list" v-model="checkedYearList" @change="handleCheckedYearsChange">
							<el-checkbox class="check-item" v-for="item in surveyYearList" :key="item.id" :label="item.id">
								{{ item.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">{{ "301调查历程" }}</div>
				</div>
				<SurveyHistory v-loading="listLoading" :surveyList="surveyInfoList"></SurveyHistory>
				<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>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { Search } from "@element-plus/icons-vue";
import { getSearchAllArea, getSearchAllYear, getSurveyList } from "@/api/marketAccessRestrictions";
import SurveyHistory from "@/views/marketAccessRestrictions/com/SurveyHistory.vue"

const isSort = ref(true); // true 升序  false 倒序
const handleSwithSort = () => {
	isSort.value = !isSort.value;
};

// 科技领域过滤
const surveyAreaList = ref([]);
const checkedAreaList = ref(['']);
const handleGetSearchAllArea = async () => {
	try {
		const res = await getSearchAllArea({ sortCode: "301" });
		if (res.code === 200) {
			surveyAreaList.value = res.data.map(item => ({ name: item.AREANAME, id: item.AREACODE }));
		}
	} catch (error) {}
	surveyAreaList.value.unshift({ name: "全部领域", id: "" });
};
const handleCheckedAreasChange = event => {
	if (event.length && event[event.length-1] !== "") {
		checkedAreaList.value = event.filter(item => item !== "");
	} else {
		checkedAreaList.value = [""];
	}
	currentPage.value = 1;
	handleFetchSurveyList();
};

// 发布时间过滤
const surveyYearList = ref([]);
const checkedYearList = ref(['']);
const handleGetSearchAllYear = async () => {
	try {
		const res = await getSearchAllYear({ sortCode: "301" });
		if (res.code === 200) {
			let allYear = res.data.sort((a, b) => (b-a));
			let beforeYear = allYear.slice(6).join(',');
			surveyYearList.value = allYear.slice(0, 6).map(item => ({ name: item + "年", id: item }));
			if (beforeYear) surveyYearList.value.push({ name: "更早", id: beforeYear });
		}
	} catch (error) {}
	surveyYearList.value.unshift({ name: "全部时间", id: "" });
};
const handleCheckedYearsChange = event => {
	if (event.length && event[event.length-1] !== "") {
		checkedYearList.value = event.filter(item => item !== "");
	} else {
		checkedYearList.value = [""];
	}
	currentPage.value = 1;
	handleFetchSurveyList();
};

const totalDiscussNum = ref(0);
const pageSize = ref(10);
const currentPage = ref(1);
const isInitializing = ref(true);
const listLoading = ref(false);

const surveyInfoList = ref([]);

const handleFetchSurveyList = async () => {
	listLoading.value = true;
	try {
		const params = {
			currentPage: currentPage.value - 1,
			pageSize: pageSize.value,
			sortCode: "301",
			publishYear: checkedYearList.value.join(',') || null,
			Area: checkedAreaList.value.join(',') || null,
			// keywords: searchText.value,
			sortField: "date",
			sortOrder: isSort.value ? "asc" : "desc"
		};
		const res = await getSurveyList(params);
		if (res.code === 200 && res.data) {
			surveyInfoList.value = res.data.content;
			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();
};

watch([isSort], () => {
	if (isInitializing.value) return;
	currentPage.value = 1;
	handleFetchSurveyList();
});

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

<style lang="scss" scoped>
.case-wrapper {
	width: 1600px;
	margin: 0 auto;
	padding: 20px 0;
	
	.wrapper-header {
		width: 100%;
		height: 32px;
		display: flex;
		margin-bottom: 16px;
		justify-content: space-between;
		.search-box {
			background-color: #fff;
			border: 1px solid rgba(234, 236, 238, 1);
			border-radius: 4px;
		}
		.select-box {
			height: 32px;
			box-sizing: border-box;
			.paixu-btn {
				display: flex;
				width: 120px;
				height: 32px;
				box-sizing: border-box;
				border: 1px solid rgba(230, 231, 232, 1);
				border-radius: 4px;
				background: rgba(255, 255, 255, 1);
				&:hover {
					background: var(--color-bg-hover);
				}
				cursor: pointer;
				.icon1 {
					width: 11px;
					height: 14px;
					margin-top: 10px;
					margin-left: 9px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.text {
					height: 19px;
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 18px;
					letter-spacing: 0px;
					text-align: left;
					margin-top: 7px;
					margin-left: 9px;
				}
				.icon2 {
					width: 10px;
					height: 5px;
					margin-top: 5px;
					margin-left: 13px;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	
	.wrapper-main {
		display: flex;
		gap: 16px;
		
		.left {
			width: 360px;
			min-height: 300px;
			height: fit-content;
			padding-bottom: 20px;
			border-radius: 10px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: #fff;

			.check-box {
				margin-top: 18px;
				.check-head {
					position: relative;
					margin-bottom: 12px;
					&::before {
						content: "";
						position: absolute;
						top: 0px;
						left: 0px;
						width: 8px;
						height: 100%;
						background: var(--color-primary-100);
						border-radius: 0 2px 2px 0;
					}
					.head-name {
						margin-left: 25px;
						color: var(--color-primary-100);
						font-size: 16px;
						line-height: 16px;
						font-family: Source Han Sans CN;
						font-weight: bold;
					}
				}
				.check-list {
					padding: 0 10px 0 25px;
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					grid-gap: 0 12px;
					.check-item {
						width: 100%;
						height: 32px;
						:deep(.el-checkbox__label) {
							font-family: Source Han Sans CN;
							font-size: 16px;
							color: var(--text-primary-65-color);
						}
					}
				}
			}
		}

		.right {
			width: 20px;
			flex: auto;
			min-height: 700px;
			border-radius: 10px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			overflow: hidden;
			.right-header {
				height: 48px;
				display: flex;
				align-items: center;
				.icon {
					width: 22px;
					height: 18px;
					margin-left: 19px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.title {
					height: 26px;
					margin-left: 19px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-style: Bold;
					font-size: 20px;
					font-weight: 700;
					line-height: 26px;
					letter-spacing: 0px;
					text-align: left;
				}
			}
			.right-footer {
				box-sizing: border-box;
				padding-top: 15px;
				height: 60px;
				display: flex;
				justify-content: space-between;
				.footer-left {
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 18px;
					margin-left: 24px;
					margin-top: 6px;
				}
				.footer-right {
					margin-right: 24px;
				}
			}
		}
	}
}
</style>