<template>
	<Card title="各装置实际进度">
		<div class="device-list">
			<div class="select-right">
				<el-cascader
					size="small"
					v-model="dataInfo.checkedNodeData.id"
					:options="dataInfo.listData"
					:props="{ value: 'id', label: 'deviceUnitName' }"
					@change="handleChange"
					:show-all-levels="false"
				/>
				<el-select v-model="dataInfo.deviceYearInfo.id" size="small" @change="selectChange">
					<el-option v-for="(item, index) in dataInfo.deviceYearList" :key="index" :label="item.year" :value="item.id" />
				</el-select>
			</div>
			<div class="centerBottom">
				<div
					v-if="dataInfo.listData.length > 0"
					id="stateTotal"
					class="chart"
					ref="lineCharts"
				></div>
				<div v-else>
					<div class="not-data">
						<img src="@/assets/images/noData.png" />
						<p>暂无数据</p>
					</div>
				</div>
			</div>
		</div>
	</Card>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { ref, onMounted, reactive, nextTick } from "vue";
import * as echarts from "echarts";
import symbolIcon from "@/assets/images/lineSymbol.png";
import { getDeviceScheduleListApi, getDeviceYearListApi, getProgressPlanEquipmentTreeApi } from "@/api/modules/schedulePlan";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
function selectChange(e: any) {
	const find = dataInfo.deviceYearList.find((item: any) => item.id == dataInfo.deviceYearInfo.id);
	if (find) {
		dataInfo.deviceYearInfo = JSON.parse(JSON.stringify(find));
		getDeviceScheduleList();
	}
}

const dataInfo = reactive({
	deviceScheduleList: [] as any[],
	deviceYearInfo: {} as any,
	deviceYearList: [] as any[],
	listData: [] as any[],
	checkedNodeData: {} as any
});
const lineCharts = ref(null);

const lineChartsFn = (el: any) => {
	console.log(el);
	let ageChart = echarts.init(el);
	const maxCount = dataInfo.deviceScheduleList.reduce((prev, item) => {
		const currentActual = Math.ceil(Number(item.currentActual));
		const currentPlan = Math.ceil(Number(item.currentPlan));
		const max = currentActual > currentPlan ? currentActual : currentPlan;
		prev = max > prev ? max : prev;
		return prev;
	}, 0); // 最大显示数量

	console.log(maxCount);
	let option = {
		tooltip: {
			trigger: "axis"
		},
		// toolbox: {
		//     feature: {
		//     dataView: { show: true, readOnly: false },
		//     magicType: { show: true, type: ['line', 'bar'] },
		//     restore: { show: true },
		//     saveAsImage: { show: true }
		//     }
		// },
		legend: {
			align: "left", //图例位置
			itemGap: 15, //图例之间的间隔
			orient: "vertical",
			x: "right", //可设定图例在左、右、居中
			y: "center", //可设定图例在上、下、居中
			padding: [0, 20, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
			data: [
				{
					icon: "roundRect",
					name: "当期计划"
				},
				{
					icon: "roundRect",
					name: "当期实际"
				},
				{
					icon: "circle",
					name: "累计计划"
				},
				{
					icon: "circle",
					name: "累计实际"
				}
			],
			itemWidth: 10,
			itemHeight: 10,
			textStyle: {
				color: "#ffffff" //字体颜色
			}
		},
		grid: {
			left: "5%",
			right: "12%",
			bottom: "10%",
			containLabel: true
		},
		// toolbox: {
		//     feature: {
		//         saveAsImage: {}
		//     }
		// },
		xAxis: {
			//   name: "月份", //X轴标题
			type: "category",
			//   boundaryGap: false,
			data: dataInfo.deviceScheduleList.map(item => item.year + "-" + item.month),
			axisPointer: {
				type: "shadow"
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "#193c81"
				}
			},
			axisLabel: {
				show: true,
				interval: 0,
				textStyle: {
					color: "#ffffff"
				}
			}
		},
		yAxis: [
			{
				name: "累计", //Y轴标题
				type: "value",
				axisTick: {
					// 轴刻度
					show: false
				},
				axisLine: {
					// 轴线
					show: true,
					lineStyle: {
						color: "#193c81"
					}
				},
				itemStyle: {
					//颜色 默认灰色
					//   color:  'rgba(255,255,255,1)',
					color: "#fff"
				},
				nameTextStyle: {
					padding: [0, 0, 0, -30], // 四个数字分别为上右下左与原位置距离
					color: "#fff"
				},
				splitLine: {
					show: true,
					lineStyle: {
						type: "dashed",
						color: "#193c81"
					}
				},
				axisLabel: {
					show: true,
					textStyle: {
						color: "#ffffff"
					}
				}
			},
			{
				name: "当期", //Y轴标题
				min: 0,
				max: maxCount,
				// interval: 2,
				type: "value",
				axisTick: {
					// 轴刻度
					show: false
				},
				axisLine: {
					// 轴线
					show: true,
					lineStyle: {
						color: "#193c81"
					}
				},
				itemStyle: {
					//颜色 默认灰色
					color: "#ffffff"
				},
				nameTextStyle: {
					padding: [0, 0, 0, 0], // 四个数字分别为上右下左与原位置距离
					color: "#fff"
				},
				splitLine: {
					show: false,
					lineStyle: {
						type: "dashed",
						color: "#193c81"
					}
				},
				axisLabel: {
					show: true,
					textStyle: {
						color: "#ffffff"
					}
				}
			}
		],
		series: [
			{
				name: "当期计划",
				type: "bar",
				yAxisIndex: 1,
				data: dataInfo.deviceScheduleList.map(item => item.currentPlan),
				itemStyle: {
					//颜色 默认灰色
					color: "rgba(210,210,250,1)"
				},
				barWidth: 10 // 设置柱子粗细
			},
			{
				name: "当期实际",
				type: "bar",
				yAxisIndex: 1,
				// stack: 'Total',
				data: dataInfo.deviceScheduleList.map(item => item.currentActual),
				itemStyle: {
					//颜色 默认灰色
					color: "rgba(251,242,183,1)"
				},
				barWidth: 10 // 设置柱子粗细
			},
			{
				name: "累计计划",
				type: "line",
				// stack: 'Total',
				data: dataInfo.deviceScheduleList.map(item => item.cumulativePlan),
				itemStyle: {
					//颜色 默认灰色
					color: "rgba(97,106,220,1)"
				},
				symbol: "circle", //将小圆点改成实心 不写symbol默认空心
				symbolSize: 5 //小圆点的大小
			},
			{
				name: "累计实际",
				type: "line",
				// stack: 'Total',
				data: dataInfo.deviceScheduleList.map(item => item.cumulativeActual),
				itemStyle: {
					//颜色 默认灰色
					color: "rgba(246,210,16,1)"
				},
				symbol: "circle", //将小圆点改成实心 不写symbol默认空心
				symbolSize: 5 //小圆点的大小
			}
		],
		dataZoom: [
			{
				type: "slider", //隐藏或显示（true）组件
				show: dataInfo.deviceScheduleList.length > 12 ? true : false,
				// backgroundColor: "rgb(19, 63, 100)", // 组件的背景颜色。
				// fillerColor: "rgb(16, 171, 198)", // 选中范围的填充颜色。
				// borderColor: "rgb(19, 63, 100)", // 边框颜色
				showDetail: false, //是否显示detail，即拖拽时候显示详细数值信息
				startValue: 0,
				endValue: 11,
				filterMode: "empty",
				width: "50%", //滚动条高度
				height: 6, //滚动条显示位置
				left: "center",
				zoomLoxk: true, // 是否锁定选择区域（或叫做数据窗口）的大小
				handleSize: 0, //控制手柄的尺寸
				bottom: 0 // dataZoom-slider组件离容器下侧的距离
			},
			{
				//没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
				type: "inside",
				zoomOnMouseWheel: false, //滚轮是否触发缩放
				moveOnMouseMove: true, //鼠标滚轮触发滚动
				moveOnMouseWheel: true
			}
		]
	} as any;
	ageChart.setOption(option);
	window.addEventListener("resize", () => {
		ageChart.resize();
	});
};
const getDeviceScheduleList = () => {
	let data = {
		projectSn: store.sn,
		pageNo: 1,
		pageSize: -1,
		deviceUnitId: dataInfo.checkedNodeData.id,
		year: dataInfo.deviceYearInfo.year == "全部" ? "" : dataInfo.deviceYearInfo.year
		// isFilterQualityRegionEnterprise: 1
	};
	getDeviceScheduleListApi(data).then((res: any) => {
		if (res.code == 200) {
			dataInfo.deviceScheduleList = res.result.records;
			nextTick(() => {
				lineChartsFn(lineCharts.value);
			});
			console.log("查询装置主进度计划详情信息", dataInfo.deviceScheduleList);
		}
	});
};

//查询装置主进度计划年份信息
const getDeviceYearList = () => {
	let data = {
		projectSn: store.sn,
		pageNo: 1,
		pageSize: -1,
		deviceUnitId: dataInfo.checkedNodeData.id
		// isFilterQualityRegionEnterprise: 1
	};
	getDeviceYearListApi(data).then((res: any) => {
		if (res.code == 200) {
			dataInfo.deviceYearList = [
				{
					id: "",
					year: "全部"
				},
				...res.result.records
			];
			dataInfo.deviceYearInfo = JSON.parse(JSON.stringify(dataInfo.deviceYearList[0]));
			console.log("查询装置主进度计划年份信息", dataInfo.deviceYearList);
			getDeviceScheduleList();
		}
	});
};

//获取左侧---列表信息
const getDangerTypeRecordList = () => {
	console.log(22);
	let data = {
		projectSn: store.sn,
		hasAll: 1
	};
	getProgressPlanEquipmentTreeApi(data).then((res: any) => {
		if (res.code == 200) {
			if (res.result.length > 0) {
				dataInfo.listData = [
					// {
					//   id: '',
					//   children: [],
					//   deviceUnitName: '全部'
					// },
					...res.result
				];
				dataInfo.checkedNodeData.id = dataInfo.listData[0].id;
				getDeviceYearList();
				console.log("获取左侧---列表信息", dataInfo.listData);
			} else {
				dataInfo.listData = [];
			}
		}
	});
};

const handleChange = (e: any) => {
	// console.log('handleChange', e);
	// // const find = dataInfo.listData.find((item: any) => item.id == dataInfo.checkedNodeData.id[dataInfo.checkedNodeData.id.length - 1]);
	// const find = nodeTree(dataInfo.listData, e[e.length - 1]);
	// const resultList = find.filter((item:any) => item.length > 0)
	// console.log('handleChange', find);
	// if(resultList && resultList[0]) {
	//     dataInfo.checkedNodeData = resultList[0][0].deviceUnitName == "全部装置" ? dataInfo.listData[0] : resultList[0][0];
	//     getDeviceYearList();
	// }
	dataInfo.checkedNodeData.id = e[e.length - 1];
	getDeviceYearList();

	console.log("handleChange", dataInfo.checkedNodeData, dataInfo.listData, e);
};

const nodeTree = (node: any, id: any) => {
	return node
		.map((item: any) => {
			if (item.id == id)
				return {
					...item
				};
			if (item.children && item.children.length > 0) {
				return nodeTree(item.children, id).filter((item: any) => item !== undefined);
			}
		})
		.filter((item: any) => item !== undefined);
};

onMounted(async () => {
	// await getChartTotal();
	// draw();
	getDangerTypeRecordList();
	// console.log("Mount_type", dialogIndex.value);
});
</script>

<style scoped lang="scss">
.device-list {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	position: relative;
	.select-right {
		position: absolute;
		right: 3%;
		width: 15%;
		top: -18%;
		z-index: 9;
		display: flex;
		> div:not(:first-child) {
			margin-left: 20px;
		}
	}
	.centerBottom {
		width: 100%;
		height: 100%;
		position: relative;
		.chart {
			width: 920px;
			height: 228px;
		}
		.not-data {
			width: 20%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			img {
				width: 40%;
				margin: 5% 30%;
			}
			p {
				color: #fff;
				font-size: calc(100vw * 14 / 1920);
				margin: 0;
				text-align: center;
			}
		}
	}
}
</style>
