<template>
	<div class="leftTop">
		<Card title="项目组织机构">
			<!-- <div id="projectOrganization" ref="projectOrganization" style="width: 100%; height: 100%"></div> -->
			<div class="projectOrganization">
				<div>项目主任组</div>
				<div class="container_box1">
					<div v-for="item in projectOrganizationInfo.projectOrganizationList" :key="item.id">
						<div></div>
						<div>{{ item.titleName }}</div>
					</div>
				</div>
				<div class="container_box2">
					<div v-for="item in projectOrganizationInfo.projectOrganizationList2" :key="item.id">{{ item.titleName }}</div>
				</div>
			</div>
		</Card>
	</div>
</template>

<script setup lang="ts">
import { GlobalStore } from "@/stores";
import { getCurrentDayAirQualityApi } from "@/api/modules/projectOverview";
import { ref, onMounted, reactive } from "vue";
import * as echarts from "echarts";
import Card from "@/components/card.vue";
const store = GlobalStore();
const projectOrganizationInfo = reactive({
	projectOrganizationList: [
		{
			id: 1,
			titleName: "项目管理部"
		},
		{
			id: 2,
			titleName: "设计管理部"
		},
		{
			id: 3,
			titleName: "采购管理部"
		},
		{
			id: 4,
			titleName: "施工管理部"
		},
		{
			id: 5,
			titleName: "商务管理部"
		},
		{
			id: 6,
			titleName: "安质环部"
		},
		{
			id: 7,
			titleName: "综合办公室"
		},
		{
			id: 8,
			titleName: "财务管理部"
		},
		{
			id: 9,
			titleName: "项目综合部"
		},
		{
			id: 10,
			titleName: "政府协调组"
		},
		{
			id: 11,
			titleName: "党建工作组"
		}
	],
	projectOrganizationList2: [{
		id: 1,
		titleName: "系统工程"
	},{
		id: 2,
		titleName: "公用工程"
	},{
		id: 3,
		titleName: "空分气化"
	},{
		id: 4,
		titleName: "净化甲醇"
	},{
		id: 5,
		titleName: "MTO"
	},{
		id: 6,
		titleName: "两聚"
	}]
});

const projectOrganization = ref(null as any);
function drawChart() {
	let myEcharts = echarts.init(projectOrganization.value);
	var title = [
		// 第零层
		{
			label: "项目主任组",
			warn: 5,
			error: 8,
			value: 2
		},
		// 第一层
		{
			label: "项目管理部",
			warn: 5,
			error: 8,
			value: 5
		},
		{
			label: "设计管理部",
			warn: 5,
			error: 8,
			value: 7
		},
		{
			label: "采购管理部",
			warn: 5,
			error: 8,
			value: 7
		},
		{
			label: "施工管理部",
			warn: 5,
			error: 8,
			value: 7
		},
		// 第二层
		{
			label: "系统工程",
			warn: 5,
			error: 8,
			value: 2
		},
		{
			label: "公用工程",
			warn: 5,
			error: 8,
			value: 2
		},
		{
			label: "空分气化",
			warn: 5,
			error: 8,
			value: 2
		},
		{
			label: "净化甲醇",
			warn: 5,
			error: 8,
			value: 2
		},
		{
			label: "MTO",
			warn: 5,
			error: 8,
			value: 2
		},
		// 第三层
		{
			label: "两聚",
			warn: 5,
			error: 8,
			value: 2
		}
	];
	var colorMap = {
		normal: "#18a849",
		warn: "#FFC125",
		error: "#FF0000"
	};

	const colorFunction = function (obj: any) {
		if (obj.value < obj.warn) {
			return colorMap.normal;
		} else if (obj.warn <= obj.value && obj.value < obj.error) {
			return colorMap.warn;
		} else if (obj.error <= obj.value) {
			return colorMap.error;
		}
	};

	const titleList = title.reduce((prev: any, cur: any, index: number) => {
		if (index == 0) {
			if (prev[0] instanceof Array) {
				prev[0].push({ name: cur.label, value: cur.value });
			} else {
				prev.push([
					{
						name: cur.label,
						value: cur.value,
						x: 300,
						y: 0,
						symbolSize: 50,
						itemStyle: {
							normal: {
								color: colorFunction(cur)
							}
						}
					}
				]);
			}
		} else if (index >= 1 && index <= 4) {
			if (prev[1] instanceof Array) {
				prev[1].push({
					name: cur.label,
					value: cur.value,
					x: prev[1].length * 150,
					y: 200,
					symbolSize: 50,
					itemStyle: {
						normal: {
							color: colorFunction(cur)
						}
					}
				});
			} else {
				prev.push([
					{
						name: cur.label,
						value: cur.value,
						x: 0,
						y: 200,
						symbolSize: 50,
						itemStyle: {
							normal: {
								color: colorFunction(cur)
							}
						}
					}
				]);
			}
		} else if (index > 4 && index < title.length) {
			if (prev[2] instanceof Array) {
				prev[2].push({
					name: cur.label,
					value: cur.value,
					x: prev[2].length * 150,
					y: 400,
					symbolSize: 50,
					itemStyle: {
						normal: {
							color: colorFunction(cur)
						}
					}
				});
			} else {
				prev.push([
					{
						name: cur.label,
						value: cur.value,
						x: 0,
						y: 400,
						symbolSize: 50,
						itemStyle: {
							normal: {
								color: colorFunction(cur)
							}
						}
					}
				]);
			}
		}

		return prev;
	}, []);

	console.log(titleList);

	//具体的绘制流程图的方法
	const option = {
		tooltip: {
			trigger: "item",
			formatter: function (para: any) {
				if (para.name != "x" || para.name != "y") {
					return para.name;
				} else {
					//其他的都正式显示，自己是什么就显示什么。
					return "";
				}
			}
		},
		animationDurationUpdate: 1500,
		animationEasingUpdate: "quinticInOut",
		textStyle: {
			color: "#000"
		},
		series: [
			{
				type: "graph",
				tooltip: {
					backgroundColor: "skyblue"
					//formatter: "{b} <br/>{a} : {c} h "
				},
				layout: "none",
				symbolSize: 10,
				roam: false,
				label: {
					normal: {
						show: true,
						position: "inside",
						//offset: [0,-60],//居上 20
						textStyle: {
							fontSize: 12,
							color: "#fff",
							fontWeight: "BOLD"
						}
					}
				},
				edgeSymbol: ["circle", "arrow"],
				edgeSymbolSize: [4, 10],
				edgeLabel: {
					normal: {
						textStyle: {
							fontSize: 18
						}
					}
				},
				//注意，所有节点的位置都是根据自己设置的x, y坐标来设置的
				data: [
					// 零层
					...titleList[0],
					// 一层
					...titleList[1],
					// 二层
					...titleList[2],

					// 一层
					{
						name: "1",
						x: 300,
						y: 100,
						symbolSize: 0
					},
					{
						name: "2",
						x: 150,
						y: 100,
						symbolSize: 0
					},
					{
						name: "3",
						x: 0,
						y: 100,
						symbolSize: 0
					},
					{
						name: "4",
						x: 350,
						y: 100,
						symbolSize: 0
					},
					{
						name: "5",
						x: 600,
						y: 100,
						symbolSize: 0
					},
					// 二层
					{
						name: "21",
						x: 0,
						y: 300,
						symbolSize: 0
					},
					{
						name: "22",
						x: 150,
						y: 300,
						symbolSize: 0
					},
					{
						name: "23",
						x: 300,
						y: 300,
						symbolSize: 0
					},
					{
						name: "24",
						x: 350,
						y: 300,
						symbolSize: 0
					},
					{
						name: "25",
						x: 450,
						y: 300,
						symbolSize: 0
					},
					{
						name: "26",
						x: 600,
						y: 300,
						symbolSize: 0
					},
					// 三层
					{
						name: "31",
						x: 0,
						y: 500,
						symbolSize: 0
					}
				],
				// links: [],
				//这是点与点之间的连接关系
				links: [
					// 零层
					{
						source: title[0].label,
						target: "1"
					},
					// 一层
					{
						source: "3",
						target: title[1].label
					},
					{
						source: "2",
						target: title[2].label
					},
					{
						source: "4",
						target: title[3].label
					},
					{
						source: "5",
						target: title[4].label
					},
					// 二层
					{
						source: title[3].label,
						target: "24"
					},
					{
						source: "21",
						target: title[5].label
					},
					{
						source: "22",
						target: title[6].label
					},
					{
						source: "23",
						target: title[7].label
					},
					{
						source: "25",
						target: title[8].label
					},
					{
						source: "26",
						target: title[9].label
					},
					// 三层
					{
						source: title[7].label,
						target: "33"
					},
					{
						source: "31",
						target: title[10].label
					},

					// 一层
					{
						source: "1",
						target: "2",
						symbol: "none"
					},
					{
						source: "2",
						target: "3",
						symbol: "none"
					},
					{
						source: "1",
						target: "4",
						symbol: "none"
					},
					{
						source: "4",
						target: "5",
						symbol: "none"
					},
					// 二层
					{
						source: "21",
						target: "22",
						symbol: "none"
					},
					{
						source: "22",
						target: "23",
						symbol: "none"
					},
					{
						source: "23",
						target: "24",
						symbol: "none"
					},
					{
						source: "24",
						target: "25",
						symbol: "none"
					},
					{
						source: "25",
						target: "26",
						symbol: "none"
					},
					// 三层
					{
						source: "31",
						target: "32",
						symbol: "none"
					}
				],
				//线条的颜色
				lineStyle: {
					normal: {
						opacity: 0.9,
						color: "#53B5EA",
						type: "dashed",
						width: 1
					}
				}
			}
		]
	};

	myEcharts.setOption(option);
	// window.addEventListener("resize", () => {
	// 	console.log(666)
	// 	leftTopEcharts.resize();
	// })
	// window.onresize = function () {
	//   myEchart.resize();
	// }
}

onMounted(() => {
	// drawChart();
});
</script>

<style lang="scss" scoped>
.projectOrganization {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #fff;
	padding: 5px 20px;
	> div:first-child {
		width: 120px;
		height: 30px;
		font-size: 16px;
		position: relative;
		background: url("@/assets/images/cardImg.png") no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	> div:first-child::after {
		content: "";
		position: absolute;
		height: 20px;
		border-left: 2px dashed rgba(83, 181, 234, 0.6);
		left: 50%;
		top: 100%;
		transform: translateX(-50%);
	}
	.container_box2 {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 15px;
		> div::after {
			content: "";
			position: absolute;
			height: 15px;
			border-left: 2px dashed rgba(83, 181, 234, 0.6);
			left: 50%;
			top: -10px;
			transform: translateX(-50%);
		}
		> div {
			background: url("@/assets/images/securityManagement/safeImg3.png") no-repeat;
			background-size: 100% 100%;
			position: relative;
		}
	}
	.container_box1 {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
		padding: 15px 0 10px 0; 
		border-top: 2px dashed rgba(83, 181, 234, 0.6);
		border-bottom: 2px dashed rgba(83, 181, 234, 0.6);
		> div::after {
			content: "";
			position: absolute;
			height: 15px;
			border-left: 2px dashed rgba(83, 181, 234, 0.6);
			left: 50%;
			top: -10px;
			transform: translateX(-50%);
		}
		> div {
			width: 4%;
			height: 100%;
			position: relative;
			> div:first-child {
				width: 25px;
				height: 80px;
				background: url("@/assets/images/bthgIcon/homeOverview_bg4.png") no-repeat;
				background-size: 100% 100%;
				transform: rotate(180deg);
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 1;
			}
			> div:last-child {
				z-index: 99;
				font-size: 12px;
				line-height: 22px;
				position: relative;
			}
		}
	}
}
.leftTop {
	width: 100%;
	height: 100%;
	.topPeopleNum {
		height: 40%;
		display: flex;
		.dataTlo {
			width: 35%;
			height: 100%;
			background: url("@/assets/images/comprehensiveManage/project9.png") no-repeat;
			background-size: 100% 100%;
			margin-left: 10%;
		}
		.dataTlt {
			width: 35%;
			height: 100%;
			background: url("@/assets/images/comprehensiveManage/project12.png") no-repeat;
			background-size: 100% 100%;
			margin-left: 10%;
		}
		.text {
			color: #fff;
			font-size: 14px;
			margin-left: 50%;
			margin-top: 15%;
		}
		.num {
			font-size: 24px;
			font-weight: bold;
			background-image: linear-gradient(to right, rgba(122, 160, 234, 1), rgba(255, 255, 255, 1));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			margin-left: 47%;
			margin-top: 5%;
		}
	}
	.bottomPeopleNum {
		height: 60%;
		div {
			height: 20%;
			color: #fff;
			font-size: 16px;
		}
		.peopleData {
			height: 80%;
			display: flex;
			.peoImg {
				width: 30%;
				height: 100%;
				img {
					margin-left: 30%;
					width: 50%;
					margin-top: 7%;
				}
			}
			.peoNum {
				height: 100%;
				width: 70%;
				position: relative;
				.penName {
					background: rgba(39, 88, 192, 0.6);
					margin: 5% 5%;
				}
				.penN {
					height: 10px;
					background: url("@/assets/images/comprehensiveManage/project8.png") no-repeat;
					background-size: 100% 100%;
					margin: 13% 5%;
				}
				.numData1 {
					left: 5%;
					top: -10%;
				}
				.numData2 {
					left: 35%;
					top: -10%;
				}
				.numData3 {
					left: 65%;
					top: -10%;
				}
				.numData {
					position: absolute;
					height: 60%;
					width: 30%;
					display: flex;
					flex-direction: column;
					align-items: center;
					.text {
						margin-top: 18%;
						font-size: 16px;
					}
					.num {
						font-size: 20px;
						margin-top: 18%;
						// margin-left: 10%;
					}
				}
			}
		}
	}
}
::v-deep .h-card .content {
	height: 80%;
}
</style>
