<!--
 * @Author: zwq
 * @Date: 2024-07-02 15:56:48
 * @LastEditors: zwq
 * @LastEditTime: 2024-07-02 16:55:43
 * @Description:
-->
<template>
	<div class="app-container">
		<div class="flexDiv">
			<div v-for="i in wareName" :key="i + 'a'" class="divClass up">
				{{ i }}
			</div>
		</div>
		<div class="flexDiv">
			<div v-for="i in stockNum" :key="i + 'b'" class="divClass down">
				<span v-if="i === '库存数量'">{{ i }}</span>
				<el-link v-else :underline="false" type="primary" @click="toPage(i)">
					{{ i }}
				</el-link>
			</div>
		</div>
		<barChart
			style="margin-top: 50px"
			ref="barChart"
			height="600px"
			:title="'库存数量'"
			v-if="barData.length"
			:bar-data="barData" />
		<!-- 没有数据 -->
		<div class="no-data-bg" v-else></div>
	</div>
</template>

<script>
import barChart from './BarChart.vue';
export default {
	data() {
		return {
			wareName: ['仓库名称'],
			stockNum: ['库存数量'],
			barData: [],
		};
	},
	components: {
		barChart,
	},
	created() {
		for (let i = 0; i < 5; i++) {
			this.wareName.push('仓库' + i);
			this.stockNum.push(i * 100 + i);
		}
	},
	methods: {
		toPage(i) {
			console.log(i);
			for (let i = 1; i < 6; i++) {
				const obj = {
					name: this.wareName[i],
					value: this.stockNum[i],
				};
				this.barData.push(obj);
			}
			console.log(this.barData);
			this.$nextTick(() => {
				this.$refs.barChart.initChart();
			});
		},
	},
};
</script>

<style scoped>
.flexDiv {
	display: flex;
}
.divClass {
	width: 120px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	border: 1px solid #ededed;
	font-size: 14px;
	color: #606266;
}
.up:nth-child(n) {
	border-bottom: none;
	border-right: none;
}
.up:last-child {
	border-right: 1px solid #ededed;
}
.down:nth-child(n) {
	border-right: none;
}
.down:last-child {
	border-right: 1px solid #ededed;
}
</style>
