<template>
	<div class="industrial-impact">
		<div class="main">
			<div class="left">
				<div class="title-com">
					<div class="box"></div>
					<div class="text">制裁企业列表</div>
					<div class="right-group">
						<div class="btn">
							<img src="../../../../assets/数据库按钮.png" alt="" />
							<img src="../../../../assets/下载按钮.png" alt="" />
							<img src="../../../../assets/收藏按钮.png" alt="" />
						</div>
					</div>
				</div>
				<div class="left-main">
					<div class="top-bar">
						<el-select v-model="selectedDomain" class="domain-select" placeholder="Select">
							<el-option label="全部领域" value="全部领域" />
						</el-select>
						<el-input v-model="searchKeyword" class="search-input" placeholder="搜索实体" :suffix-icon="Search" />
					</div>
					<div class="company-list-container">
						<div class="list-header">企业名称</div>
						<div class="company-list">
							<div
								class="company-item"
								:class="{ active: selectedCompanyId === item.id }"
								v-for="item in companyList"
								:key="item.id"
								@click="selectedCompanyId = item.id"
							>
								<div class="icon-wrapper">
									<img :src="defaultTitle" alt="" />
								</div>
								<div class="company-name">{{ item.name }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="right">
				<div class="right-item">
					<div class="title-com">
						<div class="box"></div>
						<div class="text">企业规模</div>
						<div class="right-group">
							<div class="toggle-btns">
								<div
									class="t-btn"
									:class="{ active: activeScale === item }"
									v-for="item in scaleOptions"
									:key="item"
									@click="activeScale = item"
								>
									{{ item }}
								</div>
							</div>
							<div class="btn">
								<img src="../../../../assets/数据库按钮.png" alt="" />
								<img src="../../../../assets/下载按钮.png" alt="" />
								<img src="../../../../assets/收藏按钮.png" alt="" />
							</div>
						</div>
					</div>
					<div class="right-main">
						<div class="echarts" ref="chartRef"></div>
						<div class="bottom">
							<img :src="ai" class="ai-icon" alt="" />
							<span class="text">列入实体清单后企业营收初期下降，后基本趋于稳定。</span>
							<img :src="right" class="right-icon" alt="" />
						</div>
					</div>
				</div>
				<div class="right-item">
					<div class="title-com">
						<div class="box"></div>
						<div class="text">企业市值变化</div>
						<div class="right-group">
							<div class="btn">
								<img src="../../../../assets/数据库按钮.png" alt="" />
								<img src="../../../../assets/下载按钮.png" alt="" />
								<img src="../../../../assets/收藏按钮.png" alt="" />
							</div>
						</div>
					</div>
					<div class="right-main">
						<div class="echarts" ref="marketChartRef"></div>
						<div class="bottom">
							<img :src="ai" class="ai-icon" alt="" />
							<span class="text">列入实体清单后企业营收初期下降，后基本趋于稳定。</span>
							<img :src="right" class="right-icon" alt="" />
						</div>
					</div>
				</div>
				<div class="right-item">
					<div class="title-com">
						<div class="box"></div>
						<div class="text">企业研发投入</div>
						<div class="right-group">
							<div class="toggle-btns">
								<div
									class="t-btn"
									:class="{ active: activeRD === item }"
									v-for="item in rdOptions"
									:key="item"
									@click="activeRD = item"
								>
									{{ item }}
								</div>
							</div>
							<div class="btn">
								<img src="../../../../assets/数据库按钮.png" alt="" />
								<img src="../../../../assets/下载按钮.png" alt="" />
								<img src="../../../../assets/收藏按钮.png" alt="" />
							</div>
						</div>
					</div>
					<div class="right-main">
						<div class="echarts" ref="rdChartRef"></div>
						<div class="bottom">
							<img :src="ai" class="ai-icon" alt="" />
							<span class="text">列入实体清单后企业研发资金投入逐渐提高。</span>
							<img :src="right" class="right-icon" alt="" />
						</div>
					</div>
				</div>
				<div class="right-item">
					<div class="title-com">
						<div class="box"></div>
						<div class="text">企业市场占比</div>
						<div class="right-group">
							<div class="toggle-btns">
								<div
									class="t-btn"
									:class="{ active: activeMarketShare === item }"
									v-for="item in marketShareOptions"
									:key="item"
									@click="activeMarketShare = item"
								>
									{{ item }}
								</div>
							</div>
							<div class="btn">
								<img src="../../../../assets/数据库按钮.png" alt="" />
								<img src="../../../../assets/下载按钮.png" alt="" />
								<img src="../../../../assets/收藏按钮.png" alt="" />
							</div>
						</div>
					</div>
					<div class="right-main">
						<div class="echarts" ref="shareChartRef"></div>
						<div class="bottom">
							<img :src="ai" class="ai-icon" alt="" />
							<span class="text">列入实体清单后企业营收初期下降，后基本趋于稳定。</span>
							<img :src="right" class="right-icon" alt="" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, nextTick, computed } from "vue";
import * as echarts from "echarts";
import { Search } from "@element-plus/icons-vue";
import defaultTitle from "../../../../assets/default-icon2.png";
import ai from "../../assets/ai.png";
import right from "../../assets/right.png";

const activeScale = ref("营收");
const scaleOptions = ["营收", "净利润", "人员"];

const activeRD = ref("研发经费");
const rdOptions = ["研发经费"];

const activeMarketShare = ref("总体市场份额");
const marketShareOptions = ["总体市场份额"];

const selectedDomain = ref("全部领域");
const searchKeyword = ref("");
const selectedCompanyId = ref(1);

const companyList = ref([
	{ id: 1, name: "比亚迪股份有限公司" },
	{ id: 2, name: "宁德时代新能源科技股份有限公司" },
	{ id: 3, name: "隆基绿能科技股份有限公司" },
	{ id: 4, name: "晶科能源控股有限公司" },
	{ id: 5, name: "厦门海辰储能科技股份有限公司" },
	{ id: 6, name: "国轩高科股份有限公司" },
	{ id: 7, name: "远景科技集团" },
	{ id: 8, name: "惠州亿纬锂能股份有限公司" },
	{ id: 9, name: "天合光能股份有限公司" },
	{ id: 10, name: "晶澳太阳能科技股份有限公司" }
]);

const chartData = ref({
	dates: [
		"2023\nQ3",
		"2023\nQ4",
		"2024\nQ1",
		"2024\nQ2",
		"2024\nQ3",
		"2024\nQ4",
		"2025\nQ1",
		"2025\nQ2",
		"2025\nQ3",
		"2025\nQ4"
	],
	values: [620, 650, 600, 480, 480, 420, 480, 520, 650, 650],
	sanctionDate: "2024\nQ1",
	endValue: 645
});

const marketChartData = ref({
	dates: [
		"2023\nQ3",
		"2023\nQ4",
		"2024\nQ1",
		"2024\nQ2",
		"2024\nQ3",
		"2024\nQ4",
		"2025\nQ1",
		"2025\nQ2",
		"2025\nQ3",
		"2025\nQ4"
	],
	values: [620, 650, 600, 480, 480, 420, 480, 520, 650, 650],
	sanctionDate: "2024\nQ1",
	endValue: 645
});

const rdChartData = ref({
	dates: [
		"2023\nQ3",
		"2023\nQ4",
		"2024\nQ1",
		"2024\nQ2",
		"2024\nQ3",
		"2024\nQ4",
		"2025\nQ1",
		"2025\nQ2",
		"2025\nQ3",
		"2025\nQ4"
	],
	values: [62, 65, 60, 55, 62, 68, 83, 92, 89, 92],
	sanctionDate: "2024\nQ1",
	endValue: 92,
	maxY: 100
});

const shareChartData = ref({
	dates: [
		"2023\nQ3",
		"2023\nQ4",
		"2024\nQ1",
		"2024\nQ2",
		"2024\nQ3",
		"2024\nQ4",
		"2025\nQ1",
		"2025\nQ2",
		"2025\nQ3",
		"2025\nQ4"
	],
	values: [65, 70, 72, 70, 58, 65, 68, 72, 72, 68],
	sanctionDate: "2024\nQ1",
	type: "bar",
	unit: "%",
	maxY: 100
});

const chartRef = ref(null);
const marketChartRef = ref(null);
const rdChartRef = ref(null);
const shareChartRef = ref(null);

const initChart = (domRef, data) => {
	if (!domRef) return;
	const myChart = echarts.init(domRef);
	const lastDate = data.dates[data.dates.length - 1];
	const lastSeriesValue = data.values[data.values.length - 1];
	const maxY = data.maxY || 1000;
	const chartType = data.type || "line";
	const unit = data.unit || " 亿元";

	const option = {
		tooltip: {
			trigger: "axis",
			valueFormatter: value => value + unit
		},
		grid: {
			top: "15%",
			left: "3%",
			right: "4%",
			bottom: "3%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			boundaryGap: chartType === "bar",
			data: data.dates,
			axisLine: {
				lineStyle: {
					color: "#E6EBF5"
				}
			},
			axisLabel: {
				color: "#606266",
				fontSize: 12,
				lineHeight: 18
			},
			axisTick: {
				show: false
			}
		},
		yAxis: {
			type: "value",
			min: 0,
			max: maxY,
			interval: maxY / 5,
			name: chartType === "bar" ? "百分比" : "",
			nameTextStyle: {
				align: "right",
				padding: [0, 8, 0, 0],
				color: "#606266"
			},
			axisLabel: {
				color: "#606266",
				fontSize: 12
			},
			splitLine: {
				lineStyle: {
					type: "dashed",
					color: "rgba(231, 243, 255, 1)"
				}
			}
		},
		series: [
			{
				data: data.values,
				type: chartType,
				symbol: "none",
				smooth: false,
				barWidth: 16,
				itemStyle:
					chartType === "bar"
						? {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{ offset: 0, color: "#055FC2" },
									{ offset: 1, color: "rgba(5, 95, 194, 0)" }
								]),
								borderRadius: [8, 8, 0, 0]
						  }
						: undefined,
				lineStyle:
					chartType === "line"
						? {
								color: "#055FC2",
								width: 2
						  }
						: undefined,
				areaStyle:
					chartType === "line"
						? {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: "rgba(5, 95, 194, 0.2)"
									},
									{
										offset: 1,
										color: "rgba(5, 95, 194, 0)"
									}
								])
						  }
						: undefined,
				markLine: {
					symbol: "none",
					data: [
						{
							xAxis: data.sanctionDate,
							label: {
								formatter: "列入实体清单",
								position: "end",
								rotate: 0,
								color: "#F56C6C",
								backgroundColor: "rgba(255, 238, 238, 1)",
								borderRadius: 4,
								padding: [4, 8],
								offset: [0, 0]
							},
							lineStyle: {
								color: "#F56C6C",
								type: "dotted",
								width: 1
							}
						},
						chartType === "line"
							? [
									{
										coord: [lastDate, lastSeriesValue],
										symbol: "none"
									},
									{
										coord: [lastDate, maxY],
										symbol: "none",
										lineStyle: {
											color: "#055FC2",
											type: "dotted",
											width: 1
										}
									}
							  ]
							: null
					].filter(Boolean)
				},
				markPoint:
					chartType === "line"
						? {
								symbol: "circle",
								symbolSize: 6,
								itemStyle: {
									color: "#055FC2"
								},
								label: {
									show: true,
									position: "left",
									formatter: "{c}" + unit.trim(),
									color: "#055FC2",
									fontSize: 16,
									fontWeight: "bold",
									offset: [-5, 0]
								},
								data: [
									{
										coord: [lastDate, maxY],
										value: data.endValue || lastSeriesValue
									}
								]
						  }
						: undefined
			}
		]
	};
	myChart.setOption(option);
	window.addEventListener("resize", () => {
		myChart.resize();
	});
};

onMounted(() => {
	nextTick(() => {
		initChart(chartRef.value, chartData.value);
		initChart(marketChartRef.value, marketChartData.value);
		initChart(rdChartRef.value, rdChartData.value);
		initChart(shareChartRef.value, shareChartData.value);
	});
});
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}
.industrial-impact {
	width: 100%;
	padding-top: 16px;
	padding-bottom: 50px;
	.main {
		width: 100%;
		display: flex;
		justify-content: space-between;
		.left {
			width: 480px;
			height: 848px;
			background-color: #fff;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			border-radius: 10px;
			.left-main {
				padding: 0 16px;
				.top-bar {
					display: flex;
					gap: 12px;
					margin-bottom: 8px;
					.domain-select {
						width: 150px;
						:deep(.el-input__wrapper) {
							height: 32px;
							border-radius: 4px;
						}
					}
					.search-input {
						width: 288px;
						:deep(.el-input__wrapper) {
							height: 32px;
							border-radius: 4px;
						}
					}
				}
				.company-list-container {
					.list-header {
						width: 446px;
						height: 48px;
						padding: 12px 16px;
						font-size: 16px;
						font-weight: 700;
						color: rgb(59, 65, 75);
						border-top: 1px solid rgb(234, 236, 238);
						border-bottom: 1px solid rgb(234, 236, 238);
					}
					.company-list {
						height: 700px;
						overflow-y: auto;
						.company-item {
							display: flex;
							align-items: center;
							height: 48px;
							padding: 0 16px;
							cursor: pointer;
							border-bottom: 1px solid #f0f2f5;
							box-sizing: border-box;
							&:hover {
								background-color: #f5f7fa;
							}
							&.active {
								background-color: rgba(246, 250, 255, 1);
								border: 1px solid rgba(174, 214, 255, 1);
								.company-name {
									color: rgb(5, 95, 194);
									font-weight: 700;
								}
								.icon-wrapper {
									background-color: transparent;
								}
							}
							.icon-wrapper {
								width: 24px;
								height: 24px;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-right: 12px;
								border-radius: 50%;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.company-name {
								font-size: 16px;
								color: rgb(59, 65, 75);
								font-weight: 400;
								line-height: 24px;
								font-family: "Microsoft YaHei";
							}
						}
					}
				}
			}
		}
		.right {
			width: 1104px;
			height: 848px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-content: space-between;
			.right-item {
				width: 544px;
				height: 416px;
				background-color: #fff;
				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				border-radius: 10px;
			}
			.right-main {
				width: 100%;
				height: calc(100% - 56px);
				padding: 0px 14px 15px 14px;
				.echarts {
					width: 516px;
					height: 300px;
					margin-bottom: 5px;
				}
				.bottom {
					width: 516px;
					// height: 40px;
					border-radius: 4px;
					background-color: rgba(246, 250, 255, 1);
					border: 1px solid rgba(231, 243, 255, 1);
					display: flex;
					align-items: center;
					padding: 6px 12px;
					box-sizing: border-box;
					.ai-icon {
						width: 20px;
						height: 20px;
						margin-right: 12px;
					}
					.text {
						flex: 1;
						font-size: 16px;
						font-family: "Microsoft YaHei";
						font-weight: 400;
						color: rgb(5, 95, 194);
						line-height: 24px;
					}
					.right-icon {
						width: 24px;
						height: 24px;
						cursor: pointer;
					}
				}
			}
		}
	}
}
.title-com {
	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);
	}
	.right-group {
		margin-left: auto;
		display: flex;
		align-items: center;

		.rule-checkbox {
			margin-right: 20px;

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

			:deep(.el-checkbox__inner) {
				border-color: #c9cdd4;
			}

			:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
				background-color: #055fc2;
				border-color: #055fc2;
			}

			:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
				color: #5f656c;
			}
		}

		.toggle-btns {
			display: flex;
			gap: 8px;
			margin-right: 20px;
			.t-btn {
				padding: 2px 8px;
				border: 1px solid rgb(230, 231, 232);
				border-radius: 4px;
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				color: rgb(59, 65, 75);
				cursor: pointer;
				box-sizing: border-box;
				&.active {
					color: rgb(5, 95, 194);
					background-color: rgba(231, 243, 255, 1);
					border-color: rgb(5, 95, 194);
				}
			}
		}
		.btn {
			margin-left: 0;
		}
		.time-select {
			width: 120px;
			height: 28px;
			margin-right: 14px;
			:deep(.el-input__wrapper) {
				height: 28px;
				min-height: 28px;
				padding: 0 8px;
				box-shadow: 0 0 0 1px #dcdfe6 inset;
			}
			:deep(.el-input__inner) {
				height: 28px;
				line-height: 28px;
				font-size: 14px;
			}
		}
	}
	.btn {
		width: 92px;
		height: 28px;
		margin-left: auto;
		img {
			width: 28px;
			height: 28px;
			cursor: pointer;
		}
		img:first-child {
			margin-right: 4px;
		}
	}
}
</style>
