bbq/src/app/shared/components/rebate-table/rebate-table.component.ts

import { debounceTime } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import { BaseService } from '@shared';
import { SFComponent, SFSchema, SFUISchema } from '@delon/form';

@Component({
  selector: 'app-rebate-table',
  templateUrl: './rebate-table.component.html',
  styleUrls: ['./rebate-table.component.less']
})
export class RebateTableComponent implements OnInit {
  data: any[] = [];
  headers: any[] = [];
  formatterDollar = (value: number): string => `${value}`;
  changeSub = new Subject<string>();
  constructor(public service: BaseService, private cdr: ChangeDetectorRef) {}

  ngOnInit(): void {
    this.loadData();
    this.changeEndKmAction();
  }

  loadData() {
    this.service.request('/api/mdc/cuc/insuranceConfig/list').subscribe(res => {
      if (res) {
        console.log(res);
        this.data = res;
        this.cdr.detectChanges();
      }
    });
    this.service.request('/api/mdc/pbc/sysConfigItem/findItemValueByItemKeys', [
      "rebate.config.minrebatePrice"
     ]).subscribe(res => {
      if (res) {
        console.log(res);
      }
    });
  }

  /**
   * 修改结束车长
   * @param event 车长
   * @param i 下标
   */
  changeEndLength(event: any, i: number) {
    if (event <= this.headers[i].startLength) {
      this.headers[i].endLength = this.headers[i].startLength + 1;
      this.changeNextStartLength(event, i + 1);
      return;
    }
    this.headers[i].endLength = event;
    this.changeNextStartLength(event, i + 1);
  }

  /**
   * 修改结束公里数
   * @param event 车长
   * @param i 下标
   */
  changeEndKm(event: any, i: number) {
    if (event) {
      console.log(event);

      this.changeSub.next(`${event},${i}`);
    }
  }
  changeEndKmAction() {
    this.changeSub.pipe(debounceTime(500)).subscribe((res: string) => {
      if (res) {
        const paras = res.split(',');
        const num = Number(paras[0]);
        const i = Number(paras[1]);

        if (num <= this.data[i].startKm) {
          this.data[i].endKm = null;
          setTimeout(() => {
            this.data[i].endKm = this.data[i].startKm + 1 ;
          }, 0);
          this.changeNextStartKm(this.data[i].startKm + 1, i + 1);
          return;
        }
        this.data[i].endKm = num;
        this.changeNextStartKm(num, i + 1);
      }
    });
  }

  add() {
    console.log(this.data);

    const tem = this.data[this.data?.length - 1];
    if (tem && tem.endKm) {
      this.data.push({
        endKm: '',
        startKm: tem.endKm
      });
      this.data = [...this.data];
    } else {
      this.service.msgSrv.warning('请填写完整公里数');
    }
  }

  deleteRow(index: number) {
    console.log(index);
    var newArr = this.data.concat();
    newArr.splice(this.data.length-1,1)
    // this.data = this.data.pop()
    console.log(newArr);
    this.data = [...newArr];
  }

  save() {
    console.log(this.data)
    let params= {
      rebateConfigDTOS: this.data
    }
    console.log(params);
    this.service.request('/api/mdc/cuc/rebateConfig/saveBatch', params).subscribe(res => {
      if (res) {
        console.log(res);
        this.service.msgSrv.success('修改成功');
        this.loadData();
      }
    });
  }

  /**
   * 遍历同步后置位车长
   * @param event  车长
   * @param i 下标
   */
  private changeNextStartLength(event: number, i: number) {
    if (this.headers[i]) {
      this.headers[i].startLength = event;
      if (this.headers[i].endLength <= event) {
        this.headers[i].endLength = this.headers[i].startLength + 0.5;
        this.changeNextStartLength(event + 0.5, i + 1);
      }
    }
  }

  /**
   * 遍历同步后置位公里数
   * @param event  车长
   * @param i 下标
   */
  private changeNextStartKm(event: number, i: number) {
    if (this.data[i]) {
      this.data[i].startKm = event;
      if (this.data[i].endKm <= event) {
        this.data[i].endKm = this.data[i].startKm + 1;
        this.changeNextStartKm(event + 1, i + 1);
      }
    }
  }
}