<template>
	<view>

		<view style="height: 750rpx">

			<l-echart ref="chart"></l-echart>
		</view>
	</view>

</template>
<script>
	import {
		getServiceConfData,
		getChartData,
		logins
	} from '@/utils/requestahm.js'
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min.js'
	import moment from "moment"
	export default {
		name: "echarts",
		data() {
			return {
				eventName: '',
				servServiceEchartData: '',
				maxY: '',
				minY: '',
				moment,
				textData: {

				},
				option: {

				}
			}
		},
		// components: {LEchart},
		created() {

		},
		props: {
			items: {
				type: Object,
			}
		},
		mounted() {
			this.renderChart()
		},

		methods: {

			// 获取echart数据
			async renderChart() {

				let itemName, serviceConfId, tailNumber
				const res1 = await getServiceConfData({
					tailnumber: this.items.tailnumber,
					code: this.items.code
				})
				console.log('0000000000------------------00')
				console.log(res1)
				if (res1.code == 200) {
					itemName = res1.data.itemName
					serviceConfId = res1.data.serviceConfId
					tailNumber = res1.data.tailNumber
				} else {
					return
				}
				// itemName = 'Hydraulic Fluid Level#C'
				// serviceConfId = '6112180e0f150000d4332200'
				// tailNumber = 'B-7837'
				const data = {
					itemName,
					serviceConfId,
					tailNumber,
				};
				console.log('9999999999')
				const res = await getChartData(data);
				console.log('0000000000001111111111111111')
				console.log(res)
				const servServiceEchartData = [...(res.data?.datas ?? []).filter(item => item.value && +item.value >=
					0)];
				this.servServiceEchartData = res.data
				const initEchartsData = [];
				const lastoneData = [];
				const lastIndex = servServiceEchartData.findIndex(item => item.value && +item.value >= 0);
				const lastData = servServiceEchartData.splice(lastIndex, 1);
				lastoneData.push([lastData?. [0]?.time, lastData?. [0]?.value]);
				servServiceEchartData.forEach(item => {
					const singerData = [];
					singerData.splice(0, 0, item.time, item.value);
					initEchartsData.push(singerData);
				});

				this.initCharts1(initEchartsData, lastoneData);
				// this.$nextTick(() => {
				//   this.initCharts(initEchartsData, lastoneData);
				// });
			},
			numFilter (value,num) {
			// 截取当前数据到小数点后两位
			let realVal = parseFloat(value).toFixed(num)
			console.log('计算后--'+realVal )
			return realVal
			},
			// alert事件的图标
			initCharts1(data, theLastoneData) {
				const max = [...data, ...theLastoneData].flatMap(item => +item[1]);
				const maxNum = Math.max(...max);
				const dotAfLen = (String(maxNum).split('.')[1] ?? '').length;
				let step = maxNum * 0.05;
				console.log('dotAfLen---------' )
				console.log(dotAfLen)
				if (dotAfLen !== 0) {
					step = parseFloat(step).toFixed(dotAfLen)
					//step = this.$np.round(step, dotAfLen);
					this.maxY = parseFloat(maxNum) + parseFloat(step);
					this.minY = parseFloat(Math.min(...max) - parseFloat(step)).toFixed(dotAfLen);
					console.log('miny',this.minY )
				} else {
					step = Math.ceil(step);				
					this.maxY = maxNum + step;
					this.minY = Math.min(...max) - step;
				}

				//const myChart = this.$echarts.init(this.$refs.echart_1);
				const lastDate = theLastoneData?. [0]?. [0] ?? new Date();

				const lastDateF = this.moment(lastDate).format('YYYY-MM-DD');
				const firstDateF = this.moment(lastDateF).add(-6, 'months').add(-1, 'day').format('YYYY-MM-DD');
				const option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						},
						textStyle: {
							fontSize: 8
						},
						position: function(pos, params, dom, rect, size) {
							// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
							var obj = {
								top: 60
							};
							obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
							return obj;
						},
					},
					title: {
						left: 'center',
						text: this.servServiceEchartData.summaryName ?? '',
						textStyle: {
							// 对应样式
							//color: '#F27CDE',
							fontSize: 13,
							left: 'left',
						},
					},
					grid: {
						right: 60,
						
					},
					xAxis: {
						type: 'time',
						name: '时间',
						// 开始时间
						min: new Date(firstDateF),

						splitLine: {
							show: false
						}
					},
					yAxis: {
						max: this.maxY,
						min: this.minY,
						name: "参数值",
						//name: this.servServiceEchartData.valueUnit ?? ''
					},
					legend: { // 显示列信息
						bottom: 0 // 距离底部信息
					},
					series: [{
				   symbolSize: 10,
							data,
							markLine: {
								symbol: ['none', 'none'], // 去掉箭头
								itemStyle: {
									normal: {
										label: {
											show: false,
											position: 'left'
										}
									}
								},
								data: [{
				  				name: '维修限额',
										yAxis: this.servServiceEchartData.serviceAlertLimit,
										silent: true,
										lineStyle: {
											type: 'dashed',
											color: '#F5A623'
										}
									},
									{
										name: '保养限额',
										yAxis: this.servServiceEchartData.operationalAlertLimit,
										silent: true,
										lineStyle: {
											type: 'dashed',
											color: '#E60000'
										}
									}
								]
							},
							type: 'scatter',
							itemStyle: {
								normal: {
				 				color: '#EE5396'
				  		}
							},
							name: this.servServiceEchartData.summaryName ?? ''
						},
						{
							symbolSize: 10,
							name: 'Most Recent Date Point',
							data: theLastoneData,
							type: 'scatter',
							itemStyle: {
								normal: {
									color: '#1192E8'
								}
							}
						}
					]
				}
				this.option = option
				this.$refs.chart.init(echarts, chart => {
					chart.setOption(this.option);
				});
			},


			//回退到上一页面
			clickLeft() {
				uni.navigateBack()
			},
			// alert事件的图标
			initCharts144(data, theLastoneData, month) {
				if (!month) {
					month = 6
				}
				const max = [...data, ...theLastoneData].flatMap((item) => +item[1])
				const maxNum = Math.max(...max)
				const dotAfLen = (String(maxNum).split('.')[1] ?? '').length
				let step = maxNum * 0.05
				if (dotAfLen !== 0) {
					console.log('进入了---------dotAfLen-----')
					step = this.$np.round(step, dotAfLen)
				} else {
					step = Math.ceil(step)
				}

				this.maxY = (maxNum + step).toFixed(2);
				this.minY = (Math.min(...max) - step).toFixed(2);

				const lastDate = theLastoneData?. [0]?. [0] ?? new Date()
				const all = this.moment(lastDate).format("YYYY-MM-DD HH:mm:ss")
				const lastFFF = this.moment(lastDateF)
					.add(+1, "months")
					.add(+1, "day")
					.format("YYYY-MM-DD");
				const lastDateF = this.moment(lastDate).format('YYYY-MM-DD')

				const firstDateF = this.moment(lastDateF)
					.add(-month, 'months')
					.add(-1, 'day')
					.format('YYYY-MM-DD')
				const option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						},
						textStyle: {
							fontSize: 8
						},
						position: function(pos, params, dom, rect, size) {
							// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
							var obj = {
								top: 60
							};
							obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
							return obj;
						},
					},
					legend: { // 显示列信息
						bottom: 0 // 距离底部信息
					},
					title: {
						left: 'center',
						text: this.eventName,
						textStyle: {
							// 对应样式
							//color: '#F27CDE',
							fontSize: 13,
							left: 'left',
						},
					},
					grid: {
						// top: 74,
						//left: 10,
						right: 60,
					},
					xAxis: {
						type: 'time',
						name: '时间',
						// 开始时间
						min: new Date(firstDateF),
						max: new Date(lastFFF),
						splitLine: {
							show: false,
						},
					},
					yAxis: {
						max: this.maxY,
						min: this.minY,
						// name: this.servServiceEchartData.valueUnit ?? '',
						name: "参数值",
						position: 'left', //left right

					},
					// series: [{
					//     name: this.eventName,
					//     //color: '#1192E8',
					//     color: '#EE5396',
					//     symbolSize: 6, //图标大小
					//     data: data, //数据
					//     type: 'scatter' //类型散点
					// }, {
					//     name: 'Most Recent Date Point',
					//     symbolSize: 6,
					//     data: [
					//         ['2023-06-18 11:45:00', 90.04],
					//         ['2023-01-15 11:45:00', 89.95],

					//     ],
					//     //color: '#EE5396',//
					//     color: '#1192E8',
					//     type: 'scatter'
					// }]

					series: [{
							symbolSize: 10,
							data: data,
							markLine: {
								symbol: ['none', 'none'], // 去掉箭头
								itemStyle: {
									normal: {
										label: {
											show: false,
											position: 'left'
										},
									},
								},
								data: [{
										name: '维修限额',
										yAxis: this.textData.data.serviceAlertLimit ?? '',
										silent: true,
										lineStyle: {
											type: 'dashed',
											color: '#F5A623'
										},
										show: false,
									},
									{
										name: '保养限额',
										yAxis: this.textData.data.operationalAlertLimit ?? '',
										silent: true,
										lineStyle: {
											type: 'dashed',
											color: '#E60000'
										},
										show: false,
									},
								],
							},
							type: 'scatter',
							itemStyle: {
								normal: {
									color: '#EE5396',
								},
							},
							name: this.textData.data.summaryName ?? '',
						},
						{
							symbolSize: 10,
							name: 'Most Recent Date Point',
							data: [
								['2023-01-29 09:07:00', 250]
							],
							type: 'scatter',
							itemStyle: {
								normal: {
									color: '#1192E8',
								},
							},
						},
					],
				}
				// 绘制图表
				//myChart.setOption(option)
				this.option = option
				this.$refs.chart.init(echarts, chart => {
					chart.setOption(this.option);
				});
			},

			beforeUnmount() {
				//实例销毁之前调用(vue2此是 beforeDestroy)
			},
		},
	}
</script>
<style scoped lang="less">

</style>
