<template>
	<div class="home-wrapper">
		<div class="search-header" v-show="isShow">
			<div class="home-main-header-center">
				<el-input v-model="searchExportControlText" style="width: 800px; height: 100%" placeholder="搜索出口管制" />
				<div class="search">
					<div class="search-icon">
						<img src="@/assets/icons/search-icon.png" alt="" />
					</div>
					<div class="search-text" @click="handleSearch">搜索</div>
				</div>
			</div>
			<div class="home-main-header-btn-box">
				<div class="btn" @click="handleToPosi('position1')">
					<div class="btn-text">{{ "最新动态" }}</div>
					<div class="btn-icon">
						<img src="@/assets/icons/arrow-right-icon.png" alt="" />
					</div>
				</div>
				<div class="btn" @click="handleToPosi('position2')">
					<div class="btn-text">{{ "资讯要闻" }}</div>
					<div class="btn-icon">
						<img src="@/assets/icons/arrow-right-icon.png" alt="" />
					</div>
				</div>
				<div class="btn" @click="handleToPosi('position3')">
					<div class="btn-text">{{ "数据总览" }}</div>
					<div class="btn-icon">
						<img src="@/assets/icons/arrow-right-icon.png" alt="" />
					</div>
				</div>
				<div class="btn" @click="handleToPosi('position4')">
					<div class="btn-text">{{ "资源库" }}</div>
					<div class="btn-icon">
						<img src="@/assets/icons/arrow-right-icon.png" alt="" />
					</div>
				</div>
			</div>
		</div>
		<div class="home-header" v-show="!isShow">
			<div class="header-left">
				<HeaderMenu></HeaderMenu>
			</div>
			<div class="header-right">
				<headerInfo curTitleName="出口管制"></headerInfo>
			</div>
		</div>
		<div class="home-main" ref="homeMainRef" :class="{ 'scroll-main': isShow }">
			<div class="home-main-header">
				<div class="home-main-header-center" v-show="!isShow">
					<el-input v-model="searchExportControlText" style="width: 800px; height: 100%" placeholder="搜索出口管制" />
					<div class="search">
						<div class="search-icon">
							<img src="@/assets/icons/search-icon.png" alt="" />
						</div>
						<div class="search-text" @click="handleSearch">搜索</div>
					</div>
				</div>
				<div class="home-main-header-btn-box" v-show="!isShow">
					<div class="btn" @click="handleToPosi('position1')">
						<div class="btn-text">{{ "最新动态" }}</div>
						<div class="btn-icon">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</div>
					</div>
					<div class="btn" @click="handleToPosi('position2')">
						<div class="btn-text">{{ "资讯要闻" }}</div>
						<div class="btn-icon">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</div>
					</div>
					<div class="btn" @click="handleToPosi('position3')">
						<div class="btn-text">{{ "数据总览" }}</div>
						<div class="btn-icon">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</div>
					</div>
					<div class="btn" @click="handleToPosi('position4')">
						<div class="btn-text">{{ "资源库" }}</div>
						<div class="btn-icon">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</div>
					</div>
				</div>
				<div class="home-main-header-footer-info">
					<InfoCard
						v-for="(item, index) in infoList"
						:key="item.id"
						:title="item.nameZh"
						:subtitle="item.nameAbbr"
						:description="item.description"
						:quantity="item.postCount"
						unit="次"
						:color="infoListColor[index]"
						@click="handleToEntityListNoId(item)"
					/>
				</div>
			</div>

			<el-row :gutter="20" style="width: 1600px; margin: 0 auto">
				<CustomTitle id="position1" title="最新动态" style="margin-top: 10px" />
				<el-col :span="16">
					<custom-container titleType="primary" title="最新出口管制政策" :titleIcon="houseIcon" height="450px">
						<template #header-right>
							<el-button type="primary" @click="handleToEntityList()" link>
								{{ "查看详情 >" }}
							</el-button>
						</template>

						<template #default>
							<div class="box1">
								<div class="box1-left-arrow" @click="handleSwithCurPolicy('left')">
									<div class="icon">
										<img src="./assets/images/box1-left.png" alt="" />
									</div>
								</div>
								<div class="box1-right-arrow" @click="handleSwithCurPolicy('right')">
									<div class="icon">
										<img src="./assets/images/box1-right.png" alt="" />
									</div>
								</div>
								<el-carousel
									ref="carouselRef"
									height="350px"
									:autoplay="true"
									:interval="3000"
									arrow="never"
									indicator-position="none"
									@change="handleCarouselChange"
								>
									<el-carousel-item v-for="(item, index) in entitiesDataInfoList" :key="item.id + index">
										<div>
											<div class="box1-top">
												<div class="box1-top-title">
													{{ item.postDate }}——BIS《实体清单增列与修订条目》
												</div>
												<div class="box1-top-content">
													<div class="box1-top-content-item">
														<span class="box1-top-content-item-title">· 发布机构：</span>
														<span class="box1-top-content-item-content">{{ item.postOrgName }}</span>
													</div>
													<div class="box1-top-content-item">
														<span class="box1-top-content-item-title">· 生效日期：</span>
														<span class="box1-top-content-item-content">{{ item.postDate }}</span>
													</div>
													<div class="box1-top-content-item">
														<span class="box1-top-content-item-title">· 涉及领域：</span>
														<div
															class="box1-top-content-item-tags"
															v-for="(domainItem, index) in item.domains"
															:key="index"
														>
															<el-tag :type="getTagType(domainItem)">{{ domainItem }}</el-tag>
														</div>
													</div>
												</div>
											</div>
											<div class="box1-bottom">
												<div class="box1-bottom-title">· 涉及主要实体：</div>
												<div class="box1-bottom-content">
													<div
														class="box1-bottom-content-item"
														v-for="(ett, index) in item.sanEntities"
														:key="index"
														@click="handleEntityClick(ett)"
													>
														<el-image
															v-if="ett.img"
															class="box1-bottom-content-item-img"
															:src="ett.img"
															alt=""
														></el-image>
														<div v-else class="box1-bottom-content-item-imgUndefined">
															{{
																(ett.entityNameZh || ett.enName)?.match(
																	/[\u4e00-\u9fa5a-zA-Z0-9]/
																)?.[0]
															}}
														</div>
														<div class="box1-bottom-content-item-txt">
															{{ ett.name || ett.entityNameZh }}
														</div>
													</div>
												</div>
											</div>
											<div class="box1-absolute">
												<div class="box1-absolute-des">
													<el-icon>
														<Warning color="rgba(206, 79, 81, 1)" />
													</el-icon>
													<span>新增中国实体</span>
												</div>
												<div class="box1-absolute-num">{{ item.cnEntityCount }}家</div>
											</div>
										</div>
									</el-carousel-item>
								</el-carousel>
							</div>
						</template>
					</custom-container>
				</el-col>
				<el-col :span="8">
					<custom-container
						titleType="danger"
						title="风险信号"
						:headerNum="warningList.length"
						:titleIcon="dangerIcon"
						height="450px"
					>
						<template #default>
							<div class="box2-main">
								<div
									class="box2-main-item"
									v-for="(item, index) in warningList"
									:key="index"
									@click="handleToRiskSignalDetail(item)"
								>
									<div
										class="item-left"
										:class="{
											itemLeftStatus1: item.status === '一般风险',
											itemLeftStatus2: item.status === '重大风险'
										}"
									>
										{{ item.status }}
									</div>
									<div class="item-right">
										<div class="text">
											<CommonPrompt :content="item.title">
												{{ item.title }}
											</CommonPrompt>
										</div>
										<div class="time">{{ item.time }}</div>
									</div>
								</div>
								<div class="box2-footer" @click="handleToMoreRiskSignal">
									<div class="icon">
										<img src="./assets/images/box2-footer-icon.png" alt="" />
									</div>
									<div class="text">{{ "查看更多" }}</div>
								</div>
							</div>
						</template>
					</custom-container>
				</el-col>
			</el-row>

			<el-row :gutter="20" style="width: 1600px; margin: 0 auto">
				<CustomTitle id="position2" title="资讯要闻" style="margin-top: 10px" />
				<el-col :span="12">
					<custom-container title="新闻资讯" :titleIcon="newsIcon" height="450px">
						<template #header-right>
							<el-button type="primary" link @click="handleToMoreNews">
								{{ "更多 +" }}
							</el-button>
						</template>

						<template #default>
							<div class="news-list">
								<NewsList :list-data="newsList" @item-click="item => handleNewsInfoClick(item)" />
							</div>
						</template>
					</custom-container>
				</el-col>
				<el-col :span="12">
					<custom-container title="社交媒体" :titleIcon="dialogIcon" height="450px">
						<template #default>
							<div class="dialog-list">
								<MessageBubble
									v-for="(item, index) in socialMediaList"
									@click="handlePerClick(item)"
									@info-click="handleMediaClick(item)"
									:key="index"
									:avatar="item.avatar"
									:name="item.name"
									:time="item.time"
									:source="item.source"
									:content="item.content"
								/>
							</div>
						</template>
					</custom-container>
				</el-col>
			</el-row>

			<el-row :gutter="20" style="width: 1600px; margin: 0 auto">
				<CustomTitle id="position3" title="数据总览" style="margin-top: 10px" />
				<el-col :span="24">
					<custom-container title="发布频度" :titleIcon="box3Icon" height="450px">
						<template #default>
							<div class="box3">
								<div class="box3-content">
									<div class="box3-content-title">实体清单发布频度</div>
									<el-table :data="tableData1" stripe style="width: 100%">
										<el-table-column prop="year" label="年份" width="150" />
										<el-table-column label="发布次数" width="200">
											<template #default="scope">
												<div style="display: flex; align-items: center">
													<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
													<el-progress
														:percentage="scope.row.percent * 100"
														:show-text="false"
														:status="getStatus(scope.row.percent)"
													/>
												</div>
											</template>
										</el-table-column>
										<el-table-column label="重点领域" width="280" align="center">
											<template #default="scope">
												<div
													style="display: flex; justify-content: center; align-items: center; gap: 5px"
												>
													<el-tag v-for="tag in scope.row.tags" :key="tag" :type="getTagType(tag)">{{
														tag
													}}</el-tag>
												</div>
											</template>
										</el-table-column>
									</el-table>
								</div>
								<div class="box3-content">
									<div class="box3-content-title">商业管制清单(CCL)更新频度</div>
									<el-table :data="tableData2" stripe style="width: 100%">
										<el-table-column prop="year" label="年份" width="150" />
										<el-table-column label="发布次数" width="200">
											<template #default="scope">
												<div style="display: flex; align-items: center">
													<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
													<el-progress
														:percentage="scope.row.percent * 100"
														:show-text="false"
														:status="getStatus(scope.row.percent)"
													/>
												</div>
											</template>
										</el-table-column>
										<el-table-column label="重点领域" width="280" align="center">
											<template #default="scope">
												<div
													style="display: flex; justify-content: center; align-items: center; gap: 5px"
												>
													<el-tag v-for="tag in scope.row.tags" :key="tag" :type="getTagType(tag)">{{
														tag
													}}</el-tag>
												</div>
											</template>
										</el-table-column>
									</el-table>
								</div>
								<div class="box3-content" style="display: none">
									<div class="box3-content-title">关键与新兴技术清单(CETs)</div>
									<el-table :data="tableData1" stripe style="width: 100%">
										<el-table-column prop="year" label="年份" width="100" />
										<el-table-column label="发布次数" width="180">
											<template #default="scope">
												<div style="display: flex; align-items: center">
													<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
													<el-progress
														:percentage="scope.row.percent * 100"
														:show-text="false"
														:status="getStatus(scope.row.percent)"
													/>
												</div>
											</template>
										</el-table-column>
										<el-table-column label="重点领域" width="180">
											<template #default="scope">
												<div style="display: flex; align-items: center; gap: 5px">
													<el-tag v-for="tag in scope.row.tags" :key="tag" :type="getTagType(tag)">{{
														tag
													}}</el-tag>
												</div>
											</template>
										</el-table-column>
									</el-table>
								</div>
							</div>
						</template>
					</custom-container>
				</el-col>
			</el-row>

			<el-row :gutter="20" style="width: 1600px; margin: 0 auto">
				<el-col :span="8">
					<custom-container title="制裁领域分布" :titleIcon="radarIcon" height="480px">
						<template #header-right>
							<el-checkbox v-model="domainChecked" label="50%规则" size="large" />
						</template>
						<template #default>
							<EChart :option="radarOption" autoresize :style="{ height: '450px' }" />
						</template>
					</custom-container>
				</el-col>
				<el-col :span="16">
					<custom-container title="制裁清单数量增长趋势" :titleIcon="qushiIcon" height="480px">
						<template #header-right>
							<div style="display: flex; align-items: center; gap: 16px">
								<el-checkbox v-model="trendChecked" label="50%规则" size="large" />
								<el-select v-model="selectedEntityId" placeholder="请选择清单类型" style="width: 160px">
									<el-option
										v-for="item in infoList"
										:key="item.id"
										:label="item.nameZh"
										:value="item.id"
									/>
								</el-select>
							</div>
						</template>
						<template #default>
							<EChart :option="trendOption" autoresize :style="{ height: '400px' }" />
						</template>
					</custom-container>
				</el-col>
			</el-row>

			<el-row :gutter="20" style="width: 1600px; margin: 0 auto">
				<CustomTitle id="position4" title="资源库" style="margin-top: 0px" />
				<div class="resource-tabs">
					<div
						v-for="tab in resourceTabs"
						:key="tab.value"
						class="resource-tab-item"
						:class="{ active: activeResourceTab === tab.value, disabled: tab.disabled }"
						@click="handleResourceTabClick(tab)"
					>
						{{ tab.label }}
					</div>
				</div>
				<template v-if="activeResourceTab === 'entity'">
					<el-col :span="8">
						<custom-container title="历次制裁过程" :titleIcon="listIcon" height="845px">
							<template #default>
								<div class="box4">
									<div style="height: 90%; overflow-y: auto; padding-top: 10px">
										<div class="box4-item" v-for="(item, idx) in sanctionProcessList" :key="item.title">
											<div class="box4-item-left">
												<el-image :src="dotIcon" alt="图片" class="box4-item-left-icon" />
												<div
													class="box4-item-left-line"
													v-if="idx + 1 != sanctionProcessList.length"
												></div>
											</div>
											<div class="box4-item-right">
												<div class="box4-item-right-header" @click="handleSanc(item)">
													<span class="box4-item-right-header-title"
														>{{ item.postDate }}—{{ item.title }}</span
													>
													<span class="box4-item-right-header-desc">{{ item.desc }}</span>
												</div>
												<el-tooltip
													effect="dark"
													:content="item.content"
													popper-class="common-prompt-popper"
													placement="top"
													:show-after="500"
												>
													<div class="box4-item-right-content">
														{{ item.content }}
													</div>
												</el-tooltip>
											</div>
										</div>
									</div>
									<div
										class="box4-footer"
										:style="{ marginTop: sanctionProcessList.length > 0 ? '0px' : 'auto' }"
									>
										<el-button type="primary" link @click="handleGetMore"
											>查看更多
											<el-icon>
												<DArrowRight />
											</el-icon>
										</el-button>
									</div>
								</div>
							</template>
						</custom-container>
					</el-col>
					<el-col :span="16">
						<custom-container title="制裁实体清单" :titleIcon="entityIcon" height="845px">
							<template #header-right>
								<div class="box5-header-right">共{{ total }}家实体</div>
							</template>
							<template #default>
								<div class="box5">
									<el-table
										:data="entitiesList"
										class="sanction-table"
										stripe
										empty-text="暂无数据"
										height="700px"
										header-row-class-name="table-header"
										row-class-name="table-row"
									>
										<!-- <el-table-column prop="index" label="序号" width="80" align="center">
										<template #default="scope">
											{{ scope.$index + 1 + (currentPage - 1) * pageSize }}
										</template>
			</el-table-column> -->

										<el-table-column prop="name" label="实体名称" min-width="200">
											<template #default="scope">
												<div class="tableName" @click="handleCompClick(scope.row)">
													<el-image
														v-if="scope.row.img"
														class="box1-bottom-content-item-img"
														:src="scope.row.img"
														alt=""
													></el-image>
													<div v-else class="box1-bottom-content-item-imgUndefined">
														{{
															(scope.row.name || scope.row.enName)?.match(
																/[\u4e00-\u9fa5a-zA-Z0-9]/
															)?.[0]
														}}
													</div>
													<CommonPrompt :content="scope.row.name" style="flex: 1; overflow: hidden" />
												</div>
											</template>
										</el-table-column>

										<el-table-column prop="domains" label="涉及领域" min-width="150">
											<template #default="scope">
												<div class="domain-tags">
													<el-tag v-for="tag in scope.row.domains" :key="tag" :type="getTagType(tag)">{{
														tag
													}}</el-tag>
												</div>
											</template>
										</el-table-column>

										<el-table-column prop="sanctionDate" label="制裁时间" width="120" align="center">
											<template #default="scope">
												{{ scope.row.sanctionDate }}
											</template>
										</el-table-column>

										<!-- <el-table-column prop="strength" label="制裁强度" width="120" align="center">
										<template #default="scope">
											<div class="sanction-strength">
												<div :class="['strength-bar', `strength-${scope.row.strength}`]"></div>
												<span>{{ strengthLabels[scope.row.strength] }}</span>
											</div>
										</template>
									</el-table-column> -->

										<!-- <el-table-column prop="revenue" label="营收（亿元）" width="140" align="right">
										<template #default="scope">
											<span
												:class="['revenue-cell', scope.row.revenue === '无营收数据' ? 'no-revenue' : '']"
											>
												{{ scope.row.revenue }}
											</span>
										</template>
									</el-table-column> -->

										<el-table-column prop="revenue" label="50%规则子企业" width="280" align="right">
											<template #default="scope">
												<div class="num-item" v-if="scope.row.ruleOrgCount > 0">
													<div
														class="name-item"
														:class="[
															'revenue-cell',
															scope.row.revenue === '无营收数据' ? 'no-revenue' : ''
														]"
													>
														{{ scope.row.ruleOrgList[0].orgName }}...等
													</div>
													<div
														style="width: 50px; color: #409eff; cursor: pointer"
														@click="handleOrgClick(scope.row)"
													>
														{{ scope.row.ruleOrgCount }}家>
													</div>
												</div>
											</template>
										</el-table-column>
									</el-table>

									<div class="table-footer">
										<!-- <div class="pagination-info">
                    第{{ currentPage }}页，共{{ totalPages }}页
                  </div> -->
										<el-pagination
											v-model:current-page="currentPage"
											:page-size="pageSize"
											:total="total"
											:pager-count="5"
											layout="prev, pager, next"
											background
											@current-change="handlePageChange"
										/>
									</div>
								</div>
							</template>
						</custom-container>
					</el-col>
				</template>
				<template v-if="activeResourceTab === 'all'">
					<el-col :span="24">
						<!-- <div style="min-height: 500px; display: flex; justify-content: center; align-items: center; background: #fff; border-radius: 4px;">
						暂无内容
					</div> -->
						<div class="all-content">
							<div class="left">
								<div class="title">
									<div class="box"></div>
									<div class="text">科技领域</div>
								</div>
								<div class="left-main">
									<el-checkbox-group v-model="checkedTech">
										<div class="checkbox-grid">
											<el-checkbox v-for="item in techOptions" :key="item.value" :label="item.value">{{
												item.label
											}}</el-checkbox>
										</div>
									</el-checkbox-group>
								</div>
								<div class="title">
									<div class="box"></div>
									<div class="text">制裁时间</div>
								</div>
								<div class="left-main">
									<el-checkbox-group v-model="checkedTime">
										<div class="checkbox-grid">
											<el-checkbox v-for="item in timeOptions" :key="item" :label="item">{{
												item
											}}</el-checkbox>
										</div>
									</el-checkbox-group>
								</div>
							</div>
							<div class="right">
								<div class="right-title">
									<img :src="icon01" alt="" />
									<div>出口管制制裁措施</div>
								</div>
								<div class="right-main">
									<div class="sanction-list" v-for="item in sanctionList" :key="item.id">
										<div class="time">
											<div class="year">{{ item.year }}</div>
											<div class="date">{{ item.dateStr }}</div>
										</div>
										<img :src="item.orgLogoUrl || comTitle" alt="" />
										<div class="main">
											<div class="main-title" @click="handleTitleClick(item)">{{ item.title }}</div>
											<div class="main-desc">{{ item.desc }}</div>
											<div class="tag-box">
												<div v-for="tag in item.tags" :key="tag" class="tag-item">{{ tag }}</div>
											</div>

											<div :class="{ 'count-tag': item.countTag }">{{ item.countTag }}</div>
										</div>
									</div>
								</div>
								<div class="right-footer">
									<div class="total-count">共{{ totalAll }}项</div>
									<el-pagination
										v-model:current-page="currentPageAll"
										:page-size="pageSizeAll"
										:total="totalAll"
										layout="prev, pager, next"
										background
										@current-change="handlePageChangeAll"
									/>
								</div>
							</div>
						</div>
					</el-col>
				</template>
			</el-row>
		</div>
		<el-dialog v-model="dialogVisible" width="800" :before-close="handleClose">
			<template #title>
				<div class="dialog-title">50%规则子企业</div>
			</template>
			<div class="dialog-ett-wrpper">
				<div
					class="box1-bottom-content-item"
					v-for="(ett, index) in currentOrgList"
					:key="index"
					@click="handleEntityClick(ett)"
				>
					<el-image v-if="ett.img" class="box1-bottom-content-item-img" :src="ett.img" alt=""></el-image>
					<div v-else class="box1-bottom-content-item-imgUndefined">
						{{ (ett.orgName || ett.enName)?.match(/[\u4e00-\u9fa5a-zA-Z0-9]/)?.[0] }}
					</div>
					<div class="box1-bottom-content-item-txt">
						{{ ett.orgName || ett.orgNameZh }}
					</div>
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="dialogVisible = false"> 确定 </el-button>
				</div>
			</template>
		</el-dialog>
	</div>
	<el-dialog v-model="mediaVisible" title="社交媒体信息" width="500" :before-close="handleMediaClose">
		<div class="dialog-content">
			{{ currentMedia }}
		</div>
		<template #footer>
			<div class="dialog-footer">
				<!-- <el-button @click="mediaVisible = false">Cancel</el-button> -->
				<el-button type="primary" @click="mediaVisible = false"> 确定 </el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup>
import { onMounted, ref, computed, reactive, shallowRef, watch, nextTick } from "vue";
import { useContainerScroll } from "@/hooks/useScrollShow";
import HeaderMenu from "@/components/headerMenu.vue";
import headerInfo from "@/components/headerInfo.vue";
const homeMainRef = ref(null);
const { isShow } = useContainerScroll(homeMainRef);
import * as echarts from "echarts";
import setChart from "@/utils/setChart";
import { ElMessage, ElMessageBox } from "element-plus";

import { DArrowRight, Warning, Search } from "@element-plus/icons-vue";
import EChart from "@/components/Chart/index.vue";
import { TAGTYPE } from "@/public/constant";

import { useRouter } from "vue-router";

const router = useRouter();

import CustomContainer from "@/components/Container/index.vue";
import ClickableCard from "./components/link.vue";
import InfoCard from "./components/info.vue";
import CustomTitle from "./components/title.vue";
import NewsList from "./components/news.vue";
import MessageBubble from "./components/dialog.vue";
import CommonPrompt from "./commonPrompt/index.vue";

import trumpAvatar from "@/assets/images/icon-trump.png";
import elongAvatar from "@/assets/images/icon-elong.png";
import newsIcon from "@/assets/images/icon-news.png";
import dialogIcon from "@/assets/images/icon-duihua.png";
import houseIcon from "@/assets/images/icon-house.png";
import dangerIcon from "./assets/images/box2-header-icon.png";
import box1Image from "./assets/images/box1-image.png";
import box3Icon from "./assets/images/box1-header-icon.png";
import radarIcon from "./assets/images/icon-radar.png";
import qushiIcon from "./assets/images/icon-qushi.png";
import listIcon from "./assets/images/icon-list.png";
import dotIcon from "./assets/images/info2-icon.png";
import entityIcon from "./assets/images/icon-entity.png";
import comTitle from "./assets/images/panel1_1.png";
import getMultiLineChart from "./utils/multiLineChart";
import icon01 from "./assets/images/jianzhu.png";
import {
	getEntitiesDataCount,
	getEntitiesDataInfo,
	getIndustryCountByYear,
	getCountDomainByYear,
	getSanctionsInfoCount,
	getEntitiesList,
	getSanctionProcess,
	getSanDomainCount,
	getRiskSignal,
	getSocialMediaInfo,
	getNewsInfo,
	getExportControlList
} from "@/api/exportControl";

const handleToPosi = id => {
	const element = document.getElementById(id);
	if (element && homeMainRef.value) {
		// 1. 如果是从完整搜索框跳转，先强制切换状态稳定布局
		if (!isShow.value) {
			isShow.value = true;
		}

		// 2. 使用 nextTick 等待 DOM 布局（如高度切换）完成后再进行坐标计算
		nextTick(() => {
			const containerRect = homeMainRef.value.getBoundingClientRect();
			const elementRect = element.getBoundingClientRect();
			// 使用 getBoundingClientRect 计算元素相对于容器顶部的绝对距离，不受嵌套布局影响
			const top = elementRect.top - containerRect.top + homeMainRef.value.scrollTop;

			homeMainRef.value.scrollTo({
				top: top,
				behavior: "smooth"
			});
		});
	}
};

// 跳转到单项制裁页面
const handleToRiskSignalDetail = item => {
	window.sessionStorage.setItem("curTabName", item.title);
	const routeData = router.resolve({
		path: "/exportControl/singleSanction",
		query: {
			id: item.sanId
		}
	});
	// 打开新页面
	window.open(routeData.href, "_blank");
};

const sanctionList = ref([]);

const techOptions = [
	{ label: "全部领域", value: 0 },
	{ label: "人工智能", value: 1 },
	{ label: "生物科技", value: 2 },
	{ label: "新一代信息技术", value: 3 },
	{ label: "量子科技", value: 4 },
	{ label: "新能源", value: 5 },
	{ label: "集成电路", value: 6 },
	{ label: "海洋", value: 7 },
	{ label: "先进制造", value: 8 },
	{ label: "新材料", value: 9 },
	{ label: "航空航天", value: 10 },
	{ label: "深海", value: 11 },
	{ label: "极地", value: 12 },
	{ label: "太空", value: 13 },
	{ label: "核", value: 14 }
];
const timeOptions = [
	"全部时间",
	"2025年",
	"2024年",
	"2023年",
	"2022年",
	"2021年",
	"2020年",
	"2019年",
	"2018年",
	"2017年",
	"2016年",
	"2015年",
	"2014年",
	"2013年",
	"2012年",
	"2011年",
	"2010年",
	"2009年",
	"2008年",
	"2007年",
	"2006年",
	"2005年",
	"2004年",
	"2003年",
	"2002年",
	"2001年"
];
const checkedTech = ref([0]);
const checkedTime = ref(["全部时间"]);

// 跳转到单条制裁页面，单独打开一个新页面
const handleTitleClick = item => {
	window.sessionStorage.setItem("curTabName", `${item.year}-${item.dateStr}《${item.title}》`);
	const route = router.resolve({
		path: "/exportControl/singleSanction",
		query: {
			id: item.id
		}
	});
	window.open(route.href, "_blank");
};

import { getMultipleBarChart_m } from "./utils/charts";
import { formatAnyDateToChinese } from "./utils";
import _ from "lodash";

const handleCompClick = item => {
	// console.log("item", item);
	// if (item.entityType != 2) return;
	window.sessionStorage.setItem("curTabName", item.name);
	const route = router.resolve({
		name: "companyPages",
		params: {
			id: item.id
		}
	});
	window.open(route.href, "_blank");
};

const tagsType = ["primary", "success", "warning", "danger"];

const getTagType = tag => {
	if (!tag) return "info";
	const strTag = String(tag).trim();
	const tagColorMap = {
		通信网络: "primary",
		人工智能: "danger",
		集成电路: "warning",
		量子科技: "success",
		生物技术: "info",
		新一代信息技术: "primary",
		新能源: "success",
		航空航天: "primary",
		先进制造: "warning",
		海洋: "info",
		新材料: "danger",
		深海: "primary",
		极地: "info",
		核: "danger",
		其他: "info"
	};
	if (tagColorMap[strTag]) {
		return tagColorMap[strTag];
	}
	const hash = strTag.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
	return TAGTYPE[hash % TAGTYPE.length];
};

//数据定义
const entitiesDataInfoList = shallowRef([]);
// 趋势图
const trendOption = ref({});
const trendChecked = ref(false);
const selectedEntityId = ref(1);
// 发布频度
const tableData1 = ref([]);
// CCL发布频度
const tableData2 = ref([]);
// 历次制裁过程
const sanctionProcessList = ref([]);
const sanctionPage = ref(1);
// 制裁实体清单
const entitiesList = ref([]);
// 风险信号
const riskSignalList = ref([]);
// 社交媒体信息
const socialMediaList = ref([]);

// 新闻资讯
const newsList = ref([]);

onMounted(async () => {
	try {
		const [dataCount, entitiesDataInfo, industryCountByYear, cclList] = await Promise.all([
			getEntitiesDataCount(),
			getEntitiesDataInfo(),
			getIndustryCountByYear(1),
			getIndustryCountByYear(13)
		]);
		// 交换第二个和第三个元素
		[dataCount[1], dataCount[2]] = [dataCount[2], dataCount[1]];
		infoList.value = dataCount;

		const entityList = _.map(entitiesDataInfo?.sanEntities ?? [], ({ entityNameZh, entityName }) => {
			return { name: entityNameZh, enName: entityName };
		});
		entitiesDataInfoList.value = entitiesDataInfo || [];
		const list = _.chain(industryCountByYear).filter("year").orderBy("year", "desc").value();
		const cclList1 = _.chain(cclList).filter("year").orderBy("year", "desc").value();
		const total = _.sumBy(list, "count");
		tableData1.value = _.map(list, item => {
			return {
				year: item.year,
				num: item.count,
				percent: item.count / total,
				tags: item.domain
			};
		}).slice(0, 5);
		tableData2.value = _.map(cclList1, item => {
			return {
				year: item.year,
				num: item.count,
				percent: item.count / total,
				tags: item.domain
			};
		}).slice(0, 5);

		// 获取趋势图数据
		await fetchTrendData();

		await fetchRiskSignals("0103");
		// 获取社交媒体信息
		await fetchSocialMediaInfo();
		// 获取新闻资讯
		await fetchNewsInfo();
		await fetchEntitiesList(currentPage.value, pageSize.value);
		await fetchSanctionProcess(sanctionPage.value, 10);
		// 获取雷达图数据
		await fetchRadarData(domainChecked.value);
		// 获取出口管制制裁措施
		await fetchSanctionList();
	} catch (err) {
		console.log(err);
	}
});

// 获取趋势图数据
const fetchTrendData = async () => {
	try {
		const res = await getCountDomainByYear({
			isRule: trendChecked.value,
			startYear: "2020",
			endYear: String(new Date().getFullYear()),
			sanTypeId: selectedEntityId.value
		});
		if (res && res[0] && res[0].yearDomainCount) {
			trendOption.value = processYearDomainCountData(res[0].yearDomainCount);
		}
	} catch (error) {
		console.error("获取趋势图数据失败:", error);
	}
};

watch(
	() => [trendChecked.value, selectedEntityId.value],
	() => {
		fetchTrendData();
	}
);

// 新增函数：处理 yearDomainCount 数据并使用 getMultipleBarChart_m 方法生成图表配置
const processYearDomainCountData = yearDomainCountData => {
	// 提取所有年份并排序
	const years = [...new Set(yearDomainCountData.map(item => item.year))].sort();

	// 提取所有领域名称
	const allDomains = [...new Set(yearDomainCountData.flatMap(item => item.domainCountInfo.map(domain => domain.name)))];

	// 构造 getMultipleBarChart_m 所需的数据结构
	const chartData = {
		domains: allDomains,
		data: years.map(year => {
			const yearData = yearDomainCountData.find(item => item.year === year);
			const domainCounts = {};

			// 初始化所有领域的计数为0
			allDomains.forEach(domain => {
				domainCounts[domain] = 0;
			});

			// 填充实际数据
			if (yearData && yearData.domainCountInfo) {
				yearData.domainCountInfo.forEach(domain => {
					domainCounts[domain.name] = domain.count;
				});
			}

			return {
				year: year,
				domainNum: domainCounts
			};
		})
	};

	// 使用 getMultipleBarChart_m 生成图表配置
	return getMultipleBarChart_m(chartData);
};

const handleEntityClick = item => {
	console.log("item", item);
	window.sessionStorage.setItem("curTabName", item.name || item.entityNameZh);
	const route = router.resolve({
		name: "companyPages",
		params: {
			startTime: item.startTime,
			id: item.id
		}
	});
	window.open(route.href, "_blank");
};

// 返回首页
const handleBackHome = () => {
	router.push({
		path: "/overview"
	});
};
const carouselRef = ref(null);
// const handleToDetail = () => {
// 	let activeIndex = 0;
// 	if (carouselRef.value) {
// 		activeIndex = carouselRef.value.activeIndex;
// 	}

// 	console.log("当前 Carousel 激活索引:", activeIndex);

// 	// 使用当前激活项的数据
// 	const currentItem = entitiesDataInfoList.value[activeIndex];
// 	if (currentItem) {
// 		const route = router.resolve({
// 			path: "/exportControlAnalysis",
// 			query: {
// 				startTime: currentItem.postDate
// 			}
// 		});
// 		window.open(route.href, "_blank");
// 	}
// };
const currentCarouselIndex = ref(0);
const handleCarouselChange = index => {
	currentCarouselIndex.value = index;
};

// 跳转到V2.0单次制裁
const handleToEntityList = item => {
	let id = item?.id;
	if (!id) {
		const currentItem = entitiesDataInfoList.value[currentCarouselIndex.value];
		id = currentItem?.id;
	}
	window.sessionStorage.setItem(
		"curTabName",
		entitiesDataInfoList.value[currentCarouselIndex.value].postDate + " 《实体清单新增条目》"
	);
	const routeData = router.resolve({
		path: "/exportControl/singleSanction",
		query: {
			id: id
		}
	});
	// 打开一个新页面
	window.open(routeData.href, "_blank");
};

// 跳转到V2.0实体清单无ID
const handleToEntityListNoId = item => {
	if (item.nameZh == "实体清单") {
		const routeData = router.resolve({
			path: "/exportControl/entityList"
		});
		// 打开一个新页面
		window.open(routeData.href, "_blank");
  } else if (item.nameZh == "商业管制清单") {
    const routeData = router.resolve({
			path: "/exportControl/commercialControlList"
		});
		// 打开一个新页面
		window.open(routeData.href, "_blank");
  } else {
		return;
	}
};

const billList = ref([]);
const curBillListIndex = ref(0);

const searchExportControlText = ref("");
const infoListColor = ref(["rgba(206, 79, 81, 1)", "rgba(132, 136, 142, 1)", "rgba(132, 136, 142, 1)", "rgba(132, 136, 142, 1)"]);
const infoList = ref([]);


// 雷达图
const domainChecked = ref(false);
const radarOption = ref({
	title: {
		text: ""
	},
	tooltip: {
		trigger: "item",
		confine: true
	},
	legend: {
		top: "0%",
		icon: "circle",
		itemWidth: 12,
		itemHeight: 12,
		textStyle: {
			fontSize: 16,
			fontWeight: 400,
			fontFamily: "Microsoft YaHei",
			color: "rgb(95, 101, 108)",
			lineHeight: 24,
			verticalAlign: "middle",
			padding: [2, 0, 0, 0]
		},
		data: []
	},
	radar: {
		radius: "55%",
		center: ["50%", "55%"],
		// shape: 'circle',
		indicator: [],
		axisName: {
			formatter: "{value}",
			color: "rgba(59, 65, 75, 1)",
			fontSize: 16,
			fontWeight: 700
		}
	},
	series: [
		{
			name: "",
			type: "radar",
			symbol: "none", // 隐藏节点圆圈
			data: []
		}
	]
});

// 获取雷达图数据
const fetchRadarData = async checked => {
	try {
		const data = await getSanDomainCount(checked, "export");
		if (data && Array.isArray(data) && data.length > 0) {
			// 收集所有可能的领域名称
			const allDomains = new Set();
			data.forEach(item => {
				if (item.domainCountInfo) {
					item.domainCountInfo.forEach(domain => {
						allDomains.add(domain.name);
					});
				}
			});

			const domainNames = Array.from(allDomains);

			// 为每个制裁类型准备数据
			const radarColors = [
				"rgba(45, 123, 248, 1)",
				"rgba(206, 79, 81, 1)",
				"rgba(255, 197, 61, 1)",
				"rgba(255, 182, 193, 1)",
				"rgba(159, 122, 234, 1)",
				"rgba(90, 200, 220, 1)"
			];

			const seriesData = data.map((sanItem, index) => {
				// 创建一个映射，将领域名称映射到数量
				const domainMap = {};
				if (sanItem.domainCountInfo) {
					sanItem.domainCountInfo.forEach(domain => {
						domainMap[domain.name] = domain.count;
					});
				}

				// 按照统一的领域顺序创建值数组
				const values = domainNames.map(name => domainMap[name] || 0);

				// 确定颜色
				const solidColor = radarColors[index % radarColors.length];
				const areaColor = solidColor.replace("1)", "0.2)");

				return {
					value: values,
					name: sanItem.sanTypeName,
					itemStyle: { color: solidColor },
					areaStyle: { color: areaColor }
				};
			});

			// 更新雷达图指标
			let maxValue = Math.max(...seriesData.flatMap(item => item.value)) * 1.2;
			// 向上取整到最近的100的倍数，避免小数导致 ticks 不可读警告
			maxValue = Math.ceil(maxValue / 100) * 100;

			const indicators = domainNames.map(name => ({
				name: name,
				max: maxValue || 100 // 防止max为0的情况
			}));

			// 更新雷达图配置
			radarOption.value.radar.indicator = indicators;
			radarOption.value.series[0].data = seriesData;
			radarOption.value.legend.data = seriesData.map(item => {
				return {
					name: item.name,
					itemStyle: {
						color: item.itemStyle.color
					}
				};
			});
		}
	} catch (error) {
		console.error("获取雷达图数据失败:", error);
	}
};

watch(
	() => domainChecked.value,
	() => fetchRadarData(domainChecked.value)
);

// 进度条状态
const getStatus = _percent => {
	const percent = _percent * 100;
	if (percent >= 90) {
		return "exception";
	} else if (percent >= 50) {
		return "warning";
	} else {
		return "success";
	}
};
// 制裁实体
const currentPage = ref(1); // 默认显示第5页
const pageSize = ref(10);
const total = ref(0);

// 全部制裁分页
const currentPageAll = ref(1);
const pageSizeAll = ref(10);
const totalAll = ref(0);

const fetchSanctionList = async () => {
	try {
		const techDomains = checkedTech.value.includes(0) ? null : checkedTech.value.map(String);
		let years = null;
		if (!checkedTime.value.includes("全部时间")) {
			years = checkedTime.value
				.map(t => {
					const match = t.match(/(\d{4})/);
					return match ? parseInt(match[1]) : null;
				})
				.filter(y => y !== null);
			if (years.length === 0) years = null;
		}

		const params = {
			pageNum: currentPageAll.value,
			pageSize: pageSizeAll.value,
			techDomainIds: techDomains,
			years: years,
			isCn: false,
			typeName: "实体清单"
		};

		const res = await getExportControlList(params);
		if (res && res.content) {
			sanctionList.value = res.content.map(item => {
				const tags = Array.isArray(item.techDomains)
					? item.techDomains
					: item.techDomain
					? [item.techDomain]
					: item.techDomainList || [];

				const fullTime = item.startTime
					? formatAnyDateToChinese(item.startTime)
					: item.postDate || item.publishDate || item.date;
				let year = "";
				let dateStr = fullTime;
				if (typeof fullTime === "string") {
					if (fullTime.includes("年")) {
						const parts = fullTime.split("年");
						year = parts[0];
						dateStr = parts[1].replace(/\s+/g, "");
					} else if (fullTime.includes("-")) {
						const parts = fullTime.split("-");
						year = parts[0];
						dateStr = parts.slice(1).join("-");
					}
				}

				return {
					...item,
					time: fullTime,
					year,
					dateStr,
					title: item.entityNameZh || item.entityName || item.title || item.name,
					desc: item.sanReason || item.description || item.summary || item.content,
					tags: tags,
					countTag: item.cnEntityCount
						? `${item.cnEntityCount}家中国实体`
						: item.ruleOrgCount
						? `${item.ruleOrgCount}家关联实体`
						: item.countTag || ""
				};
			});
			totalAll.value = res.totalElements;
		}
	} catch (error) {}
};

const handlePageChangeAll = val => {
	currentPageAll.value = val;
	fetchSanctionList();
	handleToPosi("position4");
};

watch(
	checkedTech,
	(newVal, oldVal) => {
		let isModified = false;

		if (newVal.includes(0)) {
			if (!oldVal.includes(0)) {
				checkedTech.value = [0];
				isModified = true;
			} else if (newVal.length > 1) {
				checkedTech.value = newVal.filter(v => v !== 0);
				isModified = true;
			}
		} else if (newVal.length === 0) {
			checkedTech.value = [0];
			isModified = true;
		}

		if (isModified) return;

		currentPageAll.value = 1;
		fetchSanctionList();
	},
	{ deep: true }
);

watch(
	checkedTime,
	(newVal, oldVal) => {
		let isModified = false;

		if (newVal.includes("全部时间")) {
			if (!oldVal.includes("全部时间")) {
				checkedTime.value = ["全部时间"];
				isModified = true;
			} else if (newVal.length > 1) {
				checkedTime.value = newVal.filter(v => v !== "全部时间");
				isModified = true;
			}
		} else if (newVal.length === 0) {
			checkedTime.value = ["全部时间"];
			isModified = true;
		}

		if (isModified) return;

		currentPageAll.value = 1;
		fetchSanctionList();
	},
	{ deep: true }
);

// 获取实体清单数据
const fetchEntitiesList = async (page = 1, size = 10) => {
	try {
		const res = await getEntitiesList("实体清单", page, size);
		if (res) {
			entitiesList.value = res.content.map(item => ({
				...item,
				name: item.entityNameZh || item.entityName,
				enName: item.entityName,
				domains: item.techDomains,
				sanctionDate: item.startTime
			}));
			total.value = res.totalElements;
			currentPage.value = res.number + 1; // API返回的页码从0开始，前端从1开始
		}
	} catch (err) {
		console.error(err);
	}
};

const handleGetMore = async () => {
	sanctionPage.value++;
	try {
		const res = await getSanctionProcess("实体清单", sanctionPage.value, 10);
		if (res && res.content) {
			// 将新数据合并到现有列表中
			const newData = res.content.map(item => ({
				...item,
				title: item.name,
				desc: `${item.cnEntityCount} 家中国实体`,
				content:
					item.summary ||
					"2025年3月25日，美国商务部工业与安全局以从事有悖于美国国家安全和外交政策利益的活动为由，宣布将来自中国的54家实体新增至“实体清单”。"
			}));

			// 合并新数据到现有列表
			sanctionProcessList.value = [...sanctionProcessList.value, ...newData];
		}
	} catch (err) {
		console.error(err);
		// 如果请求失败，回退页码
		sanctionPage.value--;
	}
};

// 获取历次制裁过程数据
const fetchSanctionProcess = async (page = 1, size = 10) => {
	try {
		const res = await getSanctionProcess("实体清单", page, size);
		if (res) {
			sanctionProcessList.value = res.content.map(item => ({
				...item,
				title: item.name,
				desc: `${item.cnEntityCount} 家中国实体`,
				content:
					item.summary ||
					"2025年3月25日，美国商务部工业与安全局以从事有悖于美国国家安全和外交政策利益的活动为由，宣布将来自中国的54家实体新增至“实体清单”。"
			}));
		}
	} catch (err) {
		console.error(err);
	}
};

// 分页改变时的处理函数
const handlePageChange = page => {
	currentPage.value = page;
	fetchEntitiesList(page, pageSize.value);
};

const searchKeyword = ref("");

// 资源库 Tab 数据
const resourceTabs = [
	{ label: "全部制裁", value: "all", disabled: false },
	{ label: "实体清单", value: "entity", disabled: false },
	{ label: "商业管制清单", value: "commerce", disabled: true }
	// { label: "关键与新兴技术清单", value: "tech", disabled: true },
	// { label: "军事最终用户清单", value: "military", disabled: true }
];
const activeResourceTab = ref("all");

const handleResourceTabClick = tab => {
	if (tab.disabled) return;
	activeResourceTab.value = tab.value;
};

const strengthLabels = {
	strong: "强",
	medium: "中",
	weak: "弱",
	none: "无"
};

// 获取风险信号数据
const fetchRiskSignals = async () => {
	try {
		const data = await getRiskSignal();
		if (data && Array.isArray(data)) {
			console.log(data);
			warningList.value = data.map(item => ({
				...item,
				title: item.signalTitle,
				time: item.signalTime,
				status: item.signalLevel,
				id: item.signalId,
				sanId: item.sanId
			}));
		}
	} catch (err) {
		console.error("获取风险信号数据失败:", err);
	}
};

// 添加获取社交媒体信息的方法
const fetchSocialMediaInfo = async () => {
	try {
		const data = await getSocialMediaInfo();
		if (data && Array.isArray(data)) {
			// console.log(data);
			socialMediaList.value = data.map(item => ({
				avatar: item.personImage,
				name: item.personName,
				time: formatTime(item.time),
				source: item.orgName,
				content: item.remarks,
				personId: item.personId
			}));
		}
	} catch (err) {
		console.error("获取社交媒体信息失败:", err);
	}
};

// 添加获取新闻资讯的方法
const fetchNewsInfo = async () => {
	try {
		const data = await getNewsInfo();
		if (data && Array.isArray(data)) {
			newsList.value = data.map(item => ({
				...item,
				avatar: item.newsImage,
				time: formatTime(item.newsDate),
				source: item.newsOrg,
				description: item.newsContent,
				title: item.newsTitle
			}));
		}
	} catch (err) {
		console.error("获取新闻资讯失败:", err);
	}
};

const handlePerClick = item => {
	// console.log("点击了社交媒体消息:", item);
	window.sessionStorage.setItem("curTabName", item.name);
	const route = router.resolve({
		path: "/characterPage",
		query: {
			type: item.type || [1, 2, 3][Math.floor(Math.random() * 3)],
			personId: item.personId
		}
	});
	window.open(route.href, "_blank");
};
// 处理点击社交媒体消息的方法
// const handleInfoClick = item => {
// 	console.log("点击了社交媒体消息的更多信息:", item);
// 	// 这里可以添加打开详情页的逻辑
// 	ElMessageBox.alert(`${item.content}`, "信息详情", {
// 		confirmButtonText: "确定",
// 		callback: action => {
// 			ElMessage({
// 				type: "info",
// 				message: `action: ${action}`
// 			});
// 		}
// 	});
// };

// 添加格式化时间的方法
const formatTime = dateString => {
	const date = new Date(dateString);
	const month = (date.getMonth() + 1).toString().padStart(2, "0");
	const day = date.getDate().toString().padStart(2, "0");
	return `${month}-${day}`;
};

const warningList = ref([]);

const curBillList = ref([]);

const releaseTime = ref("近一年发布");

const categoryList = ref([]);

const activeCate = ref("全部分类");
const activeHylyId = ref("");

// 获取领域分类
const handleGetHylyList = async () => {
	try {
		const res = await getHylyList();
		console.log("行业领域列表");

		categoryList.value = res.data;
		const obj = {
			id: 0,
			hylyid: "",
			hylymc: "全部分类"
		};
		categoryList.value = [obj, ...categoryList.value];
	} catch (error) {}
};

const chart1Data = ref({
	title: [
		"2024-09",
		"2024-10",
		"2024-11",
		"2024-12",
		"2025-01",
		"2025-02",
		"2025-03",
		"2025-04",
		"2025-05",
		"2025-06",
		"2025-07",
		"2025-08"
	],
	data: [
		{
			name: "提出法案",
			value: [145, 52, 84, 99, 71, 96, 128, 144, 140, 168, 188, 172]
		},
		{
			name: "通过法案",
			value: [6, 3, 4, 6, 11, 5, 2, 14, 16, 27, 28, 44]
		}
	]
});

const handleSanc = item => {
	console.log(item);
	window.sessionStorage.setItem("curTabName", `${item.postDate}《${item.title}》`);
	const route = router.resolve({
		path: "/exportControl/singleSanction",
		query: {
			id: item.id
		}
	});
	window.open(route.href, "_blank");
};


// 查看更多风险信号
const handleToMoreRiskSignal = () => {
	const route = router.resolve("/riskSignal");
	window.open(route.href, "_blank");
};

// 查看更多新闻资讯
const handleToMoreNews = () => {
	const route = router.resolve("/newsBrief");
	window.open(route.href, "_blank");
};

const handleNewsInfoClick = item => {
	console.log("点击了社交媒体消息的更多信息:", item);

	const route = router.resolve({
		path: "/newsAnalysis",
		query: {
			newsId: item.newsId
		}
	});
	window.open(route.href, "_blank");
};

// 切换当前出口管制政策
const handleSwithCurPolicy = name => {
	if (name === "left") {
		carouselRef.value.prev();
	} else {
		carouselRef.value.next();
	}
};

const handleSearch = () => {
	window.sessionStorage.setItem("curTabName", `搜索-${searchExportControlText.value}`);
	const curRoute = router.resolve({
		path: "/searchResults",
		query: {
			searchText: searchExportControlText.value,
			areaName: "实体清单"
		}
	});
	window.open(curRoute.href, "_blank");
};

onMounted(async () => {
	handleGetHylyList();
	let chart1 = getMultiLineChart(chart1Data.value.title, chart1Data.value.data[0].value, chart1Data.value.data[1].value);
	setChart(chart1, "chart1");
});

const dialogVisible = ref(false);
const currentOrgList = ref([]);
const handleClose = () => {
	dialogVisible.value = false;
};
const handleOrgClick = item => {
	// console.log(item, item.name);
	currentOrgList.value = item.ruleOrgList;
	dialogVisible.value = true;
};

const mediaVisible = ref(false);
const currentMedia = ref("");
const handleMediaClose = () => {
	mediaVisible.value = false;
};
const handleMediaClick = item => {
	// console.log(item, item.name);
	currentMedia.value = item.content;
	mediaVisible.value = true;
};
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}

:deep(.el-input__wrapper) {
	box-shadow: none;
}

.home-header {
	height: 64px;
	background: url("@/assets/images/nav-bg.png");
	box-sizing: border-box;
	padding-left: 160px;
	display: flex;
	justify-content: space-between;
	padding: 0 160px;
}

.box1 {
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: relative;

	.box1-left-arrow {
		position: absolute;
		z-index: 9999;
		left: -20px;
		top: 135px;
		width: 24px !important;
		height: 48px;
		background: #e7f1ff;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;

		.icon {
			width: 11px;
			height: 18px;

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

	.box1-right-arrow {
		position: absolute;
		z-index: 9999;
		right: -20px;
		top: 135px;
		width: 24px;
		height: 48px;
		background: #e7f1ff;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;

		.icon {
			width: 11px;
			height: 18px;

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

	.box1-absolute {
		position: absolute;
		width: 240px;
		height: 89px;
		top: 30px;
		right: -24px;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		padding-right: 50px;
		box-sizing: border-box;
		background: linear-gradient(to right, rgba(206, 79, 81, 0), rgba(206, 79, 81, 0.3));

		&-des {
			display: flex;
			gap: 5px;
			align-items: center;
			font-size: 18px;
			font-weight: 700;
			color: rgba(206, 79, 81, 1);
		}

		&-num {
			font-size: 32px;
			font-weight: 700;
			color: rgba(206, 79, 81, 1);
		}
	}

	.box1-top {
		// display: flex;
		// flex-direction: column;
		// gap: 10px;
		padding-left: 30px;
		border-bottom: 1px solid rgba(234, 236, 238, 1);

		&-title {
			font-size: 20px;
			font-weight: 700;
			color: $base-color;
			margin-top: 10px;
			margin-bottom: 15px;
		}

		&-content {
			display: flex;
			flex-direction: column;
			gap: 10px;
			margin-bottom: 20px;

			&-item {
				display: flex;
				gap: 5px;

				&-title {
					font-size: 16px;
					font-weight: 700;
					color: rgba(59, 65, 75, 1);
				}
			}
		}
	}

	.box1-bottom {
		padding-left: 30px;

		&-title {
			font-size: 16px;
			font-weight: 700;
			color: rgba(59, 65, 75, 1);
			margin-bottom: 15px;
		}

		&-content {
			display: flex;
			gap: 15px;
			flex-wrap: wrap;
			justify-content: space-between;
			padding-left: 10px;
			height: 156px;
			overflow: auto;

			&-item {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				width: 48%;
				/* 留出2%的间距 */
				// margin-bottom: 6px;
				box-sizing: border-box;
				gap: 10px;
				cursor: pointer;

				&-img {
					width: 24px;
					height: 24px;
					flex-shrink: 0;
				}

				&-imgUndefined {
					width: 24px;
					height: 24px;
					font-size: 14px;
					font-weight: 700;
					flex-shrink: 0;
					color: rgba(5, 95, 194, 1);
					background-color: rgb(236, 245, 255);
					line-height: 24px;
					text-align: center;
					border-radius: 12px;
				}

				&-txt {
					font-size: 16px;
					font-weight: 400;
					color: rgba(95, 101, 108, 1);
				}
			}
		}
	}

	.box1-right {
		display: flex;
		flex-direction: column;
		gap: 10px;

		.box1-right-title {
			font-size: 20px;
			font-weight: 700;
			color: $base-color;
		}

		.box1-right-tags {
			display: flex;
			gap: 10px;
		}

		.box1-right-content {
			color: rgba(59, 65, 75, 1);
			font-size: 16px;
			font-weight: 400;
			line-height: 28px;
		}

		.box1-right-footer {
			margin-top: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.box1-right-footer-time {
				color: rgba(95, 101, 108, 1);
				font-size: 14px;
				font-weight: 400;
			}
		}
	}
}

.box2-main {
	height: 320px;
	overflow-y: auto;

	.box2-main-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 8px;
		box-sizing: border-box;
		padding-right: 3px;
		cursor: pointer;

		&:hover {
			background: var(--color-bg-hover);
		}

		.itemLeftStatus1 {
			color: rgba(82, 196, 26, 1) !important;
			background: rgba(246, 255, 237, 1) !important;
		}

		.itemLeftStatus2 {
			color: rgba(250, 140, 22, 1) !important;
			background: rgba(255, 247, 230, 1) !important;
		}

		.item-left {
			display: flex;
			align-items: center;
			width: 40px;
			height: 40px;
			padding: 5px;
			border-radius: 100%;
			background: rgba(255, 241, 240);
			color: rgba(245, 34, 45, 1);
			font-family: Microsoft YaHei;
			font-size: 12px;
			font-weight: 400;
			line-height: 14px;
			box-sizing: border-box;
			text-align: center;
			flex-shrink: 0;
		}

		.item-right {
			margin-left: 13px;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 8px;
			height: 47px;
			border-bottom: 1px solid rgba(240, 242, 244, 1);

			.text {
				font-family: Microsoft YaHei;
				line-height: 47px;
				width: 260px;
				font-size: 16px;
				font-weight: 400;
				color: rgba(59, 65, 75, 1);
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.time {
				margin-left: 10px;
				line-height: 47px;
				color: rgba(132, 136, 142, 1);
				font-family: Microsoft YaHei;
				font-size: 14px;
				font-weight: 400;
			}
		}
	}
}

.box2-footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	width: 461px;
	height: 42px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border-radius: 6px;
	background: var(--color-main-active);
	margin: 0 auto;
	cursor: pointer;

	.icon {
		width: 16px;
		height: 16px;

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

	.text {
		margin-left: 8px;
		color: rgba(255, 255, 255, 1);
		font-family: Microsoft YaHei;
		font-size: 16px;
		font-weight: 400;
		line-height: 22px;
	}
}

.box3 {
	display: flex;
	justify-content: center;
	// align-items: flex-start;
	gap: 100px;

	.box3-content-title {
		font-size: 18px;
		font-weight: 700;
		font-family: Microsoft YaHei;
		width: 640px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(247, 248, 249, 1);
		color: $base-color;
		margin-bottom: 15px;
	}

	.box3-content {
		// flex: 1;
		.el-progress--line {
			width: 82px;
		}
	}
}

.box4 {
	height: 786px;
	overflow: auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-top: 16px;
	// padding-bottom: 50px;
	position: relative;

	.box4-item {
		display: flex;
		gap: 10px;
		align-items: flex-start;
		padding-bottom: 35px;
		position: relative;

		.box4-item-left {
			display: flex;
			flex-direction: column;
			align-items: center;

			.box4-item-left-icon {
				width: 10px;
				height: 10px;
			}

			.box4-item-left-line {
				width: 1px;
				height: 100%;
				position: absolute;
				border-left: 1px solid rgba(10, 87, 166, 0.3);
			}
		}

		.box4-item-right {
			display: flex;
			flex-direction: column;

			.box4-item-right-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid rgba(234, 236, 238, 1);
				position: relative;
				top: -7.5px;
				padding-bottom: 8px;
				cursor: pointer;

				&-title {
					font-size: 18px;
					color: $base-color;
					font-weight: 700;
				}

				&-desc {
					font-size: 16px;
					font-weight: 700;
					color: rgba(59, 65, 75, 1);
				}
			}

			.box4-item-right-content {
				font-size: 16px;
				font-weight: 400;
				color: rgba(95, 101, 108, 1);
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				text-overflow: ellipsis;
				line-height: 25px;
			}
		}
	}

	.box4-footer {
		position: absolute;
		// margin-top: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		bottom: 30px;
		left: 50%;
		margin-left: -30px;
		// margin-bottom: 30px;
	}
}

.box5 {
	height: 115%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

:deep(.table-header) {
	font-size: 16px;
	font-weight: 700;

	color: rgba(59, 65, 75, 1);
}

:deep(.table-row) {
	height: 64px;
}

.domain-tags {
	display: flex;
	gap: 8px;
}

.box5-header-right {
	font-size: 16px;
	font-weight: 700;
	color: $base-color;
}

.table-footer {
	margin-top: 20px;
}

.home-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
	overflow-y: hidden;

	.home-main {
		position: relative;
		width: 100%;
		height: 100%;
		overflow-y: auto;
		background: url("./assets/images/background.png");
		background-size: 100% 100%;

		.home-main-header {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 20px;

			.home-main-header-center {
				margin-top: 51px;
				width: 960px;
				height: 48px;
				border-radius: 10px;
				box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
				background: rgba(255, 255, 255, 1);
				box-sizing: border-box;
				padding: 1px;
				position: relative;
				border: 1px solid transparent;

				&:hover {
					border: 1px solid var(--color-main-active);
				}

				.search {
					position: absolute;
					right: -1px;
					top: 0px;
					width: 120px;
					height: 46px;
					border-radius: 10px;
					background: var(--color-main-active);
					display: flex;
					justify-content: center;
					align-items: center;
					cursor: pointer;

					.search-icon {
						width: 18px;
						height: 18px;

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

					.search-text {
						margin-left: 8px;
						height: 22px;
						color: #fff;
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 22px;
					}
				}
			}

			.home-main-header-footer {
				margin-top: 64px;
				width: 700px;
				height: 64px;
				box-sizing: border-box;
				padding: 0 108px;
				display: flex;
				justify-content: space-between;

				.home-main-header-footer-item {
					padding: 0 10px;
					text-align: center;

					.item-top {
						height: 22px;
						color: rgba(20, 89, 187, 1);
						font-family: Microsoft YaHei;
						font-size: 36px;
						font-weight: 700;
						line-height: 22px;
					}

					.item-footer {
						margin-top: 10px;
						height: 30px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 30px;
					}
				}
			}

			.home-main-header-footer-link,
			.home-main-header-footer-info {
				width: 100%;
				display: flex;
				justify-content: center;
				gap: 16px;
				padding: 30px 0;
			}

			.home-main-header-footer-info {
				margin-top: 34px;
			}

			.home-main-header-btn-box {
				width: 688px;
				margin: 0 auto;
				margin-top: 39px;
				display: flex;
				justify-content: space-between;

				.btn {
					display: flex;
					align-items: center;
					gap: 9px;
					width: 160px;
					height: 48px;
					border: 1px solid #aed6ff;
					box-sizing: border-box;
					border-radius: 24px;
					background: #e7f3ff;
					cursor: pointer;
					position: relative;

					&:hover {
						background: #cae3fc;
					}

					.btn-text {
						width: 80px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 400;
						line-height: 48px;
						margin-left: 36px;
						text-align: center;
					}

					.btn-icon {
						position: absolute;
						top: 16px;
						right: 19px;
						width: 6px;
						height: 12px;

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

		.home-main-center {
			margin-top: 34px;

			.center-top {
				height: 450px;
				display: flex;
				gap: 20px;

				.box1 {
					display: flex;
					gap: 10px;
					position: relative;

					.box1-header {
						height: 53px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;
						justify-content: space-between;

						.box1-header-left {
							display: flex;

							.icon {
								width: 18px;
								height: 18px;
								margin-top: 19px;

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

							.title {
								height: 22px;
								margin-left: 18px;
								margin-top: 16px;
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								line-height: 22px;
							}
						}

						.box1-header-right {
							margin-top: 19px;
							height: 16px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 16px;
							cursor: pointer;
						}
					}

					.box1-main {
						display: flex;
						height: 354px;
						margin-top: 22px;

						.box1-main-top {
							height: 68px;
							display: flex;
							justify-content: space-between;

							.box1-main-top-left {
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 22px;
								letter-spacing: 0px;
								text-align: left;
							}

							.box1-main-top-right {
								margin-left: 20px;
								display: flex;

								.num {
									padding: 1px 8px;
									height: 24px;
									box-sizing: border-box;
									border: 1px solid rgba(145, 202, 255, 1);
									border-radius: 4px;
									background: rgba(230, 244, 255, 1);
								}

								.tag {
									box-sizing: border-box;
									border: 1px solid rgba(135, 232, 222, 1);
									border-radius: 4px;
									background: rgba(230, 255, 251, 1);
								}
							}
						}
					}
				}

				.box2 {
					flex: 1;
					padding-right: 20px;
					height: 450px;
					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
					background: rgba(255, 255, 255, 1);
					position: relative;

					.box2-header {
						height: 54px;
						display: flex;

						.icon {
							width: 24px;
							height: 22px;
							margin-left: 33px;
							margin-top: 18px;

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

						.text {
							margin-left: 22px;
							margin-top: 16px;
							height: 22px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 22px;
						}

						.num {
							width: 24px;
							height: 16px;
							text-align: center;
							color: rgba(255, 255, 255, 1);
							font-family: Microsoft YaHei;
							font-size: 12px;
							margin-left: 6px;
							margin-top: 17px;
							border: 1px solid rgba(255, 255, 255, 1);
							border-radius: 100px;
							background: rgba(255, 77, 79, 1);
						}

						.more {
							margin-top: 19px;
							margin-left: 256px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 16px;
						}
					}

					.box2-main {
						height: 282px;
						overflow-y: auto;

						.box2-main-item {
							margin-left: 23px;
							height: 47px;
							width: 464px;
							display: flex;

							.itemLeftStatus1 {
								color: rgba(82, 196, 26, 1) !important;
								background: rgba(246, 255, 237, 1) !important;
							}

							.itemLeftStatus2 {
								color: rgba(250, 140, 22, 1) !important;
								background: rgba(255, 247, 230, 1) !important;
							}

							.item-left {
								margin-top: 4px;
								margin-left: 2px;
								width: 40px;
								height: 40px;
								border-radius: 20px;
								background: rgba(255, 241, 240);
								color: rgba(245, 34, 45, 1);
								font-family: Microsoft YaHei;
								font-size: 12px;
								font-weight: 400;
								line-height: 14px;
								box-sizing: border-box;
								padding: 6px 4px;
								text-align: center;
							}

							.item-right {
								margin-left: 13px;
								width: 408px;
								height: 47px;
								border-top: 1px solid rgba(240, 242, 244, 1);
								border-bottom: 1px solid rgba(240, 242, 244, 1);
								display: flex;

								.text {
									width: 348px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 47px;
								}

								.time {
									margin-left: 10px;
									line-height: 47px;
									color: rgba(132, 136, 142, 1);
									font-family: Microsoft YaHei;
									font-size: 14px;
									font-weight: 400;
								}
							}
						}
					}

					.box2-footer {
						position: absolute;
						left: 26px;
						bottom: 20px;
						width: 430px;
						height: 42px;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						border-radius: 6px;
						background: rgba(22, 119, 255, 1);
						cursor: pointer;

						.icon {
							width: 16px;
							height: 16px;

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

						.text {
							margin-left: 8px;
							color: rgba(255, 255, 255, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 22px;
						}
					}
				}
			}

			.center-footer {
				margin-top: 21px;
				height: 450px;
				display: flex;

				.box3 {
					width: 900px;
					height: 450px;
					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
					background: rgba(255, 255, 255, 1);

					.box3-header {
						height: 53px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						padding: 0 20px;

						.box3-header-left {
							display: flex;

							.box3-header-icon {
								margin-top: 15px;
								width: 13px;
								height: 13px;

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

							.box3-header-title {
								margin-top: 16px;
								margin-left: 22px;
								height: 22px;
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								line-height: 22px;
							}
						}

						.box3-header-right {
							display: flex;
							justify-content: flex-end;
							width: 178px;
							height: 22px;

							.right-box {
								display: flex;
								margin-top: 16px;
								width: 89px;
								height: 22px;
								justify-content: flex-end;

								.icon1 {
									margin-top: 5px;
									width: 12px;
									height: 12px;
									border-radius: 6px;
									background: rgba(20, 89, 187, 1);
								}

								.icon2 {
									margin-top: 5px;
									width: 12px;
									height: 12px;
									border-radius: 6px;
									background: rgba(250, 140, 22, 1);
								}

								.text {
									margin-left: 5px;
									color: rgba(95, 101, 108, 1);
									font-family: Microsoft YaHei;
									font-size: 14px;
									font-weight: 400;
									line-height: 22px;
								}
							}
						}
					}

					.box3-main {
						height: 397px;
					}
				}

				.box4 {
					margin-left: 20px;
					width: 521px;
					height: 450px;
					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
					background: rgba(255, 255, 255, 1);

					.box4-header {
						width: 452px;
						margin: 0 auto;
						height: 53px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;

						.header-icon {
							margin-top: 18px;
							width: 18px;
							height: 18px;

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

						.header-title {
							margin-top: 16px;
							margin-left: 26px;
							height: 22px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 22px;
						}
					}

					.box4-main {
						width: 452px;
						margin: 0 auto;
						margin-top: 8px;
						height: 360px;
						overflow-y: auto;

						.box4-main-item {
							margin-top: 6px;
							height: 30px;
							display: flex;

							.leftStatus3 {
								color: rgba(255, 197, 61, 1) !important;
							}

							.leftStatus2 {
								color: rgba(255, 169, 64, 1) !important;
							}

							.left {
								width: 44px;
								text-align: left;
								font-family: Microsoft YaHei;
								font-size: 18px;
								font-weight: 700;
								line-height: 30px;
								color: rgba(206, 79, 81, 1);
							}

							.center {
								width: 300px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
							}

							.right {
								width: 108px;
								color: rgba(132, 136, 142, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 30px;
								text-align: right;
							}
						}
					}
				}
			}
		}

		.home-main-footer {
			// width: 100%;
			height: 911px;
			background: rgba(248, 249, 250, 1);

			.home-main-footer-header {
				margin-top: 37px;
				margin-bottom: 36px;
				// width: 1600px;
				height: 42px;
				// background: orange;
				display: flex;
				justify-content: space-between;

				.btn-box {
					width: 1300px;
					display: flex;
					justify-content: space-between;

					.btn {
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 42px;
						padding: 0 24px;
						border-radius: 21px;
						background: rgba(20, 89, 187, 0);
						cursor: pointer;

						&:hover {
							background: rgba(20, 89, 187, 0.1);
						}
					}

					.btnActive {
						padding: 0 24px;
						border-radius: 21px;
						background: rgba(20, 89, 187, 1);
						color: #fff;

						&:hover {
							color: #fff;
							background: rgba(20, 89, 187, 1);
						}
					}
				}

				.select-box {
					height: 42px;
					box-sizing: border-box;
					padding: 5px 0;
				}
			}

			.home-main-footer-main {
				width: 100%;
				// background: orange;
				display: flex;
				flex-wrap: wrap;

				// justify-content: space-between;
				// justify-content: center;
				.main-item {
					width: 240px;
					height: 320px;
					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
					background: #fff;
					margin-bottom: 24px;
					margin-right: 25px;

					.main-item-box1 {
						margin-top: 20px;
						margin-left: 45px;
						width: 150px;
						height: 200px;
						box-sizing: border-box;
						border: 1px solid rgba(240, 242, 244, 1);

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

					.main-item-box2 {
						margin-top: 26px;
						text-align: center;
						height: 30px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 30px;
					}

					.main-item-box3 {
						text-align: center;
						height: 30px;
						color: rgba(132, 136, 142, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 30px;
					}
				}
			}
		}
	}
}

.tableName {
	color: rgba(59, 65, 75, 1);
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 700;
	line-height: 30px;
	letter-spacing: 0px;
	text-align: justify;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;

	.box1-bottom-content-item-imgUndefined {
		width: 24px;
		height: 24px;
		font-size: 14px;
		font-weight: 700;
		flex-shrink: 0;
		color: rgb(5, 95, 194);
		background-color: rgb(236, 245, 255);
		line-height: 24px;
		text-align: center;
		border-radius: 12px;
	}
}

.num-item {
	width: 280px;
	display: flex;

	.name-item {
		width: 215px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.dialog-title {
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	font-family: $base-font-family;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}

.dialog-ett-wrpper {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	height: 500px;

	.box1-bottom-content {
		display: flex;
		gap: 15px;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-left: 10px;
		height: 156px;
		overflow: auto;

		&-item {
			display: flex;
			// align-items: center;
			justify-content: flex-start;
			width: 48%;
			/* 留出2%的间距 */
			// margin-bottom: 6px;
			box-sizing: border-box;
			gap: 10px;
			cursor: pointer;

			&-img {
				width: 24px;
				height: 24px;
				flex-shrink: 0;
			}

			&-imgUndefined {
				width: 24px;
				height: 24px;
				font-size: 14px;
				font-weight: 700;
				flex-shrink: 0;
				color: rgba(5, 95, 194, 1);
				background-color: rgb(236, 245, 255);
				line-height: 24px;
				text-align: center;
				border-radius: 12px;
			}

			&-txt {
				font-size: 16px;
				font-weight: 400;
				color: rgba(95, 101, 108, 1);
			}
		}
	}
}

:deep(.el-input__wrapper) {
	box-shadow: none;
	border-radius: 10px;
}

:deep(.el-input__wrapper:hover) {
	box-shadow: none !important;
}

:deep(.el-input__wrapper.is-focus) {
	box-shadow: none !important;
}

:deep(.el-table thead) {
	color: rgba(59, 65, 75, 1);
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	letter-spacing: 0px;
	text-align: left;
}

:deep(.el-table tr) {
	color: rgba(59, 65, 75, 1);
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: justify;
}

.resource-tabs {
	width: 100%;
	display: flex;
	align-items: center;
	margin-top: 6px;
	margin-bottom: 36px;
	padding-left: 10px;

	.resource-tab-item {
		margin-right: 12px;
		cursor: pointer;
		font-size: 20px;
		color: rgb(59, 65, 75);
		font-weight: 400;
		font-family: "Microsoft YaHei";
		padding: 8px 24px;
		border-radius: 21px;
		transition: all 0.3s;

		&:last-child {
			margin-right: 0;
		}

		&.active {
			background: rgb(5, 95, 194);
			color: #ffffff;
			font-weight: 700;
		}

		&.disabled {
			cursor: not-allowed;
			color: #999999;
			background: transparent;
		}

		&:hover:not(.active):not(.disabled) {
			color: #0a57a6;
		}
	}
}

.all-content {
	width: 100%;
	height: auto;
	padding-bottom: 100px;
	display: flex;
	justify-content: space-between;
	// align-items: center;
	gap: 16px;

	.left {
		width: 360px;
		height: auto;
		align-self: flex-start;
		background: #fff;
		border-radius: 10px;
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);

		.title {
			width: 100%;
			height: 56px;
			display: flex;
			align-items: center;
			padding: 14px 12px 16px 0;

			.box {
				width: 8px;
				height: 20px;
				background-color: rgb(5, 95, 194);
				border-bottom-right-radius: 4px;
				border-top-right-radius: 4px;
				margin-right: 14px;
			}

			.text {
				font-size: 20px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 26px;
				color: rgb(5, 95, 194);
			}
		}

		.left-main {
			width: 100%;
			height: auto;
			padding-left: 24px;

			.checkbox-grid {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				row-gap: 16px;
				padding-bottom: 16px;
			}

			:deep(.el-checkbox) {
				margin-right: 0;
				height: auto;
			}

			:deep(.el-checkbox__label) {
				font-size: 16px;
				color: #666666;
				font-weight: 400;
			}
		}
	}

	.right {
		width: 1224px;
		height: auto;
		background: #fff;
		border-radius: 4px;
		border-radius: 10px;
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);

		.right-title {
			width: 100%;
			height: 48px;
			border-bottom: 1px solid rgb(234, 236, 238);
			display: flex;
			align-items: center;

			img {
				width: 22px;
				height: 18px;
				margin-left: 19px;
			}

			div {
				font-size: 20px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 26px;
				color: rgb(5, 95, 194);
				margin-left: 19px;
			}
		}

		.right-main {
			width: 100%;
			height: auto;
			padding: 24px 35px 0 20px;

			.sanction-list {
				width: 1169px;
				padding: 0px 0 12px 0;
				display: flex;
				position: relative;

				&:not(:last-child)::after {
					content: "";
					position: absolute;
					left: 111px; // 80px(time width) + 16px(margin) + 15px(30px img half)
					top: 44px; // 14px(img margin-top) + 30px(img height)
					bottom: -14px; // 延伸到下一个图标的顶部
					width: 2px;
					background-color: rgb(234, 236, 238);
					z-index: 1;
				}

				// justify-content: flex-start;
				.time {
					width: 80px;
					// height: 50px;
					// font-size: 16px;
					// font-weight: 700;
					// line-height: 24px;
					font-family: "Microsoft YaHei";
					color: rgb(5, 95, 194);
					margin-right: 16px;
					display: flex;
					flex-direction: column;
					align-items: flex-end;

					.year {
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
					}

					.date {
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
					}
				}

				img {
					width: 30px;
					height: 30px;
					border-radius: 50%;
					margin-top: 14px;
					margin-right: 16px;
				}

				.main {
					width: 1027px;
					padding-top: 14px;
					position: relative;

					.main-title {
						width: 800px;
						font-size: 20px;
						font-weight: 700;
						line-height: 26px;
						font-family: "Microsoft YaHei";
						color: rgb(59, 65, 75);
						margin-bottom: 11px;
						cursor: pointer;
					}

					.main-desc {
						font-size: 16px;
						font-weight: 400;
						line-height: 30px;
						font-family: "Microsoft YaHei";
						color: rgb(95, 101, 108);
						margin-bottom: 9px;
					}

					.tag-box {
						display: flex;

						.tag-item {
							padding: 1px 8px;
							margin-right: 8px;
							border-radius: 4px;
							font-size: 14px;
							font-weight: 400;
							line-height: 22px;
							font-family: "Microsoft YaHei";
							color: rgb(5, 95, 194);
							background-color: rgba(231, 243, 255, 1);
						}
					}

					.count-tag {
						position: absolute;
						padding: 2px 8px;
						top: 0;
						right: 0;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						font-family: "Microsoft YaHei";
						color: rgb(206, 79, 81);
						border-radius: 20px;
						background-color: rgba(206, 79, 81, 0.1);
					}
				}
			}
		}

		.right-footer {
			width: 100%;
			height: 73px;
			border-top: 1px solid rgb(234, 236, 238);
			padding: 0 31px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.total-count {
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				font-family: "Microsoft YaHei";
				color: rgb(59, 65, 75);
			}
		}
	}
}
.search-header {
	width: 100%;
	height: 144px;
	background: #fff;
	overflow: hidden;
	.home-main-header-center {
		margin-top: 20px;
		margin-left: 200px;
		width: 800px;
		height: 48px;
		border-radius: 10px;
		box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
		background: rgba(255, 255, 255, 1);
		box-sizing: border-box;
		padding: 1px;
		position: relative;
		border: 1px solid transparent;
		&:hover {
			border: 1px solid var(--color-main-active);
		}
		.search {
			position: absolute;
			right: -1px;
			top: 0px;
			width: 120px;
			height: 46px;
			border-radius: 10px;
			background: var(--color-main-active);
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			.search-icon {
				width: 18px;
				height: 18px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.search-text {
				margin-left: 8px;
				height: 22px;
				color: #fff;
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 22px;
			}
		}
	}
	.home-main-header-btn-box {
		margin-top: 20px;
		margin-left: 200px;
		display: flex;
		gap: 16px;
		.btn {
			display: flex;
			align-items: center;
			gap: 9px;
			width: 160px;
			height: 48px;
			border: 1px solid #aed6ff;
			box-sizing: border-box;
			border-radius: 24px;
			background: #e7f3ff;
			cursor: pointer;
			position: relative;
			&:hover {
				background: #cae3fc;
			}
			.btn-text {
				width: 80px;
				color: var(--color-main-active);
				font-family: Microsoft YaHei;
				font-size: 20px;
				font-weight: 400;
				line-height: 48px;
				margin-left: 36px;
				text-align: center;
			}
			.btn-icon {
				position: absolute;
				top: 16px;
				right: 19px;
				width: 6px;
				height: 12px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
.scroll-main {
	height: calc(100% - 144px) !important;
}
</style>
