import * as echarts from 'echarts'
import 'echarts-liquidfill'
import { setOptions, nowSize } from "./echarts";

let entThroughput5 = null
export function setEntThroughput5(ele, dataIn) {
	if (entThroughput5) {
		entThroughput5.dispose()
	}
	let values = []
	dataIn.forEach(row => {
		values.push(row.ton)
	})

	let option = {
		backgroundColor: 'transparent',
		grid: [{
			left: "3%",
			right: "6%",
			bottom: "1%",
			top: "10%",
			containLabel: false,
		}],
		tooltip: {
			trigger: 'axis',
			borderColor: "#092B46",
			backgroundColor: "#092B46",
			position: {right: 0, bottom: '40%'},
			textStyle: {
				color: "#eee",
				fontSize: nowSize(14),
				// align: 'left'
			},
			axisPointer: {
				type: 'shadow'
			},
			formatter: function (params) {
				return dataIn[params[0].dataIndex].unitName || '' + ':' + params[0].value
			}
		},
		xAxis: {
			axisLabel: {
				fontSize: nowSize(14),
				fontWeight: 700,
				margin: -nowSize(15),
				interval: 0
			},
			axisLine: {
				show: false
			},
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			data: [
				{ value: 'TOP01', textStyle: { color: 'rgba(255, 84, 31, 0.8)' } },
				{ value: 'TOP02', textStyle: { color: 'rgba(255, 170, 49, 0.8)' } },
				{ value: 'TOP03', textStyle: { color: 'rgba(77, 255, 148, 0.8)' } },
				{ value: 'TOP04', textStyle: { color: 'rgba(80, 186, 226, 0.8)' } },
				{ value: 'TOP05', textStyle: { color: 'rgba(127, 138, 255, 0.8)' } }
			]
		},
		yAxis: {
			show: false,
		},
		series: [
			{
				name: 'hill',
				type: 'pictorialBar',
				barCategoryGap: '-50%',
				symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
				label: {
					show: true,
					position: 'top',
					distance: nowSize(0),
					formatter: function (params) {
						let label = dataIn[params.dataIndex].unitName || ''
						if (label.length > 4) {
							label = label.slice(0, 4) + '...'
						}
						return '{value|' + params.value + '}\n{label|' + label + "}"
					},
					rich: {
						value: {
							fontSize: nowSize(16),
							fontFamily: 'Barlow',
							fontWeight: 600,
							color: "rgba(255,255,255,0.9)",
							padding: [nowSize(5), 0],
							align: 'center'
						},
						label: {
							fontSize: nowSize(12),
							fontWeight: 400,
							color: "rgba(255,255,255,0.7)",
						}
					}

				},
				itemStyle: {
					color: function (params) {
						let colorList = [
							{ color0: 'rgba(255, 84, 31, 0.5)', color1: 'rgba(255, 84, 31, 0.1)' },
							{ color0: 'rgba(255, 170, 49, 0.5)', color1: 'rgba(255, 170, 49, 0.1)' },
							{ color0: 'rgba(77, 255, 148, 0.5)', color1: 'rgba(77, 255, 148, 0.1)' },
							{ color0: 'rgba(80, 186, 226, 0.5)', color1: 'rgba(80, 186, 226, 0.1)' },
							{ color0: 'rgba(127, 138, 255, 0.5)', color1: 'rgba(127, 138, 255, 0.1)' },
						]
						return {
							type: "linear", x: 0, y: 0, x2: 0, y2: 1,
							colorStops: [
								{ offset: 0, color: colorList[params.dataIndex].color1 },
								{ offset: 1, color: colorList[params.dataIndex].color0 }
							],
							globalCoord: false
						}
					}
				},
				emphasis: {
					opacity: 1
				},
				data: values, // 修改值
				z: 10
			}
		]
	}

	entThroughput5 = setOptions(ele, option)
}

let sjjk = null
export function setSjjk(ele, dataIn) {
	if (sjjk) {
		sjjk.dispose()
	}

	let max_total = 0
	let time = []; let total = []; let sum = []
	dataIn.forEach(i => {
		time.push(i.TIME)
		total.push(i.TOTAL)
		sum.push(i.SUM)
		if (i.TOTAL > max_total) {
			max_total = i.TOTAL
		}
	})
	max_total += 5 - max_total % 5

	let option = {
		backgroundColor: "transparent",
		grid: {
			containLabel: true,
			left: "0%",
			right: "0%",
			top: "15%",
			bottom: "0%",
		},
		tooltip: {
			trigger: 'axis',
			borderColor: "#092B46",
			backgroundColor: "#092B46",
			textStyle: {
				color: "#eee",
				fontSize: nowSize(12),
				align: 'left'
			},
			axisPointer: {
				type: 'shadow'
			},
		},
		legend: {
			show: false,
		},
		xAxis: [
			{
				type: 'category',
				axisLine: { show: false },
				splitLine: { show: false },
				axisTick: { show: false },
				axisLabel: {
					color: 'rgba(255, 255, 255, 1)',
					fontSize: nowSize(11),
					interval: 0,
					formatter: function (value) {
						return value.slice(5)
					}
				},
				data: time
			}
		],
		yAxis: [
			{
				type: 'value',
				name: '工单数(个)',
				max: max_total.toString(),
				nameTextStyle: {
					color: 'rgba(255, 255, 255, 1)',
					fontSize: nowSize(12),
					align: 'left'
				},
				axisLine: { show: false },
				axisTick: { show: false },
				splitLine: {
					show: true,
					lineStyle: {
						type: 'dashed',
						color: 'rgba(151, 169, 217, 0.5)'
					}

				},
				axisLabel: {
					color: 'rgba(255, 255, 255, 0.7)',
					fontSize: nowSize(12),
				}
			},
			{
				type: 'value',
				name: '合计方量(万m2)',
				nameTextStyle: {
					color: 'rgba(255, 255, 255, 1)',
					fontSize: nowSize(12),
					align: 'right'
				},
				position: 'right',
				axisLine: { show: false },
				axisTick: { show: false },
				splitLine: {
					show: false,
				},
				axisLabel: {
					color: 'rgba(255, 255, 255, 0.8)',
					fontSize: nowSize(12),
				}
			}
		],
		series: [
			{
				name: '工单数',
				silent: false,
				type: 'bar',
				barWidth: nowSize(11),
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0.3,
						color: 'rgba(67, 166, 255, 1)'
					}, {
						offset: 1,
						color: 'rgba(0, 44, 89, 1)'
					}]),
					opacity: 1,
				},
				yAxisIndex: 0,
				data: total,
			},
			{
				name: "工单数",
				type: "scatter",
				silent: true,
				tooltip: {
					show: false
				},
				emphasis: {
					scale: false,
				},
				symbol: "rect",
				symbolSize: [nowSize(18), nowSize(5)],
				itemStyle: {
					color: 'rgba(161, 245, 255, 1)',
					shadowColor: "rgba(161, 245, 255, 0.7)",
					shadowBlur: nowSize(5),
					borderWidth: 1,
					opacity: 1,
				},
				z: 2,
				data: total,
				yAxisIndex: 0,
				animationDelay: 500,
			},
			{
				name: '合计方量',
				silent: false,
				type: 'line',
				symbol: 'emptyCircle',
				symbolSize: nowSize(11),
				yAxisIndex: 1,
				itemStyle: { color: 'rgba(143, 186, 236, 1)'},
				data: sum,
			}
		]
	}
	sjjk = setOptions(ele, option)
	return sjjk
}

let cbgn = null
export function setCbgn(ele, data) {
	if (cbgn) {
		cbgn.dispose()
	}
	const xData = data.map((i) => i.name);
	const yData = data.map((i) => i.value);

	const offsetX = nowSize(8);
	const offsetY = nowSize(4);
	// 绘制左侧面
	const CubeLeft = echarts.graphic.extendShape({
		shape: {
			x: 0,
			y: 0,
		},
		buildPath: function (ctx, shape) {
			const xAxisPoint = shape.xAxisPoint;
			const c0 = [shape.x, shape.y];
			const c1 = [shape.x - offsetX, shape.y - offsetY];
			const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
			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] + offsetX, xAxisPoint[1] - offsetY];
			const c4 = [shape.x + offsetX, shape.y - offsetY];
			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 + offsetX, shape.y - offsetY]; //右点
			const c3 = [shape.x, shape.y - offsetX];
			const c4 = [shape.x - offsetX, shape.y - offsetY];
			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 rightColor1 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
		{
			offset: 0,
			color: 'rgba(44, 177, 226, 1)',
		},
		{
			offset: 1,
			color: 'rgba(44, 177, 226, 0)'
		}
	])
	const leftColor1 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
		{
			offset: 0,
			color: 'rgba(7, 111, 139, 1)',
		},
		{
			offset: 1,
			color: 'rgba(7, 111, 139, 0)'
		}
	])
	const topColor1 = 'rgba(87, 189, 226, 1)'
	const rightColor2 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
		{
			offset: 0,
			color: 'rgba(84, 192, 189, 1)',
		},
		{
			offset: 1,
			color: 'rgba(84, 192, 189, 0)'
		}
	])
	const leftColor2 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
		{
			offset: 0,
			color: 'rgba(34, 111, 105, 1)',
		},
		{
			offset: 1,
			color: 'rgba(34, 111, 105, 0)'
		}
	])
	const topColor2 = 'rgba(114, 195, 193, 1)'

	let option = {
		backgroundColor: 'transparent',
		// 提示框
		tooltip: {
			trigger: 'axis',
			backgroundColor: 'rgba(11, 28, 63, 0.9)',
			borderColor: '#2da0de',
			textStyle: {
				color: '#ccc'
			},
		},
		grid: {
			top: '20%',
			left: '0%',
			right: '0%',
			bottom: '15%',
		},
		xAxis: [
			// 立体柱状图由两部分堆叠组成 ，设置serve中xAxisIndex可进行堆叠
			// 横向柱状图 xAxis中 type设置成value yAxis设置category ，serve中设置yAxisIndex可进行堆叠
			{
				type: 'category',
				axisTick: { show: false },
				axisLine: { show: false },
				axisLabel: {
					interval: 0,
					rotate: 0,
					color: '#ddd',
					fontSize: nowSize(13),
					margin: nowSize(5), //刻度标签与轴线之间的距离。
				},
				data: xData,
			},
			{
				type: 'category',
				axisLine: { show: false },
				axisTick: { show: false },
				axisLabel: { show: false },
				splitArea: { show: false },
				splitLine: { show: false },
				data: xData,
			},
		],
		yAxis: {
			show: false,
		},
		series: [
			{
				type: "custom",
				renderItem: (params, api) => {
					const location = api.coord([api.value(0), api.value(1)]);
					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: params.dataIndex % 2 === 0 ? leftColor1 : leftColor2
								}
							},
							{
								type: "CubeRight",
								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: params.dataIndex % 2 === 0 ? rightColor1 : rightColor2
								},
							},
							{
								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: params.dataIndex % 2 === 0 ? topColor1 : topColor2
								},
							},
						],
					};
				},
				data: yData,
			},
			{
				type: "bar",
				tooltip: {
					show: false
				},
				itemStyle: {
					color: "transparent",
				},
				label: {
					show: true,
					position: 'top',
					fontSize: nowSize(14),
					color: '#DFEEFA',
					offset: [0, nowSize(-9)],
					fontFamily: 'BarlowBold'
				},
				data: yData,
			},
		],
	};

	cbgn = setOptions(ele, option)
}

let fsdll = null
export function setFsdll(ele, dataIn) {
	if (fsdll) {
		fsdll.dispose()
	}
	let month = []; let value = [];
	dataIn.forEach(i => {
		month.push(i.GPSTIME)
		value.push(i.NUM)
	})

	let option = {
		backgroundColor: 'transparent',
		tooltip: {
			trigger: 'axis',
			borderColor: "#092B46",
			backgroundColor: "#092B46",
			textStyle: {
				color: "#ddd",
				fontSize: nowSize(12),
				align: 'left'
			}
		},
		grid: {
			containLabel: true,
			top: '15%',
			left: '5%',
			right: '8%',
			bottom: '5%',
		},
		xAxis: [
			{
				type: 'category',
				axisLine: {
					show: false,
				},
				axisLabel: {
					show: true,
					color: '#ddd',
					fontSize: nowSize(12),
					interval: 1,
				},
				splitLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				boundaryGap: false,
				data: month
			},
		],
		yAxis: [
			{
				splitLine: {
					show: true,
					lineStyle: {
						color: '#8292a3',
						type: 'dashed',
						type: [nowSize(9), nowSize(4)],
					}
				},
				axisLine: {
					show: false,
				},
				axisLabel: {
					fontSize: nowSize(10),
					color: '#ddd'
				},
				axisTick: {
					show: false,
				},
			},
		],
		series: [
			{
				type: 'line',
				symbol: 'circle',
				showSymbol: true,
				yAxisIndex: 0,
				lineStyle: {
					width: nowSize(3),
					color: '#3bb7e5',
					shadowColor: '#3bb7e5',
					shadowBlur: nowSize(15),
					shadowOffsetY: nowSize(-2)
				},
				label: {
					"show": false,
				},
				itemStyle: {
					color: 'transparent',
					borderColor: 'transparent',
					borderWidth: nowSize(7),
				},
				select: {
					label: {
						show: true,
						color: '#ddd',
						fontSize: nowSize(14)
					},
					itemStyle: {
						color: '#3bb7e5',
						borderColor: '#3bb7e5',
						borderWidth: nowSize(6),
					}
				},
				selectedMode: "single",
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
						[
							{
								offset: 0,
								color: 'rgba(59, 183, 229, 0.4)',
							},
							{
								offset: 1,
								color: 'rgba(59, 183, 229, 0)',
							},
						],
						false
					),
				},
				data: value,
			},
		],
	};
	fsdll = setOptions(ele, option)
	return fsdll
}

let waterLevel = null
export function setWaterLevel(ele, dataIn) {
	if (waterLevel) {
		waterLevel.dispose()
	}
	let time = []; let value = [];
	dataIn.forEach(i => {
		time.push(i.time)
		value.push(i.value)
	})

	let option = {
		backgroundColor: 'transparent',
		tooltip: {
			// show: false,
			trigger: 'axis',
			borderColor: "#092B46",
			backgroundColor: "#092B46",
			textStyle: {
				color: "#ddd",
				fontSize: nowSize(12),
				align: 'left'
			}
		},
		grid: {
			containLabel: true,
			top: '10%',
			left: '3%',
			right: '5%',
			bottom: '2%',
		},
		xAxis: [
			{
				type: 'category',
				axisLine: {
					show: false,
				},
				axisLabel: {
					show: true,
					margin: nowSize(20),
					color: '#ddd',
					fontSize: nowSize(12),
					formatter: function(val) {
						return val.slice(5)
					}
				},
				splitLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				boundaryGap: false,
				data: time
			},
		],
		yAxis: [
			{
				name: '(cm)',
				splitLine: {
					show: true,
					lineStyle: {
						color: 'rgba(100,100,100, 0.3)',
						type: 'solid',
						width: nowSize(0.5)
					}
				},
				axisLine: {
					show: false,
				},
				axisLabel: {
					fontSize: nowSize(10),
					color: '#ddd'
				},
				axisTick: {
					show: false,
				},
			},
		],
		series: [
			{
				type: 'line',
				symbol: 'circle',
				showSymbol: false,
				smooth: true,
				yAxisIndex: 0,
				lineStyle: {
					width: nowSize(1),
					color: 'rgba(160, 180, 229, 1)',
					shadowColor: 'rgba(59, 183, 229, 1)',
					shadowBlur: nowSize(15),
					shadowOffsetY: nowSize(-2)
				},
				label: {
					"show": false
				},
				itemStyle: {
					color: 'rgba(59, 183, 229, 1)',
					borderColor: 'rgba(59, 183, 229, 1)',
					borderWidth: nowSize(4),
				},
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
						[
							{
								offset: 0,
								color: 'rgba(59, 183, 229, 0.4)',
							},
							{
								offset: 1,
								color: 'rgba(59, 183, 229, 0)',
							},
						],
						false
					),
				},
				data: value,
			},
		],
	};
	waterLevel = setOptions(ele, option)
}

let onTimeRate = null
export function setOnTimeRate(ele, dataIn) {
	if (onTimeRate) {
		onTimeRate.dispose()
	}
	let rate
	if(dataIn) {
		rate = (Number(dataIn.slice(0,-1))/100).toFixed(3)
	} else {
		rate=0
	}
	let option = {
		backgroundColor: 'transparent',
		series: [
			{
				silent: true,
				type: 'liquidFill',
				amplitude: nowSize(10),
				data: [rate, rate, rate],
				color: [
					{
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{
								offset: 0,
								color: 'rgba(42, 147, 246)',
							},
							{
								offset: 1,
								color: 'rgba(16, 98, 162)',
							},
						],
					},
				],
				label: {
					color: '#ddd',
					insideColor: '#ddd',
					fontSize: nowSize(36),
					lineHeight: nowSize(32),
					fontFamily: 'BarLowBold',
					formatter: params => {
						console.log(params.value)
						if(params.value==0) {
							return `{value|-}{percent|%}\n{title|准点率}`
						} else {
							let rate = (params.value * 100).toFixed(1).toString().split('.')
							console.log(rate)
							return `${rate[0]}${+rate[1]?'.':''}${'percent'|rate[1]||''}{percent|%}\n{title|准点率}`
						}
					},
					rich:{
						percent: {
							fontSize: nowSize(16),
							verticalAlign: 'bottom',
							lineHeight: nowSize(16),
							padding: [0,0,0,nowSize(2)]
						},
						title: {
							fontSize: nowSize(16),
							padding:[nowSize(10),0,0]
						}
					}
				},
				radius: '90%',
				center: ['50%', '50%'],
				outline: {
					borderDistance: 0,
					itemStyle: {
						borderWidth: 1,
						borderColor: 'rgba(70, 168, 237, 0.4)',
						shadowBlur: nowSize(10),
						shadowColor: 'rgba(70, 168, 237, 0.5)'
					}
				},
				backgroundStyle: {
					color: 'rgba(70, 168, 237, 0.2)'
				},
			}
		]
	};
	onTimeRate = setOptions(ele, option)
}