<template>
	<div class="industry-wrap">
		<div class="left">
			<div class="box-header">
				<div class="header-left"></div>
				<div class="title">涉及企业</div>
				<div class="header-right">
					<div class="icon">
						<img src="@/assets/icons/box-header-icon1.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon2.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon3.png" alt="" />
					</div>
				</div>
			</div>
			<div class="left-top" id="chart1"></div>
			<div class="left-center">
				<div class="left-center-btn-box">
					<div
						class="left-center-btn"
						:class="{ btnActive: box1BtnActive === index }"
						v-for="(item, index) in industryList"
						:key="index"
						@click="handleClickBox1Btn(item, index)"
					>
						{{ item.hylymc }}
					</div>
				</div>
			</div>
			<div class="left-footer">
				<div class="item-box">
					<div
						class="item"
						:class="{ itemActive: companyActiveIndex === idx }"
						@click="handleClickCompany(idx)"
						v-for="(val, idx) in curCompanyList"
						:key="idx"
					>
						<div class="id">{{ idx + 1 }}</div>
						<div class="title" :class="{ titleActive: companyActiveIndex === idx }">
							{{ val.name }}
						</div>
						<div class="icon">
							<img v-if="val.status === 'up'" :src="upIcon" alt="" />
							<img v-if="val.status === 'down'" :src="downIcon" alt="" />
						</div>
					</div>
				</div>
				<div class="footer-box">
					<div class="left">{{ `共${companyList.length}家企业` }}</div>
					<div class="right">
						<el-pagination
							@current-change="handleCurrentChange"
							:pageSize="pageSize"
							:current-page="currentPage"
							size="small"
							background
							layout="prev, pager, next"
							:total="companyList.length"
						/>
					</div>
				</div>
			</div>
		</div>
		<div class="right">
			<div class="box-header">
				<div class="header-left"></div>
				<div class="title">产业链分析</div>
				<div class="header-right">
					<div class="icon">
						<img src="@/assets/icons/box-header-icon1.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon2.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon3.png" alt="" />
					</div>
				</div>
			</div>
			<div class="right-main">
				<div class="right-main-content" id="chartGraph">
					<div class="right-main-content-header">
						<div class="header-item1">
							<div class="header-item1-top">{{ "基础支撑" }}</div>
							<div class="header-item1-bottom">
								<div class="icon">
									<img src="./assets/images/warning.png" alt="" />
								</div>
								<div class="text">
									{{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
								</div>
							</div>
						</div>
						<div class="header-item2">
							<div class="header-item2-top">{{ "软件算法" }}</div>
							<div class="header-item2-bottom">
								<div class="icon">
									<img src="./assets/images/warning.png" alt="" />
								</div>
								<div class="text">
									{{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
								</div>
							</div>
						</div>
						<div class="header-item3">
							<div class="header-item3-top">{{ "行业应用" }}</div>
							<div class="header-item3-bottom">
								<div class="icon">
									<img src="./assets/images/warning.png" alt="" />
								</div>
								<div class="text">
									{{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
								</div>
							</div>
						</div>
					</div>
					<div class="right-main-content-main">
						<Fishbone />
					</div>
				</div>
				<div class="box-footer">
					<div class="box-footer-left">
						<img src="../assets/icons/right-icon1.png" alt="" />
					</div>
					<div class="box-footer-center">
						法案以218:214​（众议院）和51:50​（副总统决胜票）微弱优势强行通过，暴露两党极端对立、党内倒戈频发的特点。
					</div>
					<div class="box-footer-right">
						<img src="../assets/icons/arrow-right.png" alt="" />
					</div>
				</div>
			</div>
			<div class="company-dialog" v-if="isShowCompanyDialog">
				<div class="dialog-header">
					<div class="logo">
						<img :src="companyInfo.logo" alt="" />
					</div>
					<div class="company-title">{{ companyInfo.name }}</div>
					<div class="status-icon">
						<img v-if="companyInfo.status === 'up'" :src="upIcon" alt="" />
						<img v-if="companyInfo.status === 'down'" :src="downIcon" alt="" />
					</div>
					<div class="status-rate">
						{{ companyInfo.changeRate + "%" }}
					</div>
					<div class="close" @click="isShowCompanyDialog = false">
						<img :src="closeIcon" alt="" />
					</div>
				</div>
				<div class="dialog-main">
					<div class="dialog-box1">
						<div class="dialog-box1-header">
							<div class="icon">
								<img :src="companyInfo.data1.icon" alt="" />
							</div>
							<div class="dialog-box1-title">{{ companyInfo.data1.title }}</div>
						</div>
						<div class="dialog-box1-main">
							<div class="item" v-for="(val, idx) in companyInfo.data1.list" :key="idx">
								<div class="item-left">
									<!-- <img :src="uncheckIcon" alt=""> -->
									<img :src="checkedIcon" alt="" />
								</div>
								<div class="item-right">{{ val }}</div>
							</div>
						</div>
					</div>
					<div class="dialog-box2">
						<div class="dialog-box2-header">
							<div class="icon">
								<img :src="companyInfo.data2.icon" alt="" />
							</div>
							<div class="dialog-box2-title">{{ companyInfo.data2.title }}</div>
						</div>
						<div class="dialog-box2-main" id="chart2"></div>
					</div>
					<div class="dialog-box3">
						<div class="dialog-box3-header">
							<div class="icon">
								<img :src="companyInfo.data3.icon" alt="" />
							</div>
							<div class="dialog-box3-title">{{ companyInfo.data3.title }}</div>
						</div>
						<div class="dialog-box3-main" id="chart3"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, nextTick, computed } from "vue";
import * as echarts from "echarts";
import { getCompanyList, getIndustryHyly, getHylyList } from "@/api/influence";
import getBarChart from "./utils/barChart";
import getLineChart from "./utils/lineChart";
import getBarChart1 from "./utils/barChart1";
import getGraph from "./utils/graph";

import downIcon from "./assets/images/down.png";
import upIcon from "./assets/images/up.png";
import CompanyLogo from "./assets/images/company-logo.png";
import icon1 from "./assets/images/icon1.png";
import icon2 from "./assets/images/icon2.png";
import icon3 from "./assets/images/icon3.png";
import uncheckIcon from "./assets/images/uncheck.png";
import checkedIcon from "./assets/images/checked.png";
import closeIcon from "./assets/images/close.png";

import Fishbone from "./components/fishbone.vue";

const isShowCompanyDialog = ref(false);

const box1BtnActive = ref(0);

const handleClickBox1Btn = (industry, index) => {
	box1BtnActive.value = index;
	curHylyId.value = industry.hylyid;
	handleGetCompanyListById();
};

// 绘制echarts图表
const setChart = (option, chartId) => {
	let chartDom = document.getElementById(chartId);
	chartDom.removeAttribute("_echarts_instance_");
	let chart = echarts.init(chartDom);
	chart.setOption(option);
	return chart;
};

const chart1Data = ref({
	// name: ["新能源", "半导体", "跨境电商", "金融业", "军工", "贸易"],
	// value: [109, 95, 79, 25, 21, 50],
});

const industryActiveIndex = ref(0);
const companyActiveIndex = ref(0);

const handleClickCompany = index => {
	companyActiveIndex.value = index;
	isShowCompanyDialog.value = true;

	setTimeout(() => {
		const chart2Data = {
			dataX: ["2025-01", "2025-02", "2025-03", "2025-04", "2025-05", "2025-06", "2025-07", "2025-08"],
			dataY: [1.2, 1.5, 1.4, 1.8, 1.3, 1.5, 1.6, 1.4]
		};

		let chart2 = getLineChart(chart2Data.dataX, chart2Data.dataY);
		setChart(chart2, "chart2");

		const chart3Data = {
			name: ["2023Q3", "2023Q4", "2024Q1", "2024Q2", "2024Q3", "2024Q4", "2025Q1", "2025Q2"],
			value: [49, 53, 52, 54, 52, 50, 51, 54]
		};

		let chart3 = getBarChart1(chart3Data.name, chart3Data.value);
		setChart(chart3, "chart3");
	}, 100);
};

const pageSize = ref(10);
const currentPage = ref(1);

const companyList = ref([]); // 企业列表
// 当前企业列表
const curCompanyList = computed(() => {
	const startIndex = (currentPage.value - 1) * pageSize.value;
	const endIndex = startIndex + pageSize.value;
	return companyList.value.slice(startIndex, endIndex);
});

// 处理页码改变事件
const handleCurrentChange = page => {
	currentPage.value = page;
};


const industryList = ref([
	//  {
	//     "id": 1,
	//     "hylyid": "0100",
	//     "hylymc": "风电"
	//   }
]);

const companyInfo = ref({
	logo: CompanyLogo,
	name: "宁德时代新能源科技股份有限公司",
	status: "down",
	changeRate: 0.16,
	data1: {
		icon: icon1,
		title: "影响条款",
		list: [
			"严格限制外国敏感实体（FEOC）参与补贴",
			"取消电动汽车补贴（2025年底生效）",
			"任何实体若与被禁止外国实体签订超100万美元的关键技术许可协议，则不得向其提供联邦补贴"
		]
	},
	data2: {
		icon: icon2,
		title: "融资情况",
		data: {
			time: ["2025-06", "2025-07", "2025-08"],
			value: [1.12, 1.42, 1.5]
		}
	},
	data3: {
		icon: icon3,
		title: "研发投入",
		data: {
			time: ["2023Q3", "2023Q4", "2024Q1", "2024Q2", "2024Q3", "2024Q4", "2025Q1", "2025Q2"],
			value: [50, 53, 52, 54, 58, 60, 51, 56, 64]
		}
	}
});

// 获取行业领域列表
const handleGetHylyList = async () => {
	try {
		const res = await getHylyList();
		console.log("行业领域字典列表", res);
		industryList.value = res.data;
		curHylyId.value = res.data[0].hylyid;
	} catch (error) {}
};

const curHylyId = ref("");

// 根据行业领域id获取公司列表
const handleGetCompanyListById = async () => {
	const params = {
		id: curHylyId.value
	};
	try {
		const res = await getCompanyList(params);
		// console.log('根据行业id获取公司里列表', res);
		if (res.code === 200 && res.data.length) {
			companyList.value = res.data;
		} else {
			companyList.value = [];
		}
	} catch (error) {}
};

// 根据法案ID 获取行业领域统计
const handleGetIndustryHyly = async () => {
	const params = {
		id: 1
	};
	try {
		const res = await getIndustryHyly(params);
		// console.log('行业领域统计', res);
		chart1Data.value.name = res.data.map(item => {
			return item.hylyName;
		});
		chart1Data.value.value = res.data.map(item => {
			return item.companyNum;
		});
	} catch (error) {}
};

onMounted(async () => {
	await handleGetHylyList();
	handleGetCompanyListById();
	await handleGetIndustryHyly();
	let chart1 = getBarChart(chart1Data.value.name, chart1Data.value.value);
	setChart(chart1, "chart1");
});
</script>

<style lang="scss" scoped>
.industry-wrap {
	width: 100%;
	height: 100%;
	display: flex;
	.box-header {
		height: 56px;
		display: flex;
		position: relative;
		.header-left {
			margin-top: 20px;
			width: 8px;
			height: 16px;
			border-radius: 0 4px 4px 0;
			background: var(--color-main-active);
		}
		.title {
			margin-left: 22px;
			margin-top: 20px;
			height: 16px;
			line-height: 16px;
			color: var(--color-main-active);
			font-family: Microsoft YaHei;
			font-size: 16px;
			font-weight: 600;
			line-height: 16px;
		}
		.header-right {
			position: absolute;
			top: 14px;
			right: 12px;
			display: flex;
			justify-content: flex-end;
			gap: 4px;
			.icon {
				width: 28px;
				height: 28px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.left {
		margin-top: 16px;
		width: 480px;
		height: 848px;
		background: rgba(255, 255, 255);
		border-radius: 4px;
		.left-top {
			margin: 0 auto;
			width: 446px;
			height: 200px;
			box-sizing: border-box;
			border: 1px solid rgba(231, 241, 255, 1);
			border-radius: 4px;
			background: linear-gradient(180deg, rgba(246, 251, 255, 1), rgba(246, 251, 255, 0) 100%);
		}
		.left-center {
			margin-top: 12px;
			height: 56px;
			margin-left: 17px;
			overflow-x: hidden;
			width: 445px;
			.left-center-btn-box {
				width: 1000px;
				margin-top: 10px;
				height: 28px;
				display: flex;
				flex-wrap: nowrap;
				.left-center-btn {
					margin-right: 4px;
					height: 28px;
					width: 60px;
					text-align: center;
					padding: 0 5px;
					box-sizing: border-box;
					border-radius: 4px;
					border: 1px solid var(--btn-plain-border-color);
					background: var(--btn-plain-bg-color);
					color: var(--btn-plain-text-color);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 28px;
					cursor: pointer;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.btnActive {
					border: 1px solid var(--btn-active-border-color);
					background: var(--btn-active-bg-color);
					color: var(--btn-active-text-color);
				}
			}
		}
		.left-footer {
			margin: 0 auto;
			width: 446px;
			height: 520px;
			overflow: hidden;
			.item-box {
				height: 480px;
				overflow: hidden;
				.item {
					width: 100%;
					height: 48px;
					border-radius: 4px;
					border-bottom: 1px solid rgba(243, 243, 244, 1);
					display: flex;
					cursor: pointer;
					&:hover {
						background: rgba(246, 251, 255, 1);
					}
					.id {
						margin-left: 12px;
						margin-top: 8px;
						width: 24px;
						height: 24px;
						border-radius: 12px;
						background: rgba(231, 241, 255);
						text-align: center;
						line-height: 24px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 12px;
						font-weight: 400;
					}
					.title {
						margin-top: 9px;
						margin-left: 10px;
						height: 22px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 600;
						line-height: 22px;
						text-align: left;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.icon {
						margin-left: 7px;
						margin-top: 6px;
						width: 8px;
						height: 6px;
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
				.itemActive {
					background: rgba(246, 251, 255, 1);
				}
				.titleActive {
					color: rgba(22, 119, 255, 1) !important;
				}
			}
			.footer-box {
				display: flex;
				justify-content: space-between;
				.left {
					width: 100px;
					height: 20px;
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
				}
				.right {
					flex: 300px;
				}
			}
		}
	}
	.right {
		margin-top: 16px;
		margin-left: 16px;
		width: 1247px;
		height: 847px;
		background: rgba(255, 255, 255);
		border-radius: 4px;
		position: relative;
		.company-dialog {
			position: absolute;
			z-index: 9999999;
			right: 33px;
			top: 55px;
			width: 480px;
			height: 723px;
			box-sizing: border-box;
			border: 1px solid rgba(230, 231, 232, 1);
			border-radius: 4px;
			background: rgba(255, 255, 255, 1);
			.dialog-header {
				height: 54px;
				box-sizing: border-box;
				border-bottom: 1px solid rgba(243, 243, 244, 1);
				display: flex;
				position: relative;
				.logo {
					width: 48px;
					height: 48px;
					margin-left: 18px;
					margin-top: 3px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.company-title {
					margin-left: 16px;
					margin-top: 16px;
					height: 22px;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 600;
					line-height: 22px;
				}
				.status-icon {
					margin-left: 12px;
					margin-top: 12px;
					width: 8px;
					height: 6px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.status-rate {
					width: 41px;
					margin-left: 4px;
					margin-top: 16px;
					height: 22px;
					color: rgba(92, 181, 48, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 22px;
				}
				.close {
					position: absolute;
					right: 15px;
					top: 19px;
					width: 16px;
					height: 16px;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
			.dialog-main {
				margin-top: 13px;
				.dialog-box1 {
					.dialog-box1-header {
						margin-top: 10px;
						display: flex;
						.icon {
							margin-left: 16px;
							width: 18px;
							height: 18px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.dialog-box1-title {
							margin-top: 2px;
							margin-left: 6px;
							height: 14px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 600;
							line-height: 14px;
							text-align: left;
						}
					}
					.dialog-box1-main {
						margin-top: 4px;
						margin-left: 18px;
						.item {
							display: flex;
							.item-left {
								margin-top: 13px;
								width: 14px;
								height: 14px;
								border-radius: 4px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.item-right {
								margin-top: 8px;
								margin-left: 9px;
								width: 420px;
								height: 22px;
								color: rgba(132, 136, 142, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 22px;
							}
						}
					}
				}
				.dialog-box2 {
					margin-left: 16px;
					margin-top: 50px;
					.dialog-box2-header {
						margin-top: 10px;
						display: flex;
						.icon {
							margin-left: 16px;
							width: 18px;
							height: 18px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.dialog-box2-title {
							margin-top: 2px;
							margin-left: 6px;
							height: 14px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 600;
							line-height: 14px;
							text-align: left;
						}
					}
					.dialog-box2-main {
						margin-top: 16px;
						width: 446px;
						height: 180px;
						box-sizing: border-box;
						border: 1px solid rgba(231, 241, 255, 1);
						border-radius: 4px;
						background: linear-gradient(180deg, rgba(246, 251, 255, 1), rgba(246, 251, 255, 0) 100%);
					}
				}
				.dialog-box3 {
					margin-top: 16px;
					margin-left: 16px;
					.dialog-box3-header {
						margin-top: 10px;
						display: flex;
						.icon {
							margin-left: 16px;
							width: 18px;
							height: 18px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.dialog-box3-title {
							margin-top: 2px;
							margin-left: 6px;
							height: 14px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 600;
							line-height: 14px;
							text-align: left;
						}
					}
					.dialog-box3-main {
						margin-top: 16px;
						width: 446px;
						height: 180px;
						box-sizing: border-box;
						border: 1px solid rgba(231, 241, 255, 1);
						border-radius: 4px;
						background: linear-gradient(180deg, rgba(246, 251, 255, 1), rgba(255, 255, 255, 0) 100%);
					}
				}
			}
		}

		.right-main {
			width: 1218px;
			height: 784px;
			margin: 5px auto;
			.right-main-content {
				width: 1150px;
				height: 720px;
				margin: 4px 0 10px;
				.right-main-content-header {
					height: 84px;
					margin-left: 14px;
					margin-top: 16px;
					// background: orange;
					display: flex;
					.header-item1 {
						width: 408px;
						.header-item1-top {
							position: relative;
							z-index: 3;
							height: 28px;
							text-align: center;
							line-height: 28px;
							background: url("./assets/images/bg3.png");
							background-size: 100% 100%;
							color: rgba(22, 119, 255, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 28px;
						}
						.header-item1-bottom {
							display: flex;
							justify-content: center;
							.icon {
								margin-top: 9px;
								width: 16px;
								height: 16px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.text {
								margin-top: 7px;
								margin-left: 8px;
								height: 22px;
								color: rgba(206, 79, 81, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 22px;
							}
						}
					}
					.header-item2 {
						margin-left: -8px;
						width: 408px;
						.header-item2-top {
							position: relative;
							z-index: 2;
							height: 28px;
							text-align: center;
							line-height: 28px;
							background: url("./assets/images/bg2.png");
							background-size: 100% 100%;
							color: rgba(19, 168, 168, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 28px;
						}
						.header-item2-bottom {
							display: flex;
							justify-content: center;
							.icon {
								margin-top: 9px;
								width: 16px;
								height: 16px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.text {
								margin-top: 7px;
								margin-left: 8px;
								height: 22px;
								color: rgba(206, 79, 81, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 22px;
							}
						}
					}
					.header-item3 {
						margin-left: -8px;
						width: 408px;
						.header-item3-top {
							position: relative;
							z-index: 1;
							height: 28px;
							text-align: center;
							line-height: 28px;
							background: url("./assets/images/bg1.png");
							background-size: 100% 100%;
							color: rgba(146, 84, 222, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 28px;
						}
						.header-item3-bottom {
							display: flex;
							justify-content: center;
							.icon {
								margin-top: 9px;
								width: 16px;
								height: 16px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.text {
								margin-top: 7px;
								margin-left: 8px;
								height: 22px;
								color: rgba(206, 79, 81, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 22px;
							}
						}
					}
				}
				.right-main-content-main {
					height: 600px;
					margin-top: 20px;
				}
				// background: orange;
			}
			.box-footer {
				width: 1218px;
				height: 40px;
				display: flex;
				box-sizing: border-box;
				margin: 0 auto;
				margin-top: 6px;
				background: rgba(246, 251, 255, 1);
				.box-footer-left {
					margin-top: 10px;
					margin-left: 12px;
					width: 19px;
					height: 20px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.box-footer-center {
					margin-left: 13px;
					margin-top: 8px;
					width: 1119px;
					height: 24px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 24px;
				}
				.box-footer-right {
					margin-left: 13px;
					margin-top: 8px;
					width: 24px;
					height: 24px;
					background: rgba(231, 241, 255, 1);
					border-radius: 12px;
					background: #e7f1ff;
					box-sizing: border-box;
					padding: 3px;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
}
</style>
