import { ViewChild } from '@angular/core';
/*
 * @Author: your name
 * @Date: 2021-12-03 15:31:52
 * @LastEditTime: 2021-12-23 16:34:02
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \tms-obc-web\src\app\routes\order-management\components\vehicle-detail\vehicle-detail.component.ts
 */
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { STColumn, STComponent } from '@delon/abc/st';
import { SFComponent, SFSchema, SFSelectWidgetSchema, SFUISchema } from '@delon/form';
import { _HttpClient } from '@delon/theme';
import { AmapPoiPickerComponent, AmapService, ShipperBaseService } from '@shared';
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 { 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:[]};
  logColumns: STColumn[] =[]
  totalDistance = 0.0; //总里程
  totalTime = 0.0; //路程总时间
  startInfo: any = [];  // 装货信息
  endInfo: any = [];   // 卸货信息
  unloadingTime: any; // 货源单设置回显
  loadingTime: any; // 货源单设置回显
  sf3data: any; // 货源单设置回显
  sf4data: any; // 货源单设置回显
  dirverPhone: any; // 货源单设置回显
  dirverBankCard: any; // 货源单设置回显
  listImagUrls: any[] = []; // 货源单设置回显
  listImagUrls2: any[] = []; // 货源单设置回显
  imges: any;
  previewImage1 = '';
  previewVisible1 = false;
  previewImage2 = '';
  previewVisible2 = 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;
  constructor(
    private route: ActivatedRoute,
    private msgSrv: NzMessageService,
    public service: OrderManagementService,
    private modalService: NzModalService,
    private amapService: AmapService,
    public service2: ShipperBaseService,
    fb: FormBuilder, 
  ) {
    this.validateForm1 = fb.group({
      loadingTime: [null, []],
      unloadingTime: [null, []],
    });
  }

  ngOnInit(): void {
    console.log(this.id)
    this.initST();
    this.initSF3();
    this.initSF4();
    this.initData()
  }

  initData() {
    this.service.request(this.service.$api_get_getWholeBillDetail, {id: this.id}).subscribe(res => {
      console.log(res)
      if (res) {
        this.i = res;
        // 对装货凭证进行初始化
        let arr : any= []
        res.filePathList.forEach((element: any, index: any) => {
          console.log(index)
         arr.push(  {
          url: element,
          status: 'done',
          uid: index
        })
        });
        this.listImagUrls = arr;
        let arr2 : any= []
        res.filePathList.forEach((element: any, index: any) => {
         arr2.push(  {
          url: element,
          status: 'done',
          uid: index
        })
        });
        this.listImagUrls2 = arr2;

        // 对装卸货信息进行初始化
        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));
          }
        });
      }
    })
  }

  hand() {
    this.modalService.create({
      nzTitle: '',
      // nzContent: OrderManagementGaodeMapComponent,
      nzWidth: 1200
    });
  }

  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)
        }
      })
    }
    console.log(imgList)
    let imgList2 : any= [];
    if(this.listImagUrls2.length > 0) {
      this.listImagUrls2.forEach((res :any) => {
        if(res.url) {
          imgList2.push(res.url)
        }
      })
    }
    console.log(imgList2)
    if(typeof(this.validateForm1.value.unloadingTime) !== 'string' ) {
      var c = new Date(this.validateForm1.value.unloadingTime);  
      this.validateForm1.value.unloadingTime = 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.validateForm1.value.loadingTime) !== 'string' ) {
      var c = new Date(this.validateForm1.value.loadingTime);  
      this.validateForm1.value.loadingTime = c.getFullYear() + '-' + this.addPreZero(c.getMonth() + 1) + '-' + this.addPreZero(c.getDate()) + ' ' + this.addPreZero(c.getHours()) + ':' + this.addPreZero(c.getMinutes()) + ':' + this.addPreZero(c.getSeconds())
    }
  }
  addPreZero(num: any){
    if(num<10){
     return '0'+num;
    } else {
     return num;
    }
   }
  // -------------------装卸货信息处理
  addStartInfo(event: any) {
    if (this.startInfo.length < 5) {
      const controlId = this.startInfo.length;
      this.startInfo.push({
        detailedAddress: '',
        appUserName: '',
        contractTelephone: '',
        latitude: '',
        longitude: '',
        province: '',
        city: '',
        area: '',
        type: 1
      });
      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));
    }
  }
  subStartInfo(event: any, index: number, id?:any) {
    console.log(event, index, id)
    if(id) {
      this.service.request(this.service.$api_delete_Wholedeletebatch,  [id]).subscribe((res) => {
        console.log(res)
      })
    }
    this.startInfo.splice(index, 1);
    this.validateForm1.removeControl(`loadAddress${index}`);
    this.validateForm1.removeControl(`loadName${index}`);
    this.validateForm1.removeControl(`loadPhone${index}`);
  }
  subEndInfo(event: any, index: number, id?:any) {
    if(id) {
      this.service.request(this.service.$api_delete_Wholedeletebatch,  [id]).subscribe((res) => {
        console.log(res)
      })
    }
    console.log(event, index, id)
    this.endInfo.splice(index, 1);
        this.validateForm1.removeControl(`unloadAddress${index}`);
    this.validateForm1.removeControl(`unloadName${index}`);
    this.validateForm1.removeControl(`unloadPhone${index}`);
  }
  addEndInfo(event: any) {
    if (this.addEndInfo.length < 5) {
      const controlId = this.endInfo.length;
      this.endInfo.push({
        detailedAddress: '',
        appUserName: '',
        contractTelephone: '',
        latitude: '',
        longitude: '',
        province: '',
        city: '',
        area: '',
        type: 2
      });
      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));
    }
  }
   // 打开地图
 openMap(type: string, index: number) {
  const modalRef = this.modalService.create({
    nzTitle: '',
    nzContent: AmapPoiPickerComponent,
    nzWidth: 900,
    nzOnOk: item => {
      const poi = item.poi;
      const locList = poi.pois;
      switch (type) {
        case 'start':
          this.startInfo[index].detailedAddress = poi.formattedAddress;
          this.startInfo[index].longitude = locList[0];
          this.startInfo[index].latitude = locList[1];
          this.startInfo[index].province = poi.addressComponent.province;
          this.startInfo[index].city = poi.addressComponent.city;
          this.startInfo[index].area = poi.addressComponent.district;
          this.startInfo[index].address = poi.formattedAddress;
          break;
        case 'end':
          this.endInfo[index].detailedAddress = poi.formattedAddress;
          this.endInfo[index].longitude = locList[0];
          this.endInfo[index].latitude = locList[1];
          this.endInfo[index].province = poi.addressComponent.province;
          this.endInfo[index].city = poi.addressComponent.city;
          this.endInfo[index].area = poi.addressComponent.district;
          this.endInfo[index].address = poi.formattedAddress;
          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: {
      enterpriseInfoId: {
        title: '网络货运人',
        type: 'string',
        ui: {
          placeholder: '请选择',
          widget: 'select',
          asyncData: () => this.service2.getNetworkFreightForwarder(),
          visibleIf: {
            _$expand: (value: boolean) => value,
          },
        }
      },
      goodsName: {
        type: 'string',
        title: '货物名称',
        ui: {
          widget: 'dict-select',
          params: { dictKey: 'GoodsName' },
          placeholder: '请选择'
        }
      },
      qita: {
        type: 'string',
        title: '',
        ui: {
          visibleIf: {
            goodsName: value => value === '3'
          }
        }
      }
    },
    required: ['goodsName', 'enterpriseInfoId']
  };
  this.ui3 = {
    '*': {
      spanLabelFixed: 110,
      grid: { span: 12 }
    },
    $enterpriseInfoId: {
      grid: { span: 16, }
    },
    $goodsName: {
      grid: { span: 12 }
    },
    $qita: {
      grid: { span: 12 }
    }
  };
}
initST() {
 this.logColumns = [
    { title: '款项', index: 'costName' },
    { title: '总费用（元）', index: 'price' },
    { title: '协议金额（元）', render: 'price' },
    { title: '附加费（元）', index: 'surcharge' },
    { title: '附加费率（%）', render: 'paymentMethodRate' },
    { 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' },
      },
    },
  ];
}
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: '请输入'
        }
      },
      loadingTime: {
        type: 'string',
        title: '发车时间',
        ui: {
          widget: 'custom',
          placeholder: '请输入'
        }
      },
      unloadingTime: {
        type: 'string',
        title: '到车时间',
        ui: {
          widget: 'custom',
          placeholder: '请输入'
        }
      },
   
    },
    required: ['weight','loadingTime','unloadingTime']
  };
  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 }
    },
    $loadingTime: {
      grid: { span: 12 }
    },
    $unloadingTime: {
      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;
};
handlePreview2 = async (file: NzUploadFile) => {
  if (!file.url && !file.preview) {
    file.preview = await getBase64(file.originFileObj!);
  }
  this.previewImage2 = file.url || file.preview;
  this.previewVisible2 = 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
}
}