import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import {
  SFComponent,
  SFNumberWidgetSchema,
  SFSchema,
  SFSelectWidgetSchema,
  SFTextareaWidgetSchema,
  SFUISchema
} from '@delon/form';
import { _HttpClient } from '@delon/theme';
import { AmapPoiPickerComponent } from '@shared';
import { NzModalService } from 'ng-zorro-antd/modal';
import { PublishGoodsChooseFamifiarComponent } from '../choose-famifiar/choose-famifiar.component';
import { SupplyManagementService } from '../../services/supply-management.service';
@Component({
  selector: 'app-publish-goods-onecar-publish',
  templateUrl: './onecar-publish.component.html',
  styleUrls: ['./onecar-publish.component.less']
})
export class  SupplyManagementOnecarPublishComponent implements OnInit {
  validateForm1: FormGroup;
  newTempchecked = false; //是否存入新模板
  id = this.route.snapshot.params.id;
  // // 单位
  unit1 = '吨';
  unit2 = '方';
  unit3 = '保价费金额';
  startInfo: any[] = [
    {
      addresss: '深圳',
      name: '张三',
      phone: '18888888888'
    }
  ];
  endInfo: any[] = [
    {
      addresss: '深圳',
      name: '张三',
      phone: '18888888888'
    }
  ];
  dataList: any;
  constructor(private http: _HttpClient, fb: FormBuilder, private router: Router, private route: ActivatedRoute, private modalService: NzModalService, public service: SupplyManagementService) {
    this.validateForm1 = fb.group({
      name1: [null, []],
      name2: [null, []],
      name3: [null, []]
    });
  }

  @ViewChild('sf1', { static: false }) sf1!: SFComponent;
  schema1: SFSchema = {};
  ui1!: SFUISchema;

  @ViewChild('sf2', { static: false }) sf2!: SFComponent;
  schema2: SFSchema = {};
  ui2!: SFUISchema;

  @ViewChild('sf3', { static: false }) sf3!: SFComponent;
  schema3: SFSchema = {};
  ui3!: SFUISchema;

  @ViewChild('sf4', { static: false }) sf4!: SFComponent;
  schema4: SFSchema = {};
  ui4!: SFUISchema;

  @ViewChild('sf5', { static: false }) sf5!: SFComponent;
  schema5: SFSchema = {};
  ui5!: SFUISchema;

  @ViewChild('sf6', { static: false }) sf6!: SFComponent;
  schema6: SFSchema = {};
  ui6!: SFUISchema;

  @ViewChild('sf7', { static: false }) sf7!: SFComponent;
  schema7: SFSchema = {};
  ui7!: SFUISchema;
  ngOnInit(): void {
    this.initSF1();
    // this.initSF2();
    this.initSF3();
    this.initSF4();
    this.initSF5();
    this.initSF6();
    this.initSF7();
    this.initdata();
  }

  initSF1() {
    this.schema1 = {
      properties: {
        shipperAppUserNmae: {
          type: 'string',
          title: '货主',
          maxLength: 30,
          ui: {
            placeholder: '请输入'
          }
        },
        enterpriseProjectName: {
          type: 'string',
          title: '项目',
          enum: [
            { label: '1', value: '1' },
            { label: '2', value: '2' }
          ],
          ui: {
            widget: 'select',
            placeholder: '请选择',
            allowClear: true
            // asyncData: () =>
            //   this.service.loadChildData2('0', '2').pipe(
            //     map((data: any) => {
            //       return data.map((m: any) => {
            //         return { label: m.name, value: m.id };
            //       });
            //     }),
            //   ),
            // change: (i) => this.updateCategory(i, '/categoryId2'),
          } as SFSelectWidgetSchema
        },
        enterpriseInfoName: {
          type: 'string',
          title: '网络货运人',
          ui: {
            widget: 'text'
          },
          default: 0
        },
        externalResourceCode: {
          type: 'string',
          title: '外部货源号',
          maxLength: 30,
          ui: {
            placeholder: '请输入'
          }
        },
        dispatchName2: {
          type: 'string',
          title: '调度员',
          enum: [
            { label: '1', value: '1' },
            { label: '2', value: '2' }
          ],
          ui: {
            widget: 'select',
            placeholder: '请选择',
            allowClear: true
            // asyncData: () =>
            //   this.service.loadChildData2('0', '2').pipe(
            //     map((data: any) => {
            //       return data.map((m: any) => {
            //         return { label: m.name, value: m.id };
            //       });
            //     }),
            //   ),
            // change: (i) => this.updateCategory(i, '/categoryId2'),
          } as SFSelectWidgetSchema
        }
      }
    };
    this.ui1 = {
      '*': {
        spanLabelFixed: 90,
        grid: { span: 8 }
      }
    };
  }

  // initSF2() {
  //   this.schema2 = {
  //     properties: {
  //       name1: {
  //         type: 'string',
  //         title: '发货模板',
  //         ui: {
  //           widget: 'custom',
  //           placeholder: '请输入'
  //         }
  //       }
  //     }
  //   };
  //   this.ui2 = {
  //     '*': {
  //       spanLabelFixed: 90,
  //       grid: { span: 12 }
  //     }
  //   };
  // }
  initSF3() {
    this.schema3 = {
      properties: {
        name1: {
          type: 'string',
          title: '货物名称',
          enum: [
            { label: '1', value: '1' },
            { label: '2', value: '2' }
          ],
          ui: {
            widget: 'select',
            placeholder: '请选择'
            // asyncData: () =>
            //   this.categoryService.loadChildData2('0', '2').pipe(
            //     map((data: any) => {
            //       return data.map((m: any) => {
            //         return { label: m.name, value: m.id };
            //       });
            //     }),
            //   ),
            // change: (i) => this.updateCategory(i, '/categoryId2'),
          } as SFSelectWidgetSchema
        },
        name2: {
          type: 'string',
          title: '',
          ui: {
            visibleIf: {
              name1: value => value === '1'
            }
          }
        }
      }
    };
    this.ui3 = {
      '*': {
        spanLabelFixed: 90,
        grid: { span: 12 }
      },
      $name1: {
        grid: { span: 12 }
      },
      $name2: {
        grid: { span: 12 }
      }
    };
  }
  initSF4() {
    this.schema4 = {
      properties: {
        name3: {
          type: 'string',
          title: '重量/体积',
          ui: {
            widget: 'custom',
            placeholder: '请输入'
          }
        },
        name4: {
          type: 'string',
          title: '',
          ui: {
            widget: 'custom',
            placeholder: '请输入'
          }
        },
        name5: {
          type: 'string',
          title: '用车需求',
          enum: [
            { label: '1', value: '1' },
            { label: '2', value: '2' }
          ],
          ui: {
            widget: 'select',
            placeholder: '请选择车型'
            // asyncData: () =>
            //   this.categoryService.loadChildData2('0', '2').pipe(
            //     map((data: any) => {
            //       return data.map((m: any) => {
            //         return { label: m.name, value: m.id };
            //       });
            //     }),
            //   ),
            // change: (i) => this.updateCategory(i, '/categoryId2'),
          } as SFSelectWidgetSchema
        },
        name6: {
          type: 'string',
          title: '',
          enum: [
            { label: '1', value: '1' },
            { label: '2', value: '2' }
          ],
          ui: {
            widget: 'select',
            placeholder: '请选择车长'
            // asyncData: () =>
            //   this.categoryService.loadChildData2('0', '2').pipe(
            //     map((data: any) => {
            //       return data.map((m: any) => {
            //         return { label: m.name, value: m.id };
            //       });
            //     }),
            //   ),
            // change: (i) => this.updateCategory(i, '/categoryId2'),
          } as SFSelectWidgetSchema
        }
      }
    };
    this.ui4 = {
      '*': {
        spanLabelFixed: 90,
        grid: { span: 24 }
      },
      $name3: {
        grid: { span: 12 }
      },
      $name4: {
        grid: { span: 12 }
      },
      $name5: {
        grid: { span: 12 }
      },
      $name6: {
        grid: { span: 12 }
      }
    };
  }

  initSF5() {
    this.schema5 = {
      properties: {
        name1: {
          type: 'string',
          title: '货物价值',
          ui: {
            widget: 'custom',
            placeholder: '请输入'
          }
        }
      }
    };
    this.ui5 = {
      '*': {
        spanLabelFixed: 90,
        grid: { span: 24 }
      }
    };
  }

  initSF6() {
    this.schema6 = {
      properties: {
        name1: {
          type: 'string',
          title: '是否回单',
          enum: [
            { label: '1', value: '1' },
            { label: '2', value: '2' }
          ],
          ui: {
            widget: 'select',
            placeholder: '请选择'
            // asyncData: () =>
            //   this.categoryService.loadChildData2('0', '2').pipe(
            //     map((data: any) => {
            //       return data.map((m: any) => {
            //         return { label: m.name, value: m.id };
            //       });
            //     }),
            //   ),
            // change: (i) => this.updateCategory(i, '/categoryId2'),
          } as SFSelectWidgetSchema
        },
        name2: {
          type: 'string',
          title: '备注',
          ui: {
            widget: 'textarea',
            placeholder: '请输入',
            autosize: { minRows: 3, maxRows: 3 }
          } as SFTextareaWidgetSchema
        }
      }
    };
    this.ui6 = {
      '*': {
        spanLabelFixed: 90,
        grid: { span: 24 }
      }
    };
  }

  initSF7() {
    this.schema7 = {
      properties: {
        name1: { type: 'number', title: '预付', default: 0, ui: { prefix: '￥' } as SFNumberWidgetSchema },
        name2: { type: 'number', title: '到付', default: 0, ui: { prefix: '￥' } as SFNumberWidgetSchema },
        name3: { type: 'number', title: '油卡', default: 0, ui: { prefix: '￥' } as SFNumberWidgetSchema },
        name4: { type: 'number', title: '回单付', default: 0, ui: { prefix: '￥' } as SFNumberWidgetSchema },
        name5: {
          type: 'string',
          title: '小计',
          ui: {
            widget: 'custom',
            placeholder: '请输入'
          }
        },
        name6: {
          type: 'string',
          title: '附加费',
          ui: {
            widget: 'custom',
            placeholder: '请输入'
          }
        },
        name7: {
          type: 'string',
          title: '总费用',
          ui: {
            widget: 'custom',
            placeholder: '请输入'
          }
        },
        name8: {
          type: 'string',
          title: '到货后',
          ui: {
            widget: 'custom',
            placeholder: '请输入'
          }
        }
      }
    };
    this.ui7 = {
      '*': {
        spanLabelFixed: 90,
        grid: { span: 24 }
      }
    };
  }

  addStartInfo(event: any) {
    this.startInfo.push({
      addresss: '',
      name: '',
      phone: ''
    });
  }
  subStartInfo(event: any, index: number) {
    this.startInfo.splice(index, 1);
  }

  addEndInfo(event: any) {
    this.endInfo.push({
      addresss: '',
      name: '',
      phone: ''
    });
  }
  subEndInfo(event: any, index: number) {
    this.endInfo.splice(index, 1);
  }

  //指派熟车
  chooseFamifiar() {
    this.modalService.create({
      nzTitle: '指派熟车',
      nzContent: PublishGoodsChooseFamifiarComponent,
      nzWidth: 1300
    });
  }
  submit(): void {
    Object.keys(this.validateForm1.controls).forEach(key => {
      this.validateForm1.controls[key].markAsDirty();
      this.validateForm1.controls[key].updateValueAndValidity();
    });
    console.log(this.validateForm1);
    if (this.validateForm1.invalid) {
      return;
    }

    // const data = this.form.value;
    // this.http.post('/register', data).subscribe(() => {
    //   this.router.navigateByUrl('/passport/register-result', {
    //     // queryParams: { email: data.mail },
    //   });
    // });
    // this.router.navigateByUrl('/passport/register-result', {
    //   // queryParams: { email: data.mail },
    // });
  }

  openMap() {
    this.modalService.create({
      nzTitle: '',
      nzContent: AmapPoiPickerComponent,
      nzWidth: 848
    });
  }
  goBack() {
    window.history.go(-1);
  }
  // 初始化信息
  initdata() {
    console.log(this.id)
    this.service.request(`${this.service.$api_get_getCompleteVehicleDetail}`, {id:this.id}).subscribe((res) => {
      console.log(res)
      this.dataList = res;
    })
  }
}