<template>
    <span :spinning="spinning" v-show="show">
        <div :style="style" class="chartBox" :id="chartDivId">
            <div class="myChart" :class="chartClass"></div>
        </div>
        <!-- spinning:{{spinning}} hasData:{{hasData}} errorShow:{{errorShow}} -->
        <div v-show="errorShow">
            <!--<a-alert message="Error" description="无图表数据." type="error" showIcon />-->
            <span message="Error" description="无图表数据." type="error" showIcon ></span>
        </div>
    </span>
</template>

<script>
/*************************************************
 echarts图表指令
 功能介绍 ：
 bar，line，area，spline，areaspline 生成柱状图和折线图
 数据格式
 config = {
           title : "图形标题",
           yAxis : "Y轴单位",
           data : [{field : '一月',name : '男' ,value : 200 },{field : '二月',name : '男' ,value : 200},
                   {field : '一月',name : '女' ,value : 2020 },{field : '二月',name : '女' ,value : 2020}] ,
           type :"bar"   //图表类型(bar,line,area,spline,areaspline)
      }

 pie 生成饼状图
 数据格式
 config = {
              type : 'pie',
              title: "饼状图标题",
          data : [{name: '苹果', value: 30},{name: '橘子', value: 20}] }

 height chart的高度，默认为300
 例子见 ： static/angular_expand/example/echart.jsp
 ************************************************/

//import echarts from"echarts";
//import "echarts/dist/extension/bmap.min.js"
export default {
    name: "veEchart",
    data() {
        return {
            hasData: false,
            chartClass: '',
            chartDivId:"",
        }
    },
    props: {
        initChart: null,
        config: null,
        resize: null,
        spinning: {
            type:Boolean,
            default: false
        },
        chartStyle: {
            type: Object,
            default: ()=>{}
        },
        show: {
            type:Boolean,
            default: true
        }
    },
    computed: {
        style() {
            return { ...{ width: '100%', height: '100%' }, ...this.chartStyle };
        },
        errorShow() {
            if (this.spinning) {
                return !this.spinning;
            } else {
                return !this.hasData;
            }
        }
    },
    watch: {
        config: {
            immediate: true, // 很重要！！！
            handler(newV, oldV) {
                console.log('new', newV)
                if (newV == null) return;
                let vm = this;
                setTimeout(() => { vm.renderChart(); }, 0)
            },
            deep: true
        },
        // chartStyle:{
        //   immediate: true, // 很重要！！！
        //   handler(newV, oldV) {
        //     debugger;
        //     let vm=this;
        //     setTimeout(()=>{vm.myChartResize();},100)
        //   }
        // },
        spinning: {
            immediate: true, // 很重要！！！
            handler(newV, oldV) {
                if (newV) {
                    this.hasData = false;
                }
            }
        },
        show: {
            immediate: true, // 很重要！！！
            handler(newV, oldV) {
                if (newV && this.myChart) {
                    let vm = this;
                    setTimeout(() => { vm.myChartResize(); }, 1);
                }
            }
        },
    },
    created() {
        let vm = this;
        vm.chartClass = 'chartClass_' + DateUtil.getUUID();
        vm.chartDivId = "chartDivId" + DateUtil.getUUID();
    },
    mounted() {
        let vm = this;
        vm.eleP = vm.$parent.$el;
        vm.myChartDiv = vm.$el.getElementsByClassName(vm.chartClass)[0];
        // vm.initJq()
        vm.init();
        ResUtil.loadJs(`${UrlUtil.getResOrigin()}/jquery/jquery_divResize.js`,()=>{
            vm.chartDivResizeCb=()=>{if($(`#${vm.chartDivId}`).length)vm.myChartResize();};
            vm.$nextTick(function () {
                $(`#${vm.chartDivId}`).resize(vm.chartDivResizeCb);
            });
            // console.log(vm._uid,vm.chartDivId,'load jquery_divResize.js success')
        })
    },
    beforeDestroy() {
        let vm = this;
        $(`#${vm.chartDivId}`).unbind("resize",vm.chartDivResizeCb);
        vm.myChart && vm.myChart.dispose();
    },
    methods: {
        initWH() {
            let vm = this;
            vm.myChartDiv.setAttribute("style", "width:" + vm.eleP.clientWidth + "px;height:" + vm.eleP.clientHeight + "px;");
        },
        myChartResize() {
            let vm = this;
            this.initWH();
            vm.myChart&&vm.myChart.resize();
        },
        loadJs(){
            return new Promise(resolve => {
                ResUtil.loadJs(UrlUtil.getResOrigin()+"/echarts/echarts3/echarts.min.js",function () {
                    resolve();
                })
            })
        },
        /**
         *获取图表实例
         */
        getMyChart(cb){
            let vm=this;
            this.loadJs().then(function () {
                vm.myChart = vm.myChart||echarts.init(vm.myChartDiv);
                cb(vm.myChart)
            });
        },
        /**
         * 初始化图表元素
         */
        init() {
            let vm = this;
            // 基于准备好的dom，初始化echarts实例
            vm.initWH();
            vm.getMyChart(function(myChart){
                myChart.on('click', function (params) {
                    vm.$emit('echartClick', params)
                });
                if (vm.initChart) vm.initChart(myChart);
            });
        },
        /**
         * 渲染图表
         */
        renderChart() {
            let vm = this;
            var options = {};
            if (this.config.type) {
                switch (this.config.type) {
                    case 'bar':
                    case 'line':
                        options = EchartService.renderLineChart(this.config);
                        break;
                    case 'line1':
                        options = EchartService.renderLine1Chart(this.config);
                        break;
                    case 'area':
                    case 'spline':
                    case 'areaspline':
                        options = EchartService.renderCommonChart(this.config);
                        break;
                    case 'pie':
                        options = EchartService.renderPieChart(this.config);
                        break;
                    case 'col':
                        options = EchartService.renderColChart(this.config);
                        break;
                    case 'colLine':
                        options = EchartService.renderColLineChart(this.config);
                        break;
                    case 'funnel':
                        options = EchartService.renderFunnelChart(this.config);
                        break;
                    default:
                        options = this.config;
                        break;
                }
            } else {
                options = this.config;
            }
            console.log('options', options)
            this.hasData = options.hasData;
            vm.getMyChart(function(myChart){
                myChart.setOption(options);
            })

        }
    }
}
</script>

<style scoped>
</style>
