HJ_openHarmony_wms/entry/src/main/ets/component/OrderMaterialsStorageView.ets

import {DemandMaterial,OrderParams,MaterialItem,MaterialBox,EmptyBox} from "../params/OrderMaterialsStorageParams"
import WorkOrderInfo from '../viewmodel/wms/WorkOrderInfo'
import WorkOrderMaterialInfo from "../viewmodel/wms/WorkOrderMaterialInfo"
import {MaterialBoxInfo} from '../params/MaterialInformationParam'
import WmsRequest from '../common/util/request/WmsRequest'
import RequestParamModel from '../viewmodel/wms/RequestParamModel'
@Component
export struct ProcessFlow {
  @Prop currentStep:number =0
  @Prop firstStepTitle:string = ''
  @Prop secondStepTitle:string = ''
  @Prop thirdStepTitle:string = ''
  build() {
    Row() {
      // 步骤1
      FlowStep({
        stepNumber: 1,
        title: this.firstStepTitle,
        showConnector: true,
        isChoose:this.currentStep === 1
      })
      // 步骤2
      FlowStep({
        stepNumber: 2,
        title: this.secondStepTitle,
        showConnector: this.thirdStepTitle!='',
        isChoose:this.currentStep === 2
      })
      // 步骤3
      if(this.thirdStepTitle!='')
      {
        FlowStep({
          stepNumber: 3,
          title: this.thirdStepTitle,
          showConnector: false,
          isChoose:this.currentStep === 3
        })
      }
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
  }
}

@Component
struct FlowStep {
  @Prop stepNumber: number
  @Prop title: string
  @Prop showConnector: boolean
  @Prop isChoose : boolean
  build() {
    Row() {
      Column() {
        // 步骤圆圈
        Column() {
          Text(this.stepNumber.toString())
            .fontColor(this.isChoose? $r('app.color.FFFFFF'):$r('app.color.60FFFFFF'))
            .fontSize($r('app.float.fontSize_15_2'))
        }
        .width($r('app.float.virtualSize_23'))
        .height($r('app.float.virtualSize_23'))
        .borderRadius(20) // 圆形
        .backgroundColor(this.isChoose? $r('app.color.0A84FF'):$r('app.color.20FFFFFF'))
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)

        // 步骤文字
        Text(this.title)
          .fontColor(this.isChoose? $r('app.color.FFFFFF'):$r('app.color.60FFFFFF'))
          .fontSize($r('app.float.fontSize_9_6'))
          .margin({ top: 8 })

      }
      .justifyContent(FlexAlign.Center)
      .alignItems(HorizontalAlign.Center)
      if (this.showConnector) {
        Divider()
          .vertical(false)
          .strokeWidth(1)
          .color($r('app.color.15FFFFFF'))
          .margin({
            left: '-3%',
            right: '-3%',// 向左延伸至圆心
            //
          })
          .width('30%') // 自适
      }
    }
  }
}


@Component
export struct OrderListComponent {
  private scrollerForList: Scroller = new Scroller()
  @Prop workOrders: WorkOrderInfo[] = []
  @Link selectWorkOrder: WorkOrderInfo
  @Link materialData:WorkOrderMaterialInfo[]
  @State selectedIndex: number = -1  // 添加选中索引状态

  queryDemandMaterial=async(workOrderCode:string)=>{
    this.materialData = await WmsRequest.post('/api/v1/wms/workOrderMaterial/list', {
      workOrderCode: workOrderCode,
    } as RequestParamModel) as WorkOrderMaterialInfo[]
  }
  // 选中回调函数
  private onSelect(index: number): void {
    this.selectedIndex = index
    this.selectWorkOrder = this.workOrders[index]
  }

  build() {
    Column() { // 订单列表
      List({ space: 8,scroller:this.scrollerForList }) {
        ForEach(this.workOrders, (item: WorkOrderInfo, index) => {
          ListItem() {
            Column() {
              // 订单标题（带订单号）
              Text(`${item.orderName}${item.orderCode}`)
                .fontSize($r('app.float.fontSize_12'))
                .fontColor($r('app.color.FFFFFF'))
                .width('100%')
                .textAlign(TextAlign.Start)

              // 订单详情
              Column({ space: 3 }) {
                Text(`工单编号: ${item.workOrderCode}`)
                  .fontColor($r('app.color.FFFFFF'))
                  .fontSize($r('app.float.fontSize_8'))
                  .fontWeight(FontWeight.Lighter)

                Text(`下发时间: ${item.planStartWhen}`)
                  .fontColor($r('app.color.FFFFFF'))
                  .fontSize($r('app.float.fontSize_8'))
                  .fontWeight(FontWeight.Lighter)

                Row() {
                  Text('入库比例:')
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_8'))
                    .fontWeight(FontWeight.Lighter)
                  Text(`${(Number(item.inventoryNum) / Number(item.planNum) * 100).toFixed(0)}%`)
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_8'))
                    .margin({ left: 4 })
                    .fontWeight(FontWeight.Lighter)
                }
                .width('100%')
                .justifyContent(FlexAlign.Start)
              }
              .margin({ top: 6 })
              .alignItems(HorizontalAlign.Start)
            }.backgroundColor(index === this.selectedIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')) // 选中状态加深
            .borderRadius($r('app.float.virtualSize_9_6'))
            .padding(13)
            .border({width:2,color:index === this.selectedIndex ? $r('app.color.2030D158'):$r('app.color.20FFFFFF')})
            .onClick(() => {
              this.onSelect(index)
              this.queryDemandMaterial(this.selectWorkOrder.workOrderCode)
            })
          }
        })
      }
      .width('100%')
      .flexGrow(1)
    }
    .width('100%')
    .height('100%')
  }
}

@Component
export struct SingleOrder {

  @Prop selectWorkOrder: WorkOrderInfo = {}
  build() {
    Column() {
      // 订单标题（带订单号）
      Text(`${this.selectWorkOrder.orderName}${this.selectWorkOrder.orderCode}`)
        .fontSize($r('app.float.fontSize_12'))
        .fontColor($r('app.color.FFFFFF'))
        .width('100%')
        .textAlign(TextAlign.Start)

      // 订单详情
      Column({ space: 3 }) {
        Text(`工单编号: ${this.selectWorkOrder.workOrderCode}`)
          .fontColor($r('app.color.FFFFFF'))
          .fontSize($r('app.float.fontSize_8'))
          .fontWeight(FontWeight.Lighter)


        Text(`下发时间: ${this.selectWorkOrder.planStartWhen}`)
          .fontColor($r('app.color.FFFFFF'))
          .fontSize($r('app.float.fontSize_8'))
          .fontWeight(FontWeight.Lighter)

        Row() {
          Text('入库比例:')
            .fontColor($r('app.color.FFFFFF'))
            .fontSize($r('app.float.fontSize_8'))
            .fontWeight(FontWeight.Lighter)

          Text(`${(Number(this.selectWorkOrder.inventoryNum) / Number(this.selectWorkOrder.planNum) * 100).toFixed(0)}%`)
            .fontColor($r('app.color.FFFFFF'))
            .fontSize($r('app.float.fontSize_8'))
            .margin({ left: 4 })
            .fontWeight(FontWeight.Lighter)
        }
        .width('100%')
        .justifyContent(FlexAlign.Start)
      }
      .margin({ top: 6 })
      .alignItems(HorizontalAlign.Start)
      Divider()
        .strokeWidth(1)
        .color($r('app.color.15FFFFFF'))
        .margin({top:'2%'})
    }//.backgroundColor(index === this.selectedIndex ? $r('app.color.30D158') : $r('app.color.20FFFFFF')) // 选中状态加深
    .borderRadius($r('app.float.virtualSize_9_6'))
    .padding(13)

  }
}


@Component
export struct BoxGrid {
  private scrollerMaterial: Scroller = new Scroller()
  private scrollerEmpty: Scroller = new Scroller()

  // 拆分两个独立的状态变量
  @State selectedMaterialIndex: number = -1  // 物料箱选中索引
  @State selectedEmptyIndex: number = -1     // 空箱选中索引
  @Link isQueryMaterial : boolean
  @Link selectedMaterialBox : MaterialBoxInfo

  // 独立的选择回调
  private onSelectMaterial(index: number) {
    this.selectedMaterialIndex =
      (this.selectedMaterialIndex === index) ? -1 : index
    this.selectedEmptyIndex = -1
  }

  private onSelectEmpty(index: number) {
    this.selectedEmptyIndex =
      (this.selectedEmptyIndex === index) ? -1 : index
    this.selectedMaterialIndex = -1
  }


  @Link materialBoxes: MaterialBoxInfo[] ;
  @Link emptyBoxes: MaterialBoxInfo[]
  build() {
    Column() {
      if(this.isQueryMaterial){
        Grid(this.scrollerMaterial) {
          ForEach(this.materialBoxes, (box: MaterialBoxInfo, index) => {
            GridItem() {
              Column() {
                // 订单标题（带订单号）
                Text(`${box.materials?box.materials[0].materialName:''}`)
                  .fontSize($r('app.float.fontSize_12'))
                  .fontColor($r('app.color.FFFFFF'))
                  .width('100%')
                  .textAlign(TextAlign.Start)
                  .margin({ bottom: '2%',left:'2%' })
                // 订单详情
                Column({ space: 3 }) {
                  Text(`料箱编号: ${box.vehicleCode}`)
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_8'))
                    .fontWeight(FontWeight.Lighter)
                    .textAlign(TextAlign.Start)
                  // Text(`料箱类型: ${box.materials?box.materials[0].materialNo:''}`)
                  //   .fontColor($r('app.color.FFFFFF'))
                  //   .fontSize($r('app.float.fontSize_8'))
                  //   .fontWeight(FontWeight.Lighter)
                  //   .textAlign(TextAlign.Start)
                  Text(`所属订单: ${box.taskNo}`)
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_8'))
                    .fontWeight(FontWeight.Lighter)
                    .textAlign(TextAlign.Start)
                  Text(`数量: ${box.materials?box.materials[0].num:''}${box.materials?box.materials[0].unit:''}`)
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_8'))
                    .fontWeight(FontWeight.Lighter)
                    .textAlign(TextAlign.Start)
                  Text(`层数: ${box.position}`)
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_8'))
                    .fontWeight(FontWeight.Lighter)
                    .textAlign(TextAlign.Start)
                  Text(`坐标: ${box.locationNo}`)
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_8'))
                    .textAlign(TextAlign.Start)
                    .fontWeight(FontWeight.Lighter)
                }
                .width('100%')
                .margin({left:'2%'})
                .justifyContent(FlexAlign.Start)
                .alignItems(HorizontalAlign.Start)
              }
              //.margin({ top: 6 })
              .alignItems(HorizontalAlign.Start)
            }
            .backgroundColor(index === this.selectedMaterialIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')) // 选中状态加深
            .borderRadius($r('app.float.virtualSize_9_6'))
            .padding(8)
            .border({
              width: 2,
              color: index === this.selectedMaterialIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')
            })
            .onClick(() => {
              this.onSelectMaterial(index)
              this.selectedMaterialBox = box
              //this.selectedMaterialBox = box.id
            })

          })
        }
        .columnsTemplate('1fr 1fr 1fr')
        // .rowsTemplate('1fr 1fr')
        .columnsGap(10) // 移除网格内部列间距
        .rowsGap(10) // 移除网格内部行间距
        .width('100%') // 确保填满父容器
        .height('48%')
        .padding(10)

        Divider()
          .strokeWidth(1)
          .color($r('app.color.15FFFFFF'))
          .margin({top:'1%'})
        //.margin({top:'2%'})

      }
      Grid(this.scrollerEmpty) {
        ForEach(this.emptyBoxes, (box: MaterialBoxInfo, index) => {
          GridItem() {
            Row() {
              Column(){
                // 订单标题（带订单号）
                Text(`空箱`)
                  .fontSize($r('app.float.fontSize_12'))
                  .fontColor($r('app.color.FFFFFF'))
                  .width('100%')
                  .textAlign(TextAlign.Start)
                  .margin({ top: '2%',left:'2%' })
                Text(`料箱编号: ${box.vehicleCode}`)
                  .fontColor($r('app.color.FFFFFF'))
                  .fontSize($r('app.float.fontSize_8'))
                  .fontWeight(FontWeight.Lighter)
                  .textAlign(TextAlign.Start)
                  .margin({ top: '40%',left:'2%' })
                Text(`层数: ${box.position}`)
                  .fontColor($r('app.color.FFFFFF'))
                  .fontSize($r('app.float.fontSize_8'))
                  .fontWeight(FontWeight.Lighter)
                  .textAlign(TextAlign.Start)
                  .margin({ left:'2%' })
                Text(`坐标: ${box.coordinate}`)
                  .fontColor($r('app.color.FFFFFF'))
                  .fontSize($r('app.float.fontSize_8'))
                  .textAlign(TextAlign.Start)
                  .fontWeight(FontWeight.Lighter)
                  .margin({ left:'2%' })
              }.width('40%').alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.Start)
              Row(){
                Image($r('app.media.empty_box'))
                  .width('100%')
                  .height('100%')
                  .objectFit(ImageFit.Contain)
              }.width('60%')
            }
            //.margin({ top: 6 })

          }
          .backgroundColor(index === this.selectedEmptyIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')) // 选中状态加深
          .borderRadius($r('app.float.virtualSize_9_6'))
          .padding(8)
          .height(this.isQueryMaterial?'50%':'25%')
          .border({
            width: 2,
            color: index === this.selectedEmptyIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')
          })
          .onClick(() => {
            this.onSelectEmpty(index)
            this.selectedMaterialBox = box
          })

        })
      }
      .columnsTemplate('1fr 1fr 1fr')

      .columnsGap(10) // 移除网格内部列间距
      .rowsGap(10) // 移除网格内部行间距
      .width('100%') // 确保填满父容器
      .height(this.isQueryMaterial?'48%':'96%')
      .padding(10)
      .margin({top:'1%'})

    }
  }
}


@Component
export struct MaterialBoxGrid {
  private scrollerMaterial: Scroller = new Scroller()

  @State selectedMaterialIndex: number = -1  // 物料箱选中索引

  private onSelectMaterial(index: number) {
    this.selectedMaterialIndex = index
  }

  @Prop materialBoxes: MaterialBox[] = [];
  @Prop emptyBoxes: EmptyBox[] = [];
  build() {
    Column() {
      Grid(this.scrollerMaterial) {
        ForEach(this.materialBoxes, (box: MaterialBox, index) => {
          GridItem() {
            Column() {
              // 订单标题（带订单号）
              Text(`${box.name}`)
                .fontSize($r('app.float.fontSize_12'))
                .fontColor($r('app.color.FFFFFF'))
                .width('100%')
                .textAlign(TextAlign.Start)
                .margin({ bottom: '2%',left:'2%' })
              // 订单详情
              Column({ space: 3 }) {
                Text(`料箱编号: ${box.id}`)
                  .fontColor($r('app.color.FFFFFF'))
                  .fontWeight(FontWeight.Lighter)
                  .fontSize($r('app.float.fontSize_8'))
                  .textAlign(TextAlign.Start)
                Text(`料箱类型: ${box.boxType}`)
                  .fontColor($r('app.color.FFFFFF'))
                  .fontSize($r('app.float.fontSize_8'))
                  .fontWeight(FontWeight.Lighter)
                  .textAlign(TextAlign.Start)
                Text(`所属订单: ${box.order}`)
                  .fontColor($r('app.color.FFFFFF'))
                  .fontWeight(FontWeight.Lighter)
                  .fontSize($r('app.float.fontSize_8'))
                  .textAlign(TextAlign.Start)
                Text(`数量: ${box.boxNumber}`)
                  .fontColor($r('app.color.FFFFFF'))
                  .fontSize($r('app.float.fontSize_8'))
                  .fontWeight(FontWeight.Lighter)
                  .textAlign(TextAlign.Start)
                Text(`位置: ${box.position}`)
                  .fontColor($r('app.color.FFFFFF'))
                  .fontSize($r('app.float.fontSize_8'))
                  .textAlign(TextAlign.Start)
                  .fontWeight(FontWeight.Lighter)
              }
              .width('100%')
              .margin({left:'2%'})
              .justifyContent(FlexAlign.Start)
              .alignItems(HorizontalAlign.Start)
            }
            //.margin({ top: 6 })
            .alignItems(HorizontalAlign.Start)
          }
          .backgroundColor(index === this.selectedMaterialIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')) // 选中状态加深
          .borderRadius($r('app.float.virtualSize_9_6'))
          .padding(8)
          .border({
            width: 2,
            color: index === this.selectedMaterialIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')
          })
          .onClick(() => {
            this.onSelectMaterial(index)
          })

        })
      }
      .columnsTemplate('1fr 1fr 1fr')
      // .rowsTemplate('1fr 1fr')
      .columnsGap(10) // 移除网格内部列间距
      .rowsGap(10) // 移除网格内部行间距
      .width('100%') // 确保填满父容器
      .height('97%')
      .padding(10)

    }
  }
}


@Component
export struct MaterialList {
  private scrollerForList: Scroller = new Scroller()
  @Prop MaterialData: WorkOrderMaterialInfo[] = []
  build() {
    Column() {
      List({scroller:this.scrollerForList}) {
        ForEach(this.MaterialData, (item:WorkOrderMaterialInfo) => {
          ListItem() {
            Column() {
              Row(){
                Text(item.itemName)
                  .fontSize($r('app.float.fontSize_12'))
                  .fontColor($r('app.color.FFFFFF'))
                  .width('90%')
                  .textAlign(TextAlign.Start)
                Text(`${item.storageNum}/${item.num}`)
                  .fontSize($r('app.float.fontSize_12'))
                  .fontColor($r('app.color.FFFFFF'))
                  .width('10%')
                  .textAlign(TextAlign.End)
              }.margin({top:'1%'})
              Row(){
                Text(`型号： ${item.itemCode}`)
                  .fontSize($r('app.float.fontSize_8'))
                  .fontColor($r('app.color.FFFFFF'))
                  .width('90%')
                  .fontWeight(FontWeight.Lighter)
                  .textAlign(TextAlign.Start)
                Text('入库/计划数量')
                  .fontSize($r('app.float.fontSize_7'))
                  .fontColor($r('app.color.60FFFFFF'))
                  .width('10%')
                  .textAlign(TextAlign.End)
                  .fontWeight(FontWeight.Lighter)
              }.margin({bottom:'1%'})
            }.width('100%').alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.SpaceEvenly).height('12%')
          }
        })
      }
      .width('100%')
      .height('100%')
      .divider({
        strokeWidth: 1,
        color: $r('app.color.20FFFFFF')
      })
    }
    .height('100%')
    .justifyContent(FlexAlign.Start)
  }
}


@Component
export struct MaterialListComponent {
  private scrollerForList: Scroller = new Scroller()
  @Link ScanMaterialList: WorkOrderInfo[]
  @Link materialNum :number

  // 选中回调函数

  build() {
    Column() { // 订单列表
      List({ space: 8,scroller:this.scrollerForList }) {
        ForEach(this.ScanMaterialList, (item: WorkOrderInfo, index) => {
          ListItem() {
            Row() {
              Column(){
                // 订单标题（带订单号）
                Text(`${item.materialName}`)
                  .fontSize($r('app.float.fontSize_12'))
                  .fontColor($r('app.color.FFFFFF'))
                  .width('100%')
                  .textAlign(TextAlign.Start)
                // 订单详情
                Column({ space: 3 }) {
                  Text(`型号: ${item.materialCode}`)
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_8'))
                    .width('100%')
                    .fontWeight(FontWeight.Lighter)
                    .textAlign(TextAlign.Start)
                  Text(`序列号: ${item.batchNo}`)
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_8'))
                    .width('100%')
                    .fontWeight(FontWeight.Lighter)
                    .textAlign(TextAlign.Start)
                  // Text(`所属订单: ${item.date}`)
                  //   .fontColor($r('app.color.FFFFFF'))
                  //   .fontSize($r('app.float.fontSize_8'))
                  //   .width('100%')
                  //   .fontWeight(FontWeight.Lighter)
                  //   .textAlign(TextAlign.Start)
                  Text(`数量: ${item.num}${item.unitDictLabel}`)
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_8'))
                    .width('100%')
                    .fontWeight(FontWeight.Lighter)
                    .textAlign(TextAlign.Start)
                }
                .margin({ top: 4 })
                .alignItems(HorizontalAlign.Start)
              }.width('90%')
              Row(){
                Image($r('app.media.material_delete'))
                  .width($r('app.float.virtualSize_23'))
                  .height($r('app.float.virtualSize_23'))
                  .fillColor($r('app.color.FF453A'))
                  .onClick(()=>{
                    this.ScanMaterialList.splice(index, 1);
                    this.materialNum--
                  })
              }.width('10%')
            }
            .backgroundColor($r('app.color.20FFFFFF')) // 选中状态加深
            .borderRadius($r('app.float.virtualSize_9_6'))
            .padding(13)
            //.border({width:2,color:index === this.selectedIndex ? $r('app.color.2030D158'):$r('app.color.20FFFFFF')})
          }
        })
      }
      .width('100%')
      .flexGrow(1)
    }
    .width('100%')
    .height('100%')
  }
}

@Component
export struct MaterialButton {
  @State scaleValue : number = 1
  @Prop icon: Resource = $r('app.media.rgv_turn_off')
  onButtonClick: () => void = () => {}
  build() {
    Row() {
      Button({ type: ButtonType.Normal }) {
        Image(this.icon)
          .width('50%')
          .height('50%')
          .objectFit(ImageFit.Contain)
          .fillColor($r('app.color.FFFFFF'))
      }
      .width('100%')
      .height('100%')
      .backgroundColor($r('app.color.20FFFFFF'))
      .borderRadius($r('app.float.virtualSize_6_4'))
      .scale({ x: this.scaleValue, y: this.scaleValue })
      .animation({
        duration: 200,
        curve: Curve.Linear  // 弹性曲线更生动
      })
      .onClick(() => {
        this.scaleValue = 0.9; // 点击时缩小
        setTimeout(() => {
          this.scaleValue = 1; // 0.2秒后恢复
        }, 200);
        if (this.onButtonClick) {
          this.onButtonClick()
        }
      })
    }
  }
}

@CustomDialog
export struct RemindDialog {
  controller: CustomDialogController
  @Link remind: string
  build() {
    Column() {
      Text(this.remind)
        .fontColor($r('app.color.FFFFFF'))
        .fontSize($r('app.float.fontSize_12'))
    }
    .backgroundColor($r('app.color.2A2A2A'))
    .borderRadius($r('app.float.virtualSize_11_6'))
    .justifyContent(FlexAlign.Center)
    .width(300)
    .height(50)
  }
}


@CustomDialog
export struct CommonConfirmDialog {
  @State title: string = '提示'
  @State message: string = '确定要执行此操作吗？'
  @State confirmText: string = '确定'
  @State cancelText: string = '取消'

  controller: CustomDialogController
  onConfirm: () => void = () => {}

  build() {
    Column() {
      // 标题
      Column(){
        Text(this.title)
          .fontColor($r('app.color.FFFFFF'))
          .fontSize($r('app.float.fontSize_15_2'))
      }.height('30%')
      .justifyContent(FlexAlign.Center)
      Column(){
        Text(this.message)
          .fontColor($r('app.color.30FFFFFF'))
          .fontSize($r('app.float.fontSize_12'))
      }.height('30%')
      .justifyContent(FlexAlign.Center)

      Column(){
        Divider()
          .vertical(false)
          .strokeWidth(1)
          .color($r('app.color.15FFFFFF'))
        Row(){
          Row(){
            Text('取消')
              .fontColor($r('app.color.60FFFFFF'))
              .fontSize($r('app.float.fontSize_12'))
          }
          .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_12'))
          }
          .justifyContent(FlexAlign.Center)
          .width('50%')
          .onClick(() => {
            this.onConfirm();
            this.controller.close();
          })
        }
      }
      .width('100%')
      .height('30%')
    }
    .height(200)
    .width(400)
    .backgroundColor($r('app.color.2A2A2A'))
    .justifyContent(FlexAlign.End)
    .borderRadius(16)
  }
}