<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/components/chart/BarChart/BarChart.vue
 * @Date: 2022-08-29 16:06:58
 * @Description: 
 * @LastEditTime: 2022-09-08 18:51:30
 * @LastEditors: changjun
-->
<script setup lang="ts">
import { Ref, defineProps, watchEffect } from 'vue';
import type { EChartsOption } from 'echarts'
import { useECharts } from '../../../hooks/web/useECharts';
import { colorList, mergeOptions, getBarChartThemeColor, getCommonTheme } from '../../../components/chart/options/index'
import { isObject } from '../../../utils/is';
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions, getInstance, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
import useEchartsAutoTooltip from '../components/chart/logic/useEchartsAutoTooltip'
/**
 * @author changjun
 * @description 基础组件-柱状图组件
 * @prop { String } title 图表左上显示内容
 * @prop { Array } xAxisData x轴数据
 * @prop { Function } legendFormatter 图例自定义显示
 * @prop { Object } otherOptions 手动设置一些其它的设置 结合manual
 * @prop { Function } legendFormatter 图例自定义显示函数
 * @date 2022/08/29
 */
interface BarChartProps {
	title?: string,
	xAxisData: any[],
	theme?: string,
	autotip?: boolean,
	/**
	 * 图表数据
	 */
	chartData: any[],
	/**
	 * 格式化图例显示函数 用于需要显示图例名称之外内容的时候
	 */
	legendFormatter?: string | ((name: string) => string);
	italics?: boolean,
	/**
	 * 是否需要手动设置一些其它的设置，需要结合otherOptions才能起作用
	 */
	manual?: boolean,
	/**
	 * 手动设置色盘
	 */
	colors?: string[],
	/**
	 * 柱状图同一系列是否开启堆叠
	 */
	stack?: boolean,
	tooltipValueFormatter?: any;
	/**
	 * 手动设置一些其它的设置，需要结合manual才能起作用
	 */
	otherOptions?: EChartsOption
	barGradientColor?: string[],
	xInterval?: number,
}

const {
	xAxisData = [],
	title = '',
	chartData = [],
	legendFormatter = (name) => name,
	manual = false,
	theme = 'light',
	italics = false,
	otherOptions = {},
	colors = [],
	barGradientColor = [],
	xInterval = 0,
	stack = false,
	tooltipValueFormatter = (val) => val,
	autotip = false
} = defineProps<BarChartProps>()


const currentTheme = computed(() => {
	return getBarChartThemeColor(unref(theme))
}) as any;


const commonChartTheme = computed(() => {
	return getCommonTheme(unref(theme))
}) as any

let options: EChartsOption = {
	title: {
		show: unref(title) ? true : false,
		text: unref(title),
		top: 16,
		left: 24,
		textStyle: {
			fontSize: 12,
			color: unref(currentTheme).titleColor,
			fontWeight: 400,
		}
	},

	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow'
		},
		textStyle: {
			color: unref(commonChartTheme).tooltip.textStyle.color,
		},
		valueFormatter: unref(tooltipValueFormatter),
		show: true,
		confine: true,
		backgroundColor: unref(commonChartTheme).tooltip.backgroundColor,
		borderColor: 'transparent',
		extraCssText: 'border-radius: 4px;'
	},

	grid: {
		top: 55,
		left: 44,
		right: 24,
		bottom: 0,
		containLabel: true
	},

	legend: {
		top: 16, // 距离容器上边界的距离
		right: 24, // 距离容器右边界的距离
		itemWidth: 12, // 图例宽度
		itemHeight: 12, // 图例高度
		itemGap: 16, // 图例间距
		icon: 'roundRect',
		// 图例文字的样式
		textStyle: {
			fontSize: 10,
			fontWeight: 400,
			color: unref(currentTheme).legendTextColor
		},
		formatter: unref(legendFormatter)
	},

	xAxis: [
		{
			data: unref(xAxisData),
			axisLabel: {
				fontSize: 10,
				fontWeight: 400,
				color: unref(currentTheme).axisLabelColor,
				interval: unref(xInterval),
				rotate: unref(italics) ? 60 : 0
			},
			axisTick: { show: false },
			axisLine: {
				show: false,
				lineStyle: {
					color: unref(currentTheme).axisLineColor,
					width: 1
				}
			}
		}
	],

	yAxis: [
		{
			type: 'value',
			axisLabel: {
				fontSize: 10,
				fontWeight: 400,
				color: unref(currentTheme).axisLabelColor,
			},
			splitLine: {
				// 坐标轴分割线
				show: true,
				lineStyle: { color: unref(currentTheme).axisLineColor } // 分割线颜色
			},
			axisLine: {
				show: false,
			},
		}
	],

	series: []
}


const getSeriesData = function (list) {
	const _colors = unref(colors).length > 0 ? unref(colors) : unref(currentTheme).colorList;
	return list.map((item, index) => {
		const newItem = {
			type: 'bar',
			barWidth: '30%',
			itemStyle: {
				color: _colors[index],
				borderRadius: [2, 2, 0, 0]
			},
		} as any

		if(unref(stack)){
			newItem.stack = 'stack'
		}

		if (unref(barGradientColor).length > 0) {
			newItem.itemStyle.color = {
				type: 'linear',
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [{
					offset: 0, color: unref(barGradientColor)[0] // 0% 处的颜色
				}, {
					offset: 1, color: unref(barGradientColor)[1] // 100% 处的颜色
				}],
				global: false
			}
		}
		return {
			...newItem,
			...item,
		}
	})
}

let stopAutoShowFun = null as any
watchEffect(() => {
	if(unref(chartData).length === 0) return;
	options.series = getSeriesData(unref(chartData))
	console.log('options', options)
	options.xAxis![0].data = unref(xAxisData)
	// @ts-ignore
	options.title!.text = unref(title)
	// @ts-ignore
	options.legend!.formatter = unref(legendFormatter)
	// 如果是手动设置模式的话
	if (unref(manual) && isObject(unref(otherOptions))) {
		options = mergeOptions(options, unref(otherOptions))
	}
	if(unref(autotip)){
		if(stopAutoShowFun){
			stopAutoShowFun()
		}
    openAutoTooltip()
  }
	setOptions(options)
})

function openAutoTooltip(){
  const instance = getInstance();
  const { stopAutoShow } = useEchartsAutoTooltip(instance, options);
	stopAutoShowFun = stopAutoShow
}

</script>

<template>

	<div class="chart" ref="chartRef" :style="{ width: '100%', height: '100%' }"></div>

</template>
