<!--
 * @Author: zwq
 * @Date: 2023-08-22 15:01:54
 * @LastEditors: zwq
 * @LastEditTime: 2024-10-09 14:24:48
 * @Description:
-->
<template>
	<div class="app-container">
		<search-bar
			:formConfigs="formConfig"
			ref="searchBarForm"
			@headBtnClick="buttonClick" />
		<el-row :gutter="20">
			<el-col :span="23">
				<barChart
					title="柱状图分析"
					ref="barChart"
					height="500px"
					v-if="tableData.length"
					:histogram="tableData" />
				<el-empty
					v-else
					:image-size="300"
					:image="require('../../../assets/images/empty.png')" />
			</el-col>
		</el-row>
	</div>
</template>

<script>
import basicPage from '../mixins/basic-page';
import barChart from '../chart/BarChart.vue';
import { getHistogram } from '@/api/asrs/warehouseStorehouseStorage';
import { getGoodSpecificationPage } from '@/api/asrs/goodSpecification';

export default {
	mixins: [basicPage],
	data() {
		return {
			urlOptions: {
				getDataListURL: getHistogram,
			},
			listQuery: {
				warehouseId: '1696803324030865409',
				goodName: '',
				startTime: '',
				endTime: '',
			},
			formConfig: [
				{
					type: 'select',
					label: '产品',
					selectOptions: [],
					labelField: 'goodSpecificationName',
					valueField: 'goodSpecificationName',
					param: 'name',
					filterable: true,
				},
				{
					type: 'datePicker',
					label: '时间',
					dateType: 'daterange',
					format: 'yyyy-MM-dd',
					valueFormat: 'yyyy-MM-dd',
					rangeSeparator: '-',
					startPlaceholder: '开始时间',
					endPlaceholder: '结束时间',
					param: 'searchTime',
				},
				{
					type: 'button',
					btnName: '搜索',
					name: 'search',
					color: 'primary',
				},
			],
		};
	},
	components: {
		barChart,
	},
	created() {
    this.listQuery.warehouseId = this.bId
		this.getArr();
	},
	methods: {
		// 获取数据列表
		getDataList() {
			if (this.listQuery.goodName) {
				this.urlOptions.getDataListURL(this.listQuery).then((response) => {
					this.tableData = response.data;
					if (this.tableData.length) {
						this.$nextTick(() => {
							this.$refs.barChart.initChart();
						});
					}
				});
			}
		},
		getArr() {
			const params = {
				pageSize: 100,
				pageNo: 1,
				total: 1,
				warehouseId: this.bId,
			};
			getGoodSpecificationPage(params).then((response) => {
				this.formConfig[0].selectOptions = response.data.list;
			});
		},
		buttonClick(val) {
			switch (val.btnName) {
				case 'search':
					if (val.name) {
						this.listQuery.goodName = val.name;
						if (val.searchTime) {
							this.listQuery.createTime = val.searchTime;
							this.listQuery.startTime = val.searchTime
								? val.searchTime[0]
								: '';
							this.listQuery.endTime = val.searchTime ? val.searchTime[1] : '';
							this.getDataList();
						} else {
							this.$modal.msgWarning('请选择时间');
						}
					} else {
						this.$modal.msgWarning('请选择产品');
					}
					break;
				case 'reset':
					this.$refs.searchBarForm.resetForm();
					this.listQuery = {
						warehouseId: this.bId,
						goodName: '',
						startTime: '',
						endTime: '',
					};
					this.getDataList();
					break;
				default:
					console.log(val);
			}
		},
	},
};
</script>
