<route lang="json5" type="page">
	{
	layout: 'default',
	style: {
	navigationStyle: 'custom',
	navigationBarTitleText: '历史数据图表',
	},
	}
</route>

<template>
	<PageLayout navTitle="历史数据图表" backRouteName="index" routeMethod="pushTab">
		<view class="chart-container">
			<view class="chart-header">
				<view class="chart-title-container">
					<text class="chart-title">{{ chartTitle }}</text>
				</view>

				<view class="filter-section">
					<view class="date-picker">
						<uni-datetime-picker type="datetimerange" v-model="lssjTimeRang" @change="getTime"
							:placeholder="['开始时间', '结束时间']" />
					</view>

					<view class="checkbox-container">
						<label class="checkbox">
							<checkbox :checked="tableVisibled" @change="onChangeTable" />
							<text>{{ checkBoxText }}</text>
						</label>
					</view>
				</view>
			</view>

			<!-- 图表容器 -->
			<view id="myCharts" class="chart"></view>

			<!-- 数据表格 -->
			<view v-if="tableVisibled" class="table-container">
				<uni-table border stripe emptyText="暂无数据" :loading="loading">
					<uni-tr>
						<uni-th width="60" align="center">序号</uni-th>
						<uni-th align="center">日期时间</uni-th>
						<uni-th align="center">温度(℃)</uni-th>
						<uni-th align="center">压力(MPa)</uni-th>
						<uni-th align="center">压差(kPa)</uni-th>
						<uni-th align="center">瞬时量(Nm³/d)</uni-th>
						<uni-th align="center">今日量(m³)</uni-th>
						<uni-th align="center">今日时间(分)</uni-th>
						<uni-th align="center">仪表状态</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in dataSource" :key="index">
						<uni-td align="center">{{ index + 1 }}</uni-td>
						<uni-td align="center">{{ formatTableTime(item.createTime) }}</uni-td>
						<uni-td align="center">{{ item.wd }}</uni-td>
						<uni-td align="center">{{ item.yl }}</uni-td>
						<uni-td align="center">{{ item.yc }}</uni-td>
						<uni-td align="center">{{ item.ssll }}</uni-td>
						<uni-td align="center">{{ item.jrl }}</uni-td>
						<uni-td align="center">{{ item.jrsj }}</uni-td>
						<uni-td align="center">{{ item.zt }}</uni-td>
					</uni-tr>
				</uni-table>

				<view class="pagination">
					<uni-pagination :current="ipagination.current" :pageSize="ipagination.pageSize"
						:total="ipagination.total" @change="handlePageChange" showTotal />
				</view>
			</view>
		</view>
	</PageLayout>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted,
		watch,
		nextTick
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		formatDate
	} from '@/utils/dateTime.ts'

	// 定义props
	const props = defineProps({
		lineData: {
			type: Object,
			default: () => ({})
		}
	})

	// 数据声明
	const urljlByJldID = ref('https://szcx.zyyt.sinopec.com/Gyk/jldls/cxcSssjLssjJldls/getLssjByJldId')


	const colorData = [{
			color: '#000000'
		},
		{
			color: '#00007f'
		},
		{
			color: '#ff0000'
		},
		{
			color: '#005500'
		},
		{
			color: '#55007f'
		},
		{
			color: '#ffff00'
		}
	]

	const option = ref({})
	const legendData = ref([])
	const xData = ref([])
	const yaxis = ref({
		type: 'value',
		name: '',
		min: 0,
		max: 500,
		position: 'left',
		axisLabel: {
			formatter: '{value}'
		},
		axisLine: {
			lineStyle: {
				color: '#61A0A8'
			}
		}
	})

	const yAxis = ref([])
	const series = ref([])
	const serie = ref({
		field: '',
		name: '',
		showSymbol: false,
		type: 'line',
		data: [],
		yAxisIndex: 1,
		lineStyle: {
			color: '#61A0A8',
			width: 1
		},
		connectNulls: false
	})

	const tableVisibled = ref(false)
	const checkBoxText = ref('显示历史报表')
	const dataSource = ref([])
	const loading = ref(false)
	const ipagination = ref({
		current: 1,
		pageSize: 10,
		total: 0
	})

	const jldID = ref('')
	const jldName = ref('')
	const chartTitle = ref('')
	const lineName = ref([])
	const startTime = ref('')
	const endTime = ref('')
	const lssjTimeRang = ref([])
	const myCharts = ref(null)

	// 获取当前日期时间范围
	const getDefaultTimeRange = () => {
		const now = new Date()
		const start = new Date(now)
		start.setHours(8, 0, 0, 0)

		const end = new Date(now)
		end.setDate(end.getDate() + 1)
		end.setHours(7, 59, 59, 0)

		return [start.getTime(), end.getTime()]
	}

	// 初始化图表
	const initChart = () => {
		series.value = []
		yAxis.value = []
		xData.value = []
		let positionIndex = 0

		for (let i = 0; i < lineName.value.length; i++) {
			const yaxisTemp = JSON.parse(JSON.stringify(yaxis.value))
			legendData.value.push(`${lineName.value[i].name}(${lineName.value[i].unit})`)

			if (lineName.value[i].field === 'ssll') {
				yaxisTemp.position = 'left'
			} else {
				yaxisTemp.position = 'right'
				yaxisTemp.offset = lineName.value[i].field === 'jrl' ? 60 * positionIndex : 55 * positionIndex
				positionIndex += 1
			}

			yaxisTemp.name = `${lineName.value[i].name}(${lineName.value[i].unit})`
			yaxisTemp.min = lineName.value[i].min
			yaxisTemp.max = lineName.value[i].max
			yaxisTemp.axisLine.lineStyle.color = colorData[i].color
			yAxis.value.push(yaxisTemp)

			const serieTemp = JSON.parse(JSON.stringify(serie.value))
			serieTemp.name = `${lineName.value[i].name}(${lineName.value[i].unit})`
			serieTemp.field = lineName.value[i].field
			serieTemp.lineStyle.color = colorData[i].color
			serieTemp.yAxisIndex = i
			series.value.push(serieTemp)
		}

		option.value = {
			color: ['#000000', '#00007f', '#ff0000', '#005500', '#55007f', '#ffff00'],
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			dataZoom: [{
				connectNulls: false,
				id: 'dataZoomX',
				type: "inside",
				roam: false,
				show: true,
				xAxisIndex: [0],
				filterMode: 'empty',
				throttle: 50,
				zoomOnMouseWheel: true,
				moveOnMouseMove: true
			}, {
				id: 'dataZoomY',
				type: 'inside',
				filterMode: 'empty',
				zoomLock: false,
				throttle: 50,
				zoomOnMouseWheel: true,
				moveOnMouseMove: true
			}],
			toolbox: {
				feature: {
					dataView: {
						show: false,
						readOnly: false
					},
					restore: {
						show: false
					},
					saveAsImage: {
						show: false
					}
				}
			},
			legend: {
				data: legendData.value
			},
			grid: {
				top: '10%',
				left: '3%',
				right: '10%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				axisTick: {
					alignWithLabel: true
				},
				data: xData.value
			},
			yAxis: yAxis.value,
			series: series.value
		}
	}

	// 时间选择变化
	const getTime = (e) => {
		if (e && e.length === 2) {
			startTime.value = formatDate(e[0], 'yyyy-MM-dd hh:mm:ss')
			endTime.value = formatDate(e[1], 'yyyy-MM-dd hh:mm:ss')
			updateChart()
		}
	}

	// 切换表格显示
	const onChangeTable = (e) => {
		tableVisibled.value = !tableVisibled.value
		checkBoxText.value = tableVisibled.value ? '显示历史趋势' : '显示历史报表'
	}

	// 分页变化
	const handlePageChange = (e) => {
		ipagination.value.current = e.current
		ipagination.value.pageSize = e.pageSize
	}

	// 格式化表格时间显示
	const formatTableTime = (time) => {
		if (!time) return ''
		return formatDate(time, 'yyyy-MM-dd hh:mm:ss')
	}

	// 获取数组最大值
	const maxArrValue = (data) => {
		if (!data || data.length === 0) return 0

		const list = []
		for (let i in data) {
			if (data[i] !== null) {
				list.push(parseInt(data[i]))
			}
		}

		if (list.length === 0) return 0

		list.sort((num1, num2) => num1 - num2)
		return list[list.length - 1]
	}

	// 更新图表数据
	const updateChart = () => {
		dataSource.value = []
		xData.value = []

		for (let j = 0; j < series.value.length; j++) {
			series.value[j].data = []
		}

		loading.value = true

		getAction(url.list, {
			jldId: jldID.value,
			startTime: startTime.value,
			endTime: endTime.value
		}).then(res => {
			loading.value = false

			if (res.success) {
				const ssData = JSON.parse(res.result)
				dataSource.value = ssData
				ipagination.value.total = ssData.length

				for (let i = 0; i < ssData.length; i++) {
					const ctime = formatDate(ssData[i].createTime, 'yyyy-MM-dd hh:mm:ss')
					xData.value.push(ctime)

					for (let j = 0; j < series.value.length; j++) {
						let tempValue = ssData[i][lineName.value[j].field]
						tempValue = tempValue === 0 ? null : tempValue
						series.value[j].data.push(tempValue)
					}
				}

				for (let mm = 0; mm < series.value.length; mm++) {
					const maxVal = maxArrValue(series.value[mm].data)
					yAxis.value[mm].max = Math.round(maxVal * 1.2)
				}

				option.value.xAxis.data = xData.value

				if (myCharts.value) {
					myCharts.value.setOption(option.value)
				}
			}
		}).catch(() => {
			loading.value = false
		})
	}

	// 初始化ECharts
	const initECharts = () => {
		nextTick(() => {
			// 在Uniapp中，需要使用uni.createCanvasContext或使用ucharts等替代方案
			// 这里简化处理，实际使用时需要根据Uniapp的图表方案调整
			const canvas = document.getElementById('myCharts')
			if (canvas) {
				// 初始化ECharts实例
				myCharts.value = echarts.init(canvas)
				myCharts.value.setOption(option.value)
			}
		})
	}

	// 监听lineData变化
	watch(() => props.lineData, (val) => {
		jldID.value = val.jldID
		jldName.value = val.jldName
		chartTitle.value = `${val.jldName}历史趋势`
		lineName.value = JSON.parse(JSON.stringify(val.lineName))
		startTime.value = val.startTime
		endTime.value = val.endTime

		try {
			if (val.startTime && val.endTime) {
				const sDt = new Date(val.startTime)
				const eDt = new Date(val.endTime)
				lssjTimeRang.value = [sDt.getTime(), eDt.getTime()]
			} else {
				lssjTimeRang.value = getDefaultTimeRange()
			}
		} catch (e) {
			console.error('时间格式错误', e)
			lssjTimeRang.value = getDefaultTimeRange()
		}

		initChart()
		updateChart()
	}, {
		deep: true,
		immediate: true
	})

	// 页面加载
	onLoad(() => {
		// 设置默认时间范围
		lssjTimeRang.value = getDefaultTimeRange()

		// 在Uniapp中需要动态导入echarts或使用其他图表库
		setTimeout(() => {
			initECharts()
		}, 500)
	})

	// 页面卸载
	onUnmounted(() => {
		if (myCharts.value) {
			myCharts.value.dispose()
		}
	})
</script>

<style scoped>
	.chart-container {
		width: 100%;
		height: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.chart-header {
		margin-bottom: 20rpx;
	}

	.chart-title-container {
		width: 100%;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.chart-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.filter-section {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-bottom: 20rpx;
	}

	.date-picker {
		width: 100%;
	}

	.checkbox-container {
		display: flex;
		align-items: center;
	}

	.checkbox {
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}

	.chart {
		width: 100%;
		height: 600rpx;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
	}

	.table-container {
		width: 100%;
		overflow-x: auto;
	}

	.pagination {
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
	}
</style>