import { Component, OnInit, ViewChild } from '@angular/core';
import { DatePipe } from '@angular/common';
import {
  SFComponent,
  SFCustomWidgetSchema,
  SFDateWidgetSchema,
  SFNumberWidgetSchema,
  SFRadioWidgetSchema,
  SFSchema,
  SFSelectWidgetSchema,
  SFTextareaWidgetSchema,
  SFUISchema,
  SFUploadWidgetSchema
} from '@delon/form';
import { apiConf } from '@conf/api.conf';
import { _HttpClient } from '@delon/theme';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalRef } from 'ng-zorro-antd/modal';
import { WaybillManagementServe } from 'src/app/routes/waybill-management/services/waybill-management.service';
import { Observable, Observer } from 'rxjs';
import { EAEnvironmentService } from '@shared';

@Component({
  selector: 'app-order-management-vehicle-sure-arrive',
  templateUrl: './sure-arrive.component.html',
  styleUrls: ['./sure-arrive.component.less'],
  providers: [DatePipe]
})
export class VehicleSureArriveComponent implements OnInit {
  record: any = {};
  i: any;
  formData: any;
  Status: any;
  data: any = {
    weight: 0,
    volume: 0
  };
  @ViewChild('sf', { static: false }) sf!: SFComponent;
  schema: SFSchema = {};
  ui: SFUISchema = {};
  constructor(
    private modal: NzModalRef,
    private msgSrv: NzMessageService,
    public http: _HttpClient,
    public service: WaybillManagementServe,
    private datePipe: DatePipe,
    private envSrv: EAEnvironmentService
  ) {}

  ngOnInit(): void {
    console.log(this.i);
    this.initData();
    this.i.time = this.i?.loadingTime;
    this.initSF();
  }
  initSF() {
    if (this.Status === 1) {
      this.schema = {
        properties: {
          time: {
            type: 'string',
            title: '卸货时间',
            format: 'date-time'
          },
          imgUrl3: {
            type: 'string',
            title: '装货凭证',
            ui: {
              widget: 'upload',
              action: apiConf.fileUpload,
              accept: '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,image/jpg,image/gif';
                  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
          },
          imgUrl4: {
            type: 'string',
            title: '',
            ui: {
              widget: 'upload',
              action: apiConf.fileUpload,
              accept: '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,image/jpg,image/gif';
                  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: '单张大小不超过5M，支持.jpg、.jpeg和 .png格式'
          },
          imgUrl1: {
            type: 'string',
            title: '卸货凭证',
            ui: {
              widget: 'upload',
              action: apiConf.fileUpload,
              accept: '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,image/jpg,image/gif';
                  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
          },
          imgUrl2: {
            type: 'string',
            title: '',
            ui: {
              widget: 'upload',
              action: apiConf.fileUpload,
              accept: '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,image/jpg,image/gif';
                  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
          }
        },
        required: ['time']
      };
    } else {
      this.schema = {
        properties: {
          time: {
            type: 'string',
            title: '卸货时间',
            format: 'date-time'
          },
          weight: {
            type: 'string',
            title: '卸货重量',
            ui: {
              widget: 'custom'
            }
          },
          volume: {
            type: 'string',
            title: '卸货体积',
            ui: {
              widget: 'custom'
            }
          },
          imgUrl3: {
            type: 'string',
            title: '装货凭证',
            ui: {
              widget: 'upload',
              action: apiConf.fileUpload,
              accept: '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,image/jpg,image/gif';
                  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
          },
          imgUrl4: {
            type: 'string',
            title: '',
            ui: {
              widget: 'upload',
              action: apiConf.fileUpload,
              accept: '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,image/jpg,image/gif';
                  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: '单张大小不超过5M，支持.jpg、.jpeg和 .png格式'
          },
          imgUrl1: {
            type: 'string',
            title: '卸货凭证',
            ui: {
              widget: 'upload',
              action: apiConf.fileUpload,
              accept: '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,image/jpg,image/gif';
                  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
          },
          imgUrl2: {
            type: 'string',
            title: '',
            ui: {
              widget: 'upload',
              action: apiConf.fileUpload,
              accept: '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,image/jpg,image/gif';
                  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
          }
        },
        required: ['time', 'weight', 'volume']
      };
    }
    this.ui = {
      '*': {
        spanLabelFixed: 100,
        grid: { span: 20 }
      },
      $imgUrl1: { grid: { span: 12 } },
      $imgUrl2: { grid: { span: 12 } },
      $imgUrl3: { grid: { span: 12 } },
      $imgUrl4: { grid: { span: 12 } }
    };
  }
  save(value: any): void {
    console.log(this.Status);
    console.log(value?.imgUrl3?.data?.fullFilePath);
    console.log(value?.imgUrl3?.url);
    
    if (this.Status === 1) {
      if (!value.time) {
        this.service.msgSrv.warning('卸货时间为空！');
        return;
      }
      const params = {
        id: this.i.id,
        imgUrl1: value?.imgUrl1?.data?.fullFilePath,
        imgUrl2: value?.imgUrl2?.data?.fullFilePath,
        setLading: value?.imgUrl3?.data?.fullFilePath || value?.imgUrl3?.url,
        setPeoCarGoods: value?.imgUrl4?.data?.fullFilePath || value?.imgUrl4?.url,
        time: value?.time
      };
      params.time = this.datePipe.transform(value.time, 'yyyy-MM-dd HH:mm:ss ');
      console.log(params);
      
      this.service.request(this.service.$api_get_insertWholeUnloadCarInfo, params).subscribe(res => {
        if (res) {
          this.service.msgSrv.success('确认到车成功！');
          this.modal.destroy(true);
        }
      });
    } else {
      if (!value?.time) {
        this.service.msgSrv.warning('装货时间为空！');
        return;
      }
      if (!this.data?.volume) {
        this.service.msgSrv.warning('装货重量为空！');
        return;
      }
      if (!this.data?.weight) {
        this.service.msgSrv.warning('装货体积为空！');
        return;
      }
      const params = {
        id: this.i?.id,
        imgUrl1: value?.imgUrl1?.data?.fullFilePath,
        imgUrl2: value?.imgUrl2?.data?.fullFilePath,
        setLading: value?.imgUrl3?.data?.fullFilePath || value?.imgUrl3?.url,
        setPeoCarGoods: value?.imgUrl4?.data?.fullFilePath || value?.imgUrl4?.url,
        time: value?.time,
        volume: this.data?.volume,
        weight: this.data?.weight
      };
      params.time = this.datePipe.transform(value.time, 'yyyy-MM-dd HH:mm:ss ');
      this.service.request(this.service.$api_get_insertBulkUnloadCarInfo, params).subscribe(res => {
        if (res) {
          this.service.msgSrv.success('确认到车成功！');
          this.modal.destroy(true);
        }
      });
    }
  }
  //  确认到车界面信息(两个只能看的图片)
  initData() {
    this.service.request(this.service.$api_get_getUnloadCarInfo, { id: this.i?.id }).subscribe(res => {
      console.log(res);
      if (res.imgUrl1) {
        this.formData = {
          imgUrl3: [
            {
              uid: 'logo',
              name: 'LOGO',
              status: 'done',
              url: res.imgUrl1,
              response: {
                url: res.imgUrl1
              }
            }
          ],
          imgUrl4: [
            {
              uid: 'logo',
              name: 'LOGO',
              status: 'done',
              url: res.imgUrl2,
              response: {
                url: res.imgUrl2
              }
            }
          ]
        };
      }
    });
  }
  close(): void {
    this.modal.destroy(true);
  }
}