<template>
  <div ref="echart" :class="name" :style="{ height: height, width: width }"></div>
</template>

<script setup>
import * as echarts from "echarts";
import useResize from "@/hooks/useResize"; // hook
const store = useStore();
const emit = defineEmits();
const { proxy } = getCurrentInstance(); // 获取实例中的proxy
let echart;
let echartInstance;

const props = defineProps({
  // 数据
  data: {
    type: Object,
    default: {
		xAxis: [],
		data:[],
		show: true,
		unit: "",
	}
  },
  // 高度
  height: {
    type: [Number, String],
    default: "300px",
  },
  // 宽度
  width: {
    type: [Number, String],
    default: "100%",
  },
  name: {
		type: String,
		default: 'echart'
	}
});

const { data, name } = toRefs(props);
const data1 = reactive({
	option: {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				crossStyle: {
					color: '#999'
				}
			}
		},
		grid: {
			top: '6%',
			left: '2%',
			right: '2%',
			bottom: '2%',
			containLabel: true
		},
		dataZoom: {
		      // 开启数据平移
		    type: 'slider',
		    show: data.value.scroll?true:false,
		    startValue: 0,
		    endValue: data.value.scroll?5:null,
		    height: 4,
		    bottom: 0,
		    showDetail: false,
		    showDataShadow: false,
		    fillerColor: '#20a884',
			backgroundColor: "#cacaca",
		    borderColor: 'transparent',
		    zoomLock: true,
		    brushSelect: false,
		    handleStyle: {
		        opacity: 0,
		    },
		    lineStyle: {
		        opacity: 0,
		    },
		    textStyle: {
		        fontSize: 0,
		    }
		},
		xAxis: {
			type: 'category',
			axisLabel: {
				color: "#000",
				fontSize: 10
			},
			axisTick: {
				alignWithLabel: true
			},
			data: data.value.xAxis
		},
		yAxis: {
			type: 'value',
			axisLabel: {
				show: data.value.show,
				fontSize: 12,
				// color: "#000",
				showMaxLabel: true
			},
			axisLine: {
			    show: data.value.show
			},
			splitLine: {
				show: data.value.splitShow != undefined?data.value.splitShow:data.value.show,
				lineStyle: {
					color: ['#5a5a5a']
				}
			}
		},
		series: [{
			data: data.value.data,
			type: 'bar',
			barWidth: 20,
			itemStyle: {
				color: new echarts.graphic.LinearGradient(
					0, (data.value.colorPosi?1:0), (data.value.colorPosi?0:1), 0, [{
							offset: 0,
							color: data.value.color?data.value.color[0]:'#5940ff'
						},
						{
							offset: 1,
							color: data.value.color?data.value.color[1]:'#a38cff'
						}
					]
				),
			},
			label: {
			    normal: {
			        show: !data.value.show,
			        position: 'top',
			        color: (store.state.settings.sideTheme.indexOf("dark") != -1)?"#fff":"#000",
					fontSize:10,
			        formatter: function (params) {
			            var index = params.dataIndex;
			            return data.value.data[index] + data.value.unit
			        }
			    }
			}
		}]
	}
});

const { option } = toRefs(data1);

// 观察 data ，重新绘制
watch(data, (newValue) => {
    option.value.series[0].data = newValue.data;
	option.value.xAxis.data = newValue.xAxis;
},{ deep: true });
watch(option, (newValue) => {
    echartInstance.setOption(newValue, true);
},{ deep: true });
onMounted(() => {
	// echart = proxy.$refs.echart;
	// echartInstance = echarts.init(echart, "macarons");
	// echartInstance.setOption(option.value, true);
	nextTick(()=>{
		echartInstance = echarts.init(document.getElementsByClassName(name.value)[0]);
		echartInstance.setOption(option.value, true);
		echartInstance.on('click', params => {
			emit("clickBarTr", parseInt(params.dataIndex)+1);
		})
	})
});

function resize() {
	echartInstance.resize();
}

// 暴露函数 （供hook调用）
defineExpose({
  resize,
});

useResize();
</script>