//本次扫描物料
import TaskSeqVO from '../viewmodel/process/TaskSeqInfo'
@CustomDialog
export struct SerialNoMaterialDialog {
  private scrollerMaterial: Scroller = new Scroller()
  //当前物料名称
  @State currentMaterialName: string = 'PCBA板'
  //当前物料型号
  @State currentMaterialNo: string = '12322221232321222332211233'
  //当前物料计划数量
  @State currentPlanNum:number = 100
  //当前物料完成数量
  @State currentCompleteNum:number = 10
  //当前物料单位
  @State currentMaterialUnit:string = '片'
  //扫描的工单号
  @State selectedSerialsIndex:number = -1
  //
  @State currentMaterialSerials:TaskSeqVO[]=[{
    seqNo:"1212122121ewqeqweqw2131231231"
  },
    {
      seqNo:"1212122121ewqeqweqw2131231231"
    },
    {
      seqNo:"1212122121ewqeqweqw2131231231"
    },
    {
      seqNo:"1212122121ewqeqweqw2131231231"
    },
    {
      seqNo:"1212122121ewqeqweqw2131231231"
    },
  ]
  controller: CustomDialogController
  onConfirm: () => void = () => {
  }

  aboutToAppear(): void {
  }

  build() {
    Column() {
      Column() {
        Text("本次扫描物料")
          .fontColor($r('app.color.FFFFFF'))
          .fontSize($r('app.float.fontSize_30'))
      }.height('8%')
      .width('100%')
      .justifyContent(FlexAlign.Center)

      Row() {
        Column({space:5}){
          Text(`物料名称：${this.currentMaterialName}`)
            .fontColor($r('app.color.FFFFFF'))
            .fontSize($r('app.float.fontSize_16'))
          Text(`型号：${this.currentMaterialNo}`)
            .fontColor($r('app.color.FFFFFF'))
            .fontSize($r('app.float.fontSize_16'))
        }
        .alignItems(HorizontalAlign.Start)
        .width('70%')
        Row(){
          Text(`${this.currentCompleteNum}/`)
            .fontColor($r('app.color.FFFFFF'))
            .fontSize($r('app.float.fontSize_38'))
          Text(`${this.currentCompleteNum}${this.currentMaterialUnit}`)
            .fontColor($r('app.color.60FFFFFF'))
            .fontSize($r('app.float.fontSize_38'))
        } .width('30%')
        .justifyContent(FlexAlign.End)
      }
      .height('6%')
      .width('96%')
      .justifyContent(FlexAlign.End)
      .margin({left:'2%',right:'2%'})



      Divider()
        .vertical(false)
        .strokeWidth(1)
        .color($r('app.color.15FFFFFF'))
        .margin({ top: '1%' ,bottom:'2%',left:'2%',right:'2%'})

      Column() {
        List({ space: 8,scroller:this.scrollerMaterial }) {
          ForEach(this.currentMaterialSerials, (item: TaskSeqVO, index) => {
            ListItem() {
              Row() {
                Row(){
                  Text(`S/N`)
                    .fontSize($r('app.float.fontSize_30'))
                    .fontColor($r('app.color.60FFFFFF'))
                    .margin({left:'2%',right:'2%'})
                  Text(`${item.seqNo}`)
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_30'))
                }
                .width('90%')
                Row(){
                  Image($r('app.media.process_delete_seq'))
                    .width($r('app.float.virtualSize_48'))
                    .height($r('app.float.virtualSize_48'))
                    .fillColor($r('app.color.FF453A'))
                }.width('10%')
                .justifyContent(FlexAlign.Center)
                .onClick(()=>{
                  this.currentMaterialSerials.splice(index, 1);
                })
              }
              .backgroundColor($r('app.color.20FFFFFF')) // 选中状态加深
              .borderRadius($r('app.float.virtualSize_24'))
              .padding(13)
            }
          })
        }
        .width('100%')
        .flexGrow(1)
      }
      .height('68%')
      .margin({left:'2%',right:'2%'})

      Column() {
        Divider()
          .vertical(false)
          .strokeWidth(1)
          .color($r('app.color.15FFFFFF'))
        Row() {
          Row() {
            Text('取消')
              .fontColor($r('app.color.60FFFFFF'))
              .fontSize($r('app.float.fontSize_30'))
          }
          .justifyContent(FlexAlign.Center)
          .width('50%')
          .onClick(() => this.controller.close())

          Divider()
            .vertical(true)
            .strokeWidth(1)
            .color($r('app.color.15FFFFFF'))
          Row() {
            Text('确定')
              .fontColor($r('app.color.007AFF'))
              .fontSize($r('app.float.fontSize_30'))
          }
          .justifyContent(FlexAlign.Center)
          .width('50%')
          .onClick(() => {
            this.onConfirm();
            this.controller.close();
          })
        }
      }
      .width('100%')
      .height('8%')

    }
    .height('71%')
    .width('62%')
    .backgroundColor($r('app.color.2A2A2A'))
    .justifyContent(FlexAlign.End)
    .alignItems(HorizontalAlign.Start)
    .borderColor($r('app.color.000000'))
    .borderWidth(1)
    .borderRadius($r('app.float.virtualSize_16'))
  }
}
