<template>
	<div
		:class="className"
		:style="{ height: height, width: width, marginLeft: '10px' }" />
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
import resize from '@/utils/chartMixins/resize';

const animationDuration = 1000;
export default {
	mixins: [resize],
	props: {
		className: {
			type: String,
			default: 'chart',
		},
		title: {
			type: String,
			default: '',
		},
		width: {
			type: String,
			default: '100%',
		},
		height: {
			type: String,
			default: '300px',
		},
		barData: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {
			chart: null,
			targetId: '',
		};
	},
	beforeDestroy() {
		if (!this.chart) {
			return;
		}
		this.chart.dispose();
		this.chart = null;
	},
	methods: {
		initChart() {
			this.chart = echarts.init(this.$el, 'macarons');
			const _this = this;
			this.chart.setOption({
				title: {
					text: this.title
						? '{space|}{tip|}{space|}{value|' + this.title + '}'
						: '',
					textStyle: {
						rich: {
							tip: {
								width: 6,
								height: 6,
								borderRadius: 50,
								backgroundColor: '#288AFF',
							},
							space: {
								width: 8,
							},
							value: {
								fontSize: 14,
								color: 'black',
							},
						},
					},
				},
				color: ['#288AFF', '#8EF0AB', '#FFDC94'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
					},
					formatter: function (params) {
						_this.targetId = params[0].data.id;
						let res =
							'<div>' +
							params[0].name +
							'</div><br/>' +
							params[0].marker +
							'<div style="float:right">库存数量：' +
							params[0].value +
							'</div>';
						return res;
					},
				},
				grid: {
					containLabel: true,
				},
				xAxis: {
					type: 'category',
					data: this.barData.map((item) => {
						return item.name;
					}),
					axisTick: {
						alignWithLabel: true,
					},
					axisLabel: {
						color: '#979797',
					},
					axisLine: {
						lineStyle: {
							color: '#979797',
						},
					},
				},
				yAxis: {
					axisTick: {
						show: false,
					},
					splitArea: {
						show: false,
					},
					axisLabel: {
						color: '#979797',
					},
				},
				series: [
					{
						name: '数量',
						type: 'bar',
						barWidth: '20',
						data: this.barData.map((item) => {
							const obj = {
								value: item.num,
								id: item.id,
							};
							return obj;
						}),
						animationDuration,
					},
				],
			});
			this.chart.getZr().off('click');
			this.chart.getZr().on('click', function () {
				if (_this.targetId !== '') {
          _this.$router.push({
						path: `warehouse-manage${_this.targetId}/InventoryOverview/` + _this.targetId,
					});
					// switch (_this.targetId) {
					// 	case 1:
					// 		_this.$router.push({
					// 			path: 'warehouse-manage1/InventoryOverview/' + _this.targetId,
					// 		});
					// 		break;
					// 	case '1818175999715164161':
					// 		_this.$router.push({
					// 			path: 'warehouse-manage2/InventoryOverview/' + _this.targetId,
					// 		});
					// 		break;
					// 	default:
					// 		console.log(_this.targetId);
					// 		break;
					// }
				}
			});
		},
	},
};
</script>
