<template>
    <div class="app-data-chart <#if ctrl.getPSSysCss()??><#assign singleCss = ctrl.getPSSysCss()> ${singleCss.getCssName()}</#if>">
<#if ctrl.render??><#t>
        ${ctrl.render.code}
<#else><#t>
        <div class="app-charts" :id="chartId" style="<#if ctrl.getWidth() gt 0>width: ${ctrl.getWidth()};</#if>height: <#if ctrl.getHeight() gt 0>${ctrl.getHeight()}px<#else>100%</#if>;padding: 6px 0;"></div>
</#if>
  </div>
</template>

<#assign import_block>
import echarts from 'echarts';
</#assign>

<#ibizinclude>
../@MACRO/CONTROL/CONTROL_HEADER-BASE.vue.ftl
</#ibizinclude>

    /**
     * 获取多项数据
     *
     * @returns {any[]}
     * @memberof ${srfclassname('${ctrl.codeName}')}
     */
    public getDatas(): any[] {
        return [];
    }

    /**
     * 获取单项树
     *
     * @returns {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}
     */
    public getData(): any {
        return null;
    }

    /**
     * 显示处理提示
     *
     * @type {boolean}
     * @memberof ${srfclassname('${ctrl.codeName}')}
     */
    @Prop({ default: true }) public showBusyIndicator!: boolean;

    /**
     * 部件行为--fetch
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}
     */
    @Prop() public fetchAction!: string;  

    /**
    * Vue声明周期(组件初始化完毕)
    *
    * @memberof ${srfclassname('${ctrl.codeName}')}
    */
    public created() {
         this.afterCreated();     
    }

    /**
    * 执行created后的逻辑
    *
    * @memberof ${srfclassname('${ctrl.codeName}')}
    */
    public afterCreated(){
        if (this.viewState) {
            this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => {
                if (!Object.is(tag, this.name)) {
                    return;
                }
                if (Object.is('load', action)) {
                    this.load(data);
                }
            });
        }  
    }

    /**
     * vue 生命周期
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}
     */
    public destroyed() {
        this.afterDestroy();
    }

    /**
     * 执行destroyed后的逻辑
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}
     */
    public afterDestroy() {
        if (this.viewStateEvent) {
            this.viewStateEvent.unsubscribe();
        }
        <#if destroyed_block??>
        ${destroyed_block}
        </#if>
    }

    /**
     * 图表div绑定的id
     *
     * @type {}
     * @memberof ${srfclassname('${ctrl.name}')}
     */   
    public chartId:string = this.$util.createUUID();

    /**
     * echarts图表对象
     *
     * @type {}
     * @memberof ${srfclassname('${ctrl.name}')}
     */   
    public myChart:any;

    /**
     * 初始化图表所需参数
     *
     * @type {}
     * @memberof ${srfclassname('${ctrl.name}')}
     */   
    public chartOption:any = {};

    /**
     * 图表基础配置参数
     * 
     * @returns {*} 
     * @memberof ${srfclassname('${ctrl.name}')}Service
     */
    public defaultConfig: any = {
<#--  获取模板对象:BEGIN  -->
<#assign title=ctrl.getPSDEChartTitle()>
<#list ctrl.getPSDEChartSerieses() as series>
  <#--  暂只支持第一个序列  -->
  <#if series_index == 0>
    <#assign chartSeries = series/>
  </#if>
</#list>
<#--  获取模板对象:END  -->
<#--  公共配置:BEGIN  -->
        title: { 
          show: <#if title.isShowTitle()>true<#else>false</#if>,
<#if title.getTitle()??> 
          text: '${title.getTitle()}',
</#if>
<#if title.getSubTitle()??>
          subtext: '${title.getSubTitle()}'
</#if> 
        },
        legend: {top: 20},
        toolbox: { 
          show: true,  
          feature: { 
            dataView: { 
              show: true, 
              readOnly: true, 
              title: '数据视图' 
            }, 
            saveAsImage: { 
              show: true, 
              title: '保存为图片' 
            }
          }
        },
<#--  公共配置:END  -->
<#--  饼图配置:BEGIN  -->
<#if chartSeries.getSeriesType() == 'pie'>
        tooltip: { trigger: 'item' },
<#--  饼图配置:END  -->
<#--  折线图,柱状图配置:BEGIN  -->
<#elseif chartSeries.getSeriesType() == 'line' || chartSeries.getSeriesType() == 'bar'>
  <#assign xAxes = chartSeries.getXPSDEChartAxes() />
  <#assign yAxes = chartSeries.getYPSDEChartAxes() />
        tooltip: { trigger: 'axis' },
  <#if xAxes??>
        xAxis: {
    <#if xAxes.getAxesType?? && xAxes.getAxesType()??>
          type: '${xAxes.getAxesType()}', 
    </#if>
    <#if xAxes.getAxesPos?? && xAxes.getAxesPos()??>
          position: '${xAxes.getAxesPos()}', 
    </#if>
    <#if xAxes.getCaption?? && xAxes.getCaption()??>
          name: '${xAxes.getCaption()}', 
    </#if>
    <#if xAxes.getMaxValue?? && xAxes.getMaxValue()??>
          max: '${xAxes.getMaxValue()}', 
    </#if>
    <#if xAxes.getMinValue?? && xAxes.getMinValue()??>
          min: '${xAxes.getMinValue()}', 
    </#if>
        },
  </#if>
  <#if yAxes??>
        yAxis: {
    <#if yAxes.getAxesType?? && yAxes.getAxesType()??>
          type: '<#if yAxes.getAxesType() == 'numeric'>value<#else>${yAxes.getAxesType()}</#if>', 
    </#if>
    <#if yAxes.getAxesPos?? && yAxes.getAxesPos()??>
          position: '${yAxes.getAxesPos()}', 
    </#if>
    <#if yAxes.getCaption?? && yAxes.getCaption()??>
          name: '${yAxes.getCaption()}', 
    </#if>
    <#if yAxes.getMaxValue?? && yAxes.getMaxValue()??>
          max: '${yAxes.getMaxValue()}', 
    </#if>
    <#if yAxes.getMinValue?? && yAxes.getMinValue()??>
          min: '${yAxes.getMinValue()}', 
    </#if>
        },
  </#if>
</#if>
<#--  折线图,柱状图配置:BEGIN  -->
    }

    /**
     * 深度合并对象,把secondObj的内容合并给firstObj,返回合并后的firstObj
     * @param {} firstObj 被合并对象
     * @param {} secondObj 合并对象
     * @memberof ${srfclassname('${ctrl.name}')}
     */
    public deepObjectMerge(firstObj: any, secondObj: any) {
        for (let key in secondObj) {
            firstObj[key] =
                firstObj[key] && firstObj[key].toString() === "[object Object]"
                    ? this.deepObjectMerge(firstObj[key], secondObj[key])
                    : (firstObj[key] = secondObj[key]);
        }
        return firstObj;
    }

    /**
     * 刷新
     *
     * @param {*} [opt={}]
     * @memberof ${srfclassname('${ctrl.name}')}
     */
    public refresh(opt: any = {}) {
        this.load(opt);
    }

    /**
     * 获取图表数据
     * 
     * @returns {*} 
     * @memberof ${srfclassname('${ctrl.name}')}
     */
    public load(opt?:any) {
        let _this = this;
        const arg: any = { ...opt };
        const parentdata: any = {};
        this.$emit('beforeload', parentdata);
        Object.assign(arg, parentdata);
        Object.assign(arg,{viewparams:this.viewparams});
        this.service.search(this.fetchAction,JSON.parse(JSON.stringify(this.context)),arg,this.showBusyIndicator).then((res) => {
            if (res) {
                _this.chartOption = _this.deepObjectMerge(_this.defaultConfig, res.data);
                _this.drawCharts();
            }
        }).catch((error) => {
            console.error(error);
        });
    }

    /**
     * 绘制图表
     * 
     * @returns {*} 
     * @memberof ${srfclassname('${ctrl.name}')}
     */
    public drawCharts(){
        if(!this.myChart){
          let element:any =  document.getElementById(this.chartId);
          this.myChart = echarts.init(element);
        }
        this.myChart.setOption(this.chartOption);
        this.myChart.resize();
    }


<#ibizinclude>
../@MACRO/CONTROL/CONTROL_BOTTOM-BASE.vue.ftl
</#ibizinclude>

<#ibizinclude>
../@MACRO/CONTROL/CONTROL-BASE.style.ftl
</#ibizinclude>