//条码关联
import ProcessRequest from '../common/util/request/ProcessRequest'
import promptAction from '@ohos.promptAction'
import RequestParamModel from '../viewmodel/RequestParamModel'
import WorkOrderSeq from '../viewmodel/WorkOrderSeq'

@CustomDialog
export struct BarcodeAssociationDialog {
  private scrollerMaterial: Scroller = new Scroller()
  // 工单编号
  workOrderCode: string = ''
  //0：序列号排序，1：铭牌号排序 -1：默认
  @State currentClick:number = -1
  // 工单下流转卡号列表
  @Link seqList: WorkOrderSeq[]
  controller: CustomDialogController
  onConfirm: () => void = async () => {
     await ProcessRequest.post('/api/v1/plan/seq/bindCode', this.seqList)
     // 重新刷新
     this.seqList = await ProcessRequest.post('/api/v1/plan/seq/list', {
       workOrderCode: this.workOrderCode
     } as RequestParamModel)
  }

  //序列号排序，没有的在前面
  onSerialNumberClick() {
    if (this.currentClick === 0) {
       this.seqList.sort((a, b) => {
         const aStream = a.seqNo ?? "";
         const bStream = b.seqNo ?? "";
         return aStream.localeCompare(bStream);
       })
      this.currentClick = -1;
    } else {
      this.seqList.sort((a, b) => {
        const aSerial = a.supportingCode ?? "";
        const bSerial = b.supportingCode ?? "";
        const aStream = a.seqNo ?? "";
        const bStream = b.seqNo ?? "";

        if (!aSerial && !bSerial) {
          return aStream.localeCompare(bStream);
        } else if (!aSerial) {
          return -1;
        } else if (!bSerial) {
          return 1;
        } else {
          return aSerial.localeCompare(bSerial);
        }
      });
      this.currentClick = 0;
    }
  }
  //铭牌号排序，没有的在前面
  onNameplateClick() {
    if (this.currentClick === 1) {
      this.seqList.sort((a, b) => {
        const aStream = a.seqNo ?? "";
        const bStream = b.seqNo ?? "";
        return aStream.localeCompare(bStream);
      })
      this.currentClick = -1;
    } else {
      this.seqList.sort((a, b) => {
        const aNameplate = a.nameplateNo ?? "";
        const bNameplate = b.nameplateNo ?? "";
        const aStream = a.seqNo ?? "";
        const bStream = b.seqNo ?? "";

        if (!aNameplate && !bNameplate) {
          return aStream.localeCompare(bStream);
        } else if (!aNameplate) {
          return -1;
        } else if (!bNameplate) {
          return 1;
        } else {
          return aNameplate.localeCompare(bNameplate);
        }
      });
      this.currentClick = 1;
    }
  }

  async aboutToAppear() {
    if (!this.seqList && this.workOrderCode) {
      this.seqList = await ProcessRequest.post('/api/v1/plan/seq/list', {
        workOrderCode: this.workOrderCode
      } as RequestParamModel)
    }
  }

  build() {
    Column() {
      Column() {
        Text("条码关联")
          .fontColor($r('app.color.FFFFFF'))
          .fontSize($r('app.float.fontSize_30'))
      }.height('8%')
      .width('100%')
      .justifyContent(FlexAlign.Center)
      // 表头和排序操作
      Row() {
        Row(){
          Text(`流水号`)
            .fontColor($r('app.color.FFFFFF'))
            .fontSize($r('app.float.fontSize_24'))
        }
        .width('33%')
        .justifyContent(FlexAlign.Center)
        Row(){
          Text(`序列号`)
            .fontColor($r('app.color.FFFFFF'))
            .fontSize($r('app.float.fontSize_24'))
          Image($r('app.media.process_sort'))
            .width($r('app.float.virtualSize_48'))
            .height($r('app.float.virtualSize_48'))
            .fillColor(this.currentClick === 0 ?$r('app.color.0A84FF'):$r('app.color.FFFFFF'))
        }
        .width('33%')
        .justifyContent(FlexAlign.Center)
        .onClick(()=>{
          this.onSerialNumberClick();
        })
        Row(){
          Text(`铭牌号`)
            .fontColor($r('app.color.FFFFFF'))
            .fontSize($r('app.float.fontSize_24'))
          Image($r('app.media.process_sort'))
            .width($r('app.float.virtualSize_48'))
            .height($r('app.float.virtualSize_48'))
            .fillColor(this.currentClick === 1 ?$r('app.color.0A84FF'):$r('app.color.FFFFFF'))
        }
        .width('33%')
        .justifyContent(FlexAlign.Center)
        .onClick(()=>{
         this.onNameplateClick();
        })
      }
      .height('4%')
      .width('96%')
      .justifyContent(FlexAlign.End)
      .margin({left:'2%',right:'2%',top:'1%'})

      Divider()
        .vertical(false)
        .strokeWidth(1)
        .color($r('app.color.15FFFFFF'))
        .margin({ top: '1%' ,bottom:'2%',left:'2%',right:'2%'})
      // 绑定区
      Row(){
        Column(){
          List({space: 5, scroller:this.scrollerMaterial}) {
            ForEach(this.seqList, (item: WorkOrderSeq, index: number) => {
              ListItem() {
                Row() {
                  Row(){
                    Text(item.seqNo)
                      .fontSize($r('app.float.fontSize_16'))
                      .fontColor($r('app.color.FFFFFF'))
                  }
                  .width('33%')
                  .justifyContent(FlexAlign.Center)
                  Row() {
                    Image($r('app.media.material_qr_code'))
                      .width($r('app.float.virtualSize_24'))
                      .height($r('app.float.virtualSize_24'))
                      .fillColor($r('app.color.FFFFFF'))
                      .margin({left:'4%'})
                    TextInput({text: item.supportingCode, placeholder: item.supportingCode})
                      .fontSize($r('app.float.fontSize_16'))
                      .fontColor($r('app.color.FFFFFF'))
                      .enableKeyboardOnFocus(false)
                      .width('90%')
                      .textAlign(TextAlign.Start)
                      .onChange((value: string) =>{
                        item.supportingCode = value
                      })
                  }
                  .backgroundColor($r('app.color.000000'))
                  .borderRadius($r('app.float.virtualSize_16'))
                  .width('29%')
                  .margin({left:'2%',right:'2%'})
                  .justifyContent(FlexAlign.Center)
                  Row() {
                    Image($r('app.media.material_qr_code'))
                      .width($r('app.float.virtualSize_24'))
                      .height($r('app.float.virtualSize_24'))
                      .fillColor($r('app.color.FFFFFF'))
                      .margin({left:'4%'})
                    TextInput({text: item.nameplateNo, placeholder: item.nameplateNo})
                      .fontSize($r('app.float.fontSize_16'))
                      .fontColor($r('app.color.FFFFFF'))
                      .enableKeyboardOnFocus(false)
                      .width('90%')
                      .textAlign(TextAlign.Start)
                      .onChange((value: string) =>{
                        item.nameplateNo = value
                      })
                  }
                  .backgroundColor($r('app.color.000000'))
                  .borderRadius($r('app.float.virtualSize_16'))
                  .width('29%')
                  .margin({left:'2%',right:'2%'})
                  .justifyContent(FlexAlign.Center)
                }
                  .width('100%')
              }
              .height('10%')
            })
          }
          .width('100%')
          .height('100%')
        }
          .width('100%')
          .alignItems(HorizontalAlign.Center)
      }
      .height('72%')
      .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'))
  }
}