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

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
import resize from '../mixins/resize';
import { max } from 'moment';

const animationDuration = 6000;

export default {
	mixins: [resize],
	props: {
		echartData: {
			type: Array,
			default: () => [],
		},
		className: {
			type: String,
			default: 'chart',
		},
		width: {
			type: String,
			default: '100%',
		},
		height: {
			type: String,
			default: '380px',
		},
	},
	data() {
		return {
			chart: null,
		};
	},
	mounted() {
		this.$nextTick(() => {
			this.initChart();
		});
	},
	beforeDestroy() {
		if (!this.chart) {
			return;
		}
		this.chart.dispose();
		this.chart = null;
	},
	methods: {
		initChart(permission) {
			var option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999',
						},
					},
				},
				grid: {
					top: 100,
					left: '2%',
					right: '3%',
					bottom: '3%',
					containLabel: true,
				},
				legend: {
					data: [
						'产量',
						{
							name: '成本',
							icon: 'path://M1255.570286 1024a512 512 0 1 0 0-1024 512 512 0 0 0 0 1024z m641.609143-512c0 37.376-3.072 74.020571-8.923429 109.714286h393.069714c59.611429 0 107.958857-49.152 107.958857-109.714286s-48.274286-109.714286-107.958857-109.714286h-393.069714c5.851429 35.693714 8.923429 72.338286 8.923429 109.714286zM156.745143 621.714286h453.12a672.914286 672.914286 0 0 1 0-219.428572H156.745143C97.133714 402.285714 48.786286 451.437714 48.786286 512s48.274286 109.714286 107.958857 109.714286z',
						},
						{
							name: '良品率',
							icon: 'path://M1255.570286 1024a512 512 0 1 0 0-1024 512 512 0 0 0 0 1024z m641.609143-512c0 37.376-3.072 74.020571-8.923429 109.714286h393.069714c59.611429 0 107.958857-49.152 107.958857-109.714286s-48.274286-109.714286-107.958857-109.714286h-393.069714c5.851429 35.693714 8.923429 72.338286 8.923429 109.714286zM156.745143 621.714286h453.12a672.914286 672.914286 0 0 1 0-219.428572H156.745143C97.133714 402.285714 48.786286 451.437714 48.786286 512s48.274286 109.714286 107.958857 109.714286z',
						},
					],
					itemWidth: 18,
					itemHeight: 18,
					textStyle: {
						fontSize: 18,
						color: '#DFF1FE',
					},
					top: 15,
					right: 20,
				},
				xAxis: [
					{
						type: 'category',
						data: this.echartData.map((item) => {
							return item.time;
						}),
						axisPointer: {
							type: 'shadow',
						},
						axisLine: {
							lineStyle: {
								type: 'solid',
								color: '#97B3FF', // 左边线的颜色
								width: '1', // 坐标线的宽度
							},
						},
					},
				],
				yAxis: [
					{
						type: 'value',
						name: '单位/片',
						min: 0,
						position: 'left',
						alignTicks: true,
						axisLabel: {
							color: 'white',
						},
						nameTextStyle: {
							color: 'white',
						},
						axisLine: {
							show: true,
							lineStyle: {
								type: 'solid',
								color: '#97B3FF', // 左边线的颜色
								width: '1', // 坐标线的宽度
							},
						},
						splitLine: {
							lineStyle: {
								color: '#b6c1e1',
							},
						},
						splitArea: {
							show: false,
						},
					},
					{
						type: 'value',
						name: '%',
						max: 100,
						min: 0,
						minInterval: 1,
						position: 'right',
						axisLabel: {
							color: 'white',
						},
						nameTextStyle: {
							color: 'white',
						},
						axisLine: {
							show: true,
							lineStyle: {
								type: 'solid',
								color: '#97B3FF', // 左边线的颜色
								width: '1', // 坐标线的宽度
							},
						},
						splitLine: {
							lineStyle: {
								color: '#b6c1e1',
							},
						},
						splitArea: {
							show: false,
						},
					},
					{
						type: 'value',
						name: '万元',
						min: 0,
						position: 'right',
						alignTicks: true,
						offset: 40,
						axisLabel: {
							color: 'white',
						},
						nameTextStyle: {
							color: 'white',
						},
						axisLine: {
							show: true,
							lineStyle: {
								type: 'solid',
								color: '#97B3FF', // 左边线的颜色
								width: '1', // 坐标线的宽度
							},
						},
						splitLine: {
							lineStyle: {
								color: '#b6c1e1',
							},
						},
						splitArea: {
							show: false,
						},
					},
				],
				series: [
					{
						name: '产量',
						type: 'bar',
						barWidth: '14px',
						data: this.echartData.map((item) => {
							return Number(item.out).toFixed(1);
						}),
						animationDuration,
						tooltip: {
							valueFormatter: function (value) {
								return value + ' 片';
							},
						},
						itemStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{ offset: 0, color: '#5CB7FF' },
								{ offset: 1, color: '#364BFE' },
							]),
						},
					},
					{
						name: '成本',
						type: 'line',
						symbol: 'circle',
						symbolSize: 8,
						yAxisIndex: 2,
						data: this.echartData.map((item) => {
							return Number(item.price).toFixed(1);
						}),
						animationDuration,
						tooltip: {
							valueFormatter: function (value) {
								return value + ' 万元';
							},
						},
						lineStyle: {
							color: '#FF1295',
						},
						itemStyle: {
							color: '#FF1295',
							borderWidth: 1, // 圆点边框宽度（可选）
						},
						areaStyle: {
							opacity: 0.2,
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: '#FF1295',
								},
								{
									offset: 1,
									color: 'transparent',
								},
							]),
						},
					},
					{
						name: '良品率',
						type: 'line',
						symbol: 'circle',
						symbolSize: 8,
						yAxisIndex: 1,
						data: this.echartData.map((item) => {
							return Number(item.ratio).toFixed(1);
						}),
						animationDuration,
						tooltip: {
							valueFormatter: function (value) {
								return value + ' %';
							},
						},
						lineStyle: {
							color: '#12FFF5',
						},
						itemStyle: {
							color: '#12FFF5',
							borderWidth: 1, // 圆点边框宽度（可选）
						},
						areaStyle: {
							opacity: 0.2,
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: '#12FFF5',
								},
								{
									offset: 1,
									color: 'transparent',
								},
							]),
						},
					},
				],
			};

      if(permission){
        option.series[1]=[]
      }
			if (this.chart) {
				this.chart.setOption(option);
			} else {
				this.chart = echarts.init(this.$el, 'macarons');
				this.chart.setOption(option);
			}
			window.addEventListener('resize', () => {
				this.chart.resize();
			});
		},
	},
};
</script>
