<template>
  <div class="box">
    <div :id="id"></div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import { Chart } from "@antv/g2";
// declare const G2: any

@Component
export default class ColumnarChart extends Vue {
  name='columnarChart';
  @Prop()
  propConfig:any

  id = '';
  chart:any = null;
  created(){
    this.id = this.randomString();
  }
  mounted(){
    this.setConfig(this.propConfig)
  }
  randomString(){
    const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    let result = '';
    for (let i = 10; i > 0; --i) 
      result += str[Math.floor(Math.random() * str.length)];
    return result;
  }

  setConfig(config:any){
    if(this.chart){
      this.chart.destroy();
      this.chart = null;
    }
    const w = (document.getElementById(this.id) as any).offsetWidth;
    const h = (document.getElementById(this.id) as any).offsetHeight;
    // Step 1: 创建 Chart 对象
    this.chart = new Chart({
      container: this.id, // 指定图表容器 ID
      autoFit: true,
      padding:config.padding?config.padding:null,
      width : w, // 指定图表宽度
      height : h, // 指定图表高度
      
    });
    if(config.tooltip == false){
      this.chart.tooltip(false);
    }else if(config.tooltip){
      this.chart.tooltip(config.tooltip);
    }
    if(config.transpose){
      this.chart.coordinate().transpose()
    }
    if(config.legend){
      this.chart.legend(config.legend)
    }else{
      this.chart.legend(false)
    }
    // Step 2: 载入数据源
    this.chart.data(config.data)

    if(config.axis){
      for(const item of config.axis){
        this.chart.axis(item.field,item.config)
      }
      
    }
    if(config.scale){
      this.chart.scale(config.scale)
    }
    if(config.interaction){
      this.chart.interaction(config.interaction)
    }
    // chart.source(config.data);
    let initChart=this.chart.interval();
    if(config.position){
      initChart.position(config.position)
    }
    if(config.color){
      initChart.color(config.color.field,config.color.list)
    }
    if(config.sales){
      this.chart.sales(config.sales.field, config.sales.config);
    }
    if(config.label){
      initChart.label(config.label.field,config.label.config)
    }
    if(config.adjust){
      initChart.adjust(config.adjust)
    }
    
    
    // Step 4: 渲染图表
    this.chart.render();
    
  }

  setData(data:Array<any>){
    if(this.chart){
      this.chart.changeData(data)
    }
  }

}

</script>

<style lang="scss" scoped>
.box{
  height: 100%;
  width: 100%;
  >div{
    height: 100%;
    width: 100%;
  }
}
</style>