<script setup name="chart">
	import { chartLineData } from '@/api/grainReserves/businessGslrLossCollect'
	import * as echarts from 'echarts'
	onMounted(() => {
		search()
	})
	const searchForm = ref({
		orgName: null,
		storehouseName: null,
		warehouseName: null,
		date: []
	})
	const draw = (list) => {
		const date = []
		const data = []
		list.forEach((d) => {
			date.push(d.businessDate)
			data.push(d.actualLossQuantity || 0)
		})
		const option = {
			xAxis: {
				type: 'category',
				data: date
			},
			yAxis: {
				type: 'value'
			},
			series: [
				{
					data: data,
					type: 'line'
				}
			]
		}

		// 使用刚刚创建的配置项来初始化你的 ECharts 实例
		echarts.init(document.getElementById('chart')).setOption(option)
	}
	const formRef = ref()
	const search = () => {
		const [s, e] = searchForm.value.date
		chartLineData({
			startTime: s,
			endTime: e,
			orgName: searchForm.value.orgName,
			storehouseName: searchForm.value.storehouseName,
			warehouseName: searchForm.value.warehouseName
		}).then((list) => {
			draw(list)
		})
	}
	const reset = () => {
		formRef.value.resetFields()
		search()
	}
</script>

<template>
	<a-card :bordered="false">
		<div class="search-form">
			<a-form ref="formRef" :model="searchForm" layout="inline">
				<a-form-item label="库区名称" name="orgName">
					<a-input v-model:value="searchForm.orgName" class="small-field" />
				</a-form-item>
				<a-form-item label="仓房名称" name="storehouseName">
					<a-input v-model:value="searchForm.storehouseName" class="small-field" />
				</a-form-item>
				<a-form-item label="货位名称" name="warehouseName">
					<a-input v-model:value="searchForm.warehouseName" class="small-field" />
				</a-form-item>
				<a-form-item label="日期" name="date">
					<a-range-picker v-model:value="searchForm.date" valueFormat="YYYY-MM-DD" />
				</a-form-item>
				<a-button type="primary" @click="search">
					<template #icon><plus-outlined /></template>
					查询
				</a-button>
				<a-button @click="reset">
					<template #icon><plus-outlined /></template>
					重置
				</a-button>
			</a-form>
		</div>
		<div id="chart" style="height: 600px"></div>
	</a-card>
</template>

<style scoped>
	.small-field {
		width: 100px;
	}
</style>
