/*
 * @Description  :
 * @Version      : 1.0
 * @Author       : Shiming
 * @Date         : 2021-12-23 13:39:58
 * @LastEditors  : Shiming
 * @LastEditTime : 2022-01-20 20:28:33
 * @FilePath     : \\tms-obc-web\\src\\app\\routes\\order-management\\components\\vehicle-detail-change\\vehicle-detail-change.component.ts
 * Copyright (C) 2022 huzhenhong. All rights reserved.
 */
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { apiConf } from '@conf/api.conf';
import { STColumn, STComponent } from '@delon/abc/st';
import { SFComponent, SFSchema, SFSelectWidgetSchema, SFUISchema, SFUploadWidgetSchema } from '@delon/form';
import { AmapPoiPickerComponent, AmapService, EAEnvironmentService, ShipperBaseService } from '@shared';
import { NzCardComponent } from 'ng-zorro-antd/card';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalService } from 'ng-zorro-antd/modal';
import { NzUploadChangeParam, NzUploadFile } from 'ng-zorro-antd/upload';
import { Observable, Observer } from 'rxjs';
import { map } from 'rxjs/operators';
import { OrderManagementService } from '../../services/order-management.service';
function getBase64(file: File): Promise<string | ArrayBuffer | null> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
@Component({
  selector: 'app-supply-management-vehicle-detail-change',
  templateUrl: './vehicle-detail-change.component.html',
  styleUrls: ['./vehicle-detail-change.component.less']
})
export class OrderManagementVehicleDetailChangeComponent implements OnInit {
  validateForm1: FormGroup;
  id = this.route.snapshot.params.id;
  @ViewChild('distannce3', { static: false })
  i: any = { unLoadingPlaceList: [] };
  totalDistance = 0.0; //总里程
  totalTime = 0.0; //路程总时间
  startInfo: any = []; // 装货信息
  endInfo: any = []; // 卸货信息
  unloadTime: any; // 货源单设置回显
  loadTime: any; // 货源单设置回显
  sf3data: any; // 货源单设置回显
  sf4data: any; // 货源单设置回显
  dirverPhone: any; // 货源单设置回显
  dirverBankCard: any; // 货源单设置回显
  listImagUrls: any[] = []; // 货源单设置回显
  dirvingMessage = [];
  attObj: any;
  totalObj: any;
  approvalLsit: any;
  imges: any;
  previewImage1 = '';
  previewVisible1 = false;
  @ViewChild('sf3', { static: false }) sf3!: SFComponent;
  schema3: SFSchema = {};
  ui3!: SFUISchema;
  @ViewChild('st') st!: STComponent;
  @ViewChild('sf4', { static: false }) sf4!: SFComponent;
  schema4: SFSchema = {};
  isVisible = false;
  ui4!: SFUISchema;
  formData: any;
  @ViewChild('sf', { static: false }) sf!: SFComponent;
  schema: SFSchema = {};
  ui: SFUISchema = {};
  logColumns: STColumn[] = [
    { title: '款项', index: 'expenseCodeLabel' },
    { title: '小计（元）', index: 'price' },
    { title: '运输费（元）', index: 'price' },
    { title: '附加费（元）', index: 'surcharge' },
    { title: '支付时间', index: 'paymentTime' },
    {
      title: '支付状态',
      className: 'text-center',
      index: 'paymentStatus',
      type: 'badge',
      width: '120px',
      badge: {
        '1': { text: '待申请', color: 'warning' },
        '2': { text: '已支付', color: 'success' },
        '3': { text: '已拒绝', color: 'warning' },
        '4': { text: '申请中', color: 'warning' }
      }
    }
  ];
  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private msgSrv: NzMessageService,
    public service: OrderManagementService,
    private modalService: NzModalService,
    private amapService: AmapService,
    public shipperservice: ShipperBaseService,
    fb: FormBuilder,
    private envSrv: EAEnvironmentService
  ) {
    this.validateForm1 = fb.group({
      loadTime: [null, []],
      unloadTime: [null, []]
    });
  }

  ngOnInit(): void {
    console.log(this.id);
    this.initSF();
    this.initSF3();
    this.initSF4();
    this.initData();
  }
  initSF() {
    this.schema = {
      properties: {
        loadingLadingBillFilePath: {
          type: 'string',
          title: '装货凭证',
          ui: {
            widget: 'upload',
            action: apiConf.fileUpload,
            fileType: 'image/png,image/jpeg,image/jpg,image/gif',
            limit: 1,
            limitFileCount: 1,
            resReName: 'data.fullFileWatermarkPath',
            urlReName: 'data.fullFileWatermarkPath',
            descriptionI18n: '提货单',
            data: {
              appId: this.envSrv.env.appId
            },
            name: 'multipartFile',
            beforeUpload: (file: any, fileList: any) => {
              return new Observable((observer: Observer<boolean>) => {
                const isLt1M = file.size / 1024 / 1024 < 5;
                const fileType = 'image/png,image/jpeg';
                if (fileType.indexOf(file.type) === -1) {
                  this.service.msgSrv.warning('图片格式不正确！');
                  observer.complete();
                  return;
                }
                if (!isLt1M) {
                  this.service.msgSrv.warning('图片大小超过5M!');
                  observer.complete();
                  return;
                }
                observer.next(isLt1M);
                observer.complete();
              });
            },
            multiple: false,
            listType: 'picture-card'
          } as SFUploadWidgetSchema
        },
        loadingPeopleVehiclesGoodsFilePath: {
          type: 'string',
          title: '',
          ui: {
            widget: 'upload',
            action: apiConf.fileUpload,
            fileType: 'image/png,image/jpeg,image/jpg,image/gif',
            limit: 1,
            limitFileCount: 1,
            resReName: 'data.fullFileWatermarkPath',
            urlReName: 'data.fullFileWatermarkPath',
            descriptionI18n: '人车货照片',
            data: {
              appId: this.envSrv.env.appId
            },
            name: 'multipartFile',
            beforeUpload: (file: any, fileList: any) => {
              return new Observable((observer: Observer<boolean>) => {
                const isLt1M = file.size / 1024 / 1024 < 5;
                const fileType = 'image/png,image/jpeg';
                if (fileType.indexOf(file.type) === -1) {
                  this.service.msgSrv.warning('图片格式不正确！');
                  observer.complete();
                  return;
                }
                if (!isLt1M) {
                  this.service.msgSrv.warning('图片大小超过5M!');
                  observer.complete();
                  return;
                }
                observer.next(isLt1M);
                observer.complete();
              });
            },
            multiple: false,
            listType: 'picture-card'
          } as SFUploadWidgetSchema
        },
        no4: {
          type: 'string',
          title: '',
          ui: {
            widget: 'text'
          },
          default: ''
        },
        unloadingLadingBillFilePath: {
          type: 'string',
          title: '卸货凭证',
          ui: {
            widget: 'upload',
            action: apiConf.fileUpload,
            fileType: 'image/png,image/jpeg,image/jpg,image/gif',
            limit: 1,
            limitFileCount: 1,
            resReName: 'data.fullFileWatermarkPath',
            urlReName: 'data.fullFileWatermarkPath',
            descriptionI18n: '提货单',
            data: {
              appId: this.envSrv.env.appId
            },
            name: 'multipartFile',
            beforeUpload: (file: any, fileList: any) => {
              return new Observable((observer: Observer<boolean>) => {
                const isLt1M = file.size / 1024 / 1024 < 5;
                const fileType = 'image/png,image/jpeg';
                if (fileType.indexOf(file.type) === -1) {
                  this.service.msgSrv.warning('图片格式不正确！');
                  observer.complete();
                  return;
                }
                if (!isLt1M) {
                  this.service.msgSrv.warning('图片大小超过5M!');
                  observer.complete();
                  return;
                }
                observer.next(isLt1M);
                observer.complete();
              });
            },
            multiple: false,
            listType: 'picture-card'
          } as SFUploadWidgetSchema
        },
        unloadingPeopleVehiclesGoodsFilePath: {
          type: 'string',
          title: '',
          ui: {
            widget: 'upload',
            action: apiConf.fileUpload,
            fileType: 'image/png,image/jpeg,image/jpg,image/gif',
            limit: 1,
            limitFileCount: 1,
            resReName: 'data.fullFileWatermarkPath',
            urlReName: 'data.fullFileWatermarkPath',
            descriptionI18n: '人车货照片',
            data: {
              appId: this.envSrv.env.appId
            },
            name: 'multipartFile',
            beforeUpload: (file: any, fileList: any) => {
              return new Observable((observer: Observer<boolean>) => {
                const isLt1M = file.size / 1024 / 1024 < 5;
                const fileType = 'image/png,image/jpeg';
                if (fileType.indexOf(file.type) === -1) {
                  this.service.msgSrv.warning('图片格式不正确！');
                  observer.complete();
                  return;
                }
                if (!isLt1M) {
                  this.service.msgSrv.warning('图片大小超过5M!');
                  observer.complete();
                  return;
                }
                observer.next(isLt1M);
                observer.complete();
              });
            },
            multiple: false,
            listType: 'picture-card'
          } as SFUploadWidgetSchema
        },
        no5: {
          type: 'string',
          title: '',
          ui: {
            widget: 'text'
          },
          default: ''
        },
        no6: {
          type: 'string',
          title: '',
          ui: {
            widget: 'text'
          },
          default: ''
        }
      },
      required: ['loadingLadingBillFilePath', 'unloadingLadingBillFilePath']
    };
    this.ui = {
      '*': {
        spanLabelFixed: 100,
        grid: { span: 20 }
      },
      $unloadingLadingBillFilePath: { grid: { span: 12 } },
      $unloadingPeopleVehiclesGoodsFilePath: { grid: { span: 12 } },
      $loadingLadingBillFilePath: { grid: { span: 12 } },
      $loadingPeopleVehiclesGoodsFilePath: { grid: { span: 12 } },
      $no5: { grid: { span: 24 } }
    };
  }
  initData() {
    this.service.request(this.service.$api_get_getWholeBillDetail, { id: this.id }).subscribe(res => {
      console.log(res);
      if (res) {
        this.i = res;
        this.approvalLsit = res.scheduleVOList;
        this.attObj = this.i?.billExpenseDetails?.filter((data: any) => data.expenseCode === 'ATT')[0];
        this.totalObj = this.i?.billExpenseDetails?.filter((data: any) => data.expenseCode === 'TOTAL')[0];
        this.approvalLsit.map((item: any, key: any) => {
          console.log(item);
          if (item.displayStatus === 'HIDE') {
            delete this.approvalLsit[key];
          }
        });
        // 对装货凭证进行初始化
        let arr: any = [];
        res?.receiptFilePath.forEach((element: any, index: any) => {
          console.log(index);
          arr.push({
            url: element,
            status: 'done',
            uid: index
          });
        });
        this.listImagUrls = arr;
        this.sf4data = res?.goodsInfoList?.[0];
        this.sf3data = {
          goodsTypeId: res?.goodsInfoList[0]?.goodsTypeId || '',
          goodsTypeName: res?.goodsInfoList[0]?.goodsTypeName || '',
          goodsNameId: res?.goodsInfoList[0]?.goodsNameId || '',
          goodsName: res?.goodsInfoList[0]?.goodsName || ''
        };
        if (this.sf3data.goodsTypeName === '其它') {
          this.sf3data.goodsName1 = res?.goodsInfoList[0]?.goodsName || '';
        }
        this.changeGoodsType(this.sf3data.goodsTypeId, { label: this.sf3data.goodsTypeName, value: this.sf3data.goodsTypeId });
        // 对装卸货信息进行初始化
        res?.unLoadingPlaceList.forEach((element: any) => {
          if (element.type === 1 || element.type === '1') {
            const controlId = this.startInfo.length;
            this.startInfo.push({
              detailedAddress: element.detailedAddress,
              appUserName: element.appUserName,
              contractTelephone: element.contractTelephone,
              latitude: element.latitude,
              longitude: element.longitude,
              province: element.province,
              city: element.city,
              area: element.area,
              type: element.type,
              id: element.id
            });
            this.validateForm1.addControl(`loadAddress${controlId}`, new FormControl(null, Validators.required));
            this.validateForm1.addControl(`loadName${controlId}`, new FormControl(null, Validators.required));
            this.validateForm1.addControl(`loadPhone${controlId}`, new FormControl(null, Validators.required));
          } else if (element.type === 2 || element.type === '2') {
            const controlId = this.endInfo.length;
            this.endInfo.push({
              detailedAddress: element?.detailedAddress,
              appUserName: element?.appUserName,
              contractTelephone: element?.contractTelephone,
              latitude: element.latitude,
              longitude: element.longitude,
              province: element.province,
              city: element.city,
              area: element.area,
              type: element.type,
              id: element.id
            });
            this.validateForm1.addControl(`unloadAddress${controlId}`, new FormControl(null, Validators.required));
            this.validateForm1.addControl(`unloadName${controlId}`, new FormControl(null, Validators.required));
            this.validateForm1.addControl(`unloadPhone${controlId}`, new FormControl(null, Validators.required));
          }
        });
        // 对装货凭证进行初始化
        if (res.loadingLadingBillFilePath) {
          this.formData = {
            loadingLadingBillFilePath: [
              {
                uid: 'logo',
                name: 'LOGO',
                status: 'done',
                url: res.loadingLadingBillFilePath,
                response: {
                  url: res.loadingLadingBillFilePath
                }
              }
            ],
            loadingPeopleVehiclesGoodsFilePath: [
              {
                uid: 'logo',
                name: 'LOGO',
                status: 'done',
                url: res.loadingPeopleVehiclesGoodsFilePath,
                response: {
                  url: res.loadingPeopleVehiclesGoodsFilePath
                }
              }
            ],
            unloadingLadingBillFilePath: [
              {
                uid: 'logo',
                name: 'LOGO',
                status: 'done',
                url: res.unloadingLadingBillFilePath,
                response: {
                  url: res.unloadingLadingBillFilePath
                }
              }
            ],
            unloadingPeopleVehiclesGoodsFilePath: [
              {
                uid: 'logo',
                name: 'LOGO',
                status: 'done',
                url: res.unloadingPeopleVehiclesGoodsFilePath,
                response: {
                  url: res.unloadingPeopleVehiclesGoodsFilePath
                }
              }
            ]
          };
        }
        // 发车时间到车时间初始化
        this.loadTime = res.loadTime;
        this.unloadTime = res.unloadTime;
        this.dirvingMessage = res.billExpenseDetails;
      }
    });
  }

  goBack() {
    window.history.go(-1);
  }
  // 取消修改
  cancelChange() {
    window.history.go(-1);
  }
  // 保存修改
  save() {
    let imgList: any = [];
    if (this.listImagUrls.length > 0) {
      this.listImagUrls?.forEach((res: any) => {
        if (res.url) {
          imgList.push(res.url);
        }
      });
    }
    if (typeof this.unloadTime !== 'string') {
      var c = new Date(this.unloadTime);
      this.unloadTime =
        c.getFullYear() +
        '-' +
        this.addPreZero(c.getMonth() + 1) +
        '-' +
        this.addPreZero(c.getDate()) +
        ' ' +
        this.addPreZero(c.getHours()) +
        ':' +
        this.addPreZero(c.getMinutes()) +
        ':' +
        this.addPreZero(c.getSeconds());
    }
    if (typeof this.loadTime !== 'string') {
      var c = new Date(this.loadTime);
      this.loadTime =
        c.getFullYear() +
        '-' +
        this.addPreZero(c.getMonth() + 1) +
        '-' +
        this.addPreZero(c.getDate()) +
        ' ' +
        this.addPreZero(c.getHours()) +
        ':' +
        this.addPreZero(c.getMinutes()) +
        ':' +
        this.addPreZero(c.getSeconds());
    }
    console.log('dirvingMessage=>>>>>>' + this.dirvingMessage);
    console.log(this.dirvingMessage);
    console.log(this.st._data);
    const params = {
      id: this.id,
      unLoadingPlaceDTOList: [...this.startInfo, ...this.endInfo],
      receiptFilePath: imgList,
      goodsInfoDTOList: [
        {
          id: this.i?.goodsInfoList?.[0].id,
          goodsName: this.sf3.value?.goodsName,
          ...this.sf4.value
        }
      ],
      // 运费信息
      billExpenseDetailDTOList: this.st._data,
      // 收款人
      payeeId: this.dirverPhone,
      dirverBankCard: this.dirverBankCard, // 银行卡
      // 发车时间
      loadTime: this.loadTime,
      // 到车时间
      unloadTime: this.unloadTime,
      loadingLadingBillFilePath: this.sf.value?.loadingLadingBillFilePath?.data
        ? this.sf.value?.loadingLadingBillFilePath.data.fullFilePath
        : this.sf.value?.loadingLadingBillFilePath?.url,

      loadingPeopleVehiclesGoodsFilePath: this.sf.value?.loadingPeopleVehiclesGoodsFilePath?.data
        ? this.sf.value?.loadingPeopleVehiclesGoodsFilePath.data.fullFilePath
        : this.sf.value?.loadingPeopleVehiclesGoodsFilePath?.url,

      unloadingLadingBillFilePath: this.sf.value?.unloadingLadingBillFilePath?.data
        ? this.sf.value?.unloadingLadingBillFilePath.data.fullFilePath
        : this.sf.value?.unloadingLadingBillFilePath?.url,

      unloadingPeopleVehiclesGoodsFilePath: this.sf.value?.unloadingPeopleVehiclesGoodsFilePath?.data
        ? this.sf.value?.unloadingPeopleVehiclesGoodsFilePath.data.fullFilePath
        : this.sf.value?.unloadingPeopleVehiclesGoodsFilePath?.url
    };
    console.log(params);
    this.service.request(this.service.$api_set_modifyWholeOrder, params).subscribe((res: any) => {
      console.log(res);
      if (res) {
        this.service.msgSrv.success('修改成功！');
        this.router.navigate(['/order-management/vehicle']);
      } else {
        this.service.msgSrv.error(res?.msg);
      }
    });
  }
  addPreZero(num: any) {
    if (num < 10) {
      return '0' + num;
    } else {
      return num;
    }
  }
  // -------------------装卸货信息处理
  // 打开地图
  openMap(type: string, index: number) {
    const modalRef = this.modalService.create({
      nzTitle: '',
      nzContent: AmapPoiPickerComponent,
      nzWidth: 900,
      nzOnOk: item => {
        const poi = item.poi;
        const locList = poi.location.toString().split(',');
        switch (type) {
          case 'start':
            this.startInfo[index].detailedAddress = poi.district + poi.name;
            this.startInfo[index].longitude = locList[0];
            this.startInfo[index].latitude = locList[1];
            this.startInfo[index].province = poi.cityInfo.province;
            this.startInfo[index].city = poi.cityInfo.city;
            this.startInfo[index].area = poi.cityInfo.district;
            this.startInfo[index].address = poi.name;
            break;
          case 'end':
            this.endInfo[index].detailedAddress = poi.district + poi.name;
            this.endInfo[index].longitude = locList[0];
            this.endInfo[index].latitude = locList[1];
            this.endInfo[index].province = poi.cityInfo.province;
            this.endInfo[index].city = poi.cityInfo.city;
            this.endInfo[index].area = poi.cityInfo.district;
            this.endInfo[index].address = poi.name;
            break;
          default:
            break;
        }

        if (this.startInfo[0]?.area && this.endInfo[0]?.area) {
          this.amapService.drivingCompute([...this.startInfo], [...this.endInfo]).subscribe((res: any) => {
            this.totalDistance = res.distance;
            this.totalTime = res.time;
          });
        }
      }
    });
  }

  initSF3() {
    this.schema3 = {
      properties: {
        goodsTypeId: {
          type: 'string',
          title: '货物名称',
          ui: {
            widget: 'select',
            placeholder: '请选择',
            errors: { required: '请选择货物类型' },
            asyncData: () =>
              this.shipperservice.loadConfigByKey('goods.name.config.type').pipe(
                map((data: any) => {
                  return data[0].children?.map((m: any) => {
                    return { label: m.name, value: m.id };
                  });
                })
              ),
            change: (value: any, data: any) => {
              this.changeGoodsType(value, data);
              this.sf3.setValue('/goodsTypeName', data.label);
            }
          } as SFSelectWidgetSchema
        },
        goodsTypeName: {
          type: 'string',
          title: '',
          ui: {
            hidden: true
          }
        },
        goodsNameId: {
          type: 'string',
          title: '',
          ui: {
            widget: 'select',
            placeholder: '请选择',
            errors: { required: '请填写货物名称' },
            change: (_value: any, data: any) => {
              this.sf3.setValue('/goodsName', data.label);
            },
            visibleIf: {
              goodsTypeName: (value: any) => value && value !== '其它'
            }
          }
        },
        goodsName: {
          type: 'string',
          title: '',
          ui: {
            hidden: true,
            visibleIf: {
              goodsTypeName: (value: any) => value && value !== '其它'
            }
          }
        },
        goodsName1: {
          type: 'string',
          title: '',
          ui: {
            errors: { required: '请填写货物名称' },
            visibleIf: {
              goodsTypeName: (value: any) => value && value === '其它'
            }
          }
        }
      },
      required: ['goodsTypeId', 'goodsName', 'goodsNameId']
    };
    this.ui3 = {
      '*': {
        spanLabelFixed: 110,
        grid: { span: 12 }
      },
      $goodsName: {
        grid: { span: 12 }
      },
      $qita: {
        grid: { span: 12 }
      }
    };
  }
  changeGoodsType(value: string, data: any) {
    if (data.label === '其它') return;
    const params = {
      pageIndex: 1,
      pageSize: 100,
      configId: value
    };
    this.service
      .request(this.service.$api_get_config_item_page, params)
      .pipe(
        map(data => {
          return data.records?.map((m: any) => {
            return { label: m.name, value: m.id };
          });
        })
      )
      .subscribe(res => {
        if (res) {
          this.sf3.getProperty('/goodsNameId')!.schema.enum = res;
          this.sf3.getProperty('/goodsNameId')!.widget?.reset(res);
          if (this.sf3data.goodsNameId) {
            this.sf3.setValue('/goodsNameId', this.sf3data.goodsNameId);
          }
        }
      });
  }
  initSF4() {
    this.schema4 = {
      properties: {
        weight: {
          type: 'string',
          title: '货物数量',
          ui: {
            widget: 'custom',
            placeholder: '请输入',
            errors: { required: '必填项' }
          }
        },
        volume: {
          type: 'string',
          title: '',
          ui: {
            widget: 'custom',
            placeholder: '请输入'
          }
        },
        number: {
          type: 'string',
          title: '',
          ui: {
            widget: 'custom',
            placeholder: '请输入'
          }
        },
        carmand: {
          type: 'string',
          title: '用车需求',
          ui: {
            widget: 'custom',
            placeholder: '请输入'
          }
        },
        drivers: {
          type: 'string',
          title: '承运司机',
          ui: {
            widget: 'custom',
            placeholder: '请输入'
          }
        },
        weightModel: {
          type: 'string',
          title: '车型车长承重',
          ui: {
            widget: 'custom',
            placeholder: '请输入'
          }
        },
        loadPlanTime: {
          type: 'string',
          title: '发车时间',
          ui: {
            widget: 'custom',
            placeholder: '请输入'
          }
        },
        unloadPlanTime: {
          type: 'string',
          title: '到车时间',
          ui: {
            widget: 'custom',
            placeholder: '请输入'
          }
        }
      },
      required: ['weight', 'loadPlanTime', 'unloadPlanTime']
    };
    this.ui4 = {
      '*': {
        spanLabelFixed: 90,
        grid: { span: 24 }
      },
      $weight: {
        grid: { span: 8 }
      },
      $volume: {
        grid: { span: 8 }
      },
      $number: {
        grid: { span: 8 }
      },
      $carmand: {
        grid: { span: 24 }
      },
      $weightModel: {
        grid: { span: 12 }
      },
      $drivers: {
        grid: { span: 12 }
      },
      $loadPlanTime: {
        grid: { span: 12 }
      },
      $unloadPlanTime: {
        grid: { span: 12 }
      }
    };
  }
  // 处理上传图片
  handlePreview1 = async (file: NzUploadFile) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj!);
    }
    this.previewImage1 = file.url || file.preview;
    this.previewVisible1 = true;
  };

  handleChange1(info: NzUploadChangeParam): void {
    switch (info.file.status) {
      case 'uploading':
        break;
      case 'done':
        let fileList = [...info.fileList];
        // 2. Read from response and show file link
        console.log(fileList);
        fileList = fileList.map((file: any) => {
          if (file.response) {
            file.url = file.response.data.fullFilePath;
          }
          return file;
        });
        break;
      case 'error':
        this.service.msgSrv.error('网络错误');
        break;
    }
  }
  beforeUpload = (file: NzUploadFile, _fileList: NzUploadFile[]) => {
    return new Observable((observer: Observer<boolean>) => {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/bmp';
      if (!isJpgOrPng) {
        this.service.msgSrv.warning('只能上传图片!');
        observer.complete();
        return;
      }
      // tslint:disable-next-line: no-non-null-assertion
      const isLt2M = file.size! / 1024 / 1024 < 3;
      if (!isLt2M) {
        this.service.msgSrv.warning('图片大小超过3兆!');
        observer.complete();
        return;
      }
      observer.next(isJpgOrPng && isLt2M);
      observer.complete();
    });
  };
  agreement(value: any) {
    if (value === '1') {
      this.imges = this.i?.supplementAgreement;
    } else if (value === '2') {
      this.imges = this.i?.supplementAgreement;
    }
    this.isVisible = true;
  }
  handleCancel() {
    this.isVisible = false;
  }
  handleOK() {
    this.isVisible = false;
  }
  goDistance(elf: NzCardComponent) {
    if (elf) {
      elf['elementRef'].nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
      // elf['elementRef'].nativeElement.className = 'target-fix'
    }
    console.log(elf);
  }
}