<template>
	<div class="case-wrapper">
		<div class="wrapper-header">
			<div class="search-box">
				<el-input
					v-model="searchText"
					style="width: 300px; height: 32px"
					placeholder="搜索调查案件"
					@keyup.enter="handleSearch"
				>
					<template #append
						><el-button @click="handleSearch"
							><el-icon><Search color="#84888E" /></el-icon></el-button
					></template>
				</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="left-box1">
					<div class="left-box1-header">
						<div class="icon"></div>
						<div class="title">{{ "发布时间" }}</div>
					</div>
					<div class="left-box1-main">
						<div class="checkbox-group">
							<el-checkbox
								v-for="year in surveyYearList"
								:key="year.id"
								v-model="checkedSurveyYears"
								:label="year.id"
								class="filter-checkbox"
								@change="handleChangeCheckedSurveyYears"
							>
								{{ year.name }}
							</el-checkbox>
						</div>
					</div>
				</div>
				<div class="left-box2">
					<div class="left-box2-header">
						<div class="icon"></div>
						<div class="title">{{ "科技领域" }}</div>
					</div>
					<div class="left-box2-main">
						<div class="checkbox-group">
							<el-checkbox
								v-for="area in surveyAreaList"
								:key="area.id"
								v-model="checkedAreaList"
								:label="area.id"
								class="filter-checkbox"
								@change="handleChangeCheckedAreas"
							>
								{{ area.name }}
							</el-checkbox>
						</div>
					</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>
				<div class="right-main">
					<div class="item" v-for="(item, index) in surveyInfoList" :key="index" @click="handleToSingleCase(item)">
						<div class="item-left">{{ "2025年11月12日" }}</div>
						<div class="item-center">
							<div class="icon">
								<!-- <img :src="item.img" alt="" /> -->
							</div>
							<div class="line" v-if="index !== surveyInfoList.length - 1"></div>
						</div>
						<div class="item-right">
							<div class="item-right-header">
								<div class="tag tag1">{{ "337" }}</div>
								<div class="title">{{ item.title }}</div>
								<div class="status">
									<div class="status-icon"></div>
									<div class="status-text">{{ item.status }}</div>
								</div>
							</div>
							<div class="item-right-content">
								{{ item.content }}
							</div>
							<div class="item-right-footer">
								<div class="area-box" v-for="(val, idx) in item.areaList" :key="idx">
									<div class="area">{{ val }}</div>
								</div>
								<div class="flag-box">
									<div class="flag" v-for="(vall, idxx) in item.countryList" :key="idxx">
										<!-- <img src="" 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>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import router from "@/router";
import { useRoute } from "vue-router";
const route = useRoute();

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

const allYear = {
	name: "全部时间",
	selected: true
};

const surveyYearList = ref([
	{
		name: "2025年",
		id: "2025"
	},
	{
		name: "2024年",
		id: "2024"
	},
	{
		name: "2023年",
		id: "2023"
	},
	{
		name: "2022年",
		id: "2022"
	},
	{
		name: "2021年",
		id: "2021"
	}
]);

const checkedSurveyYears = ref(["2025"]);

const surveyAreaList = ref([
	{
		name: "人工智能",
		id: "人工智能"
	},
	{
		name: "半导体/芯片",
		id: "半导体/芯片"
	},
	{
		name: "电子设备",
		id: "电子设备"
	},
	{
		name: "显示技术",
		id: "显示技术"
	}
]);

const checkedAreaList = ref(['人工智能'])

const surveyInfoList = ref([
	{
		time: "2025 11月12日",
		survey: "337",
		title: "外国制造的半导体器件及其下游产品和组件",
		content:
			"美国国际贸易委员会（ITC）投票决定对特定半导体器件及其下游计算产品和组件（Certain Semiconductor Devices, Computing Products Containing the Same,and Components Thereof）启动337调查。",
		status: "部分终裁",
		areaList: ["集成电路"],
		countryList: ["a", "b"]
	},
	{
		time: "202511月12日",
		survey: "337",
		title: "外国制造的半导体器件及其下游产品和组件",
		content:
			"美国国际贸易委员会（ITC）投票决定对特定半导体器件及其下游计算产品和组件（Certain Semiconductor Devices, Computing Products Containing the Same,and Components Thereof）启动337调查。",
		status: "部分终裁",
		areaList: ["集成电路"]
	}
]);

const totalDiscussNum = ref(0);

const curSurveyInfoList = ref([]);

const searchText = ref("");

const handleSearch = () => {
	curSurveyInfoList.value = surveyInfoList.value.filter(item => {
		return item.title.indexOf(searchText.value) > -1;
	});
};

watch(
	() => surveyYearList.value,
	val => {
		const selectedArr = val
			.filter(item => {
				return item.selected;
			})
			.map(item => item.name);
		let arr = [];

		selectedArr.forEach(item => {
			let arr1 = surveyInfoList.value.filter(vall => {
				return vall.releaseDate.indexOf(item) > -1;
			});
			arr = [...arr, ...arr1];
		});

		curSurveyInfoList.value = arr;
	},
	{
		deep: true
	}
);

watch(
	() => surveyAreaList.value,
	val => {
		const selectedArr = val
			.filter(item => {
				return item.selected;
			})
			.map(item => item.name);
		let arr = [];

		selectedArr.forEach(item => {
			let arr1 = surveyInfoList.value.filter(vall => {
				return vall.area.indexOf(item) > -1 || item.indexOf(vall.area) > -1;
			});
			arr = [...arr, ...arr1];
		});

		curSurveyInfoList.value = arr;
	},
	{
		deep: true
	}
);

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

onMounted(() => {
	curSurveyInfoList.value = surveyInfoList.value;
});
</script>

<style lang="scss" scoped>
.case-wrapper {
	// width: 100%;
	// height: 100%;
	overflow: hidden;
	.wrapper-header {
		width: 1600px;
		height: 32px;
		margin: 16px auto;
		display: flex;
		justify-content: space-between;
		.search-box {
			width: 300px;
			display: flex;
		}
		.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 {
		width: 1600px;
		// height: 900px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		.left {
			width: 360px;
			height: 560px;
			border-radius: 10px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			.left-box1 {
				margin-top: 17px;
				// height: 260px;
				.left-box1-header {
					display: flex;
					.icon {
						width: 8px;
						height: 16px;
						margin-top: 4px;
						border-radius: 2px 2px 0 0;
						background: var(--color-main-active);
					}
					.title {
						height: 2px;
						margin-left: 17px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
					}
				}
				.left-box1-main {
					// margin-top: 10px;
				}
			}
			.left-box2 {
				margin-top: 17px;
				// height: 260px;
				.left-box2-header {
					display: flex;
					.icon {
						width: 8px;
						height: 16px;
						margin-top: 4px;
						border-radius: 2px 2px 0 0;
						background: var(--color-main-active);
					}
					.title {
						height: 2px;
						margin-left: 17px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
					}
				}
				.left-box2-main {
					// margin-top: 10px;
			
				}
			}
		}
		.right {
			margin-left: 16px;
			width: 1224px;
			min-height: 700px;
			height: 770px;
			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;
				border-bottom: 1px solid rgba(234, 236, 238, 1);
				.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-main {
				padding-top: 6px;
				height: 660px;
				border-bottom: 1px solid rgba(230, 231, 232, 1);
				.item {
					height: 154px;
					display: flex;
					cursor: pointer;
					&:hover {
						background: var(--color-bg-hover) !important;
					}
					.item-left {
						width: 100px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-style: Bold;
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 1px;
						text-align: right;
						padding-right: 16px;
					}
					.item-center {
						width: 30px;
						height: 154px;
						.icon {
							width: 30px;
							height: 30px;
							border-radius: 15px;
							background: orange;
						}
						.line {
							margin-left: 14px;
							width: 2px;
							height: 124px;
							border-radius: 1.5px;
							background: rgba(234, 236, 238, 1);
						}
					}
					.item-right {
						padding-left: 20px;
						.item-right-header {
							height: 26px;
							display: flex;
							align-items: center;
							.tag {
								width: 48px;
								height: 24px;
								padding: 0 8px;
								box-sizing: border-box;
								font-family: Microsoft YaHei;
								font-style: Bold;
								font-size: 16px;
								font-weight: 700;
								line-height: 24px;
								letter-spacing: 1px;
								text-align: left;
								border-radius: 4px;
							}
							.tag1 {
								border: 1px solid rgba(145, 202, 255, 1);
								background: rgba(230, 244, 255, 1);
								color: rgba(5, 95, 194, 1);
							}
							.tag2 {
								border: 1px solid rgba(255, 213, 145, 1);
								background: rgba(255, 247, 230, 1);
								color: rgba(250, 140, 22, 1);
							}
							.tag3 {
								border: 1px solid rgba(211, 173, 247, 1);
								background: rgba(249, 240, 255, 1);
								color: rgba(114, 46, 209, 1);
							}
							.title {
								margin-left: 9px;
								width: 880px;
								height: 26px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-style: Bold;
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
								letter-spacing: 0px;
								text-align: left;
							}
							.status {
								margin-left: 9px;
								display: flex;
								width: 76px;
								height: 24px;
								justify-content: space-between;
								align-items: center;
								.status-icon {
									width: 4px;
									height: 4px;
									border-radius: 2px;
									background: var(--color-main-active);
								}
								.status-text {
									color: var(--color-main-active);
									font-family: Microsoft YaHei;
									font-style: Regular;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
									letter-spacing: 0px;
									text-align: right;
								}
							}
						}
						.item-right-content {
							margin-top: 9px;
							width: 1022px;
							height: 60px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-style: Regular;
							font-size: 16px;
							font-weight: 400;
							line-height: 30px;
							letter-spacing: 0px;
							text-align: justify;
						}
						.item-right-footer {
							margin-top: 9px;
							display: flex;
							gap: 8px;
							.area-box {
								display: flex;
								.area {
									height: 24px;
									padding: 0 8px;
									border-radius: 4px;
									background: rgba(231, 243, 255, 1);
									color: var(--color-main-active);
									font-family: Microsoft YaHei;
									font-style: Regular;
									font-size: 14px;
									font-weight: 400;
									line-height: 24px;
									letter-spacing: 0px;
									text-align: left;
								}
							}
							.flag-box {
								display: flex;
								.flag {
									width: 24px;
									height: 24px;
									border-radius: 12px;
									background: orange;
								}
							}
						}
					}
				}
			}
			.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;
				}
			}
		}
	}
}
.checkbox-group{
  padding-top: 10px;
  margin-left: 16px;
}
.filter-checkbox {
  width: 140px;
  // background: orange;
}
</style>