<template>
	<view class="data-box">
		<view class="headline">今日订单对比</view>

		<canvas id="line-chart" class="line-chart" ref="LineChartRef" />

	</view>
</template>

<script lang="ts" setup>
	import { onMounted, ref, getCurrentInstance, unref } from 'vue';
	import uCharts from '@/util/u-charts.min.js';

	defineProps({
		valueLabel: {
			type: Array,
			default: []
		}
	});
	const LineChartRef = ref();
	const uChartsInstance = ref({});

	const drawCharts = (id, data) => {
		console.log('uCharts  1= ', uCharts)
		const cWidth = uni.upx2px(750);
		const cHeight = uni.upx2px(472);
		const ctx = uni.createCanvasContext(id);
		console.log('uCharts  ctx  = ', ctx)
		uChartsInstance.value[id] = new uCharts({
			type: "column",
			context: ctx,
			width: cWidth,
			height: cHeight,
			categories: data.categories,
			series: data.series,
			animation: true,
			background: "#FFFFFF",
			padding: [15, 15, 0, 5],
			xAxis: {
				disableGrid: true
			},
			yAxis: {
				data: [{ min: 0 }]
			},
			extra: {
				column: {
					type: "group"
				}
			}
		});

	}
	const tap = (e) => {
		uChartsInstance[e.target.id].touchLegend(e);
		uChartsInstance[e.target.id].showToolTip(e);
	}
	onMounted(async () => {
		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]
				}
			]
		};
		drawCharts('column', res);
		// console.log('LineChartRef  2= ', unref(LineChartRef))
		// const el = document.getElementById('line-chart')


		// var myChart = echarts.init(unref(LineChartRef));
		// const names = ["总隐患数", "视频巡查隐患数", "图片识别隐患数"];
		// const monthList = ['1', 2, 3, 4, 5, 6, 7]
		// const option : any = {
		// 	tooltip: {
		// 		trigger: "axis",
		// 	},
		// 	legend: {
		// 		type: "scroll",
		// 		data: names,
		// 	},
		// 	grid: {
		// 		left: "3%",
		// 		right: "4%",
		// 		bottom: "3%",
		// 		containLabel: true,
		// 	},

		// 	xAxis: {
		// 		type: "category",
		// 		boundaryGap: false,
		// 		data: monthList,
		// 	},
		// 	yAxis: {
		// 		type: "value",
		// 	},
		// 	series: [
		// 		{
		// 			name: names[0],
		// 			type: "line",
		// 			color: "#3188FF",
		// 			data: [1, 2, 3, 4, 5, 6, 7],
		// 			smooth: true,
		// 		},
		// 		{
		// 			name: names[1],
		// 			type: "line",
		// 			color: "#2CCEB5",
		// 			data: [3, 4, 6, 8, 8, 9, 0],
		// 			smooth: true,
		// 		},
		// 		{
		// 			name: names[2],
		// 			type: "line",
		// 			color: "#FFA922",
		// 			data: [1, 7, 7, 4, 8, 3, 2],
		// 			smooth: true,
		// 		},
		// 	],
		// };
		// option && myChart.setOption(option);
	})
</script>

<style lang="scss" scoped>
	@import url("./index.scss");

	.line-chart {
		width: 100%;
		height: 472rpx;
		// background-color: hotpink;
	}
</style>