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

<template>
	<PageLayout :navbarShow="false" class="page-layout">
		<view style="color: blue;font-size:18px;text-align: center;margin: 10px;width: 100%;">
			<wd-text :text="jldData.jldname+ '日报数据'" style="color: blue;font-size:18px;"></wd-text>
			{{startTime}}
		</view>
		<view>
			<uni-datetime-picker type="daterange" v-model="lssjTimeRange" @change="getTime" start-placeholder="开始时间"
				end-placeholder="结束时间">

			</uni-datetime-picker>
		</view>
		<view style="text-align: center;padding: 5px;">

			<wd-button custom-class="custom-value" size="small" plain clickable @click="handleForward">上一月</wd-button>
			<wd-button custom-class="custom-value" size="small" plain clickable @click="handleThis">本月</wd-button>
			<wd-button custom-class="custom-value" size="small" plain clickable @click="handleNext">后一月</wd-button>
			<wd-button custom-class="custom-value" size="small" plain clickable @click="handleQuery">查询数据</wd-button>
			<wd-button custom-class="custom-value" size="small" plain clickable @click="handleDrawLine">生成曲线</wd-button>


		</view>
		<view>
			<scroll-view direction="vertical" style="height: 200px;">
				<wd-table :data="chartData" height="200px">
					<wd-table-col prop="scrq" label="日期" align="center"></wd-table-col>
					<wd-table-col prop="jldname" label="计量点名称" align="center"></wd-table-col>
					<wd-table-col prop="ljql" label="流量(m³)" align="center">
					</wd-table-col>
				</wd-table>
			</scroll-view>
		</view>
		<view v-if="drawLineFlag">
			<cxc-szcx-multiLineChart :data-list="chartData" x-field="scrq"
				:y-fields="lineFields"></cxc-szcx-multiLineChart>
		</view>

	</PageLayout>
</template>

<script setup>
	import {
		queryJldRbDataByJldID
	} from '@/api/production'
	import {
		formatDate
	} from '@/utils/dateTime.ts';
	import {
		ref,
		onMounted,
		computed,
		nextTick,
		watchEffect,
		onUnmounted,
	} from 'vue';


	const lineFields = ref([

		{
			name: '日流量',
			field: 'ljql',
			min: '0',
			max: '500000',
			unit: '10^4m³'
		}
	])

	const props = defineProps({
		jldData: {
			type: Object,
			default: () => {}
		}
	})
	const chartData = ref([])
	const drawLineFlag = ref(false)

	function handleQuery() {
		const dwmc = props.jldData.qu;
		const zcmc = props.jldData.zhan;
		const jldmc = props.jldData.jldname;
		console.log(dwmc, zcmc, jldmc)
		queryJldRbDataByJldID({
			fenzu: 'a.scrq',
			dwmc: dwmc,
			zcmc: zcmc,
			jldname: jldmc,
			startTime: startTime.value,
			endTime: endTime.value
		}).then(res => {
			console.log(res)
			chartData.value = res.result

		})


	}

	function handleDrawLine() {
		drawLineFlag.value = true
	}
	// 前一天 - 以当前选择的起始日期为基准计算
	function handleForward() {
		const now = new Date(startTime.value);
		now.setMonth(now.getMonth() - 1);

		const year = now.getFullYear();
		const month = now.getMonth();

		const firstDay = new Date(year, month, 1);
		const lastDay = new Date(year, month + 1, 0);

		startTime.value = formatDate(firstDay, "YYYY-MM-DD");
		endTime.value = formatDate(lastDay, "YYYY-MM-DD");

		lssjTimeRange.value = [formatDate(firstDay, "YYYY-MM-DD"), formatDate(lastDay, "YYYY-MM-DD")];
		getTime(); // 触发时间变更事件
	}

	// 本月
	function handleThis() {

		lssjTimeRange.value = getDefaultTimeRange()
		getTime(); // 触发时间变更事件
	}

	// 后一天
	function handleNext() {
		const now = new Date(startTime.value);
		now.setMonth(now.getMonth() + 1);

		const year = now.getFullYear();
		const month = now.getMonth();

		const firstDay = new Date(year, month, 1);
		const lastDay = new Date(year, month + 1, 0);
		startTime.value = formatDate(firstDay, "YYYY-MM-DD");
		endTime.value = formatDate(lastDay, "YYYY-MM-DD");

		lssjTimeRange.value = [formatDate(firstDay, "YYYY-MM-DD"), formatDate(lastDay, "YYYY-MM-DD")];
		getTime(); // 触发时间变更事件
	}

	// 获取指定日期偏移的时间范围（每天8:00至次日7:59）
	const getDefaultTimeRange = () => {
		const now = new Date();
		const year = now.getFullYear();
		const month = now.getMonth();

		// 当月第一天
		const start = new Date(year, month, 1);
		// 当月最后一天
		const end = new Date(year, month + 1, 0);

		// 格式化时间字符串
		const formattedStart = formatDate(start, 'YYYY-MM-DD');
		const formattedEnd = formatDate(end, 'YYYY-MM-DD');

		// 更新响应式变量
		startTime.value = formattedStart;
		endTime.value = formattedEnd;

		return [formattedStart, formattedEnd];
	};



	onMounted(() => {
		// 设置默认时间范围  需要延时等控件渲染好
		setTimeout(() => {
			lssjTimeRange.value = getDefaultTimeRange(0)
		}, 500)

		console.log(lssjTimeRange.value);
	})
	const startTime = ref('')
	const endTime = ref('')
	const lssjTimeRange = ref([])


	// 时间选择变化
	const getTime = (e) => {
		if (e && e.length === 2) {
			startTime.value = formatDate(e[0], 'YYYY-MM-DD')
			endTime.value = formatDate(e[1], 'YYYY-MM-DD')
			// updateChart()
		}
	}
</script>

<style scoped>

</style>