<!-- 
    filename: graph.vue
    author: liubin
    date: 2023-08-31 14:00:02
    description: 
-->

<template>
	<div class="chart-wrapper">
		<div class="blue-title">各设备加工数量</div>
		<div class="chart" ref="chart"></div>
	</div>
</template>

<script>
import * as echarts from 'echarts';

export default {
	name: 'LineChartInEquipmentProcessAmount',
	components: {},
	props: ['equipmentList', 'render'],
	data() {
		return {
			chart: null,
			option: {
				color: ['#288AFF'],
				grid: {
					top: 64,
					left: 56,
					right: 64,
					bottom: 56,
				},
				title: {
					show: false,
					text: '各设备加工数量',
					textStyle: {
						color: '#232323',
						fontSize: 16,
					},
					left: 'center',
					top: 24,
				},
				yAxis: {
					type: 'category',
					axisLine: {
						show: true,
						lineStyle: {
							color: '#777',
						},
					},
					axisTick: {
						show: false,
					},
					// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
					data: [],
					name: '设备名',
					nameTextStyle: {
						fontSize: 14,
					},
				},
				xAxis: {
					type: 'value',
					axisLine: {
						show: true,
						lineStyle: {
							color: '#777',
						},
					},
					name: '数量',
					nameTextStyle: {
						fontSize: 14,
					},
				},
				series: [
					{
						// data: [120, 200, 150, 80, 70, 110, 130],
						data: [],
						type: 'bar',
						barWidth: 20,
						label: {
							show: true,
							distance: 50,
							formatter: '{c}',
						},
						showBackground: true,
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)',
						},
					},
				],
			},
		};
	},
	watch: {
		render: {
			handler: function (newVal, oldVal) {
				if (!this.chart) this.chart = echarts.init(this.$refs.chart);
				this.$nextTick(() => {
					if (this.chart) this.chart.setOption(this.updateConfig(this.option));
				});
			},
			deep: true,
		},
	},
	beforeDestroy() {
		if (this.chart) this.chart.dispose();
	},
	methods: {
		updateConfig(config) {
			let nameData = [];
			let valueData = [];
			this.equipmentList.map((eq) => {
				nameData.push(eq.equipmentName);
				valueData.push(eq.totalQuantity);
			});
			config.yAxis.data = nameData;
			config.series[0].data = valueData;
			return config;
		},
	},
};
</script>

<style scoped lang="scss">
.chart-wrapper {
	height: 100%;
	flex: 1;
	// background: #f9f9f9;
}

.chart {
	height: 100%;
	width: 100%;
	// background: lightcoral;
}

.blue-title {
	position: relative;
	padding: 4px 0;
	padding-left: 12px;
	font-size: 14px;

	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 6px;
		height: 16px;
		width: 4px;
		border-radius: 1px;
		background: #0b58ff;
	}
}
</style>
