<template>
    <div class="kf-3dc-atom w-100 h-100" :style="chartStyle" ref="buttonBox" v-show="props.show" :class="'vivify '+ styleClass">
           <div class="w-100 h-100" ref="chartBox"></div>
    </div>
</template>

<script>
import {onMounted, ref, getCurrentInstance,computed,watch} from 'vue'
import styleManager from '../utils/style.vue'
import eventManager from '../utils/event'
import * as echarts from 'echarts/core';
import pageModel from "../model/page";
export default {
    name: "kfChart",
    props: {
        props: {
            type: Object,
            default: () => {
            }
        },
        eventList:{
            type: Array,
            default: () =>[]
        },
        eventScript: {
            type: String
        }
    },
    widgetConfig:{
        parent: "base",
        rank: 15,
        label: {
            zh: "图表"
        },
        category: "基础",
        component: "kfChart",
        display: false,
        version: 1,
        icon: "icon-anniu",
        defaultSize: {
            x: 400,
            y: 400
        },
        minSize:{
            width: 200,
            height: 200,
        },
        imgName:'kfChart',
    },
    setup(props) {
        let chartBox = ref(null);
        let chartStyle = ref({})
        const {proxy} = getCurrentInstance();
        let defaultHandler = ref({})
        let styleClass=ref('')
        let chart;
        const renderChart=function (){
            let option={}
            chart.showLoading();
            if(props.props.type!='pie'){
                let _series=[{
                    data: props.props.yValue,
                    type: props.props.type,
                    itemStyle: {
                        color: props.props.highColor?props.props.highColor:'#0000ff'  // 设置柱子的颜色为天蓝色
                    }
                }];
                if(props.props.type=='line'){
                    _series[0].lineStyle={
                        color:props.props.highColor?props.props.highColor:'#0000ff'
                    }
                }
                option= {
                    xAxis: {
                        type: 'category',
                        data: props.props.xValue,
                        splitLine:{
                            show:false
                        },
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series:_series

                }


            }else{
                let list=[];
                for(let i=0;i<props.props.xValue.length;i++){
                    list.push({value:props.props.yValue[i],name:props.props.xValue[i]})
                }
               option= {
                    tooltip: {
                        trigger: 'item'
                    },
                   xAxis: {
                        axisLine:{
                        show:false
                        },
                       data: []
                       },
                    yAxis:{},
                    series: [
                        {
                            type: props.props.type,
                            radius: '50%',
                            data: list,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
            }
            if(props.props.legend){
                option.legend={
                    orient:props.props.orient,
                    left:props.props.orientX,
                    top:props.props.orientY
                }
            }
            chart.hideLoading();
            chart.setOption(option)
            chart.resize()
        }
        onMounted(() => {
            refreshEvents();
            chartStyle.value = styleManager.updateStyle(proxy);
            chart=echarts.init(chartBox.value);
            renderChart()
            styleClass.value=styleManager.updateClass(proxy)
        })
        const refreshEvents = function() {
            eventManager.registerEvent(proxy);
        }
        pageModel.watchProps(props, watch, proxy, (changes) => {
            refreshEvents();
            if(changes && (changes['type']!==undefined ||
                changes['highColor']!==undefined ||
                changes['height']!==undefined ||
                changes['width']!==undefined ||
                changes['xValue']!==undefined ||
                changes['yValue']!==undefined)){
                renderChart()
            }
            if (styleManager.styleChanged("kfChart", changes)) {
                chartStyle.value = styleManager.updateStyle(proxy);
            }
            if(styleManager.classChanged("kfChart", changes)){
                styleClass.value=styleManager.updateClass(proxy)
            }
        })
        const doClick=function (event){
            try {
                eventHandler.value.click(event);
            } catch (e) {
                console.error(e);
            }
        }
        const eventHandler = computed(() => {
            return eventManager.loadEventHandler(defaultHandler, undefined, props.props.pageName)
        });


        return {
            chartBox,chartStyle,
            doClick,
            defaultHandler,
            eventHandler,
            styleClass
        }
    }
}
</script>

<style scoped>

</style>