<!--
 * @Author: your name
 * @Date: 2021-12-15 13:17:42
 * @LastEditTime: 2021-12-21 14:34:16
 * @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\modal\vehicle\confir-receipt\confir-receipt.component.html
-->
<nz-alert
  style="padding-bottom: 15px"
  nzType="warning"
  nzCloseable
  nzMessage="签收后不可再修改运费，请确保运费等信息准确无误后，再进行签收。"
></nz-alert>

<sv-container col="1">
  <sv label="费用明细">
    <st #st [widthMode]="{ type: 'strict' }" [data]="costDetail" [columns]="columns" bordered="true" [page]="{ show: false }"></st>
  </sv>
  <sv label="司机车辆">
    <div>{{driverList?.nickName}} / {{driverList?.telephone}}/ {{carList?.carNo}}</div>
  </sv>
  <sv label="收款人">
    <div>{{payeeList?.nickName}} / {{payeeList?.telephone}}</div>
  </sv>
  <sv label="回单凭证">
    <nz-upload
      class="avatar-uploader"
      [nzAction]="service.$api_upload_url"
      [nzName]="'multipartFile'"
      nzListType="picture-card"
      [(nzFileList)]="listImagUrls"
      [nzShowButton]="listImagUrls.length < 5"
      [nzPreview]="handlePreview1"
      [nzBeforeUpload]="beforeUpload"
      (nzChange)="handleChange1($event)"
    >
      <div>
        <i nz-icon nzType="plus"></i>
        <div style="margin-top: 8px">请上传图片</div>
      </div>
    </nz-upload>
    <nz-modal [nzVisible]="previewVisible1" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible1 = false">
      <ng-template #modalContent>
        <img [src]="previewImage1" [ngStyle]="{ width: '100%' }" />
      </ng-template>
    </nz-modal>
  </sv>
</sv-container>
<div class="modal-footer">
  <button nz-button type="button" (click)="close()">关闭</button>
  <button nz-button type="submit" nzType="primary" (click)="save()" [nzLoading]="http.loading">确认签收</button>
</div>
