import { Component, OnInit, ViewChild } from '@angular/core';
import { STColumn, STComponent } from '@delon/abc/st';
import { SFComponent } from '@delon/form';
import { DatePipe, _HttpClient } from '@delon/theme';
import { differenceInCalendarDays } from 'date-fns';
import { DataService } from '../../../services/data.service';
import { DatatableCustomindexCurveComponent } from './curve/curve.component';

@Component({
  selector: 'app-datatable-customindex',
  templateUrl: './customindex.component.html',
  styleUrls: ['./customindex.component.less'],
  providers: [DatePipe]
})
export class DatatableCustomindexComponent implements OnInit {
  @ViewChild('st') private readonly st!: STComponent;
  @ViewChild('sf', { static: false }) sf!: SFComponent;
  @ViewChild('curve') private readonly curve!: DatatableCustomindexCurveComponent;
  type = 1;
  mode = 'year';
  date: any = null;
  defineDate = [];
  timeStart: any = '2022-01-01';
  timeEnd: any = '2022-12-31';
  dateFormat = 'yyyy';
  today = new Date();
  dateNext: any = null;
  modeNext = 'year';
  timeNext: any = ['2022-01-01 00:00:00'];
  chartData: any = [];
  flag = false;

  columns: STColumn[] = [
    { title: '用户类型', render: 'type', className: 'text-center' },
    { title: '用户总数', index: 'total', className: 'text-center' },
    { title: '已认证数量', index: 'auditPassTotal', className: 'text-center' },
    { title: '活跃用户数', index: 'activeTotal', className: 'text-center' },
    { title: '未激活用户数', index: 'notActivationTotal', className: 'text-center' },
    { title: '沉默用户数', index: 'silentTotal', className: 'text-center' },
    { title: '流失用户数', index: 'drainTotal', className: 'text-center' },
    { title: '流失率', index: 'drainRate', className: 'text-center',format: (item: any) => {return ((item?.drainRate)*100).toFixed(2) + '%'  }}
  ];
  hzData: any;
  hhrData: any = {
    total: 0
  };
  sjData: any;
  clData: any;
  reportData: any = [];

  constructor(public service: DataService, private datePipe: DatePipe) {}
  ngOnInit(): void {
    this.initCurveData();
  }
  initCurveData() {
    this.cardData();
    this.listData();
    this.addData('year', '2022-01-01');
  }
  listData(type?: string,  stime?: any, etime?: any) { 
    this.reportData = [];
    this.service
      .request(this.service.$api_statistics_totalDetail, {
        dateStart: stime || this.timeStart,
        dateEnd: etime || this.timeEnd,
        type: 1 //用户角色类型 1：货主 2：合伙人 3：司机 4：车辆
      })
      .subscribe(res => {
        if (res) {
          this.reportData.push(res);
          this.st.reload();
        }
      });
    this.service
      .request(this.service.$api_statistics_totalDetail, {
        dateStart: stime || this.timeStart,
        dateEnd: etime || this.timeEnd,
        type: 2
      })
      .subscribe(res => {
        if (res) {
          this.reportData.push(res);
          this.st.reload();
        }
      });
    this.service
      .request(this.service.$api_statistics_totalDetail, {
        dateStart: stime || this.timeStart,
        dateEnd: etime || this.timeEnd,
        type: 3
      })
      .subscribe(res => {
        if (res) {
          this.reportData.push(res);
          this.st.reload();
        }
      });
    this.service
      .request(this.service.$api_statistics_totalDetail, {
        dateStart: stime || this.timeStart,
        dateEnd: etime || this.timeEnd,
        type: 4
      })
      .subscribe(res => {
        if (res) {
          this.reportData.push(res);
          this.st.reload();
        }
      });
  }
  cardData() {
    this.service.request(this.service.$api_statistics_total, { type: 1 }).subscribe(res => {
      if (res) {
        this.hzData = res;
      }
    });
    this.service.request(this.service.$api_statistics_total, { type: 2 }).subscribe(res => {
      if (res) {
        
        this.hhrData = res;
        console.log(this.hhrData);

      }
    });
    this.service.request(this.service.$api_statistics_total, { type: 3 }).subscribe(res => {
      if (res) {
        this.sjData = res;
      }
    });
    this.service.request(this.service.$api_statistics_total, { type: 4 }).subscribe(res => {
      if (res) {
        this.clData = res;
      }
    });
  }
  addData(type?: string, time?: any) {
    this.chartData = []
    this.service
      .request(this.service.$api_statistics_totalAdd, {
        date: time,
        dateType: type === 'month' ? 2 : 1, //日期类型 1：年 2：月
        type: 1
      })
      .subscribe(res => {
        if (res) {
          this.chartData.push(...res);
        console.log(this.curve);
          this.curve.reRender();
        }
      });
    this.service
      .request(this.service.$api_statistics_totalAdd, {
        date: time,
        dateType: type === 'month' ? 2 : 1, //日期类型 1：年 2：月
        type: 2
      })
      .subscribe(res => {
        if (res) {
          this.chartData.push(...res);
          this.curve.reRender();
        }
      });
    this.service
      .request(this.service.$api_statistics_totalAdd, {
        date: time,
        dateType: type === 'month' ? 2 : 1, //日期类型 1：年 2：月
        type: 3
      })
      .subscribe(res => {
        if (res) {
          this.chartData.push(...res);
          this.curve.reRender();
        }
      });
    this.service
      .request(this.service.$api_statistics_totalAdd, {
        date: time,
        dateType: type === 'month' ? 2 : 1, //日期类型 1：年 2：月
        type: 4
      })
      .subscribe(res => {
        if (res) {
          this.chartData.push(...res);
          this.curve.reRender();
        }
      });
  }
  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.timeStart = this.datePipe.transform(this.date, 'yyyy') + '-01-01';
      this.timeEnd =  this.datePipe.transform(this.date, 'yyyy') + '-12-31';

    } else if (this.mode === 'month') {
      this.timeStart = this.datePipe.transform(this.date, 'yyyy-MM') + '-01' ;
      this.timeEnd = this.datePipe.transform(this.date, 'yyyy-MM') + '-31';
    } else if (this.mode === 'date') {
      this.timeStart=this.datePipe.transform(this.date, 'yyyy-MM-dd');
      this.timeEnd = this.datePipe.transform(this.date, 'yyyy-MM-dd') ;
    } else {
      this.timeStart = this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') ;
      this.timeEnd = this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd');
    }
    this.listData(this.mode, this.timeStart, this.timeEnd);
  }
  disabledDate = (current: Date): boolean =>
    // Can not select days before today and today
    differenceInCalendarDays(current, this.today) > 0;

  changeDataNext2() {
    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';
    } else if (this.modeNext === 'month') {
      this.timeNext = this.datePipe.transform(this.dateNext, 'yyyy-MM') + '-01';
    }
    this.addData(this.modeNext, this.timeNext);
  }
}