<template>
	<div class="leftcent" ref="leftcent">
		<div class="tile" ref="tile">
			<div class="tilein" ref="tilein"></div>
		</div>
		<div class="tiilecent">在建项目指标</div>
		<div></div>
		<div class="title">
			<div class="titlecent">
				<span>在建项目数：</span>
				<div class="col">{{ projectInfo.num }}</div>
				个
			</div>
			<div class="titlecent">
				<span>总造价：</span>
				<div class="col">{{ projectInfo.cost?.toFixed(2) }}</div>
				万
			</div>
		</div>
		<div class="topsix">
			<!-- <div class="topsixin">
				<div class="bg1"></div>
				<div class="titles">
					<div>-</div>
					<div>省市级项目</div>
				</div>
			</div> -->
			<div class="topsixin">
				<div class="bg2"></div>
				<div class="titles">
					<div>{{ projectInfo.importance }}</div>
					<div>区重点项目</div>
				</div>
			</div>
			<!-- <div class="topsixin">
				<div class="bg3"></div>
				<div class="titles">
					<div>-</div>
					<div>里程（km）</div>
				</div>
			</div> -->
			<div class="topsixin">
				<div class="bg4"></div>
				<div class="titles">
					<div>{{ projectInfo.bridge }}</div>
					<div>桥梁（座）</div>
				</div>
			</div>
			<div class="topsixin">
				<div class="bg5"></div>
				<div class="titles">
					<div>{{ projectInfo.tunnel }}</div>
					<div>隧道（座）</div>
				</div>
			</div>
			<div class="topsixin">
				<div class="bg6"></div>
				<div class="titles">
					<div>{{ projectInfo.station }}</div>
					<div>站场（座）</div>
				</div>
			</div>
		</div>
		<div class="mainleto" ref="mainleto" style="height: 260px"></div>
		<div class="mainlett" ref="mainlett" style="height: 260px"></div>
		<div class="echatop">
			<div class="tub"></div>
			<div>
				新建项目：<span>{{ projectInfo.newBuild }}</span
				>个
			</div>
			<div>
				改建项目：<span>{{ projectInfo.reBuild }}</span
				>个
			</div>
			<div>
				扩建项目：<span>{{ projectInfo.extension }}</span
				>个
			</div>
			<div>
				合计项目：<span>{{ Number(projectInfo.newBuild + projectInfo.reBuild + projectInfo.extension) }}</span
				>个
			</div>
		</div>
		<div class="echabut">
			<div class="tub"></div>
			<div>
				完工项目：<span>{{ projectInfo.finished }}</span
				>个
			</div>
			<div>
				在建项目：<span>{{ projectInfo.building }}</span
				>个
			</div>
			<div>
				停工项目：<span>{{ projectInfo.shutdown }}</span
				>个
			</div>
			<div>
				合计项目：<span>{{ Number(projectInfo.finished + projectInfo.building + projectInfo.shutdown) }}</span
				>个
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { getProjectInfo } from "@/api/modules/largeScreenTwo";
//项目信息 --- start
const projectInfo = ref({
	importance: 0,
	bridge: 0,
	tunnel: 0,
	station: 0,
	newBuild: 0,
	reBuild: 0,
	extension: 0,
	total: 0,
	finished: 0,
	shutdown: 0,
	total1: 0
});
//项目信息 --- end
// 获取项目信息
const getProject = async () => {
	const res = await getProjectInfo();
	projectInfo.value = res.result;
};
const mainleto = ref();
const mainlett = ref();

const leftcent = ref();
const tile = ref();
const tilein = ref();

onMounted(async () => {
	await getProject();
	myChamainleto();
	myChamainlett();
});

const myChamainleto = () => {
	let myChart = echarts.init(mainleto.value);
	const CubeLeft = echarts.graphic.extendShape({
		shape: {
			x: 0,
			y: 0
		},
		buildPath: function (ctx, shape) {
			// 会canvas的应该都能看得懂，shape是从custom传入的
			const xAxisPoint = shape.xAxisPoint;
			const c0 = [shape.x, shape.y];
			const c1 = [shape.x - 14, shape.y - 9];
			const c2 = [xAxisPoint[0] - 14, xAxisPoint[1] - 8];
			const c3 = [xAxisPoint[0], xAxisPoint[1]];
			ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
		}
	});
	// 绘制右侧面
	const CubeRight = echarts.graphic.extendShape({
		shape: {
			x: 0,
			y: 0
		},
		buildPath: function (ctx, shape) {
			const xAxisPoint = shape.xAxisPoint;
			const c1 = [shape.x, shape.y];
			const c2 = [xAxisPoint[0], xAxisPoint[1]];
			const c3 = [xAxisPoint[0] + 14, xAxisPoint[1] - 8];
			const c4 = [shape.x + 14, shape.y - 8];
			ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
		}
	});
	// 绘制顶面
	const CubeTop = echarts.graphic.extendShape({
		shape: {
			x: 0,
			y: 0
		},
		buildPath: function (ctx, shape) {
			const c1 = [shape.x, shape.y];
			const c2 = [shape.x + 14, shape.y - 9];
			const c3 = [shape.x, shape.y - 18];
			const c4 = [shape.x - 14, shape.y - 9];
			ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
		}
	});
	// 注册三个面图形
	echarts.graphic.registerShape("CubeLeft", CubeLeft);
	echarts.graphic.registerShape("CubeRight", CubeRight);
	echarts.graphic.registerShape("CubeTop", CubeTop);

	const NUM = projectInfo.value.total || 100;
	const MAX = [NUM, NUM, NUM, NUM];
	const VALUE = [projectInfo.value.newBuild, projectInfo.value.reBuild, projectInfo.value.extension, projectInfo.value.total];
	let category = ["新建", "改建", "扩建", "合计"];
	myChart.setOption({
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "shadow"
			},
			formatter: function (params, ticket, callback) {
				const item = params[1];
				return item.name + " : " + item.value;
			}
		},
		grid: {
			left: "10%",
			right: "10%",
			bottom: 30,
			top: 30
		},
		xAxis: [
			{
				type: "category",
				position: "bottom",
				data: category,
				axisLine: {
					lineStyle: {
						color: "#e0e7ff"
					}
				},
				axisLine: {
					show: false
				},
				axisTick: {
					show: false,
					length: 6
				},
				axisLabel: {
					color: "#fff",
					fontSize: 12,
					rotate: 0
				}
			}
		],
		yAxis: {
			type: "value",
			name: "",
			axisLine: {
				show: false
			},
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},

			axisLabel: {
				show: false
			},
			boundaryGap: ["0%", "0%"]
		},
		series: [
			{
				type: "custom",
				renderItem: function (params, api) {
					const location = api.coord([api.value(0), api.value(1)]);
					return {
						type: "group",
						children: [
							{
								type: "CubeLeft",
								shape: {
									api,
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: "rgba(14, 54, 126,0.4)"
								}
							},
							{
								type: "CubeRight",
								shape: {
									api,
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: "rgba(17, 61, 135,0.5)"
								}
							},
							{
								type: "CubeTop",
								shape: {
									api,
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: "rgba(20, 68, 134,0.6)"
								}
							}
						]
					};
				},
				data: MAX
			},
			{
				type: "custom",
				renderItem: (params, api) => {
					const location = api.coord([api.value(0), api.value(1)]);
					var color =
						api.value(1) > 2000
							? "red"
							: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: "#3385bc"
									},
									{
										offset: 1,
										color: "#3c6bb9"
									}
							  ]);
					var color1 =
						api.value(1) > 2000
							? "red"
							: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: "#44befc"
									},
									{
										offset: 1,
										color: "#4d98ff"
									}
							  ]);
					var color2 =
						api.value(1) > 2000
							? "red"
							: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: "#38c6fe"
									},
									{
										offset: 1,
										color: "#42bcf9"
									}
							  ]);
					return {
						type: "group",
						children: [
							{
								type: "CubeLeft",
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: color
								}
							},
							{
								type: "CubeRight",
								shape: {
									api,
									xValue: api.value(1),
									yValue: api.value(0),
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: color1
								}
							},
							{
								type: "CubeTop",
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: color2
								}
							}
						]
					};
				},
				data: VALUE
			},
			{
				type: "bar",
				label: {
					show: false,
					position: "top",
					fontSize: 12,
					color: "#",
					offset: [2, -15]
				},
				itemStyle: {
					color: "transparent"
				},
				tooltip: {},
				data: MAX
			}
		]
	});
};
const myChamainlett = () => {
	let myChart = echarts.init(mainlett.value);
	const CubeLeft = echarts.graphic.extendShape({
		shape: {
			x: 0,
			y: 0
		},
		buildPath: function (ctx, shape) {
			// 会canvas的应该都能看得懂，shape是从custom传入的
			const xAxisPoint = shape.xAxisPoint;
			const c0 = [shape.x, shape.y];
			const c1 = [shape.x - 14, shape.y - 9];
			const c2 = [xAxisPoint[0] - 14, xAxisPoint[1] - 8];
			const c3 = [xAxisPoint[0], xAxisPoint[1]];
			ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
		}
	});
	// 绘制右侧面
	const CubeRight = echarts.graphic.extendShape({
		shape: {
			x: 0,
			y: 0
		},
		buildPath: function (ctx, shape) {
			const xAxisPoint = shape.xAxisPoint;
			const c1 = [shape.x, shape.y];
			const c2 = [xAxisPoint[0], xAxisPoint[1]];
			const c3 = [xAxisPoint[0] + 14, xAxisPoint[1] - 8];
			const c4 = [shape.x + 14, shape.y - 8];
			ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
		}
	});
	// 绘制顶面
	const CubeTop = echarts.graphic.extendShape({
		shape: {
			x: 0,
			y: 0
		},
		buildPath: function (ctx, shape) {
			const c1 = [shape.x, shape.y];
			const c2 = [shape.x + 14, shape.y - 9];
			const c3 = [shape.x, shape.y - 18];
			const c4 = [shape.x - 14, shape.y - 9];
			ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
		}
	});
	// 注册三个面图形
	echarts.graphic.registerShape("CubeLeft", CubeLeft);
	echarts.graphic.registerShape("CubeRight", CubeRight);
	echarts.graphic.registerShape("CubeTop", CubeTop);
	const NUM = projectInfo.value.total1 || 100;
	const MAX = [NUM, NUM, NUM, NUM];
	const VALUE = [projectInfo.value.finished, projectInfo.value.newBuild, projectInfo.value.shutdown, projectInfo.value.total1];
	let category = ["完工", "在建", "停工", "合计"];
	myChart.setOption({
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "shadow"
			},
			formatter: function (params, ticket, callback) {
				const item = params[1];
				return item.name + " : " + item.value;
			}
		},
		grid: {
			left: "10%",
			right: "10%",
			bottom: 30,
			top: 30
		},
		xAxis: [
			{
				type: "category",
				position: "bottom",
				data: category,
				axisLine: {
					lineStyle: {
						color: "#e0e7ff"
					}
				},
				axisLine: {
					show: false
				},
				axisTick: {
					show: false,
					length: 6
				},
				axisLabel: {
					// show:false,
					color: "#fff",
					fontSize: 12,
					rotate: 0
				}
			}
		],
		yAxis: {
			type: "value",
			name: "",
			axisLine: {
				show: false
			},
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},

			axisLabel: {
				show: false
			},
			boundaryGap: ["0%", "0%"]
		},
		series: [
			{
				type: "custom",
				renderItem: function (params, api) {
					const location = api.coord([api.value(0), api.value(1)]);
					return {
						type: "group",
						children: [
							{
								type: "CubeLeft",
								shape: {
									api,
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: "rgba(14, 54, 126,0.4)"
								}
							},
							{
								type: "CubeRight",
								shape: {
									api,
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: "rgba(17, 61, 135,0.5)"
								}
							},
							{
								type: "CubeTop",
								shape: {
									api,
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: "rgba(20, 68, 134,0.6)"
								}
							}
						]
					};
				},
				data: MAX
			},
			{
				type: "custom",
				renderItem: (params, api) => {
					const location = api.coord([api.value(0), api.value(1)]);
					var color =
						api.value(1) > 2000
							? "red"
							: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: "#61e400"
									},
									{
										offset: 1,
										color: "#389500"
									}
							  ]);
					var color1 =
						api.value(1) > 2000
							? "red"
							: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: "#95fb4c"
									},
									{
										offset: 1,
										color: "#95fb4c"
									}
							  ]);
					var color2 =
						api.value(1) > 2000
							? "red"
							: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: "#53c400"
									},
									{
										offset: 1,
										color: "#2e7a00"
									}
							  ]);
					return {
						type: "group",
						children: [
							{
								type: "CubeLeft",
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: color2
								}
							},
							{
								type: "CubeRight",
								shape: {
									api,
									xValue: api.value(1),
									yValue: api.value(0),
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: color
								}
							},
							{
								type: "CubeTop",
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: color1
								}
							}
						]
					};
				},
				data: VALUE
			},
			{
				type: "bar",
				label: {
					show: false,
					position: "top",
					fontSize: 12,
					color: "#",
					offset: [2, -15]
				},
				itemStyle: {
					color: "transparent"
				},
				tooltip: {},
				data: MAX
			}
		]
	});
};
</script>
<style scoped lang="scss">
.leftcent {
	position: relative;
	width: 100%;
	height: 950px;
	margin-left: 5px;
	background-color: #060f2c;
	border: 1px solid #084b60;
	.tile {
		position: absolute;
		top: 5px;
		width: 99%;
		height: 43px;
		background: url("@/assets/images/xmgl/title_01.png") top left no-repeat,
			url("@/assets/images/xmgl/title_05.png") top right no-repeat;
		.tilein {
			width: 83.2%;
			height: 43px;
			margin-left: 6.3%;
			background: url("@/assets/images/xmgl/title_03.png") center repeat-x;
		}
	}
	.tiilecent {
		position: absolute;
		top: 10px;
		left: 30px;
		font-size: 24px;
		color: #a6b8d2;
		letter-spacing: 5px;
	}
	.title {
		position: absolute;
		top: 70px;
		display: flex;
		justify-content: space-around;
		width: 100%;
		.titlecent {
			display: flex;
			justify-content: center;
			width: 40%;
			font-size: 20px;
			color: #e2e3e5;
			span {
				white-space: nowrap;
			}
			.col {
				font-size: 20px;
				color: #32d8f2;
			}
		}
	}
	.topsix {
		position: absolute;
		top: 130px;
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		.topsixin {
			// border: 1px solid red;
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 50%;
			height: 75px;
			margin-bottom: 15%;
			// padding: 0px 15px;
			.titles {
				display: flex;

				// border: 1px solid red;
				flex-wrap: wrap;
				width: 70px;
				div {
					width: 100%;
					height: 100%;
					font-size: 24px;
					color: #00ccff;
				}
				div:nth-child(2) {
					font-size: 18px;
					color: #d1e2e3;
					white-space: nowrap;
				}
			}
			.bg1 {
				width: 70px;
				height: 70px;
				background: url("@/assets/images/main/q5.png") no-repeat;
				background-size: 100% 100%;
			}
			.bg2 {
				width: 70px;
				height: 70px;
				background: url("@/assets/images/main/q4.png") no-repeat;
				background-size: 100% 100%;
			}
			.bg3 {
				width: 70px;
				height: 70px;
				background: url("@/assets/images/main/q2.png") no-repeat;
				background-size: 100% 100%;
			}
			.bg4 {
				width: 70px;
				height: 70px;
				background: url("@/assets/images/main/q3.png") no-repeat;
				background-size: 100% 100%;
			}
			.bg5 {
				width: 70px;
				height: 70px;
				background: url("@/assets/images/main/q6.png") no-repeat;
				background-size: 100% 100%;
			}
			.bg6 {
				width: 70px;
				height: 70px;
				background: url("@/assets/images/main/q1.png") no-repeat;
				background-size: 100% 100%;
			}
		}
	}
	.mainleto {
		position: absolute;
		top: 390px;
		width: 65%;
	}
	.mainlett {
		position: absolute;
		top: 680px;
		width: 65%;
	}
	.echatop {
		position: absolute;
		top: 440px;
		right: 20px;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		color: #d1e2e3;
		span {
			color: #00bbeb;
			font-size: 20px;
		}
		div {
			margin-top: 15px;
		}
		.tub {
			position: absolute;
			top: -10px;
			left: -10px;
			width: 9px;
			height: 10px;
			background: url("@/assets/images/main/sjx.png") no-repeat;
			background-size: 100% 100%;
		}
	}
	.echabut {
		position: absolute;
		top: 730px;
		right: 20px;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		color: #d1e2e3;
		span {
			color: #00bbeb;
			font-size: 20px;
		}
		div {
			margin-top: 15px;
		}
		.tub {
			position: absolute;
			top: -10px;
			left: -10px;
			width: 9px;
			height: 10px;
			background: url("@/assets/images/main/sjx.png") no-repeat;
			background-size: 100% 100%;
		}
	}
}
</style>
