<template>
<div class="foodstuffProfitLossLine pageContent">
<a-space class="search">
	库区名称:<a-input v-model:value="SearchForm._库区名称" />
	品种:<a-input v-model:value="SearchForm._品种" />
	日期: <a-range-picker v-model:value="SearchForm._日期" />
	<div class="btnBox">
		<a-button type="primary" @click="onSearch"> 查询 </a-button>
		<a-button @click="onReset"> 重置 </a-button>
	</div>
</a-space>
<div class="charts">
	<Ecs id="FoodsLine" height="600px" :options="getFoodsLine" />
</div>
</div>
</template>
<script setup>
const SearchForm = reactive({
	_库区名称:'',
	_品种:'',
	_日期:[],
});


const getFoodsLine = computed(()=>{
	let data = [150, 230, 224, 218, 135, 147, 260];
	let xData = ['2024-1-1', '2024-1-2', '2024-1-3', '2024-1-4', '2024-1-5', '2024-1-6', '2024-1-7'];
	return {
		title:{text:'损益折线图'},
		tooltip: { trigger: 'axis' },
		xAxis: {
			type: 'category',
			data: xData,
		},
		yAxis: {type: 'value'},
		series: [{
			data: data,
			type: 'line'
		}]
	}
})


function onSearch(){
	let fd = JSON.parse(JSON.stringify(SearchForm.value));
	if(fd._日期 && fd._日期.elngth >=2){
		fd.startTime = fd._日期[0];
		fd.endTime = fd._日期[1];
	}
	// ajax
}

function onReset(){
	SearchForm._库区名称 = '';
	SearchForm._品种 = '';
	SearchForm._日期 = [];
	onSearch();
}
</script>
<style lang="less" scoped>
.pageContent{
	background:#fff; padding:10px 20px;
	.search{
		padding:10px 0;
		.btnBox{
			display:flex;
			>*{ margin-right:10px; }
		}
	}
	#FoodsLine{
		margin-top:30px;
	}
}
</style>
