<template>
	<div class="wrapper">
		<div class="box1">
			<AnalysisBox title="受影响实体" :showAllBtn="false">
				<div class="box1-main">
					<div class="data-filter">
						<div class="filter-select">
							<el-select v-model="curAreaId" :empty-values="[null, undefined]" style="width: 100%">
								<el-option label="全部领域" value="" />
								<el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id" />
							</el-select>
						</div>
						<div class="filter-input">
							<el-input v-model="commandWord" @keyup.enter="handleSearch" style="width: 100%; height: 100%;" :suffix-icon="Search" placeholder="搜索实体" />
						</div>
					</div>
					<div class="data-title">实体名称</div>
					<div style="height: 20px; flex: auto;">
						<el-scrollbar height="100%" always>
							<el-empty v-if="showCompanyList.length === 0" style="padding-top: 240px" description="暂无数据" :image-size="100" />
							<div class="list-data">
								<div class="list-item" v-for="item in showCompanyList" :key="item.id" :class="{ 'item-active': activeEntityId === item.id }" @click="handleToCompanyDetail(item)">
									<div class="item-icon">
										<img :src="defaultIcon2" alt="" class="item-img" />
									</div>
									<div class="item-name one-line-ellipsis">{{ item.name }}</div>
									<div class="item-icon item-icon-tag">
										<img :src="noticeIcon" alt="" class="item-img" />
									</div>
									<div class="item-tag">提及</div>
								</div>
							</div>
						</el-scrollbar>
					</div>
					<div class="pagination-info">
						<div class="pagination-left">{{ `共 ${companyTotalNum} 家企业` }}</div>
						<div class="pagination-right">
							<el-pagination
								@current-change="handleCurrentChange"
								:pageSize="pageSize"
								:current-page="currentPage"
								background
								layout="prev, pager, next"
								size="small"
								:total="companyTotalNum"
							/>
						</div>
					</div>
				</div>
			</AnalysisBox>
		</div>
		<div class="box2">
			<AnalysisBox :showAllBtn="false">
				<template #custom-title>
					<div class="custom-title">
						<div class="title-left">
							<div :class="['title-item', {'title-active': contentType==1}]" @click="headerContentType(1)">
								<div class="title-icon">
									<img :src="contentType==1 ? icon1620 : icon1621" alt="">
								</div>
								<div>产业链</div>
							</div>
							<div :class="['title-item', {'title-active': contentType==2}]" @click="headerContentType(2)">
								<div class="title-icon">
									<img :src="contentType==2 ? icon422 : icon423" alt="">
								</div>
								<div>实体关系</div>
							</div>
						</div>
						<div class="title-right" v-if="contentType==1">
							<el-select v-model="curAreaId" :empty-values="[null, undefined]" style="width: 100%">
								<el-option label="全部领域" value="" />
								<el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id" />
							</el-select>
						</div>
					</div>
				</template>
				<div class="box2-main" v-if="contentType==1">
					<ChartChain />
				</div>
				<div class="box2-main" v-if="contentType==2">
					<ChartRelation
						:graph-data="graphData"
						:tree-data="treeData"
						:control-active="1"
						@node-click="handleNodeClick"
						@layout-change="handleLayoutChange"
					/>
				</div>
			</AnalysisBox>
		</div>
	</div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from "vue";
import setChart from "@/utils/setChart";
import { Search } from '@element-plus/icons-vue'
import getBarChart from "./utils/barChart";
import { getDecreeIndustry, getDecreehylyList, getDecreeCompany, getDecreeAction } from "@/api/decree/influence";
import { getCnEntityOnChain, getChainFishbone, getChainInfoByDomainId, getChainStructure } from "@/api/exportControl";
import { getSingleSanctionEntitySupplyChain } from "@/api/exportControlV2.0";
import ChartChain from "./ChartChain.vue";
import ChartRelation from "./ChartRelation.vue";
import defaultIcon2 from "@/assets/icons/default-icon2.png";
import noticeIcon from "./assets/images/notice-icon.png";
import icon422 from "./assets/images/icon422.png";
import icon423 from "./assets/images/icon423.png";
import icon1620 from "./assets/images/icon1620.png";
import icon1621 from "./assets/images/icon1621.png";
import company from "./assets/images/company.png";
import companyActive from "./assets/images/company-active.png";

// 受影响实体
const companyList = ref([]);
const activeEntityId = ref(1);
const currentPage = ref(1);
const pageSize = ref(10);
const handleToCompanyDetail = (item) => {
	activeEntityId.value = item.id;
};
const handleCurrentChange = page => {
	currentPage.value = page;
};
// const showCompanyList = computed(() => {
// 	const startIndex = (currentPage.value - 1) * pageSize.value;
// 	const endIndex = startIndex + pageSize.value;
// 	return companyList.value.slice(startIndex, endIndex);
// });
const showCompanyList = ref([
	{ id: 1, name: "北京市", status: "上市" },
	{ id: 2, name: "上海市", status: "上市" },
	{ id: 3, name: "广州市广州市广州市广州市广州市广州市广州市广州市", status: "上市" },
	{ id: 4, name: "深圳市", status: "上市" },
	{ id: 5, name: "成都市", status: "上市" },
	{ id: 7, name: "天津市", status: "上市" },
	{ id: 9, name: "武汉市", status: "上市" },
	{ id: 10, name: "西安市", status: "上市" },
]);
const handleGetCompanyListByArea = async () => {
	const params = {
		id: curAreaId.value
	};
	try {
		const res = await getDecreeCompany(params);
		console.log("行业领域公司列表", res);
		if (res.code === 200 && res.data) {
			companyList.value = res.data.map(item => {
				return {
					name: item.name,
					id: item.id,
					status: item.marketChange
				};
			});
			companyTotalNum.value = companyList.value.length;
			if (res.data?.length) handleToCompanyDetail(res.data[0])
		} else {
			companyList.value = [];
			companyTotalNum.value = 0;
		}
	} catch (error) {
		companyList.value = [];
		companyTotalNum.value = 0;
	}
};

// 指令搜索
const commandWord = ref("");
const handleSearch = () => {

};

// 行业领域
const curAreaId = ref("");
const areaList = ref([]);
const handleGetHylyList = async () => {
	try {
		const res = await getDecreehylyList();
		console.log("行业领域列表", res);
		if (res.code === 200 && res.data) {
			areaList.value = res.data;
			handleGetChainId();
		}
	} catch (error) {}
};

// 产业链/实体关系
const contentType = ref(2);
const headerContentType = (type) => {
	contentType.value = type;
};
const chainId = ref(0);
const handleGetChainId = async () => {
	try {
		const res = await getChainInfoByDomainId(curAreaId.value);
		console.log("获取chainId", res);
		if (res && res.length) {
			chainId.value = res[0].id;
			// handleGetChainInfoByChainId();
		}
	} catch (error) {
		console.error("chainId error", error);
	}
};

const handleNodeClick = (node) => {
	
};
const handleLayoutChange = (type) => {

};
const treeData = ref(null);
const graphData = ref({ nodes: [], links: [] });
const singleSanctionEntitySupplyChainData = ref(null);
const updateGraphData = () => {
	const data = singleSanctionEntitySupplyChainData.value;

	if (!data) return;

	const nodes = [];
	const links = [];

	nodes.push({
		id: "0",
		name: data.orgName,
		image: companyActive,
		symbolSize: 60,
		isSanctioned: true
	});

	const parentList = data.parentOrgList || [];
	parentList.forEach((item, index) => {
		nodes.push({
			id: `p-${item.id || index}`,
			name: item.name,
			image: item.isSanctioned ? companyActive : company,
			symbolSize: 40,
			isSanctioned: item.isSanctioned
		});

		links.push({
			source: `p-${item.id || index}`,
			target: "0",
			name: "供应商"
		});
	});
	const childList = data.childrenOrgList || [];
	childList.forEach((item, index) => {
		nodes.push({
			id: `c-${item.id || index}`,
			name: item.name,
			image: item.isSanctioned ? companyActive : company,
			symbolSize: 40,
			isSanctioned: item.isSanctioned
		});

		links.push({
			source: "0",
			target: `c-${item.id || index}`,
			name: "客户"
		});
	});
	graphData.value = { nodes, links };
};
const getSingleSanctionEntitySupplyChainRequest = async () => {
	try {
		const res = await getSingleSanctionEntitySupplyChain({
			orgId: "91370102723265504D"
		});
		console.log("data1", res)
		if (res.code === 200 && res.data) {
			singleSanctionEntitySupplyChainData.value = res.data;
			updateGraphData();
			treeData.value = {
				id: res.data.orgId,
				name: res.data.orgName,
				image: companyActive,
				symbolSize: 50,
				children: (res.data.parentOrgList || []).map((item, index) => ({
					id: item.id || `p-${index}`,
					name: item.name,
					image: item.isSanctioned ? companyActive : company,
					symbolSize: 30
				}))
			};
		}
	} catch (error) {
		console.log(error);
	}
};

// 企业影响分析
const companyTotalNum = ref(0); // 企业数量

const chart1Data = ref({
	// title: ["集成电路", "新能源", "人工智能", "先进制造", "量子科技"],
	// value: [109, 95, 79, 25, 11]
});

const handleGetChart1Data = async () => {
	const params = {
		id: 147
	};
	try {
		const res = await getDecreeIndustry(params);
		console.log("企业影响分析", res);
		if (res.code === 200 && res.data) {
			chart1Data.value.title = res.data.map(item => {
				return item.hylyName;
			});
			chart1Data.value.value = res.data.map(item => {
				return item.companyNum;
			});
		} else {
			chart1Data.value.title = [];
			chart1Data.value.value = [];
		}
	} catch (error) {
		chart1Data.value.title = [];
		chart1Data.value.value = [];
	}
};

const handelBox1 = async () => {
	await handleGetChart1Data();
	let chart1 = getBarChart(chart1Data.value.title, chart1Data.value.value);
	setChart(chart1, "chart1");
};

const chainInfo = ref({
	upstreamInternalCount: 0,
	upstreamInternalRate: 0,
	upstreamEntityCount: 0,
	upstreamEntityRate: 0,
	midstreamInternalCount: 0,
	midstreamInternalRate: 0,
	midstreamEntityCount: 0,
	midstreamEntityRate: 0,
	downstreamInternalCount: 0,
	downstreamInternalRate: 0,
	downstreamEntityCount: 0,
	downstreamEntityRate: 0
});

// 根据chainId获取chainInfo
const handleGetChainInfoByChainId = async () => {
	try {
		const res = await getCnEntityOnChain(chainId.value);
		console.log("chainInfo", res);
		if (res) {
			chainInfo.value = res;
		}
	} catch (error) {
		console.log("chainInfo error", error);
	}
};

onMounted(() => {
	// handleGetCompanyListByArea();
	handleGetChart1Data();
	handleGetHylyList();
	handelBox1();
	getSingleSanctionEntitySupplyChainRequest()
});
</script>

<style lang="scss" scoped>
.wrapper {
	min-height: 845px;
	width: 1600px;
	margin: 16px auto;
	display: flex;
	gap: 16px;

	.box1 {
		width: 480px;

		.box1-main {
			height: 100%;
			padding: 10px 16px;
			display: flex;
			flex-direction: column;

			.data-filter {
				display: flex;
				align-items: center;
				gap: 16px;
				margin-bottom: 10px;

				.filter-select {
					width: 150px;
				}
				.filter-input {
					width: 20px;
					flex: auto;
					background-color: var(--el-fill-color-blank);
					border-radius: var(--el-border-radius-base);
					box-shadow: 0 0 0 1px var(--el-border-color) inset;
					box-sizing: border-box;
					height: 32px;
				}
			}

			.data-title {
				border-top: 1px solid rgba(240, 242, 244, 1);
				padding: 12px;
				font-weight: bold;
			}

			.list-data {
				height: 480px;
				width: 446px;
				margin: 0 auto;

				.list-item {
					display: flex;
					align-items: center;
					border: 1px solid transparent;
					border-bottom: 1px solid rgba(240, 242, 244, 1);
					padding: 12px;
					cursor: pointer;
					&:first-child {
						border-top: 1px solid rgba(240, 242, 244, 1);
					}
					&:hover {
						background-color: #f7f8fa;
					}

					.item-icon {
						width: 24px;
						height: 24px;
						font-size: 0px;

						.item-img {
							width: 100%;
							height: 100%;
							object-fit: contain;
						}
					}

					.item-icon-tag {
						width: 20px;
						height: 20px;
					}

					.item-tag {
						color: rgb(206, 79, 81);
						font-size: 14px;
						line-height: 14px;
					}

					.item-name {
						width: 20px;
						flex: auto;
						padding: 0 10px;
						font-size: 16px;
						color: rgb(59, 65, 75);
						font-weight: 400;
						font-family: "Microsoft YaHei";
					}
				}

				.list-item.item-active {
					background-color: rgba(5, 95, 194, 0.05);
					border-color: rgba(174, 214, 255, 1);

					.item-name {
						color: rgb(5, 95, 194);
						font-weight: bold;
					}
				}
			}
			.pagination-info {
				height: 65px;
				width: 446px;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				.pagination-left {
					margin-top: 25px;
					height: 18px;
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 18px;
				}
				.pagination-right {
					margin-top: 23px;
				}
			}
		}
	}
	
	.box2 {
		width: 20px;
		flex: auto;
		:deep(.header-icon) {
			display: none;
		}
		.custom-title {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			width: 100%;
			height: 100%;
			padding: 0 16px;
			.title-left {
				display: flex;
				border: 1px solid rgb(5, 95, 194);
				color: rgb(5, 95, 194);
				border-radius: 16px;
				width: 240px;
				height: 32px;
				overflow: hidden;
				cursor: pointer;
				.title-item {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 6px;
					width: 50%;
					font-size: 16px;
					line-height: 16px;
					font-family: "Microsoft YaHei";
					.title-icon {
						width: 14px;
						height: 14px;
						font-size: 0;
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
				.title-active {
					background-color: rgb(5, 95, 194);
					color: white;
				}
			}
			.title-right {
				width: 180px;
			}
		}
		.box2-main {
			width: 100%;
			height: 100%;
		}
	}
}
</style>