import { Component, OnInit, ViewChild } from '@angular/core';
import { STColumn, STComponent } from '@delon/abc/st';
import { SFSchema } from '@delon/form';
import { DatePipe, ModalHelper, _HttpClient } from '@delon/theme';
import { DataService } from '../../services/data.service';
import { differenceInCalendarDays } from 'date-fns';
import { OperationCurveComponent } from '../operationtable/curve/curve.component';
import { OperationPillarComponent } from '../operationtable/pillar/pillar.component';
import { FinanceTableCurveComponent } from './curve/curve.component';
import { FinancetablePillarComponent } from './pillar/pillar.component';

@Component({
  selector: 'app-datatable-financetable',
  templateUrl: './financetable.component.html',
  styleUrls: ['./financetable.component.less'],
  providers: [DatePipe]
})
export class DatatableFinancetableComponent implements OnInit {
  @ViewChild('curve') private readonly curve!: FinanceTableCurveComponent;
  @ViewChild('pillar') private readonly pillar!: FinancetablePillarComponent;
  @ViewChild('st') private readonly st!: STComponent;
  type = 1;
  mode = 'year';
  date: any = null;
  defineDate = [];
  time: any = ['2022-01-01 00:00:00']
  dateFormat = 'yyyy';
  dateNext: any = null;
  modeNext = 'year';
  timeNext: any = ['2022-01-01 00:00:00']
  today = new Date();
  enterpriseInfoId = ''
  interManlist: any = []
  chartData: any = {}
  flag = false;
  columns: STColumn[] = [
    { title: '运营主体', index: 'networkTransporterName', className: 'text-center' ,width: 200},
    { title: '客户预存款', index: 'czcgje',render: 'czcgje', className: 'text-center',width: 200 },
    { title: '应收金额', index: 'yingsje',render: 'yingsje', className: 'text-center' ,width: 200},
    { title: '已收金额', index: 'yisje',render: 'yisje', className: 'text-center',width: 200 },
    { title: '应付运费', index: 'yingfyf', render: 'yingfyf',className: 'text-center' ,width: 200},
    { title: '已付运费', index: 'yifyf',render: 'yifyf', className: 'text-center' ,width: 200},
    { title: '已开票金额', index: 'ykpje',render: 'ykpje', className: 'text-center' ,width: 200},
    { title: '待开票金额', index: 'dkpje',render: 'dkpje', className: 'text-center' ,width: 200},
    { title: '应收附加费', index: 'yingsfjf',render: 'yingsfjf', className: 'text-center' ,width: 200},
    { title: '已收附加费', index: 'yisfjf',render: 'yisfjf', className: 'text-center' ,width: 200},
    { title: '平均附加费率', index: 'fjfl', render: 'fjfl',className: 'text-center',width: 200 }
  ];
  /**
   * 查询参数
   */
  get reqParams() {
    if (this.mode === 'year') {
      this.type = 1
    } else if (this.mode === 'month') {
      this.type = 2
    } else if (this.mode === 'date') {
      this.type = 3
    } else {
      this.type = 4
    }

    let params: any = {
      time: this.time,
      type: this.type
    };

    delete params._$expand;
    return { ...params };
  }

  constructor(public service: DataService, private datePipe: DatePipe) { }
  ngOnInit(): void {
    this.initData();
    this.initPillarData();
  }

  initPillarData(){
    let type = 1
    if (this.modeNext === 'year') {
      this.type = 1
    } else if (this.modeNext === 'month') {
      this.type = 2
    } 
    const params: any = {
      time: this.timeNext,
      type,
      enterpriseInfoId: this.enterpriseInfoId
     };
    this.flag = true
    this.service.request(this.service.$api_financialReportHistogram, params).subscribe(res => {
      if (res) {
        this.chartData = res
        if(this.flag) {
          this.pillar.reRender()
          this.curve.reRender()
        }
      }
    })
  }
  initData() {
    this.service.getNetworkFreightForwarder().subscribe(res => {
      this.interManlist = res
      this.enterpriseInfoId = res[0].value
    })
  }

  changeData() {
    if (this.mode === 'year') {
      this.dateFormat = 'yyyy'
    } else if (this.mode === 'month') {
      this.dateFormat = 'yyyy-MM'
    } else {
      this.dateFormat = 'yyyy-MM-dd'
    }
  }
  onChange(result: any) {
    if (this.mode === 'year') {
      this.time = [this.datePipe.transform(this.date, 'yyyy') + '-01-01 00:00:00']
    } else if (this.mode === 'month') {
      this.time = [this.datePipe.transform(this.date, 'yyyy-MM') + '-01 00:00:00']
    } else if (this.mode === 'date') {
      this.time = [this.datePipe.transform(this.date, 'yyyy-MM-dd') + ' 00:00:00']
    } else {
      this.time = [this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') + ' 00:00:00', this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd') + ' 00:00:00']
    }
    this.st.reload({ ...this.reqParams });
  }
  disabledDate = (current: Date): boolean =>
    // Can not select days before today and today
    differenceInCalendarDays(current, this.today) > 0;
  exportFun() {

  }
  changeCurve(){

  }
  changePie(){

  }
  changeDataNext() {
    if(this.modeNext === 'year') {
      this.dateFormat = 'yyyy'
    } else if(this.modeNext === 'month') {
      this.dateFormat = 'yyyy-MM'
    }
  }
  onChangeNext(result: any) {
    if(result === null) {
      return
    }
    if(this.modeNext === 'year') {
      this.timeNext = [this.datePipe.transform(this.dateNext, 'yyyy') + '-01-01 00:00:00']
    } else if(this.modeNext === 'month') {
      this.timeNext = [this.datePipe.transform(this.dateNext, 'yyyy-MM') + '-01 00:00:00']
    }
    this.initPillarData();
  }

}
