import type { EChartsOption } from 'echarts'
import * as echarts from 'echarts'
import 'echarts-liquidfill'
import { getCSRDetail } from '@/api/daikin/base'
import { create } from 'naive-ui'
import { xAxisD, dataA, dataB } from './testData'

export const Content2 = [
	{
		key: '0',
		label: '活动计划',
		children: [
			{
				label: '调达本部HP',
				items: [
					{
						content:
							'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
					}
				]
			},
			{
				label: 'CSR-碳中和',
				items: [
					{
						content:
							'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
					}
				]
			},
			{
				label: '中国地区连携强化  ',
				items: [
					{
						content:
							'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
					}
				]
			}
		]
	},
	{
		key: '1',
		label: '活动成果',
		children: [
			{
				label: 'Database推进',
				items: [
					{
						content:
							'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
					}
				]
			},
			{
				label: '市况',
				items: [
					{
						content:
							'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
					}
				]
			},
			{
				label: '汇率',
				items: [
					{
						content:
							'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
					}
				]
			},
			{
				label: 'BCP',
				items: [
					{
						content:
							'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
					}
				]
			}
		]
	}
]
export const Content3 = [
	{
		key: '0',
		title: 'xx活动概要',
		label: '活动计划',
		children: [
			{
				label: '调达本部HP',
				items: [
					{
						content:
							'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
					}
				]
			},
			{
				label: 'CSR-碳中和',
				items: [
					{
						content:
							'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
					}
				]
			},
			{
				label: '工作模式变更  ',
				items: [
					{
						content:
							'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
					}
				]
			},
			{
				label: '差别化',
				items: [
					{
						content:
							'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
					}
				]
			}
		]
	},
	{
		key: '1',
		label: '活动成果',
		children: [
			{
				label: 'Database推进',
				items: [
					{
						content:
							'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
					}
				]
			},
			{
				label: '全球连携强化',
				items: [
					{
						content:
							'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
					}
				]
			},
			{
				label: '高品质高品位',
				items: [
					{
						content:
							'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
					}
				]
			}
		]
	},
	{
		key: '2',
		title: 'xx活动概要',
		label: '活动计划',
		children: [
			{
				label: 'CSR-碳中和',
				items: [
					{
						content:
							'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
					}
				]
			},
			{
				label: '工作模式变更  ',
				items: [
					{
						content:
							'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
					}
				]
			},
			{
				label: '差别化',
				items: [
					{
						content:
							'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
					}
				]
			}
		]
	},
	{
		key: '3',
		label: '活动成果',
		children: [
			{
				label: 'Database推进',
				items: [
					{
						content:
							'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
					}
				]
			},
			{
				label: '市况',
				items: [
					{
						content:
							'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
					}
				]
			},
			{
				label: '全球连携强化',
				items: [
					{
						content:
							'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
					}
				]
			},
			{
				label: '高品质高品位',
				items: [
					{
						content:
							'FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开 创崭新的未来'
					}
				]
			}
		]
	}
]
const form = ref({
	lable1: {
		name: '大金集团碳减排目标',
		year: 'F25',
		date: '14%',
		title1: '',
		title2: ''
	},
	lable2: {
		name: 'CN调达本部碳减排目标',
		year: 'F25',
		date: '14%',
		title1: '',
		title2: ''
	},
	lable3: {
		name: 'CN调达本部碳减排目标',
		year: 'F23',
		date: '14%',
		title1: '',
		title2: ''
	},
	lable4: {
		name: '2020, 2021, 2022, 2023',
		year: '120, 200, 150, 80',
		date: '85, 45, 67, 80',
		title1: 'DIS',
		title2: 'DSZ'
	},
	lable14: {
		name: '2020-1-25, 2021-12-12, 2022-11-14, 2023-14-5, 2024, 2025',
		year: '120, 200, 150, 80, 70, 110',
		date: '85, 45, 67, 80, 70, 110',
		title1: 'DIS',
		title2: 'DSZ'
	},
	lable5: {
		name: '30%碳减排课题收集整体情况:',
		year: '0.6',
		date: '14%',
		title1: '原材料: 15.5%',
		title2: '能源消耗: 1.7%'
	},
	lable6: {
		name: '30%碳减排课题收集整体情况:',
		year: '0.6',
		data: '',
		title1: '原材料',
		title2: '整体目标10%'
	},
	lable7: {
		name: '',
		data: '',
		year: '0.6',
		title1: '能源消耗',
		title2: '整体目标5%'
	},
	lable8: {
		name: '【FY20原材料构成数据】',
		data: {
			data1: {
				name: 'Search Engine',
				value: '1048'
			},
			data2: {
				name: 'Direct',
				value: '735'
			},
			data3: {
				name: 'Email',
				value: '580'
			},
			data4: {
				name: '',
				value: ''
			},
			data5: {
				name: '',
				value: ''
			}
		}
	},
	lable9: {
		name: '【FY20能源消耗构成数据】',
		data: {
			data1: {
				name: 'Search Engine',
				value: '1048'
			},
			data2: {
				name: 'Direct',
				value: '735'
			},
			data3: {
				name: 'Email',
				value: '580'
			},
			data4: {
				name: 'Union Ads',
				value: '484'
			},
			data5: {
				name: 'Video Ads',
				value: '300'
			}
		}
	}
})

async function getCSR() {
	const {
		data,
		data: {
			content: { form: ffff }
		}
	} = await getCSRDetail()
	form.value = ffff
}

export function charData() {
	const chartRef = ref()
	const params = '15%'

	const option = ref<EChartsOption>({
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		legend: {
			data: ['DIS', 'DSZ'],
			bottom: '0px'
			// right:'50px'
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '10%',
			containLabel: true
		},
		title: [{ text: '单位:千吨' }],
		// color:['#58D9FC','red','#fff'],
		// dataset: {
		//   // 提供一份数据。
		//   source: [
		//     ['2020实绩', 220, 0, 220],
		//     ['2021实绩', 182, 0, 182],
		//     ['2022实绩', 191, 0, 191],
		//     ['2023', 234, 43, 234],
		//     ['2024', 290, 23, 290],
		//     ['2025', 330, 65, 330],
		//   ]
		// },

		xAxis: { type: 'category', data: [] },
		yAxis: {},
		series: [
			{
				name: 'DIS',
				type: 'bar',
				barWidth: '30%',
				data: [],
				label: {
					show: false
				}
				// emphasis: {
				// 	// 高亮样式
				// 	itemStyle: {
				// 		color: 'red'
				// 	}
				// }
			},
			{
				name: 'DSZ',
				type: 'bar',
				label: {
					show: false,
					position: 'inside',
					formatter: '{c}%'
				},
				barWidth: '30%',
				data: []
			}
			// { name: '预测/实绩用量', type: 'line' }
		]
	})
	return { chartRef, option }
}

export function charData2() {
	const chartRef = ref()
	const params = '15%'

	// const option = ref<EChartsOption>({
	// 	tooltip: {
	// 		trigger: 'axis',
	// 		axisPointer: {
	// 			type: 'shadow'
	// 		}
	// 	},
	// 	legend: {
	// 		data: ['DIS', 'DSZ'],
	// 		top: '0px',
	// 		right: '50px'
	// 	},

	// 	grid: {
	// 		left: '3%',
	// 		right: '4%',

	// 		containLabel: true
	// 	},
	// 	title: [{ text: '单位:元/吨' }],
	// 	// color:['#58D9FC','red','#fff'],
	// 	// dataset: {
	// 	//   // 提供一份数据。
	// 	//   source: [
	// 	//     ['2020实绩', 220, 0, 220],
	// 	//     ['2021实绩', 182, 0, 182],
	// 	//     ['2022实绩', 191, 0, 191],
	// 	//     ['2023', 234, 43, 234],
	// 	//     ['2024', 290, 23, 290],
	// 	//     ['2025', 330, 65, 330],
	// 	//   ]
	// 	// },

	// 	xAxis: {
	// 		type: 'category',
	// 		data: form.value.lable14.name.split(','),
	// 		axisLabel: {
	// 			interval: 0, //隔几项显示一个标签
	// 			rotate: '-90' //标签倾斜的角度，旋转的角度是-90到90度
	// 		}
	// 	},
	// 	yAxis: {},
	// 	series: [
	// 		{
	// 			name: 'DIS',
	// 			type: 'line',
	// 			data: form.value.lable14.year.split(',')
	// 		},
	// 		{
	// 			name: 'DSZ',
	// 			type: 'line',
	// 			data: form.value.lable14.date.split(',')
	// 		}
	// 		// { name: '预测/实绩用量', type: 'line' }
	// 	]
	// })

	const option = ref<EChartsOption>({
		// title: {
		// 	text: 'SMM牌号低碳铝价格&价差',
		// 	left: 'center'
		// },
		grid: {
			bottom: 80
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				animation: false,
				label: {
					backgroundColor: '#505765'
				}
			}
		},
		legend: {
			data: ['低碳铝', '价差'],
			right: 10
		},
		dataZoom: [
			{
				show: true,
				startValue: '2022-06-01',
				endValue: '2022-10-01'
			},
			{
				type: 'inside'
				// realtime: true,
				// start: 65,
				// end: 85
			}
		],
		xAxis: [
			{
				type: 'category',
				boundaryGap: false,
				axisLine: { onZero: false },
				// prettier-ignore
				data: xAxisD
			}
		],
		yAxis: [
			{
				name: '单位：元',
				type: 'value'
			},
			{
				name: '单位：元/吨',
				// nameLocation: 'start',
				alignTicks: true,
				type: 'value'
				// inverse: true
			}
		],
		series: [
			{
				name: '低碳铝',
				type: 'line',
				smooth: true,
				// areaStyle: {},
				lineStyle: {
					width: 3
					// color: '#7030a0'
				},
				emphasis: {
					focus: 'series'
				},
				// prettier-ignore
				data: dataA
			},
			{
				name: '价差',
				type: 'line',
				smooth: true,
				yAxisIndex: 1,
				markLine: {
					symbol: '', // 设置为空字符串，去除箭头
					silent: true,
					lineStyle: {
						color: '#7030a0',
						type: 'solid',
						width: 3
					},
					data: [
						{
							yAxis: 700
						}
					]
				},
				lineStyle: {
					width: 3
				},
				emphasis: {
					focus: 'series'
				},
				// prettier-ignore
				data: dataB
			}
		]
	})
	return { chartRef, option }
}
// 原材料用量及碳排放量占比图
export function pieData1() {
	const chartRef = ref()
	const option = ref<EChartsOption>({
		legend: {
			orient: 'vertical',
			data: [
				{
					name: '原材料使用量（吨）',
					itemStyle: { color: '#f8cbad', borderWidth: 0 }
				},
				{
					name: '原材料碳排放量（吨）',
					itemStyle: { color: '#acc1fb', borderWidth: 0 }
				}
			],
			selectedMode: false,
			left: 10,
			top: 25
		},
		title: {
			text: form.value.lable8.name,
			// subtext: 'Fake Data',
			left: 'center',
			textStyle: { color: '#4075E1' }
		},
		tooltip: {
			trigger: 'item',
			// formatter: '{a} <br/>{b} : {c} ({d}%)'
			formatter: function (params: any) {
				const title = `<p>${params.seriesName}</p>`
				const colorDot =
					'<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:' +
					params.color +
					'"></span>'
				return (
					title +
					colorDot +
					params.name +
					': ' +
					(params.componentIndex === 0
						? Math.trunc(params.value / 1000).toLocaleString()
						: params.value.toLocaleString()) +
					'（' +
					params.percent +
					'%）'
				)
			}
		},
		grid: {
			// left: '20',
			// // top: '100',
			// right: '70',
			// bottom: '10',
			containLabel: true
		},
		// legend: {
		// 	// orient: 'vertical',
		// 	left: 'left',
		// 	padding: [30, 0, 0, 20]
		// },
		series: [
			{
				center: ['50%', '56%'],
				name: '原材料使用量（吨）',
				type: 'pie',
				selectedMode: 'single',
				radius: [0, '50%'],
				// silent: 'ture', //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
				// avoidLabelOverlap: false,
				// legendHoverLink: false,
				label: {
					position: 'inner',
					fontSize: 16,
					// formatter: '{b}：{c}'
					formatter: function (params: any) {
						return Math.trunc(params.data.value / 1000).toLocaleString()
					}
				},
				labelLine: {
					show: false
				},
				data: [],
				// 自定义颜色
				itemStyle: {
					// emphasis: {
					// 	shadowBlur: 10,
					// 	shadowOffsetX: 0,
					// 	shadowColor: 'rgba(0, 0, 0, 0.5)'
					// },
					borderColor: 'rgba(0, 0, 0, 0.5)',
					borderWidth: 1,
					// 自定义每个扇形的颜色
					color: function (params) {
						// const colorList = ['#3EC22B', '#3EC22B', '#3EC22B', '#3EC22B']
						const colorList = ['#f8cbad', '#f8cbad', '#f8cbad', '#f8cbad']
						return colorList[params.dataIndex]
					}
				}
				// hoverAnimation: false,
			},
			{
				center: ['50%', '56%'],
				name: '原材料碳排放量（吨）',
				type: 'pie',
				radius: ['50%', '76%'],
				avoidLabelOverlap: false,
				itemStyle: {
					// borderRadius: 10,
					borderWidth: 1, //外环间隔~~~~~
					borderColor: 'rgba(0, 0, 0, 0.5)',
					// 自定义每个扇形的颜色
					color: function (params) {
						// const colorList = ['#3EC22B', '#3EC22B', '#3EC22B', '#3EC22B']
						const colorList = ['#acc1fb', '#acc1fb', '#acc1fb', '#acc1fb']
						return colorList[params.dataIndex]
					}
				},
				// labelLine: {
				// 	length: 30
				// },
				label: {
					position: 'inner',
					fontSize: 16,
					// formatter: '{b}：{c}'
					formatter: function (params: any) {
						return Math.trunc(+params.data.value).toLocaleString()
					}
					// backgroundColor: '#F6F8FC',
					// borderColor: '#8C8D8E',
					// borderWidth: 1,
					// borderRadius: 4

					// rich: {
					// 	a: {
					// 		color: '#6E7079',
					// 		lineHeight: 22,
					// 		align: 'center'
					// 	},
					// 	hr: {
					// 		borderColor: '#8C8D8E',
					// 		width: '100%',
					// 		borderWidth: 1,
					// 		height: 0
					// 	},
					// 	b: {
					// 		color: '#4C5058',
					// 		fontSize: 14,
					// 		fontWeight: 'bold',
					// 		lineHeight: 33
					// 	},
					// 	per: {
					// 		color: '#fff',
					// 		backgroundColor: '#4C5058',
					// 		padding: [3, 4],
					// 		borderRadius: 4
					// 	}
					// }
				},
				data: []
				// 自定义颜色
				//  itemStyle: {
				//   borderColor: '#fff',
				//   borderWidth: 2,
				//   emphasis: {
				//     shadowBlur: 10,
				//     shadowOffsetX: 0,
				//     shadowColor: 'rgba(0, 0, 0, 0.5)',
				//   },
				//   normal: {
				//     // 自定义每个扇形的颜色
				//     color: function (params) {
				//       const colorList = ['#337EE6', '#337EE6', '#337EE6',];
				//       return colorList[params.dataIndex];
				//     },
				//   },
				// },
			}
		]
	})
	return { chartRef, option }
}

// SMM牌号低碳铝价格&价差
export function pieData2() {
	const chartRef = ref()
	const option = ref<EChartsOption>({
		// legend: {
		//   top: 'bottom'
		// },
		title: {
			text: form.value.lable9.name,
			// subtext: 'Fake Data',
			left: 'center',
			textStyle: { color: '#4075E1' }
		},
		series: [
			{
				name: 'Access From',
				type: 'pie',
				radius: ['40%', '70%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 10,
					borderColor: '#fff',
					borderWidth: 1
				},
				label: {
					show: true,
					formatter(param) {
						// correct the percentage
						return param.name + ' (' + param.percent * 2 + '%)'
					}
				},
				emphasis: {
					label: {
						show: true,
						fontSize: 20
						// fontWeight: 'bold'
					}
				},
				labelLine: {
					show: true
				},
				// data: [
				//   { value: 1048, name: 'Search Engine' },
				//   { value: 735, name: 'Direct' },
				//   { value: 580, name: 'Email' },
				//   { value: 484, name: 'Union Ads' },
				//   { value: 300, name: 'Video Ads' }
				// ]
				data: Object.values(form.value.lable9.data).filter(
					(item) => item.name !== '' || item.value !== ''
				)
			}
		]
	})
	return { chartRef, option }
}

const gl = '10%'
export function liQuid() {
	const chartRef = ref()
	const option = ref({
		title: {
			text: '整体目标加' + gl,
			// subtext: 'Fake Data',
			left: 'center',
			bottom: '-5px',
			textStyle: { fontSize: '14px', fontWeight: '100' }
		},
		series: [
			{
				type: 'liquidFill',
				silent: true,
				data: [0.76, 0.55, 0.62],
				color: ['#41E5BA', '#B1D2FF', '#63E8C4'],
				radius: '150px',
				backgroundStyle: {
					// borderWidth: 0,
					// borderColor: 'red',
					opacity: '0.4',
					color: '#00D491'
					// color:'#63E8C4'
				},
				outline: {
					show: false
				},
				label: {
					fontSize: 19,
					fontColor: '#fff',
					formatter: function (param) {
						return '原材料' + '\n' + '\n' + param.value * 100 + '%'
					}
				}
			}
		]
	})
	return { chartRef, option }
}

export function liQuids() {
	const chartRef = ref()
	const option = ref({
		title: {
			text: '整体目标加' + gl,
			// subtext: 'Fake Data',
			left: 'center',
			bottom: '-5px',
			textStyle: { fontSize: '14px', fontWeight: '100' }
		},
		series: [
			{
				type: 'liquidFill',
				silent: true,
				data: [0.8, 0.65, 0.72],
				color: ['#8CBEFF', '#B1D2FF', '#8CBEFF'],
				radius: '150px',
				backgroundStyle: {
					// borderWidth: 0,
					// borderColor: 'red',
					opacity: '0.6',
					color: '#1D88FF'
					// color:'#63E8C4'
				},
				outline: {
					show: false
				},
				label: {
					fontSize: 19,
					fontColor: '#fff',
					formatter: function (param) {
						return '能源消耗' + '\n' + '\n' + param.value * 100 + '%'
					}
				}
			}
		]
	})
	return { chartRef, option }
}