<script setup>
// 图默认配置
const chartDefaultOpts={
    //图表配置
	chart: {
		spacingTop: 30
	},
	title: {
		enabled: false
	},
	exporting: {
		enabled: false,
	},
	//默认颜色配置
	colors:['#00f','#f00','#999','#000','#7cb5ec', '#90ed7d', '#f7a35c', '#8085e9', 
	'#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'],
	//版权信息
	credits: {enabled:false},
	//数据列通用配置
	plotOptions: {
		series: {
			turboThreshold: 0, //不限制数据点个数 
			boostThreshold:0,
			animation: {
				duration: 1000
			}
		},
		areaspline: {
			lineWidth: 1,
			stacking: 'normal',
			marker: {
					enabled: false,
			},
			// fillOpacity: 0.5,
		},
		column:{
			pointPadding: 0.05,
			stacking: 'normal',
		},
		scatter: {
			turboThreshold: 0,
			marker: {
					symbol: 'circle',
					radius: 5,
					states: {
							hover: {
									enabled: true,
							}
					}
			},
			states: {
				hover: {
					marker: {
						enabled: true
					}
				}
			}
		}
	},
	//范围选择器
	rangeSelector: {
		enabled: false,
		selected: 2,
	},
	//悬浮提示框
	tooltip: {
		split: false,
		shared: true,
		dateTimeLabelFormats: {
			// 时间格式化字符
			day: '%Y/%m/%d',
			week: "%Y/%m",
			month: '%Y/%m',
			year: '%Y/%m',
		},
		xDateFormat:'%Y/%m/%d',
		className:'chart-tooltips-box'
		// formatter:function(e){
		// 	return `<p>${this.x}</p><p>aaa</p>`
		// 	// return e
		// }
		// outside: true,
		// valueDecimals: 4,
	},
	//图例
	legend: {
		enabled: false,
		verticalAlign: 'top',
		margin:3,
		// layout: 'vertical'
	},
	//滚动条
	scrollbar: {
		enabled: false,
	},
	//导航器
	navigator: {
		enabled: false,
	},
	//范围选择器
	rangeSelector: {
		enabled: false,
	},
}

const props = defineProps({
  options: Object,
	chartInfo: Object,
    showTitle:{
        type:Boolean,
        default:true
    }
})
import {ref,onMounted,watch,toRefs } from 'vue'
import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartszhCN  from '../../utils/highcahrts-zh_CN.js'
HighchartszhCN(Highcharts)
HighchartsMore(Highcharts);
let chartIns=ref(null)// 图表实例
onMounted(() => {
	let themeOptions = setThemeOptions();

	console.log(themeOptions)

	let obj={...chartDefaultOpts,...themeOptions,...props.options}
	console.log(obj);
	
	//stock不支持线形图只支持时间图 某些用chart
	let is_linear = props.options.series 
			? props.options.series.some(_ => _.chartType === 'linear')
			: false ;
	chartIns.value = is_linear ? Highcharts.chart("chart-box",obj) : Highcharts.stockChart("chart-box",obj);
})

// 点击顶部label
const clickChartTopLabel=index=>{
    const series = chartIns.value.series[index];
    if (series.visible) {
		series.hide();
        props.options.series[index].visible=false
	} else {
		series.show();
        props.options.series[index].visible=true
	}
}

    //主题色一些外层公用配置  目前只有绘图区和legend和colors
const setThemeOptions = () => {
	
	if(!props.chartInfo.ChartThemeStyle) return {}

	let chartTheme = JSON.parse(props.chartInfo.ChartThemeStyle)		
	return {
		legend: {
			...chartDefaultOpts.legend,
			...chartTheme.legendOptions
		},
		chart: {
			...chartDefaultOpts.chart,
			...chartTheme.drawOption
		},
		colors: chartTheme.colorsOptions
	}
}

watch(
	()=>props.options,
	(nval)=>{
		console.log('重绘');

		let themeOptions = setThemeOptions();

		let obj={}
		obj={...chartDefaultOpts,...themeOptions,...props.options}
		console.log(obj);
		// update: function (options, redraw, oneToOne, animation)
		// chartIns.value.update(obj,true)
		//stock不支持线形图只支持时间图 某些用chart
		let is_linear = props.options.series 
			? props.options.series.every(_ => _.type === 'scatter') || props.options.series.some(_ => _.chartType === 'linear')
			: false ;
		chartIns.value = is_linear ? Highcharts.chart("chart-box",obj) : Highcharts.stockChart("chart-box",obj);
		
	},
	{
		deep:true
	}
)
</script>

<template>
    <div class="chart-wrap">
        <div class="chart-top-labels" v-if="props.showTitle">
            <div 
                class="item" 
                v-for="(item,index) in props.options.series" 
                :key="item.name"
                @click="clickChartTopLabel(index)"
            >

							<template v-if="!item.linkedTo">
                <span class="color" :style="{background:item.visible?item.color:'#ccc'}"></span>
                <span :style="{color:item.visible?'':'#ccc'}">{{item.name.length>20?item.name.replace(/<br>/g,''):item.name}}</span>
							</template>	
            </div>
        </div>
		<div class="chart-content">
			<img class="mark-img" src="../../../../assets/hzyb/chart/mark.png" alt="">
			<div class="chart-box" id="chart-box"></div>
		</div>
        
    </div>
</template>

<style lang="scss" scoped>
// :deep(.chart-tooltips-box){
// 	white-space: normal !important;
// 	box-sizing: border-box;
// 	text{
// 		white-space: normal !important;
// 		width: 80vw !important;
// 	}
// }
.chart-wrap{
    margin-top: 43px;
    width: 100%;
    .chart-top-labels{
        padding: 0 60px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        max-height: 200px;
        overflow-y: auto;
        &::-webkit-scrollbar{
            display: none;
        }
        .item{
            display: flex;
            align-items: center;
            font-size: 26px;
            line-height: 1;
            margin-right: 50px;
            margin-bottom: 20px;
            .color{
                display: inline-block;
                width: 43px;
                height: 6px;
                flex-shrink: 0;
            }
        }
    }
	.chart-content{
		position: relative;
		.mark-img{
			position: absolute;
			width: 58%;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			pointer-events: none;
			z-index: 2;
		}
	}
    .chart-box {
		padding-top: 10px;
        margin-top: 30px;
		// width: 100%;
        height: 736px;
        margin-left: 34px;
        margin-right: 34px;
    }
}
@media (min-width: 768px){
	.chart-wrap{
		margin-top: 30px;
		.chart-top-labels{
			padding: 0;
			max-height: 200px;
			.item{
				font-size: 16px;
				margin-right: 30px;
				margin-bottom: 10px;
				cursor: pointer;
				.color{
					width: 30px;
					height: 4px;
				}
			}
		}
		.chart-box{
			height: 500px;
		}
	}
}
</style>
