<!--
 * @Author: zwq
 * @Date: 2023-08-22 15:01:54
 * @LastEditors: zwq
 * @LastEditTime: 2024-02-23 16:41:40
 * @Description:
-->
<template>
	<el-row :gutter="10" class="chart-container">
		<el-col :span="8">
			<div class="chart-card">
				<gaugeChart ref="gaugeChart" title="仓库占用率" height="450px" />
			</div>
		</el-col>
		<el-col :span="16">
			<div class="chart-card">
				<barChart
					ref="barChart"
					height="500px"
					title="库存总览"
					v-if="allData"
					:all-data="allData" />
				<el-empty
					v-else
					:image-size="300"
					:image="require('../../../assets/images/empty.png')" />
			</div>
		</el-col>
	</el-row>
</template>

<script>
import basicPage from '../mixins/basic-page';
import { mul } from '../mixins/code-filter';
import barChart from '../chart/BarChart.vue';
import gaugeChart from '../chart/GaugeChart.vue';
import { getOccupancy } from '@/api/asrs/warehouseStorehouse';
import { inventoryOverview } from '@/api/asrs/warehouseStorehouseGoodsSpecification';

export default {
	mixins: [basicPage],
	data() {
		return {
			urlOptions: {
				occupancyURL: getOccupancy,
				allURL: inventoryOverview,
			},
			occupancyData: 0,
			allData: {},
		};
	},
	components: {
		barChart,
		gaugeChart,
	},
	created() {
		this.listQuery.warehouseId = this.bId;
	},
	methods: {
		// 获取数据列表
		getDataList() {
			this.urlOptions.occupancyURL(this.bId).then((response) => {
				this.occupancyData = response.data[0].toFixed(2);
				const num = mul(this.occupancyData, 100);
				this.$nextTick(() => {
					this.$refs.gaugeChart.initChart(num,response.data[1]);
				});
			});
			this.urlOptions.allURL(this.bId).then((response) => {
				this.allData = response.data;
				this.$nextTick(() => {
					this.$refs.barChart.initChart();
				});
			});
		},
	},
};
</script>

<style scoped>
.chart-container {
	min-height: calc(100vh - 120px - 8px);
	background-color: #f0f2f7;
}
.chart-card {
	min-height: calc(100vh - 120px - 8px);
	background-color: #fff;
  border-radius: 8px;
	padding: 16px;
}
</style>
