<template>
	<div class="top">
		品牌：
		<a-select
			v-model:value="value"
			label-in-value
			style="width: 120px"
			:options="options"
			@change="handleChange"
		></a-select>
		市州：
		<a-select
			v-model:value1="values"
			label-in-value
			style="width: 120px"
			:options="optionses"
			@change="handleChange"
		></a-select>
		汇总日期：
		<a-space direction="vertical" :size="12">
			<a-range-picker :size="size" />
		</a-space>
		<button @click="query">查询</button>
		<button @abort="reset">重置</button>
		<button @click="download">导出</button>
	</div>

	<div ref="main" style="width: 80%; height: 600px"></div>
</template>

<script setup>
	import * as echarts from 'echarts'
	import { ref, onMounted } from 'vue'

	import processedgraindata from '@/api/basic.info/processedgrainApi'
	const main = ref(null)

	onMounted(() => {
		processedgrainData()
	})
	let myChart
	const download = () => {
		console.log('downLoad')
		var imgData = myChart.getDataURL({
			// 导出的格式，可以是 'png', 'jpeg'
			type: 'png',
			// 导出的图片分辨率比例，默认是 1
			pixelRatio: 1,
			// 导出的图片背景色，默认是 'white'
			backgroundColor: '#ffffff'
		})

		// 创建一个a标签模拟点击进行下载
		var a = document.createElement('a')
		a.href = imgData
		// 指定下载的文件名
		a.download = 'echarts-export.png'
		// 模拟a标签点击进行下载
		a.click()
	}
	let index = ref('')
	const handleChange = (value) => {
		index = value.value
		console.log(index, 'ii')
		processedgrainData()
	}
	// 定义一个响应式变量来存储接口数据
	//let 定义变量
	const userData = ref([])
	const processedgrainData = () => {
		processedgraindata
			.processedgrain({
				firstLevel: '3',
				secondLevel: '',
				threeLevel: '',
				sysOrgld: '',
				sumEndTime: '',
				sumStartTime: ''
			})
			.then((res) => {
				console.log(res, 1561531)
				userData.value = res
				console.log(userData.value, 'aaa')
				renderChart()
			})
	}

	const options = ref([
		{
			value: '0',
			label: '三级菜籽油'
		},
		{
			value: '1',
			label: '特一粉'
		},
		{
			value: '2',
			label: '一级圆粒米'
		}
	])
	const optionses = ref([
		{
			value: '海东市',
			label: '海东市'
		},
		{
			value: '西宁市',
			label: '西宁市'
		}
	])
	const renderChart = () => {
		// 获取容器元素
		const chartDom = main.value

		// 初始化 ECharts 实例
		myChart = echarts.init(chartDom)
		// 配置项
		// 三级菜籽油
		const seriesData = [
			{
				name: '批发价格',
				data: userData.value.map((item) => {
					let price = 0
					if (item.collectCategoryList.length > 0) {
						price = item.collectCategoryList[0].price || 0
					} else {
						price = 0
					}
					return price
				})
			},
			{
				name: '零售价格',
				data: userData.value.map((item) => {
					let price = 0
					if (item.collectCategoryList.length > 1) {
						price = item.collectCategoryList[1].price || 0
					} else {
						price = 0
					}
					return price
				})
			}
		]

		const option = {
			title: {
				text: userData.value.map((i) => {
					return i.id
				})
			},
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				data: seriesData.map((item) => item.name)
			},
			grid: {
				left: '10%',
				right: '10%',
				bottom: '3%',
				containLabel: true
			},
			// 导出图片
			// toolbox: {
			// 	feature: {
			// 		saveAsImage: {}
			// 	}
			// },
			xAxis: {
				name: '日期',
				type: 'category',
				boundaryGap: false,
				data: userData.value.map((i) => {
					return i.sumTime
				})
			},
			yAxis: {
				name: '金额(元)',
				type: 'value'
			},
			series: seriesData.map((series) => ({
				name: series.name,
				type: 'line',
				data: series.data
			}))
		}

		// 渲染图表
		myChart.setOption(option)
	}
	// 处理按钮点击事件的函数
	const query = () => {
		console.log(1111)
	}
</script>

<style lang="less" scoped>
	/* 可选的样式 */
	.top {
		width: 100%;
		height: 140px;
		margin-top: 20px;
		margin-left: 10%;
		button {
			width: 60px;
			height: 50%;
			border: solid 1px #ccc;
			margin-left: 30px;
			background: #fff;
		}
	}
</style>
