import * as echarts from "echarts";
import chinaJson from "./China.json";
import _ from "lodash";
//饼图
export function getPieOption(data, title) {
	let option = {
		color: ["#4096ff", "#b37feb", "#ff7875", "#85a5ff", "#69b1ff", "#ffc069", "#87e8de"],
		title: {
			text: title,
			top: 10,
			left: 10,
			textStyle: {
				color: "rgba(59, 65, 75, 1)",
				fontSize: 16,
				fontWeight: 700
			}
		},
		series: [
			{
				type: "pie",
				radius: [75, 132],
				height: "100%",
				center: ["50%", "50%"],
				width: "100%",
				itemStyle: {
					borderColor: "#fff",
					borderWidth: 1
				},
				label: {
					alignTo: "edge",
					formatter: "{b} {d}%",
					minMargin: 5,
					edgeDistance: 10,
					lineHeight: 15,
					rich: {
						time: {
							fontSize: 10,
							color: "#999"
						}
					}
				},
				labelLine: {
					length: 15,
					length2: 0,
					maxSurfaceAngle: 80
				},
				labelLayout: function (params) {
					const isLeft = params.labelRect.x < 556 / 2;
					const points = params.labelLinePoints;
					// Update the end point.
					points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
					return {
						labelLinePoints: points
					};
				},
				data: data
			}
		]
	};
	return option;
}
export function getPieOption1(data, title) {
	let option = {
		color: ["#4096ff", "#b37feb", "#ff7875", "#85a5ff", "#69b1ff", "#ffc069", "#87e8de"],
		title: {
			text: title,
			top: 10,
			left: 10,
			textStyle: {
				color: "rgba(59, 65, 75, 1)",
				fontSize: 16,
				fontWeight: 700
			}
		},
		series: [
			{
				type: "pie",
				radius: [70, 110],
				height: "100%",
				center: ["50%", "50%"],
				width: "100%",
				itemStyle: {
					borderColor: "#fff",
					borderWidth: 1
				},
				label: {
					alignTo: "edge",
					formatter: `{b}${data.length < 10 ? "\n" : ""} {two|{c}家 {d}%}`,
					fontSize: 17.6,
					fontWeight: 700,
					minMargin: 5,
					edgeDistance: 10,
					lineHeight: 23,
					rich: {
						two: {
							fontSize: 15,
							color: " rgba(95, 101, 108, 1)"
						}
					}
				},
				labelLine: {
					length: 15,
					length2: 0,
					maxSurfaceAngle: 80
				},
				labelLayout: function (params) {
					console.log("labelLayoutparams", params);
					const isLeft = params.labelRect.x < 556 / 2;
					const points = params.labelLinePoints;
					// Update the end point.
					points[2][0] = isLeft
						? data.length < 10
							? params.labelRect.x
							: params.labelRect.x + params.labelRect.width
						: data.length < 10
						? params.labelRect.x + params.labelRect.width
						: params.labelRect.x;
					return {
						labelLinePoints: points
					};
				},
				data: data
			}
		]
	};
	return option;
}
export function getPieOption2(data, title) {
	let option = {
		color: ["#4096ff", "#b37feb", "#ff7875", "#85a5ff", "#69b1ff", "#ffc069", "#87e8de"],
		title: {
			text: title,
			top: 10,
			left: 10,
			textStyle: {
				color: "rgba(59, 65, 75, 1)",
				fontSize: 16,
				fontWeight: 700
			}
		},
		legend: {
			type: "scroll",
			icon: "rect",
			top: "center",
			right: "40",
			orient: "vertical",
			itemWidth: 30,
			itemHeight: 20,
			borderRadius: 2,
			formatter: function (name) {
				// 获取系列数据，假设第一个系列为饼图
				let seriesData = option.series[0].data; // [citation:8]
				// 也可以考虑使用 this.getSeries()[0].data [citation:8]
				let currentValue;
				// 计算数据总和并查找当前图例名对应的数值
				seriesData.forEach(item => {
					if (item.name === name) {
						currentValue = item.value;
					}
				});
				return `  ${name} ${currentValue} %`;
			},
			itemGap: 10,
			textStyle: {
				color: "rgba(59, 65, 75 ,0.8)",
				fontSize: 18,
				fontWeight: 500
			}
		},
		series: [
			{
				type: "pie",
				radius: [70, 120],
				height: "100%",
				center: ["33%", "50%"],
				width: "100%",
				itemStyle: {
					borderColor: "#fff",
					borderWidth: 1
				},
				emphasis: {
					scale: false
				},
				label: {
					show: false
				},
				data: data
			}
		]
	};
	return option;
}
export function getMapOption() {
	echarts.registerMap("china", chinaJson);
	let data = [
		{
			name: "2256",
			value: 2256
		},
		{
			name: "578",
			value: 578
		},
		{
			name: "744",
			value: 744
		},
		{
			name: "806",
			value: 806
		},
		{
			name: "336",
			value: 336
		},
		{
			name: "325",
			value: 325
		},
		{
			name: "487",
			value: 487
		},
		{
			name: "343",
			value: 343
		},
		{
			name: "432",
			value: 432
		},
		{
			name: "273",
			value: 273
		},
		{
			name: "1055",
			value: 1055
		},
		{
			name: "590",
			value: 590
		},
		{
			name: "319",
			value: 319
		},
		{
			name: "349",
			value: 349
		},
		{
			name: "126",
			value: 126
		},
		{
			name: "97",
			value: 97
		},
		{
			name: "201",
			value: 201
		},
		{
			name: "398",
			value: 398
		},
		{
			name: "795",
			value: 795
		},
		{
			name: "655",
			value: 655
		},
		{
			name: "295",
			value: 295
		},
		{
			name: "311",
			value: 311
		},
		{
			name: "993",
			value: 993
		},
		{
			name: "601",
			value: 601
		},
		{
			name: "275",
			value: 275
		},
		{
			name: "317",
			value: 317
		},
		{
			name: "1000",
			value: 1000
		},
		{
			name: "186",
			value: 186
		},
		{
			name: "261",
			value: 261
		},
		{
			name: "132",
			value: 132
		},
		{
			name: "18",
			value: 18
		},
		{
			name: "11",
			value: 11
		}
	];

	let geoCoordMap = {
		2256: [116.46, 39.92],
		578: [121.29, 31.14],
		744: [117.2, 39.13],
		806: [106.32, 29.32],
		336: [126.41, 45.45],
		325: [125.19, 43.52],
		487: [123.24, 41.5],
		343: [111.48, 40.49],
		432: [114.28, 38.02],
		273: [112.34, 37.52],
		1055: [117, 36.38],
		590: [113.42, 34.48],
		319: [108.54, 34.16],
		349: [103.49, 36.03],
		126: [106.16, 38.2],
		97: [101.45, 36.38],
		201: [87.36, 43.48],
		398: [117.18, 31.51],
		795: [118.5, 32.02],
		655: [120.09, 30.14],
		295: [113, 28.11],
		311: [115.52, 28.41],
		993: [114.21, 30.37],
		601: [104.05, 30.39],
		275: [106.42, 26.35],
		317: [119.18, 26.05],
		1000: [113.15, 23.08],
		186: [110.2, 20.02],
		261: [108.2, 22.48],
		132: [102.41, 25],
		18: [91.1, 29.4],
		11: [114.1, 22.18]
	};

	function convertData(data) {
		var res = [];
		for (var i = 0; i < data.length; i++) {
			var geoCoord = geoCoordMap[data[i].name];
			if (geoCoord) {
				res.push({
					name: data[i].name,
					value: geoCoord.concat(data[i].value)
				});
			}
		}
		console.log(res);
		return res;
	}

	let option = {
		tooltip: {
			show: false
		},

		geo: {
			map: "china",
			roam: true,
			center: [104.95, 35.27],
			// 地图尺寸为容器宽高较小值的80%
			zoom: 1.7,
			// scaleLimit:{
			//   max:'1.2',
			//   min:'0.7'
			// },
			label: {
				normal: {
					show: false,
					textStyle: {
						color: "rgba(0,0,0,0.6)"
					}
				}
			},
			itemStyle: {
				areaColor: "rgba(231, 243, 255, 1)", // 设置所有区域的默认填充色[citation:8]
				borderColor: "rgb(5, 95, 194)", // 设置边界线颜色[citation:8]
				borderWidth: 1 // 设置边界线宽度[citation:8]
			}
		},
		// backgroundColor: 'rgba(0,51,102, 1)',
		series: [
			{
				type: "scatter",
				coordinateSystem: "geo",
				data: convertData(data),
				symbolSize: 10,

				symbolRotate: 0,
				symbolOffset: ["50%", "-100%"],
				tooltip: {
					show: true
				},
				label: {
					normal: {
						formatter: "{a}",
						position: "top",
						show: false,
						textStyle: {
							color: "#000000",
							fontSize: 16
						}
					},
					emphasis: {
						show: false
					}
				},
				itemStyle: {
					normal: {
						borderWidth: 3,
						borderColor: "rgba(255, 163, 158, 1)",
						color: "rgba(255, 77, 79, 1)"
					}
				}
			}
		]
	};
	return option;
}
export const getBarChart = (nameList, valueList, color = ["rgba(255, 159, 22, 1)", "rgba(255, 159, 22, 0)"], name) => {
	const option = {
		tooltip: {
			trigger: "axis",
			formatter: function (params) {
				let result = params[0].name + "<br/>";
				params.forEach(function (item, index) {
					// 自定义颜色数组
					const customColors = [color[0]];
					const dotColor = customColors[index % customColors.length]; // 循环取色
					// 创建彩色圆点图标
					const dot = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${dotColor};"></span>`;
					result += dot + `${item.seriesName}: ${item.value}<br/>`;
				});
				return result;
			}
		},
		grid: {
			top: "3%",
			right: "3%",
			bottom: "1%",
			left: "1%",
			containLabel: true
		},
		xAxis: {
			axisLine: {
				lineStyle: {
					width: 1,
					color: "rgba(231, 243, 255, 1)"
				}
			},
			axisTick: { show: false },
			type: "category",
			boundaryGap: [100, 100],
			axisLabel: {
				color: "rgba(95, 101, 108, 1)"
				// fontSize: 22,
				// fontWeight: 400
			},
			data: nameList
		},
		yAxis: {
			type: "value",
			axisLine: {
				lineStyle: {
					type: "dashed"
				}
			},

			axisLabel: {
				color: "rgba(95, 101, 108, 1)"
				// fontSize: 22,
				// fontWeight: 400
			},
			splitNumber: 8,
			splitLine: {
				lineStyle: {
					width: 1,
					type: "dashed",
					color: "rgba(231, 243, 255, 1)"
				}
			}
		},
		series: [
			{
				name: name,
				type: "bar",
				data: valueList,

				barWidth: 12,
				itemStyle: {
					color: function (params) {
						return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
							{
								offset: 0,
								color: color[1]
							},
							{
								offset: 1,
								color: color[0]
							}
						]);
					},
					barBorderRadius: 10
				}
			}
		]
	};
	return option;
};
export const getLineChart = (object, isPercent) => {
	const option = {
		title: {
			text: ""
		},
		tooltip: {
			trigger: "axis",
			formatter: function (params) {
				let result = params[0].name + "<br/>";
				params.forEach(function (item, index) {
					// 自定义颜色数组
					const customColors = [object.color];
					const dotColor = customColors[index % customColors.length]; // 循环取色
					// 创建彩色圆点图标
					const dot = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${dotColor};"></span>`;
					result += dot + `${item.seriesName}: ${item.value}${isPercent ? "%" : ""}<br/>`;
				});
				return result;
			}
		},
		grid: {
			top: "3%",
			right: "3%",
			bottom: "1%",
			left: "1%",
			containLabel: true
		},
		// toolbox: {
		// 	feature: {
		// 		saveAsImage: {}
		// 	}
		// },
		xAxis: {
			axisLine: {
				lineStyle: {
					width: 1,
					color: "rgba(231, 243, 255, 1)"
				}
			},
			axisTick: { show: false },
			type: "category",
			boundaryGap: [100, 100],
			axisLabel: {
				color: "rgba(95, 101, 108, 1)"
				// fontSize: 22,
				// fontWeight: 400
			},
			data: object.xAxisData
		},
		yAxis: {
			type: "value",
			axisLine: {
				lineStyle: {
					type: "dashed"
				}
			},

			axisLabel: {
				color: "rgba(95, 101, 108, 1)",
				// fontSize: 22,
				// fontWeight: 400
				formatter: `{value} ${isPercent ? "%" : ""}`
			},

			splitNumber: 8,
			splitLine: {
				lineStyle: {
					width: 1,
					type: "dashed",
					color: "rgba(231, 243, 255, 1)"
				}
			}
		},
		series: [
			{
				name: object.name,
				type: "line",
				symbolSize: 8,
				symbol: "circle",
				itemStyle: {
					color: "#ffffff",
					borderColor: object.color,
					borderWidth: 3
				},
				lineStyle: {
					color: object.color
				},
				data: object.seriesData
			}
		]
	};
	return option;
};
export const getHorizontalBarChart1 = (nameList, valueList, isPer) => {
	const colorList = ["#ce4f51", "#1778ff"];
	const option = {
		tooltip: {},
		grid: {
			top: "3%",
			right: "3%",
			bottom: "1%",
			left: "1%",
			containLabel: true
		},
		color: ["#ce4f51", "#1778ff"],
		xAxis: {
			type: "value",
			splitLine: {
				show: false
			},
			show: false
		},
		yAxis: {
			type: "category",
			data: nameList,
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
			axisLabel: {
				show: true
			}
		},
		series: [
			{
				type: "bar",
				data: valueList.map((item, index) => {
					return {
						value: item,
						label: {
							textStyle: {
								color: index < 4 ? "#1778ff" : "#ce4f51"
							}
						}
					};
				}),
				label: {
					show: true,
					position: [450, -2],
					formatter: function (params) {
						return isPer ? params.value + "%" : params.value;
					}
				},
				barWidth: 8,
				itemStyle: {
					color: function (params) {
						if (params.dataIndex < 4) {
							return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
								{
									offset: 0,
									color: "rgba(22, 119, 255, 0)"
								},
								{
									offset: 1,
									color: colorList[1]
								}
							]);
						} else {
							return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
								{
									offset: 0,
									color: "rgba(206, 79, 81, 0)"
								},
								{
									offset: 1,
									color: colorList[0]
								}
							]);
						}
					},
					barBorderRadius: 4
				}
			}
		]
	};
	return option;
};
export const getHorizontalBarChart2 = (nameList, valueList, isPer) => {
	const colorList = [
		["rgba(64, 150, 255, 1)", "rgba(64, 150, 255, 0)"],
		["rgba(255, 120, 117, 1)", "rgba(255, 120, 117, 0)"],
		["rgba(89, 126, 247, 1)", "rgba(89, 126, 247, 0)"],
		["rgba(54, 207, 201, 1)", "rgba(54, 207, 201, 0)"],
		["rgba(255, 197, 61, 1)", "rgba(255, 197, 61, 0)"],
		["rgba(179, 127, 235, 1)", "rgba(179, 127, 235, 0)"]
	];
	console.log(colorList);
	const option = {
		tooltip: {},
		grid: {
			top: "3%",
			right: "6%",
			bottom: "0",
			left: "1%",
			containLabel: true
		},
		xAxis: {
			type: "value",
			splitLine: {
				show: false
			},
			show: false
		},
		yAxis: {
			type: "category",
			data: nameList,
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
			axisLabel: {
				show: true
			}
		},
		series: [
			{
				type: "bar",
				data: valueList.map((item, index) => {
					return {
						value: item,
						label: {
							textStyle: {
								color: colorList[index % 6][0]
							}
						}
					};
				}),
				label: {
					show: true,
					position: [310, -2],
					formatter: function (params) {
						return isPer ? params.value + "%" : params.value;
					}
				},
				barWidth: 8,
				itemStyle: {
					color: function (params) {
						console.log("params", params);
						return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
							{
								offset: 0,
								color: colorList[params.dataIndex % 6][1]
							},
							{
								offset: 1,
								color: colorList[params.dataIndex % 6][0]
							}
						]);
					},
					barBorderRadius: 4
				}
			}
		]
	};
	return option;
};
export const getMultipleLineChart = obj => {
	const color = ["rgba(19, 168, 168, 1)", "rgba(146, 84, 222, 1)", "rgba(250, 140, 22, 1)", "rgba(206, 79, 81, 1)"];
	const option = {
		title: {
			text: ""
		},
		tooltip: {
			trigger: "axis",
			formatter: function (params) {
				let result = params[0].name + "<br/>";
				params.forEach(function (item, index) {
					// 自定义颜色数组
					const customColors = color;
					const dotColor = customColors[index % customColors.length]; // 循环取色
					// 创建彩色圆点图标
					const dot = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${dotColor};"></span>`;
					result += dot + `${item.seriesName}: ${item.value}<br/>`;
				});
				return result;
			}
		},
		grid: {
			top: "12%",
			right: "3%",
			bottom: "3%",
			left: "1%",
			containLabel: true
		},
		legend: {
			type: "scroll",
			right: "5%",
			icon: "circle",
			itemWidth: 15,
			textStyle: {
				color: "rgba(0, 0, 0, 0.8)",
				fontSize: 14,
				fontWeight: 400
			},
			itemGap: 17,
			data: obj.data.map((item, index) => {
				return { name: item.name, itemStyle: { color: color[index % 4] } };
			})
		},
		xAxis: {
			axisLine: {
				lineStyle: {
					width: 1,
					color: "rgba(231, 243, 255, 1)"
				}
			},
			axisTick: { show: false },
			type: "category",
			boundaryGap: [100, 100],
			axisLabel: {
				color: "rgba(95, 101, 108, 1)"
				// fontSize: 22,
				// fontWeight: 400
			},
			data: obj.dates
		},
		yAxis: {
			type: "value",
			axisLine: {
				lineStyle: {
					type: "dashed"
				}
			},

			axisLabel: {
				color: "rgba(95, 101, 108, 1)"
				// fontSize: 22,
				// fontWeight: 400
			},
			splitNumber: 8,
			splitLine: {
				lineStyle: {
					width: 1,
					type: "dashed",
					color: "rgba(231, 243, 255, 1)"
				}
			}
		},
		series: obj.data.map((item, index) => {
			return {
				name: item.name,
				type: "line",
				symbolSize: 6,
				symbol: "circle",
				itemStyle: {
					color: "#ffffff",
					borderColor: color[index],
					borderWidth: 2
				},
				lineStyle: {
					width: 1,
					color: color[index]
				},
				data: item.value
			};
		})
	};
	return option;
};
//出口管制主页接口
export const getMultipleBarChart_m = object => {
	const list = _.chain(object.data).filter("year").orderBy("year", "asc").value();
	const colors = [
		["rgba(22, 119, 255, 1)", "rgba(22, 119, 255, 0)"],
		["rgba(206, 79, 81, 1)", "rgba(206, 79, 81, 0)"],
		["rgba(255, 197, 61, 1)", "rgba(255, 197, 61, 0)"],
		["rgba(255, 204, 199, 1)", "rgba(255, 204, 199, 0)"],
		["rgba(179, 127, 235, 1)", "rgba(179, 127, 235, 0)"],
		["rgba(127, 218, 235, 1)", "rgba(127, 214, 235, 0)"]
	];
	const names = _.map(list, "year");
	const datas = _.chain(object.domains)
		.splice(0, 6)
		.map((name, index) => {
			console.log(_.map(list, name));
			return {
				name,
				data: _.map(list, `domainNum.${name}`),
				type: "bar",
				barWidth: 12,
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: colors[index % colors.length][0] },
						// { offset: 0.5, color: '#188df0' },
						{ offset: 1, color: colors[index % colors.length][1] }
					]),
					borderRadius: [6, 6, 0, 0]
				}
			};
		})
		.value();
	console.log("names", names);
	const option = {
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "shadow"
			}
		},
		grid: {
			top: 50
		},
		legend: {
			// type: "scroll",
			// show: true,
			// orient: "horizontal",
			icon: "circle"
		},
		xAxis: {
			type: "category",
			data: names
		},
		yAxis: {
			type: "value"
		},
		series: datas
	};
	return option;
};
