<template>
	<div class="home-wrapper">
		<div class="home-main" ref="containerRef">
			<div class="home-top-bg"></div>
			<div class="home-main-header">
				<!-- <div class="home-main-header-top">
					<div class="header-left">
						<HeaderMenu></HeaderMenu>
					</div>
					<div class="header-right">
						<headerInfo curTitleName="市场准入限制"></headerInfo>
					</div>
				</div> -->
				<div class="home-main-header-center">
					<SearchContainer style="margin-bottom: 0;margin-top: 48px;  height: fit-content" v-if="containerRef"
						placeholder="搜索市场准入限制调查" :containerRef="containerRef" areaName="" />
				</div>
				<!-- <div class="home-main-header-footer">
					<div class="home-main-header-footer-item">
						<div class="item-top">142</div>
						<div class="item-footer">总调查案件数</div>
					</div>
					<div class="home-main-header-footer-item">
						<div class="item-top">28</div>
						<div class="item-footer">调查中案件数</div>
					</div>
					<div class="home-main-header-footer-item">
						<div class="item-top">326</div>
						<div class="item-footer">涉及中企</div>
					</div>
					<div class="home-main-header-footer-item">
						<div class="item-top">38%</div>
						<div class="item-footer">胜诉/和解率</div>
					</div>
					<div class="home-main-header-footer-item">
						<div class="item-top">285</div>
						<div class="item-footer">分析报告</div>
					</div>
				</div> -->
				<!-- <div class="home-main-header-btn-box">
					<div class="btn" @click="scrollToTop('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="scrollToTop('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="scrollToTop('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="scrollToTop('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-card-box">
					<div class="home-main-header-card-box-box1 card"
						@click="handleClickCardToDetail(sortInfo[1]?.sortCode, sortInfo[1]?.sortName)">
						<div class="header">
							<div class="header-left">{{ sortInfo[1]?.sortName }}</div>
							<div class="header-right">{{ `${sortInfo[1]?.sortCount}项` }}</div>
						</div>
						<div class="content-box">
							<div class="item">{{ sortInfo[1]?.sortMeasure }}</div>
							<div class="item">
								{{ sortInfo[1]?.sortDescription }}
							</div>
						</div>
					</div>
					<div class="home-main-header-card-box-box2 card"
						@click="handleClickCardToDetail(sortInfo[2]?.sortCode, sortInfo[2]?.sortName)">
						<div class="header">
							<div class="header-left">{{ sortInfo[2]?.sortName }}</div>
							<div class="header-right">{{ `${sortInfo[2]?.sortCount}项` }}</div>
						</div>
						<div class="content-box">
							<div class="item">{{ sortInfo[2]?.sortMeasure }}</div>
							<div class="item">
								{{ sortInfo[2]?.sortDescription }}
							</div>
						</div>
					</div>
					<div class="home-main-header-card-box-box3 card"
						@click="handleClickCardToDetail(sortInfo[0]?.sortCode, sortInfo[0]?.sortName)">
						<div class="header">
							<div class="header-left">{{ sortInfo[0]?.sortName }}</div>
							<div class="header-right">{{ `${sortInfo[0]?.sortCount}项` }}</div>
						</div>
						<div class="content-box">
							<div class="item">{{ sortInfo[0]?.sortMeasure }}</div>
							<div class="item">
								{{ sortInfo[0]?.sortDescription }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="home-main-center">
				<DivideHeader id="position1" class="divide-header" :titleText="'最新动态'"></DivideHeader>
				<div class="center-top">
					<div class="box1">
						<!-- <div class="box1-left" @click="handleSwithCurSurvey('left')">
							<img src="./assets/images/box1-left.png" alt="" />
						</div>
						<div class="box1-right" @click="handleSwithCurSurvey('right')">
							<img src="./assets/images/box1-right.png" alt="" />
						</div>
						<div class="box1-header">
							<div class="box1-header-left">
								<div class="icon">
									<img src="./assets/images/box1-header-icon.png" alt="" />
								</div>
								<div class="title">{{ "调查进展" }}</div>
							</div>
							<div class="box1-header-right" @click="handleClickToDetail()">
								{{ "查看详情 >" }}
							</div>
						</div>
						<el-carousel ref="carouselRef" height="395px" :autoplay="true" :interval="3000" arrow="never"
							indicator-position="none">
							<el-carousel-item v-for="(item, index) in box1DataList" :key="index">
								<div class="box1-main">
									<div class="box1-main-header">
										<div class="header-left">
											{{ item.SEARCHNAME }}
										</div>
										<div class="header-right">
											<div class="tag1">{{ item.SEARCHSORT }}</div>
											<div class="tag2" v-for="(val, idx) in item.searchArea" :key="idx">{{ val }}</div>
										</div>
									</div>
									<div class="info-box">
										<div class="info-header">
											<div class="icon"></div>
											<div class="time">{{ item.PROGRESSDATE }}</div>
											<div class="title">{{ item.PROGRESSRESULT }}</div>
										</div>
										<div class="info-content">
											{{ item.PROGRESSDETAILS }}
										</div>
									</div>
									<div class="list-box">
										<div class="list-item">
											<div class="icon"></div>
											<div class="list-left">{{ "调查案号：" }}</div>
											<div class="list-right">{{ item.SEARCHNUM }}</div>
										</div>
										<div class="list-item">
											<div class="icon"></div>
											<div class="list-left">{{ "涉及产品：" }}</div>
											<div class="list-right">
												{{ item.PRODUCT }}
											</div>
										</div>
										<div class="list-item">
											<div class="icon"></div>
											<div class="list-left">{{ "原告：" }}</div>
											<div class="list-right">
												{{ item.PLAINTIFF }}
											</div>
										</div>
										<div class="list-item">
											<div class="icon"></div>
											<div class="list-left">{{ "被告：" }}</div>
											<div class="list-right">
												{{ item.DEFENDANT }}
											</div>
										</div>
										<div class="list-item">
											<div class="icon"></div>
											<div class="list-left">{{ "涉案专利" }}</div>
											<div class="list-right">
												{{ item.PATENT }}
											</div>
										</div>
									</div>
								</div>
							</el-carousel-item>
						</el-carousel> -->
						<overviewMainBox title="调查进展" @toDetail="handleClickToDetail()">
							<template #headerIcon>
								<img style="width: 100%; height: 100%" src="./assets/images/box1-header-icon.png" alt="" />
							</template>
							<div class="box1-left" @click="handleSwithCurSurvey('left')">
								<img src="./assets/images/box1-left.png" alt="" />
							</div>
							<div class="box1-right" @click="handleSwithCurSurvey('right')">
								<img src="./assets/images/box1-right.png" alt="" />
							</div>
							<el-carousel ref="carouselRef" height="395px" :autoplay="true" :interval="3000" arrow="never"
								indicator-position="none">
								<el-carousel-item v-for="(item, index) in box1DataList" :key="index">
									<div class="box1-main">
										<div class="box1-main-header">
											<div class="header-left">
												{{ item.SEARCHNAME }}
											</div>
											<div class="header-right">
												<div class="tag1">{{ item.SEARCHSORT }}</div>
												<div class="tag2" v-for="(val, idx) in item.searchArea" :key="idx">{{ val }}</div>
											</div>
										</div>
										<div class="info-box">
											<div class="info-header">
												<div class="icon"></div>
												<div class="time">{{ item.PROGRESSDATE }}</div>
												<div class="title">{{ item.PROGRESSRESULT }}</div>
											</div>
											<div class="info-content">
												{{ item.PROGRESSDETAILS }}
											</div>
										</div>
										<div class="list-box">
											<div class="list-item">
												<div class="icon"></div>
												<div class="list-left">{{ "调查案号：" }}</div>
												<div class="list-right">{{ item.SEARCHNUM }}</div>
											</div>
											<div class="list-item">
												<div class="icon"></div>
												<div class="list-left">{{ "涉及产品：" }}</div>
												<div class="list-right">
													{{ item.PRODUCT }}
												</div>
											</div>
											<div class="list-item">
												<div class="icon"></div>
												<div class="list-left">{{ "原告：" }}</div>
												<div class="list-right">
													{{ item.PLAINTIFF }}
												</div>
											</div>
											<div class="list-item">
												<div class="icon"></div>
												<div class="list-left">{{ "被告：" }}</div>
												<div class="list-right">
													{{ item.DEFENDANT }}
												</div>
											</div>
											<div class="list-item">
												<div class="icon"></div>
												<div class="list-left">{{ "涉案专利" }}</div>
												<div class="list-right">
													{{ item.PATENT }}
												</div>
											</div>
										</div>
									</div>
								</el-carousel-item>
							</el-carousel>
						</overviewMainBox>
					</div>
					<RiskSignal :list="box2Data" @more-click="handleToMoreRiskSignal" postDate="signalTime" name="signalTitle"
						riskLevel="signalLevel" />
				</div>
				<DivideHeader id="position2" class="divide-header" :titleText="'资讯要闻'"></DivideHeader>
				<div class="center-center">
					<!-- <div class="box3">
						<div class="box3-header">
							<div class="box3-header-left">
								<div class="box3-header-icon">
									<img src="./assets/images/header-news.png" alt="" />
								</div>
								<div class="box3-header-title">{{ "新闻资讯" }}</div>
								<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
							</div>
						</div>
						<div class="box3-main">
							<div class="box3-item" v-for="(news, index) in newsList" :key="index" @click="handleToNewsAnalysis(news)">
								<div class="left">
									<img :src="news.newsImage ? news.newsImage : DefaultNewsIcon" alt="" />
								</div>
								<div class="right">
									<div class="right-top">
										<div class="title">{{ news.newsTitle }}</div>
										<div class="time">{{ news.newsDate + " · " + news.newsOrg }}</div>
									</div>
									<!-- <el-popover effect="dark" :width="1000" :content="news.newsContent" placement="top-start">
										<template #reference>
											<div class="right-footer">{{ news.newsContent }}</div>
										</template>
									</el-popover> --
									<div class="right-footer">{{ news.newsContent }}</div>
								</div>
							</div>
						</div>
					</div> -->
					<NewsList :newsList="newsList" @item-click="handleToNewsAnalysis" @more-click="handleToMoreNews"
						img="newsImage" title="newsTitle" content="newsContent" from="from" />
					<MessageBubble :messageList="messageList" @person-click="handleClickPerson" @more-click="handleToSocialDetail"
						source="orgName" content="remarks" name="personName" imageUrl="personImage">
					</MessageBubble>
					<!-- <div class="box4">
						<div class="box4-header">
							<div class="header-icon">
								<img src="./assets/images/header-message.png" alt="" />
							</div>
							<div class="header-title">{{ "社交媒体" }}</div>
						</div>
						<div class="box4-main">
							<MessageBubble v-for="(item, index) in messageList" @click="handleClickPerson(item)"
								@info-click="handleMediaClick(item)" :key="index"
								:avatar="item.personImage ? item.personImage : DefaultUserIcon" :name="item.personName"
								:time="item.time" :source="item.orgName" :content="item.remarks" />
							<!-- <div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
								<div class="left" @click="handleClickPerson(item)">
									<img :src="item.personImage ? item.personImage : DefaultUserIcon" alt="" />
								</div>
								<div class="right">
									<div class="right-top">
										<div class="name">{{ item.personName }}</div>
										<div class="time">{{ item.time + " · " + item.orgName }}</div>
									</div>
									<div class="content">{{ item.remarks }}</div>
								</div>
							</div> --
						</div>
					</div> -->
				</div>
				<DivideHeader id="position3" class="divide-header" :titleText="'数据总览'"></DivideHeader>
				<div class="center-footer">
					<div class="box5">
						<!-- <div class="box5-header">
							<div class="box5-header-left">
								<div class="box5-header-icon">
									<img src="./assets/images/box3-header-icon.png" alt="" />
								</div>
								<div class="box5-header-title">{{ "调查数量" }}</div>
							</div>
							<div class="box-header-right">
								<div class="icon">
									<img src="@/assets/images/icon/header-btn.png" alt="" />
								</div>
								<div class="text">{{ "数据来源：美国商务部" }}</div>
							</div>
						</div>
						<div class="box5-main">
							<div class="box5-main-chart" id="chart1"></div>
							<div class="box5-main-btn-box">
								<div class="right-box" :class="{ rightBoxActive: box5BtnActive === item.value }"
									v-for="(item, index) in box5BtnList" :key="index" @click="handleChangeBox5Btn(item.value)">
									{{ item.name }}
								</div>
							</div>
						</div> -->
						<OverviewNormalBox title="调查数量">
							<template #headerIcon>
								<img style="width: 100%; height: 100%;" src="./assets/images/box3-header-icon.png" alt="" />
							</template>
							<template #headerRight>
								<div class="box-header-right">
									<div class="icon">
										<img src="@/assets/images/icon/header-btn.png" alt="" />
									</div>
									<div class="text">{{ "数据来源：美国商务部" }}</div>
								</div>
							</template>
							<div class="box5-main">
								<div class="box5-main-chart" id="chart1"></div>
								<div class="box5-main-btn-box">
									<div class="right-box" :class="{ rightBoxActive: box5BtnActive === item.value }"
										v-for="(item, index) in box5BtnList" :key="index" @click="handleChangeBox5Btn(item.value)">
										{{ item.name }}
									</div>
								</div>
							</div>
						</OverviewNormalBox>
					</div>
					<div class="box6">
						<!-- <div class="box6-header">
							<div class="header-icon">
								<img src="./assets/images/box6-header-icon.png" alt="" />
							</div>
							<div class="header-title">{{ "制裁领域分布" }}</div>
							<div class="box-header-right">
								<div class="icon">
									<img src="@/assets/images/icon/header-btn.png" alt="" />
								</div>
								<div class="text">{{ "数据来源：美国商务部" }}</div>
							</div>
						</div>
						<div class="box6-main">
							<div class="box6-main-select-box">
								<el-select v-model="box6SelectedYear" @change="handleChangeBox6Year" placeholder="选择时间"
									style="width: 120px">
									<el-option v-for="item in box6YearList" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</div>
							<div class="box6-mian-chart" id="chart2"></div>
						</div> -->
						<OverviewNormalBox title="制裁领域分布" width="521px">
							<template #headerIcon>
								<img style="width: 100%; height: 100%;" src="./assets/images/box6-header-icon.png" alt="" />
							</template>
							<template #headerRight>
								<div class="box-header-right">
									<div class="icon">
										<img src="@/assets/images/icon/header-btn.png" alt="" />
									</div>
									<div class="text">{{ "数据来源：美国商务部" }}</div>
								</div>
							</template>
							<div class="box6-main">
								<div class="box6-main-select-box">
									<el-select v-model="box6SelectedYear" @change="handleChangeBox6Year" placeholder="选择时间"
										style="width: 120px">
										<el-option v-for="item in box6YearList" :key="item.value" :label="item.label" :value="item.value" />
									</el-select>
								</div>
								<div class="box6-mian-chart" id="chart2"></div>
							</div>
						</OverviewNormalBox>
					</div>
				</div>
				<div class="center-footer1">
					<div class="box7">
						<div class="box7-header">
							<div class="box7-header-left">
								<div class="box7-header-icon">
									<img src="./assets/images/box3-header-icon.png" alt="" />
								</div>
								<div class="box7-header-title">{{ "受调查国家分布" }}</div>
							</div>
							<div class="box-header-right">
								<div class="icon">
									<img src="@/assets/images/icon/header-btn.png" alt="" />
								</div>
								<div class="text">{{ "数据来源：美国商务部" }}</div>
							</div>
						</div>
						<div class="box7-main">
							<div class="box7-main-top">
								<el-select v-model="box7SelectedSurvey" @change="handleChangeBox7Survey" placeholder="选择调查"
									style="width: 120px">
									<el-option v-for="item in box7SurveyList" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
								<el-select v-model="box7SelectedYear" @change="handleChangeBox7Year" placeholder="选择时间"
									style="width: 120px">
									<el-option v-for="item in box7YearList" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</div>

							<el-empty v-if="box7Data.data.length === 0" description="暂无数据" :image-size="100" />
							<div v-if="box7Data.data.length > 0" class="box7-main-main" id="box7Chart"></div>
						</div>
					</div>
					<div class="box8">
						<div class="box8-header">
							<div class="box8-header-left">
								<div class="box8-header-icon">
									<img src="./assets/images/box6-header-icon.png" alt="" />
								</div>
								<div class="box8-header-title">{{ "调查结果分布" }}</div>
							</div>
							<div class="box-header-right">
								<el-select v-model="box8SelectedSurvey" @change="handleChangeBox8Survey" placeholder="选择调查"
									style="width: 120px">
									<el-option v-for="item in box8SurveyList" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</div>
						</div>
						<el-empty v-if="box8Data.length === 0" description="暂无数据" :image-size="100" />
						<div v-if="box8Data.length" class="box8-main" id="box8Chart"></div>
					</div>
				</div>
			</div>

			<div class="home-main-footer">
				<DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader>
				<div class="home-main-footer-header">
					<div class="btn-box">
						<div class="btn" :class="{ btnActive: activeCateId === cate.id }" v-for="(cate, index) in categoryList"
							:key="index" @click="handleClickCate(cate)">
							{{ cate.name }}
						</div>
					</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>
						<!-- <el-select v-model="releaseTime" placeholder="选择发布时间" style="width: 120px">
							<el-option
								v-for="item in releaseTimeList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select> -->
					</div>
				</div>
				<div class="home-main-footer-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 areaList" :key="area.id" v-model="checkedAreaList" :label="area.id"
										class="filter-checkbox" @change="handleChangeCheckedAreas">
										{{ area.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 insList" :key="area.id" v-model="checkedInsList" :label="area.id"
										class="filter-checkbox" @change="handleChangeCheckedIns">
										{{ area.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 countryList" :key="area.id" v-model="checkedCountryList" :label="area.id"
										class="filter-checkbox" @change="handleChangeCheckedCountry">
										{{ 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">{{ "市场准入限制调查" }}</div>
						</div>

						<div class="right-main">
							<el-empty v-if="surveyInfoList.length === 0" description="当前条件下暂无数据" :image-size="200" />
							<div v-else class="item" v-for="(item, index) in surveyInfoList" :key="index"
								@click="handleClickToSurveyDetail()">
								<div class="item-left">{{ item.SEARCHDATE }}</div>
								<div class="item-center">
									<div class="icon">
										<img :src='item.SORTIMAGEURL' 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"
											:class="{ tag1: item.SORTCODE === '337', tag2: item.SORTCODE === '301', tag3: item.SORTCODE === '232' }">
											{{ item.SORTCODE }}</div>
										<div class="title">{{ item.SEARCHNAME }}</div>
										<div class="status" v-if="item.CASESTATUS">
											<div class="status-icon"></div>
											<div class="status-text">{{ item.CASESTATUS }}</div>
										</div>
									</div>
									<div class="item-right-content" v-if="item.CONTENT">
										{{ item.CONTENT }}
									</div>
									<div class="item-right-footer">
										<div class="area-box" v-for="(val, idx) in item.searchArea" :key="idx">
											<div class="area">{{ val }}</div>
										</div>
										<div class="flag-box">
											<div class="flag" v-for="(vall, idxx) in item.countryImage" :key="idxx">
												<img :src="vall" 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>
		</div>
	</div>
</template>

<script setup>
import NewsList from "@/components/NewsList/NewsList.vue";
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue";
import { onMounted, ref } from "vue";
import setChart from "@/utils/setChart";
import scrollToTop from "@/utils/scrollToTop";
import router from "@/router";
import DivideHeader from "@/components/DivideHeader.vue";
import HeaderMenu from "@/components/headerMenu.vue";
import headerInfo from "@/components/headerInfo.vue";
import { getPersonSummaryInfo } from "@/api/common/index";
import getMultiLineChart from "./utils/multiLineChart";
import getPieChart from "./utils/piechart";
import getRadarChart from "./utils/radarChart";
import getMapChart from "./utils/mapChart";
// import getBarChart from "./utils/barChart";

import News1 from "./assets/images/news1.png";
import News2 from "./assets/images/news2.png";
import News3 from "./assets/images/news3.png";
import News4 from "./assets/images/news4.png";
import News5 from "./assets/images/news5.png";

import Img1 from "./assets/images/1.png";
import Img2 from "./assets/images/2.png";
import Img3 from "./assets/images/3.png";
import Img4 from "./assets/images/4.png";
import Img5 from "./assets/images/5.png";
import Img6 from "./assets/images/6.png";
import Img7 from "./assets/images/7.png";

import Message1 from "./assets/images/message-icon1.png";
import Message2 from "./assets/images/message-icon2.png";
import Message3 from "./assets/images/message-icon3.png";

import Logo1 from "./assets/images/logo1.png";
import Logo2 from "./assets/images/logo2.png";
import Logo3 from "./assets/images/logo3.png";
import Logo4 from "./assets/images/logo4.png";
import Logo5 from "./assets/images/logo5.png";
import {
	getStatSort,
	getStatNum,
	getStatDetails,
	getStatArea,
	getHylyList,
	getSurveyList,
	getSearchCountry,
	getSearchResult,
	getSearchAllOrg,
	getSearchAllCountry,
	getStatAreaCompanyList,
	getCompanyPlace
} from "@/api/marketAccessRestrictions/index";
import { getRiskSignal, getNews, getRemarks } from "@/api/common/index";
import { ElMessage } from "element-plus";

import getBarChart from "./utils/barChart1";

import DefaultUserIcon from "@/assets/icons/default-icon1.png";
import DefaultCompanyIcon from "@/assets/icons/default-icon2.png";
import DefaultNewsIcon from "@/assets/icons/default-icon-news.png";
import { reduce } from "lodash";
let containerRef = ref(null);
// 首页分类
const sortInfo = ref([{}]);
const handleGetStatSort = async () => {
	try {
		const res = await getStatSort();
		console.log("首页分类", res);
		sortInfo.value = res.data;
	} catch (error) { }
};

// 调查进展
const box1DataList = ref([]);
const handleGetBox1Data = async () => {
	try {
		const res = await getStatDetails();
		console.log("调查进展", res);
		if (res.code === 200 && res.data) {
			box1DataList.value = res.data;
		}
	} catch (error) { }
};

const carouselRef = ref(null);
// 点击查看详情
const handleClickToDetail = () => {
	let activeIndex = 0;
	if (carouselRef.value) {
		activeIndex = carouselRef.value.activeIndex;
	}

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

	const id = box1DataList.value[activeIndex].SEARCHSORT;
	window.sessionStorage.setItem("curTabName", id + "调查概览");

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

const handleClickCardToDetail = (id, name) => {
	window.sessionStorage.setItem("curTabName", name);
	const route = router.resolve({
		path: "/marketAccessLayout",
		query: {
			id: id
		}
	});
	window.open(route.href, "_blank");
};

// 切换当前调查
const handleSwithCurSurvey = name => {
	if (name === "left") {
		carouselRef.value.prev();
	} else {
		carouselRef.value.next();
	}
};

// 风险信号
const box2Data = ref([
	{
		title: "关于对中华人民共和国合成阿片类药物供应链...",
		time: "一天前",
		status: "特别重大"
	},
	{
		title: "关于调整汽车及汽车零部件进口的公告",
		time: "一天前",
		status: "特别重大"
	}
]);
const handleGetBox2Data = async () => {
	const params = {
		moduleId: "0104"
	};
	try {
		const res = await getRiskSignal(params);
		console.log("风险信号", res);
		if (res.code === 200 && res.data) {
			box2Data.value = res.data;
		}
	} catch (error) { }
};
// 点击风险信号条目，进入调查详情
const handleClickBox2Item = () => { };

// 新闻资讯
const newsList = ref([
	// {
	// 	img: News1,
	// 	title: "美政府停摆仍持续，拨款法案存缺陷，但两党磋商露曙光",
	// 	content: `美国政府停摆已持续34天，距离历史上最长的停摆纪录仅差一天，参议院已先后13次尝试...`,
	// 	from: "11-4 · 华盛顿邮报"
	// },
]);
// 获取新闻资讯列表
const handleGetBox3Data = async () => {
	const params = {
		moduleId: "0104"
	};
	try {
		const res = await getNews(params);
		console.log("新闻资讯", res);
		if (res.code === 200 && res.data) {
			newsList.value = res.data.map(item => {
				return {
					...item,
					from: item.newsDate + " · " + item.newsOrg
				};
			});
		}
	} catch (error) { }
};
// 点击新闻条目，跳转到新闻分析页
const handleToNewsAnalysis = news => {
	const route = router.resolve({
		path: "/newsAnalysis",
		query: {
			newsId: news.newsId
		}
	});
	window.open(route.href, "_blank");
};

// 社交媒体
const messageList = ref([]);

const handleGetBox4Data = async () => {
	const params = {
		moduleId: "0104"
	};
	try {
		const res = await getRemarks(params);
		console.log("社交媒体", res);
		if (res.code === 200 && res.data) {
			messageList.value = res.data;
			messageList.value.forEach(item => {
				item.time = item.time.replace('T', ' ')
			})
		}
	} catch (error) { }
};
// 查看社交媒体详情
const handleToSocialDetail = item => {
	const route = router.resolve({
		path: "/characterPage",
		query: {
			personId: item.id
		}
	});
	window.open(route.href, "_blank");
};
// 点击人物头像，跳转到人物主页
const handleClickPerson = async item => {
	console.log("person", item);
	const personTypeList = JSON.parse(window.sessionStorage.getItem("personTypeList"));
	console.log("personTypeList", personTypeList);
	let type;
	let personTypeName = "";
	const params = {
		personId: item.personId
	};
	try {
		const res = await getPersonSummaryInfo(params);
		console.log("人物全局信息", res);
		if (res.code === 200 && res.data) {
			const arr = personTypeList.filter(item => {
				return item.typeId === res.data.personType;
			});
			console.log("arr", arr);

			if (arr && arr.length > 0) {
				personTypeName = arr[0].typeName;
				console.log("personTypeName", personTypeName);

				if (personTypeName === "科技企业领袖") {
					type = 1;
				} else if (personTypeName === "国会议员") {
					type = 2;
				} else if (personTypeName === "智库研究人员") {
					type = 3;
				} else {
					personTypeName = "";
					ElMessage.warning("找不到当前人员的类型值！");
					return;
				}
				window.sessionStorage.setItem("curTabName", item.personName);
				const route = router.resolve({
					path: "/characterPage",
					query: {
						type: type, // type=1为科技企业领袖，2为国会议员，3为智库研究人员
						personId: item.personId
					}
				});
				window.open(route.href, "_blank");
			} else {
				personTypeName = "";
				ElMessage.warning("找不到当前人员的类型值！");
				return;
			}
		} else {
			ElMessage.warning("找不到当前人员的类型值！");
			return;
		}
	} catch (error) { }
};

// 调查数量
const box5BtnList = ref([
	{
		name: "按月度",
		value: 1
	},
	{
		name: "按年度",
		value: 12
	}
]);
const box5BtnActive = ref(1);
const handleChangeBox5Btn = val => {
	box5BtnActive.value = val;
	handleBox5();
};
function transformAllData(originalData) {
	// 1. 提取所有年份并去重，排除null和undefined，然后按数字升序排序
	const allYears = [
		...new Set(
			originalData.filter(item => item.searchYorM != null && item.searchYorM !== "").map(item => String(item.searchYorM))
		)
	].sort((a, b) => Number(a) - Number(b));

	// 2. 获取所有调查类型并去重
	const allCategories = [...new Set(originalData.map(item => item.sortName))];

	// 3. 为每个类别创建值数组
	const categoryData = allCategories.map(category => {
		// 对于每个年份，查找对应的数据
		const values = allYears.map(year => {
			// 查找匹配当前类别和年份的数据
			const matchingItem = originalData.find(item => item.sortName === category && String(item.searchYorM) === year);

			// 如果找到则返回searchCount，否则返回0
			return matchingItem ? matchingItem.searchCount : 0;
		});

		return {
			name: category,
			value: values
		};
	});

	// 4. 构建最终结果
	return {
		title: allYears,
		data: categoryData
	};
}

function transformAllData1(originalData) {
	// 1. 提取所有年月并去重，排除null和undefined，然后按时间顺序排序
	const allDates = [
		...new Set(
			originalData.filter(item => item.searchYorM != null && item.searchYorM !== "").map(item => String(item.searchYorM))
		)
	].sort((a, b) => {
		// 自定义排序函数，处理年月格式
		const parseDate = dateStr => {
			if (dateStr.includes("-")) {
				// 处理 "YYYY-MM" 格式
				const [year, month] = dateStr.split("-").map(Number);
				return { year, month: month || 0 };
			} else {
				// 处理纯年份格式
				return { year: Number(dateStr), month: 0 };
			}
		};

		const dateA = parseDate(a);
		const dateB = parseDate(b);

		// 先比较年份，再比较月份
		if (dateA.year !== dateB.year) {
			return dateA.year - dateB.year;
		}
		return dateA.month - dateB.month;
	});

	// 2. 获取所有调查类型并去重
	const allCategories = [...new Set(originalData.map(item => item.sortName))];

	// 3. 为每个类别创建值数组
	const categoryData = allCategories.map(category => {
		// 对于每个日期，查找对应的数据
		const values = allDates.map(date => {
			// 查找匹配当前类别和日期的数据
			const matchingItem = originalData.find(item => item.sortName === category && String(item.searchYorM) === date);

			// 如果找到则返回searchCount，否则返回0
			return matchingItem ? matchingItem.searchCount : 0;
		});

		return {
			name: category,
			value: values
		};
	});

	// 4. 构建最终结果
	return {
		title: allDates,
		data: categoryData
	};
}

const box5ChartData = ref({
	title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
	data: [
		{
			name: "337调查",
			value: [73, 32, 42, 48, 38, 49, 63, 75, 70, 86, 95, 87]
		},
		{
			name: "301调查",
			value: [8, 3, 2, 8, 9, 10, 12, 18, 16, 18, 20, 22]
		},
		{
			name: "232调查",
			value: [1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 2, 3]
		}
	]
});
const hadleGetStatNum = async () => {
	const params = {
		byYorM: box5BtnActive.value // 月度：1  年度：12
	};
	try {
		const res = await getStatNum(params);
		console.log("调查数量", res);
		if (res.code === 200 && res.data) {
			if (box5BtnActive.value === 1) {
				box5ChartData.value = transformAllData1(res.data);
			} else {
				box5ChartData.value = transformAllData(res.data);
			}
			console.log("box5ChartData", box5ChartData.value);
		}
	} catch (error) { }
};

const handleBox5 = async () => {
	await hadleGetStatNum();
	let chart1 = getMultiLineChart(box5ChartData.value);
	setChart(chart1, "chart1");
};

// 制裁领域分布
const box6SelectedYear = ref("2025");
const box6YearList = ref([
	{
		label: "2025",
		value: "2025"
	},
	{
		label: "2024",
		value: "2024"
	},
	{
		label: "2023",
		value: "2023"
	},
	{
		label: "2022",
		value: "2022"
	},
	{
		label: "2021",
		value: "2021"
	},
	{
		label: "2020",
		value: "2020"
	}
]);
const handleChangeBox6Year = () => {
	handleBox6();
};
const box6Data = ref({
	title: [],
	data: [
		{
			name: "337调查",
			value: []
		},
		{
			name: "232调查",
			value: []
		},
		{
			name: "301调查",
			value: []
		}
	],
	maxNum: 0
});
const handleGetStatArea = async () => {
	const params = {
		years: box6SelectedYear.value
	};
	try {
		const res = await getStatArea(params);
		console.log("制裁领域分布", res);
		if (res.code === 200 && res.data) {
			const arr = res.data.map(item => {
				return item.AREANAME;
			});
			box6Data.value.title = [...new Set(arr)];

			const arr1 = res.data.filter(item => {
				return item.SORTNAME === "337调查";
			});
			const arr1Name = arr1.map(item => {
				return item.AREANAME;
			});
			box6Data.value.title.forEach((item, index) => {
				if (arr1Name.indexOf(item) > -1) {
					const idx = arr1Name.indexOf(item);
					box6Data.value.data[0].value[index] = arr1[idx].AREACOUNT;
				} else {
					box6Data.value.data[0].value[index] = 0;
				}
			});

			const arr2 = res.data.filter(item => {
				return item.SORTNAME === "232调查";
			});
			const arr2Name = arr2.map(item => {
				return item.AREANAME;
			});
			box6Data.value.title.forEach((item, index) => {
				if (arr2Name.indexOf(item) > -1) {
					const idx = arr2Name.indexOf(item);
					box6Data.value.data[1].value[index] = arr2[idx].AREACOUNT;
				} else {
					box6Data.value.data[1].value[index] = 0;
				}
			});

			const arr3 = res.data.filter(item => {
				return item.SORTNAME === "301调查";
			});
			const arr3Name = arr3.map(item => {
				return item.AREANAME;
			});
			box6Data.value.title.forEach((item, index) => {
				if (arr3Name.indexOf(item) > -1) {
					const idx = arr3Name.indexOf(item);
					box6Data.value.data[2].value[index] = arr3[idx].AREACOUNT;
				} else {
					box6Data.value.data[2].value[index] = 0;
				}
			});

			const numArr = res.data.map(item => {
				return item.AREACOUNT;
			});

			box6Data.value.maxNum = Math.max(...numArr);
		}
	} catch (error) { }
};
const handleBox6 = async () => {
	await handleGetStatArea();
	let chart2 = getRadarChart(box6Data.value);
	setChart(chart2, "chart2");
};

// 受调查国家分布
const box7SurveyList = ref([
	{
		label: "337调查",
		value: "337"
	},
	{
		label: "301调查",
		value: "301"
	},
	{
		label: "232调查",
		value: "232"
	}
]);
const box7SelectedSurvey = ref("337");

const box7YearList = ref([
	{
		label: "2025",
		value: "2025"
	},
	{
		label: "2024",
		value: "2024"
	},
	{
		label: "2023",
		value: "2023"
	},
	{
		label: "2022",
		value: "2022"
	},
	{
		label: "2021",
		value: "2021"
	},
	{
		label: "2020",
		value: "2020"
	}
]);
const box7SelectedYear = ref("2025");

const handleChangeBox7Survey = () => {
	handleBox7();
};
const handleChangeBox7Year = () => {
	handleBox7();
};
const box7Data = ref({
	title: [
		// {
		// 	img: Img1,
		// 	name: "中国"
		// },
		// {
		// 	img: Img2,
		// 	name: "俄罗斯"
		// },
		// {
		// 	img: Img3,
		// 	name: "巴西"
		// },
		// {
		// 	img: Img4,
		// 	name: "巴基斯坦"
		// },
		// {
		// 	img: Img5,
		// 	name: "印度"
		// },
		// {
		// 	img: Img6,
		// 	name: "日本"
		// },
		// {
		// 	img: Img7,
		// 	name: "德国"
		// }
	],
	data: []
});

const handleGetBox7Data = async () => {
	const params = {
		sortCode: box7SelectedSurvey.value,
		year: box7SelectedYear.value
	};
	try {
		const res = await getSearchCountry(params);
		console.log("受调查国家分布", res);
		if (res.code === 200 && res.data) {
			box7Data.value.title = res.data.map(item => {
				return {
					name: item.COUNTRY,
					img: item.COUNTRYIMAGE ? item.COUNTRYIMAGE : Img1
				};
			});
			box7Data.value.data = res.data.map(item => {
				return item.NUM;
			});
		}
	} catch (error) {
		console.error("受调查国家分布error", error);
	}
};

const handleBox7 = async () => {
	await handleGetBox7Data();
	const box7Chart = getBarChart(box7Data.value.title, box7Data.value.data);
	setChart(box7Chart, "box7Chart");
};

const box8SurveyList = ref([
	{
		label: "337调查",
		value: "337"
	},
	{
		label: "301调查",
		value: "301"
	},
	{
		label: "232调查",
		value: "232"
	}
]);
const box8SelectedSurvey = ref("337");
// 调查结果分布
const box8Data = ref([
	// {
	// 	name: "和解/同意令",
	// 	value: 50
	// },
	// {
	// 	name: "裁定不侵权",
	// 	value: 46
	// },
	// {
	// 	name: "裁定侵权",
	// 	value: 40
	// },
	// {
	// 	name: "申诉方撤诉",
	// 	value: 31
	// },
	// {
	// 	name: "其他",
	// 	value: 24
	// }
]);
const handleGetBox8Data = async () => {
	const params = {
		// searchId: '',
		sortCode: box8SelectedSurvey.value
	};
	try {
		const res = await getSearchResult(params);
		console.log("调查结果分布", res);
		if (res.code === 200 && res.data) {
			box8Data.value = res.data.map(item => {
				return {
					name: item.RESULTNAME,
					value: item.RESULTNUM
				}
			})
		} else {
			box8Data.value = []
		}


	} catch (error) {
		console.error(error);
	}
};

const handleBox8 = async () => {
	await handleGetBox8Data()
	const box8Chart = getPieChart(box8Data.value);
	setChart(box8Chart, "box8Chart");
}

const handleChangeBox8Survey = () => {
	handleBox8();
};

// 资源库
const pageSize = ref(10);
const currentPage = ref(1);
const totalDiscussNum = ref(0);
const handleCurrentChange = page => {
	currentPage.value = page;
	handleGetSurveyList();
};

const categoryList = ref([
	{
		name: "全部调查",
		id: ""
	},
	{
		name: "301调查",
		id: "301"
	},
	{
		name: "232调查",
		id: "232"
	},
	{
		name: "337调查",
		id: "337"
	}
]);

const activeCateId = ref("");

const handleClickCate = cate => {
	activeCateId.value = cate.id;
	handleGetInsList()
	handleGetSurveyList();
};
const isSort = ref(true); // true 升序  false 倒序
const handleSwithSort = () => {
	isSort.value = !isSort.value;
};

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([]);
const handleChangeCheckedSurveyYears = () => {
	handleGetSurveyList();
};

const areaList = ref([
]);
const checkedAreaList = ref([]);
const handleGetAreaList = async () => {
	try {
		const res = await getHylyList();
		console.log("行业领域列表", res);
		if (res.code === 200 && res.data) {
			areaList.value = res.data.map(item => {
				return {
					name: item.name,
					id: item.id
				};
			});
			console.log("areaList", areaList.value);
		}
	} catch (error) { }
};

const handleChangeCheckedAreas = () => {
	// console.log(checkedAreaList.value);
	handleGetSurveyList();
};

// 发布机构
const insList = ref([
	{
		name: "商务部",
		id: "54"
	},
	{
		name: "国际贸易委员会",
		id: "262"
	},
	{
		name: "贸易代表办公室",
		id: "491"
	}
]);
const checkedInsList = ref([]);
const handleGetInsList = async () => {
	// const params = {
	// 	sortCode: activeCateId.value
	// }
	try {
		const res = await getSearchAllOrg()
		console.log('发布机构', res);
		if (res.code === 200 && res.data) {
			insList.value = res.data.map(item => {
				return {
					name: item.ORGNAME,
					id: item.ORGID
				}
			})
			// checkedInsList.value = [insList.value[0].id]
		}

	} catch (error) {

	}
}


const handleChangeCheckedIns = () => {
	// console.log(checkedAreaList.value);
	handleGetSurveyList();
};

// 受调查国家/地区
const countryList = ref([
	{
		name: "中国",
		id: "0101"
	},
	{
		name: "俄罗斯",
		id: "俄罗斯"
	},
	{
		name: "日本",
		id: "日本"
	},
	{
		name: "韩国",
		id: "韩国"
	}
]);
const checkedCountryList = ref([]);
const handleGetAllSearchCountry = async () => {

	try {
		const res = await getSearchAllCountry()
		console.log('受调查国家/地区', res);
		if (res.code && res.data) {
			countryList.value = res.data.map(item => {
				return {
					name: item.COUNTRYNAME,
					id: item.COUNTRYID
				}
			})
			// checkedCountryList.value = [countryList.value[0].id]
		}

	} catch (error) {

	}
}
handleGetAllSearchCountry()
const handleChangeCheckedCountry = () => {
	// console.log(checkedAreaList.value);
	handleGetSurveyList();
};

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 handleGetSurveyList = async () => {
	const params = {
		currentPage: currentPage.value - 1,
		pageSize: pageSize.value,
		sortCode: activeCateId.value,
		publishYear: checkedSurveyYears.value.toString(),
		Area: checkedAreaList.value.toString(),
		publishOrg: checkedInsList.value.toString(),
		searchCountry: checkedCountryList.value.toString(),
		sortField: "date",
		sortOrder: isSort.value ? "asc" : "desc"
	};
	try {
		const res = await getSurveyList(params);
		console.log("调查列表", res);
		if (res.code === 200 && res.data) {
			totalDiscussNum.value = res.data.totalElements;
			surveyInfoList.value = res.data.content;
		} else {
			surveyInfoList.value = [];
		}
	} catch (error) { }
};

const handleClickToSurveyDetail = id => {
	const route = router.resolve({
		path: "/marketAccessLayout",
		query: {
			id: 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");
};

onMounted(async () => {
	handleGetBox1Data();
	handleGetStatSort();
	handleGetBox2Data();
	handleGetBox3Data();
	handleGetBox4Data();
	handleBox5();
	handleBox6();
	handleBox7();
	handleBox8();
	await handleGetInsList()
	await handleGetAreaList();
	handleGetSurveyList();
});
</script>

<style lang="scss" scoped>
:deep(.el-input__wrapper) {
	box-shadow: none;
}

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

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

		.home-top-bg {
			background:
				url("./assets/images/background.png"),
				linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
			background-size: 100% 100%;
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: -100;
			top: -64px;
		}

		.home-main-header {
			display: flex;
			flex-direction: column;
			align-items: center;

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

			.home-main-header-footer {
				margin-top: 38px;
				width: 688px;
				height: 64px;
				box-sizing: border-box;
				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-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-header-card-box {
				width: 1600px;
				margin: 0 auto;
				height: 142px;
				margin-top: 64px;
				display: flex;
				justify-content: space-between;

				.card {
					transition: transform 0.3s ease, box-shadow 0.3s ease;

					&:hover {
						transform: translateY(-3px);
						box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
					}
				}

				.home-main-header-card-box-box1 {
					width: 520px;
					height: 142px;
					background: #fff;
					border-radius: 10px;
					box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
					position: relative;
					cursor: pointer;

					&::before {
						content: "";
						position: absolute;
						z-index: 99;
						left: 0;
						top: 15px;
						width: 4px;
						height: 111px;
						background: rgba(250, 140, 22, 1);
					}

					.header {
						height: 56px;
						display: flex;
						justify-content: space-between;

						.header-left {
							margin-left: 30px;
							margin-top: 26px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 26px;
						}

						.header-right {
							margin-top: 28px;
							margin-right: 35px;
							height: 24px;
							color: rgba(250, 140, 22, 1);
							font-family: Microsoft YaHei;
							font-size: 30px;
							font-weight: 700;
							line-height: 24px;
						}
					}

					.content-box {
						margin-left: 30px;

						.item {
							width: 485px;
							height: 24px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							margin-top: 8px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}

				.home-main-header-card-box-box2 {
					width: 520px;
					height: 142px;
					background: #fff;
					border-radius: 10px;
					box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
					position: relative;
					cursor: pointer;

					// &:hover {
					// 	margin-top: -2px;
					// }
					&::before {
						content: "";
						position: absolute;
						z-index: 99;
						left: 0;
						top: 15px;
						width: 4px;
						height: 111px;
						background: rgba(114, 46, 209, 1);
					}

					.header {
						height: 56px;
						display: flex;
						justify-content: space-between;

						.header-left {
							margin-left: 30px;
							margin-top: 26px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 26px;
						}

						.header-right {
							margin-top: 28px;
							margin-right: 35px;
							height: 24px;
							color: rgba(114, 46, 209, 1);
							font-family: Microsoft YaHei;
							font-size: 30px;
							font-weight: 700;
							line-height: 24px;
						}
					}

					.content-box {
						margin-left: 30px;

						.item {
							width: 485px;
							height: 24px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							margin-top: 8px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}

				.home-main-header-card-box-box3 {
					width: 520px;
					height: 142px;
					background: #fff;
					border-radius: 10px;
					box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
					position: relative;
					cursor: pointer;

					// &:hover {
					// 	margin-top: -3px;
					// 	box-shadow: 0 0 5px 5px rgba(10, 87, 166, 0.1);
					// }
					&::before {
						content: "";
						position: absolute;
						z-index: 99;
						left: 0;
						top: 15px;
						width: 4px;
						height: 111px;
						background: var(--color-main-active);
					}

					.header {
						height: 56px;
						display: flex;
						justify-content: space-between;

						.header-left {
							margin-left: 30px;
							margin-top: 26px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 26px;
						}

						.header-right {
							margin-top: 28px;
							margin-right: 35px;
							height: 24px;
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 30px;
							font-weight: 700;
							line-height: 24px;
						}
					}

					.content-box {
						margin-left: 30px;

						.item {
							width: 485px;
							height: 24px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							margin-top: 8px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}

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

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

				.box1 {
					width: 1064px;
					height: 450px;
					// border-radius: 10px;
					// box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
					// background: #fff;
					// box-sizing: border-box;
					// position: relative;

					.box1-left {
						position: absolute;
						left: 0;
						z-index: 9999;
						top: 220px;
						width: 24px;
						height: 48px;
						cursor: pointer;

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

					.box1-right {
						position: absolute;
						right: 0;
						top: 220px;
						z-index: 9999;
						width: 24px;
						height: 48px;
						cursor: pointer;

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

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

						.box1-header-left {
							display: flex;

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

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

							.title {
								width: 112px;
								height: 48px;
								margin-left: 19px;
								color: #fff;
								background: var(--color-main-active);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 48px;
								text-align: center;
							}
						}

						.box1-header-right {
							margin-top: 19px;
							margin-right: 40px;
							height: 16px;
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 16px;
							cursor: pointer;
						}
					}

					.box1-main {
						width: 1064px;
						height: 354px;
						margin-top: 22px;
						margin-left: 31px;

						.box1-main-header {
							width: 990px;
							height: 54px;
							display: flex;
							justify-content: space-between;

							.header-left {
								padding-left: 22px;
								color: var(--color-main-active);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
							}

							.header-right {
								display: flex;
								width: 300px;
								justify-content: flex-end;
								flex-wrap: wrap;

								.tag1 {
									height: 24px;
									line-height: 24px;
									padding: 0 8px;
									box-sizing: border-box;
									color: var(--color-main-active);
									border: 1px solid rgba(145, 202, 255, 1);
									border-radius: 4px;
									background: rgba(230, 244, 255, 1);
								}

								.tag2 {
									margin-left: 8px;
									height: 24px;
									line-height: 24px;
									padding: 0 8px;
									box-sizing: border-box;
									color: rgba(19, 168, 168, 1);
									border: 1px solid rgba(135, 232, 222, 1);
									border-radius: 4px;
									background: rgba(230, 255, 251, 1);
								}
							}
						}

						.info-box {
							margin-left: 6px;
							width: 989px;
							height: 108px;
							box-sizing: border-box;
							border: 1px solid rgba(231, 243, 255, 1);
							border-radius: 4px;
							background: rgba(246, 250, 255, 1);

							.info-header {
								height: 38px;
								display: flex;

								.icon {
									width: 4px;
									height: 4px;
									border-radius: 2px;
									background: rgba(59, 65, 75, 1);
									margin-left: 24px;
									margin-top: 20px;
								}

								.time {
									width: 98px;
									height: 24px;
									margin-top: 10px;
									margin-left: 12px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 700;
									line-height: 24px;
								}

								.title {
									width: 200px;
									margin-left: 11px;
									margin-top: 10px;
									height: 24px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 700;
									line-height: 24px;
								}
							}

							.info-content {
								width: 909px;
								height: 60px;
								overflow: hidden;
								overflow-y: auto;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								margin-left: 41px;
								margin-top: 4px;
							}
						}

						.list-box {
							margin-top: 18px;
							margin-left: 28px;
							width: 940px;
							height: 185px;
							overflow: hidden;
							overflow-y: auto;

							.list-item {
								min-height: 37px;
								display: flex;

								.icon {
									width: 4px;
									height: 4px;
									border-radius: 2px;
									background: rgba(59, 65, 75, 1);
									margin-top: 16px;
								}

								.list-left {
									margin-left: 18px;
									line-height: 37px;
									width: 100px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 700;
								}

								.list-right {
									line-height: 37px;
									margin-left: 17px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
								}
							}
						}
					}
				}

				.box2 {
					width: 521px;
					height: 450px;
					border-radius: 10px;
					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
					background: rgba(255, 255, 255, 1);
					position: relative;

					.box2-header {
						height: 48px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;

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

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

						.title {
							display: flex;
							width: 148px;
							height: 48px;
							background: rgba(206, 79, 81, 1);
							margin-left: 25px;

							.text {
								margin-left: 16px;
								margin-top: 11px;
								height: 26px;
								color: #fff;
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
							}

							.num {
								width: 24px;
								height: 20px;
								line-height: 20px;
								text-align: center;
								color: rgba(255, 255, 255, 1);
								font-family: Microsoft YaHei;
								font-size: 12px;
								margin-left: 15px;
								margin-top: 15px;
								border-radius: 100px;
								background: rgba(255, 255, 255, 0.3);
							}
						}

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

					.box2-main {
						margin-top: 2px;
						height: 330px;
						overflow-y: auto;

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

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

							.itemLeftStatus3 {
								background: rgba(255, 241, 240) !important;
								color: rgba(245, 34, 45, 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;
								color: rgba(82, 196, 26, 1);
								background: rgba(246, 255, 237, 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-bottom: 1px solid rgba(240, 242, 244, 1);
								display: flex;

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

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

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

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

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

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

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

				.box3 {
					width: 792px;
					height: 450px;
					border-radius: 10px;
					box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
					background: rgba(255, 255, 255, 1);

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

						.box3-header-left {
							display: flex;

							.box3-header-icon {
								margin-top: 16px;
								margin-left: 21px;
								width: 19px;
								height: 19px;

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

							.box3-header-title {
								margin-top: 11px;
								margin-left: 20px;
								height: 26px;
								color: var(--color-main-active);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
							}

							.more {
								width: 49px;
								height: 24px;
								position: absolute;
								top: 14px;
								right: 27px;
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								cursor: pointer;
							}
						}
					}

					.box3-main {
						height: 402px;
						overflow-y: auto;
						overflow-x: hidden;
						padding-top: 6px;

						.box3-item {
							display: flex;
							height: 77px;
							width: 749px;
							margin-left: 21px;
							border-bottom: 1px solid rgba(240, 242, 244, 1);
							cursor: pointer;

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

							.left {
								width: 72px;
								height: 48px;
								margin-top: 15px;

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

							.right {
								width: 657px;
								margin-left: 20px;

								.right-top {
									width: 657px;
									display: flex;
									justify-content: space-between;

									.title {
										margin-top: 13px;
										width: 470px;
										height: 24px;
										color: rgba(59, 65, 75, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 700;
										line-height: 24px;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}

									.time {
										width: 187px;
										text-align: right;
										height: 22px;
										margin-top: 15px;
										color: rgba(95, 101, 108, 1);
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										line-height: 22px;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
								}

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

				.box4 {
					margin-left: 20px;
					width: 792px;
					height: 450px;
					border-radius: 10px;
					box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
					background: rgba(255, 255, 255, 1);

					.box4-header {
						width: 792px;
						height: 48px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;
						box-sizing: border-box;
						position: relative;

						.header-icon {
							margin-top: 17px;
							margin-left: 21px;
							width: 19px;
							height: 18px;

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

						.header-title {
							margin-top: 11px;
							margin-left: 20px;
							height: 26px;
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 26px;
						}

						.more {
							width: 49px;
							height: 24px;
							position: absolute;
							top: 14px;
							right: 27px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							cursor: pointer;
						}
					}

					.box4-main {
						height: 402px;
						overflow: hidden;
						overflow-y: auto;
						box-sizing: border-box;
						padding-top: 8px;
						padding-left: 31px;
						// .box4-main-item {
						// 	margin-top: 16px;
						// 	display: flex;
						// 	margin-left: 21px;
						// 	.left {
						// 		margin-top: 5px;
						// 		width: 36px;
						// 		height: 36px;
						// 		border-radius: 18px;
						// 		overflow: hidden;
						// 		cursor: pointer;
						// 		img {
						// 			width: 100%;
						// 			height: 100%;
						// 		}
						// 	}
						// 	.right {
						// 		margin-left: 10px;
						// 		width: 690px;
						// 		box-sizing: border-box;
						// 		border: 1px solid rgba(231, 243, 255, 1);
						// 		background: rgba(246, 250, 255, 1);
						// 		padding: 10px 15px;
						// 		.right-top {
						// 			display: flex;
						// 			justify-content: space-between;
						// 			.name {
						// 				height: 24px;
						// 				color: rgba(59, 65, 75, 1);
						// 				font-family: Microsoft YaHei;
						// 				font-size: 16px;
						// 				font-weight: 700;
						// 				line-height: 24px;
						// 			}
						// 			.time {
						// 				height: 30px;
						// 				color: rgba(95, 101, 108, 1);
						// 				font-family: Microsoft YaHei;
						// 				font-size: 16px;
						// 				font-weight: 400;
						// 				line-height: 30px;
						// 			}
						// 		}
						// 		.content {
						// 			color: rgba(59, 65, 75, 1);
						// 			font-family: Microsoft YaHei;
						// 			font-size: 16px;
						// 			font-weight: 400;
						// 			line-height: 24px;
						// 		}
						// 	}
						// }
					}
				}
			}

			.center-footer {
				margin-top: 21px;
				height: 460px;
				display: flex;
				justify-content: center;
				gap: 15px;

				.box5 {
					width: 1064px;
					height: 460px;
					// box-sizing: border-box;
					// border: 1px solid rgba(234, 236, 238, 1);
					// border-radius: 10px;
					// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					// background: rgba(255, 255, 255, 1);

					.box-header-right {
						height: 48px;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						gap: 8px;

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

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

						.text {
							height: 24px;
							color: rgba(132, 136, 142, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: left;
						}
					}

					.box5-header {
						height: 48px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						position: relative;

						.box5-header-left {
							display: flex;

							.box5-header-icon {
								margin-top: 16px;
								margin-left: 22px;
								width: 19px;
								height: 19px;

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

							.box5-header-title {
								margin-top: 11px;
								margin-left: 19px;
								height: 26px;
								color: var(--color-main-active);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
							}
						}


					}

					.box5-main {
						height: 397px;
						position: relative;
						z-index: 0;

						.box5-main-chart {
							height: 397px;
						}

						.box5-main-btn-box {
							z-index: 99;
							position: absolute;
							top: 10px;
							right: 5%;
							display: flex;
							justify-content: flex-end;
							gap: 8px;
							width: 178px;
							height: 28px;

							.right-box {
								height: 28px;
								padding: 0 8px;
								text-align: center;
								box-sizing: border-box;
								border: 1px solid rgba(230, 231, 232, 1);
								border-radius: 4px;
								background: rgba(255, 255, 255, 1);
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 28px;
								cursor: pointer;
							}

							.rightBoxActive {
								color: var(--color-main-active);
								border: 1px solid var(--color-main-active);
								border-radius: 4px;
								background: rgba(231, 243, 255, 1);
							}
						}
					}
				}

				.box6 {
					width: 521px;
					height: 460px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 1);

					.box-header-right {
						height: 48px;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						gap: 8px;

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

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

						.text {
							height: 24px;
							color: rgba(132, 136, 142, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: left;
						}
					}

					.box6-header {
						width: 521px;
						height: 48px;
						box-sizing: border-box;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;
						position: relative;

						.header-icon {
							margin-left: 20px;
							margin-top: 15px;
							width: 19px;
							height: 19px;

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

						.header-title {
							margin-top: 11px;
							margin-left: 15px;
							height: 26px;
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 26px;
						}

						.box-header-right {
							position: absolute;
							height: 24px;
							top: 12px;
							right: 17px;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							gap: 8px;

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

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

							.text {
								height: 24px;
								color: rgba(132, 136, 142, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: left;
							}
						}
					}

					.box6-main {
						height: 360px;
						position: relative;

						.box6-main-select-box {
							position: absolute;
							z-index: 100;
							top: 10px;
							right: 20px;
						}

						.box6-mian-chart {
							height: 360px;
							position: relative;
							z-index: 99;
						}
					}
				}
			}

			.center-footer1 {
				margin-top: 16px;
				display: flex;
				justify-content: center;
				gap: 15px;

				.box7 {
					width: 1064px;
					height: 460px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 1);

					.box7-header {
						height: 48px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						position: relative;

						.box7-header-left {
							display: flex;

							.box7-header-icon {
								margin-top: 16px;
								margin-left: 22px;
								width: 19px;
								height: 19px;

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

							.box7-header-title {
								margin-top: 11px;
								margin-left: 19px;
								height: 26px;
								color: var(--color-main-active);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
							}
						}

						.box-header-right {
							position: absolute;
							height: 24px;
							top: 12px;
							right: 17px;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							gap: 8px;

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

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

							.text {
								height: 24px;
								color: rgba(132, 136, 142, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: left;
							}
						}
					}

					.box7-main {
						height: 412px;

						.box7-main-top {
							height: 40px;
							display: flex;
							justify-content: flex-end;
							margin-right: 22px;
							box-sizing: border-box;
							padding-top: 12px;
							gap: 12px;
						}

						.box7-main-main {
							height: 372px;
						}
					}
				}

				.box8 {
					width: 521px;
					height: 460px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 1);

					.box8-header {
						height: 48px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						position: relative;

						.box8-header-left {
							display: flex;

							.box8-header-icon {
								margin-top: 15px;
								margin-left: 20px;
								width: 20px;
								height: 20px;

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

							.box8-header-title {
								margin-top: 11px;
								margin-left: 20px;
								height: 26px;
								color: var(--color-main-active);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
							}
						}

						.box-header-right {
							position: absolute;
							height: 24px;
							top: 12px;
							right: 17px;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							gap: 8px;

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

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

							.text {
								height: 24px;
								color: rgba(132, 136, 142, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: left;
							}
						}
					}

					.box8-main {
						height: 360px;
					}
				}
			}
		}

		.home-main-footer {
			// width: 100%;
			// height: 1149px;
			padding-bottom: 20px;
			background: rgba(248, 249, 250, 1);
			overflow: hidden;

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

				.btn-box {
					width: 1000px;
					display: flex;

					.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);
						margin-right: 20px;
						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;

					.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%;
							}
						}
					}
				}
			}

			.home-main-footer-main {
				width: 1600px;
				margin-bottom: 20px;
				// height: 985px;
				margin: 0 auto;
				box-sizing: border-box;
				// padding: 20px;
				display: flex;

				.left {
					width: 360px;
					// height: 700px;
					padding-bottom: 20px;
					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: 220px;
						.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;
							padding-left: 20px;
						}
					}

					.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;
							padding-left: 20px;
						}
					}
				}

				.right {
					margin-left: 16px;
					width: 1224px;
					// min-height: 700px;
					border-radius: 10px;
					box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
					background: rgba(255, 255, 255, 1);
					overflow: hidden;

					.right-header {
						height: 48px;
						display: flex;
						align-items: center;
						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;
						// min-height: 586px;
						height: calc(100% - 108px);
						max-height: 1540px;
						border-bottom: 1px solid rgba(230, 231, 232, 1);

						// height: 780px;
						.item {
							// height: 154px;
							min-height: 94px;
							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: 20px;
							}

							.item-center {
								width: 30px;

								// height: 154px;
								.icon {
									width: 30px;
									height: 30px;
									border-radius: 15px;

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

								.line {
									margin-left: 14px;
									width: 2px;
									min-height: 64px;
									max-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;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}

									.status {
										margin-left: 9px;
										display: flex;
										width: 76px;
										height: 24px;
										justify-content: flex-end;
										gap: 5px;
										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;
										position: relative;

										.flag {
											width: 24px;
											height: 24px;
											border-radius: 12px;
											border: 2px solid #fff;
											overflow: hidden;
											position: absolute;

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

										:nth-child(1) {
											left: 18px;
											z-index: 99;
										}
									}
								}
							}
						}
					}

					.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;
						}
					}
				}
			}
		}
	}
}

.divide-header {
	margin: 0 auto;
	margin-top: 52px;
	margin-bottom: 36px;
}

: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;
}

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