import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
import { DatePipe, ModalHelper, _HttpClient } from '@delon/theme';
import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
import { format } from 'date-fns';
import { SFComponent, SFDateWidgetSchema, SFRadioWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
import { G2TimelineData, G2TimelineMap } from '@delon/chart/timeline';
import { Chart } from '@antv/g2';
import { DataService } from '../../../services/data.service';
import { ComplianceCurveComponent } from './curve/curve.component';

@Component({
  selector: 'app-datatable-compliance-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.less'],
  providers: [DatePipe]
})
export class DatatableComplianceIndexComponent implements OnInit {
  @ViewChild('curve') private readonly curve!: ComplianceCurveComponent;
  @ViewChild('sf', { static: false })
  
  sf!: SFComponent;
  ui!: SFUISchema;
  schema: SFSchema = {};

  mode = 'year';
  date: any = null;
  dateFormat = 'yyyy';
  time: any = '2022'
  chartData: any = {}

  cardData1:any;
  cardData2:any;
  cardData3:any;
  cardData4:any;
 
  constructor(private http: _HttpClient, private modal: ModalHelper, private ngZone: NgZone,public service: DataService, private datePipe: DatePipe) {}

  ngOnInit(): void {
    this.initSF();
    this.initdData();
  }

  initdData(){
    const params ={
      ...this.sf?.value,
      timeType:this.mode ==='month'?'M':'Y',
      time:this.time
    }
    this.service.request(this.service.$api_getBillRateQualified, params).subscribe(res => {
        if (res) {
         this.cardData1 = res;
         this.cardData1.proportion = this.cardData1.proportion*100 +'%'
        }
    });
    this.service.request(this.service.$api_getBillRateProportion, params).subscribe(res => {
        if (res) {
         this.cardData2 = res;
         this.cardData2.proportion = this.cardData2.proportion*100 +'%'
        }
    });
    this.service.request(this.service.$api_getBillRateDirectPayment, params).subscribe(res => {
        if (res) {
         this.cardData3 = res;
         this.cardData3.proportion = this.cardData3.proportion*100 +'%'
        }
    });
    this.service.request(this.service.$api_getBillTimelyPayment, params).subscribe(res => {
        if (res) {
         this.cardData4 = res;
         this.cardData4.proportion = this.cardData4.proportion*100 +'%'
        }
    });

    this.service.request(this.service.$api_listMonitorSituation, params).subscribe(res => {
      if (res) {
        this.chartData = res
        this.curve.reRender();

      }
    })
  }
  

  changeData(){
    if(this.mode === 'year') {
      this.dateFormat = 'yyyy'
    } else if(this.mode === 'month') {
      this.dateFormat = 'yyyy-MM'
    }
   
  }

  onChange(result: any) {
    if(result === null) {
      return
    }
    if(this.mode === 'year') {
      this.time = this.datePipe.transform(this.date, 'yyyy')
    } else if(this.mode === 'month') {
      this.time = this.datePipe.transform(this.date, 'yyyy-MM')
    }
    this.initdData();
  }

  initSF() {
    this.schema = {
      properties: {
        enterpriseInfoId: {
          type: 'string',
          title: '',
          ui: {
            widget: 'select',
            placeholder: '网络货运人',
            asyncData: () => this.service.getNetworkFreightForwarder({}),
            change:()=>{
              this.initdData();
            },
            allowClear: true
          }
        },
        enterpriseProjectId: {
          type: 'string',
          title: '',
          ui: {
            widget: 'select',
            placeholder: '部门'
          }
        },
        salesmanId: {
          type: 'string',
          title: '',
          ui: {
            placeholder: '业务员',
            enter: () => this.initdData(),
          }
        }
      }
    };
    this.ui = {
      '*': {
        grid: { span: 4 }
      }
    };

  }




  render(el: ElementRef<HTMLDivElement>) {
    this.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
  }

  private init(el: HTMLElement): void {
    const chart = new Chart({
      container: el,
      autoFit: true,
      height: 400
    });
    // 以三组数据为例, 需要展示 91/92/93年中a/b/c数据走势
		const data = [
      { data: '1月', label: '订单合格率', value: 5 },
      { data: '2月', label: '订单合格率', value: 10 },
      { data: '3月', label: '订单合格率', value: 25 },
      { data: '4月', label: '订单合格率', value: 35 },
      { data: '5月', label: '订单合格率', value: 15 },
      { data: '6月', label: '订单合格率', value: 5 },
      { data: '7月', label: '订单合格率', value: 95 },
      { data: '8月', label: '订单合格率', value: 45 },

      { data: '1月', label: '付款及时率', value: 10 },
      { data: '2月', label: '付款及时率', value: 15 },
      { data: '3月', label: '付款及时率', value: 30 },
      { data: '4月', label: '付款及时率', value: 8 },
      { data: '5月', label: '付款及时率', value: 9 },
      { data: '6月', label: '付款及时率', value: 5 },
      { data: '7月', label: '付款及时率', value: 80 },
      { data: '8月', label: '付款及时率', value: 55 },

      { data: '1月', label: '货源占比率', value: 90 },
      { data: '2月', label: '货源占比率', value: 30 },
      { data: '3月', label: '货源占比率', value: 45 },
      { data: '4月', label: '货源占比率', value: 35 },
      { data: '5月', label: '货源占比率', value: 95 },
      { data: '6月', label: '货源占比率', value: 35 },
      { data: '7月', label: '货源占比率', value: 65 },
      { data: '8月', label: '货源占比率', value: 63 },

      { data: '1月', label: '运费直付占比', value: 30 },
      { data: '2月', label: '运费直付占比', value: 60 },
      { data: '3月', label: '运费直付占比', value: 25 },
      { data: '4月', label: '运费直付占比', value: 35 },
      { data: '5月', label: '运费直付占比', value: 15 },
      { data: '6月', label: '运费直付占比', value: 55 },
      { data: '7月', label: '运费直付占比', value: 50 },
      { data: '8月', label: '运费直付占比', value: 30 },
    ];

    chart.data(data);
    //刻度自定义
    chart.scale({
      data: {
        range: [0, 1],
      },
      value: {
        min: 0,
        nice: true,
      },
    });
    // 图表下方图形文字自定义
    chart.legend({
      items:[
        {
          name: '订单合格率',
          value: 'node_load1',
          marker: {
            symbol: 'circle',
            style: {fill: '#6193f7'}
          },
        },
        {
          name: '付款及时率',
          value: 'node_load2',
          marker: {symbol: 'circle',style: {fill: '#58d3a2'}},
        },
        {
          name: '货源占比率',
          value: 'node_load13',
          marker: {symbol: 'circle',style: {fill: '#5b6d8f'}},
        },
        {
          name: '运费直付占比',
          value: 'node_load13',
          marker: {symbol: 'circle',style: {fill: '#f0b915'}},
        },
      ]
    });
    // 提示自定义
    chart.tooltip({
      showCrosshairs: true,
      shared: true,
    });
    
    //数据格式化
    chart.axis('value', {
      label: {
        formatter: (val) => {
          return val + ' %';
        },
      },
    });
		// 在x*y的坐标点上按z值绘制线条, 如果z值相同将使用直线连接
		chart.line().position('data*value').color('label').tooltip('label*value', (name:any, value:any) => {
      return {
        name: name,
        value: value + '%'
      };
    });;
		// 在x*y的坐标上按z值绘制圆点
		chart.point().position('data*value').size(4).color('label').shape('circle');
		chart.render();
  }
}
