<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	import {
		listConvert
	} from '@/api/system/unitConverter/sysUnitConverter.js';


	const unitData = ref([]);
	const queryParams = ref({
		pageNum: 1,
		pageSize: 1000,
		unitType: null,
		unitName: null,
		baseUnit: null,
		conversionFactor: null,
		unitTypeName: null,
		status: null,
		unitOrder: null
	});
	// 保留原有单位换算方法
	const groupByUnitType = (data) => {
		return data.reduce((acc, unit) => {
			const type = unit.unitType;
			if (!acc[type]) acc[type] = [];
			acc[type].push({
				id: unit.id,
				unitType: unit.unitType,
				unitName: unit.unitName,
				conversionFactor: unit.conversionFactor,
				unitOrder: unit.unitOrder,
				baseUnit: unit.baseUnit,
				status: unit.status,
				unitTypeName: unit.unitTypeName
			});
			return acc;
		}, {});
	};
	const getList = async () => {
		try {
			const response = await listConvert(queryParams.value);
			const unitDataGrouped = groupByUnitType(response.rows);
			localStorage.setItem('unitData', JSON.stringify(unitDataGrouped));
		} catch (error) {
			console.error('获取单位数据失败:', error);
		}
	};
	const chartData = ref({});

	onMounted(() => {
		getServerData();
		getList();
	});

	function getServerData() {
		// 模拟从服务器获取数据时的延时
		setTimeout(() => {
			let res = {
				categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
				series: [{
						name: '目标值',
						data: [35, 36, 31, 33, 13, 34],
					},
					{
						name: '完成量',
						data: [18, 27, 21, 24, 6, 28],
					},
				],
			};
			chartData.value = JSON.parse(JSON.stringify(res));
		}, 500);
	}
	const unitValue=ref(10)
</script>
<template>
	<view class="content">
		<a-yjly-inputunit
		:unit-type="length"
		v-model="unitValue"
		></a-yjly-inputunit>
		<image class="logo" src="@/static/logo.png"></image>
		<view class="text-area">
			<text class="title"> NGTools</text>
		</view>
		<view class="text-area">
			<up-text type="primary" text="uview-plus"></up-text>
		</view>
		<view class="charts-box">
			<qiun-data-charts type="column" :chartData="chartData" />
		</view>
	</view>
</template>
<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>