import {NavigationBar} from '../component/NavigationBar'
import {TimeAndTitle} from "../component/TimeAndTitle"
import {InBoundView} from '../component/InBoundView'
import router from '@ohos.router';
@Entry
@Component
struct emptyBoxStorage {
  @State materialBoxID: string = 'LX-00010';
  @State isMaterialBoxExist: Boolean = true;
  @State isPrinterOnline: Boolean = true;
  @State isRfidOnline: Boolean = true;
  @State messages: string[] = [
    "抽屉伸出成功                   12-12-12",
    "抽屉伸出成功                   12-12-12",
    "抽屉伸出成功                   12-12-12",
    "抽屉伸出成功                   12-12-12"
  ]
  build() {
    Row() {
      Column() {
        Row(){
          TimeAndTitle()
        }.width('100%')
        .height('3.4%')
        .alignItems(VerticalAlign.Bottom)
        .justifyContent(FlexAlign.End)
        Row(){
          Image($r('app.media.general_return'))
            .height($r('app.float.virtualSize_22_4'))
            .width($r('app.float.virtualSize_22_4'))
            .fillColor($r('app.color.FFFFFF'))
            // .onClick(()=> {
            //   router.back()
            // })
          Text('空箱入库')
            .fontColor($r('app.color.FFFFFF'))
            .fontSize($r('app.float.fontSize_15_2'))
        }
        .height('4%')
        .width('100%')
        .justifyContent(FlexAlign.Start)
        .margin({left:'5%'})
        .onClick(()=> {
          router.back()
        })
        Row(){
          NavigationBar().width('20%')
        }
        .width('100%')
        .height('4%')
        .justifyContent(FlexAlign.End)


        Row(){
          Row(){
            Column(){
              Text("生成编号")
                .fontColor($r('app.color.FFFFFF'))
                .fontSize($r('app.float.fontSize_15_2'))
                .margin({top:'3%'})
              Row(){
                Stack() {
                  Image(this.isMaterialBoxExist? $r('app.media.identified_material_box'):$r('app.media.not_identified_material_box'))
                    .width('100%')
                    .height('100%')
                    .borderRadius($r('app.float.virtualSize_6_4'))
                    .objectFit(ImageFit.Contain)
                  Text("LX-00010")
                    .fontSize($r('app.float.fontSize_19_2'))
                    .fontColor($r('app.color.FFFFFF'))
                    .position({
                      x: '38%', // 水平位置
                      y: '80%', // 垂直位置
                    })
                  Text("已生成新编号")
                    .fontSize($r('app.float.fontSize_6'))
                    .fontColor($r('app.color.60FFFFFF'))
                    .position({
                      x: '45%', // 水平位置
                      y: '87%', // 垂直位置
                    })
                }
              }
              .margin({top:'3%'})
              .height('75%')
              .width('100%')
              Button({type:ButtonType.Normal}) {
                Row() {
                  Image($r('app.media.material_qr_code'))
                    .width('15%')
                    .height('45%')
                    .margin({ right: 8 })
                    .fillColor($r('app.color.0A84FF'))
                  Text("生成料箱编号")
                    .fontSize($r('app.float.fontSize_12'))
                    .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
                }
                .justifyContent(FlexAlign.Center)
              }
              .margin({top:'10%'})
              .width('35%')
              .height('6%')
              .backgroundColor($r('app.color.20FFFFFF'))
              .borderRadius($r('app.float.virtualSize_6_4'))
              .onClick(() => {
                // 按钮点击事件处理
              })
            }
            .height('100%')
            .width('45%')
            .justifyContent(FlexAlign.Start)
            Image($r('app.media.arrow_right'))
              .width($r('app.float.virtualSize_23'))
              .height($r('app.float.virtualSize_23'))
              .fillColor($r('app.color.FFFFFF'))
            Column(){
              Text("打印条码")
                .fontColor($r('app.color.FFFFFF'))
                .fontSize($r('app.float.fontSize_15_2'))
                .margin({top:'3%'})
              Column(){
                Image(this.isPrinterOnline? $r('app.media.printer_online'):$r('app.media.printer_offline'))
                  .width('100%')
                  .height('40%')
                  .borderRadius($r('app.float.virtualSize_6_4'))
                  .objectFit(ImageFit.Contain)
                //.margin({top:'3%'})
                Button({type:ButtonType.Normal}) {
                  Row() {
                    Image($r('app.media.material_qr_code'))
                      .width('15%')
                      .height('50%')
                      .margin({ right: 8 })
                      .fillColor($r('app.color.0A84FF'))
                    Text("打印编号")
                      .fontSize($r('app.float.fontSize_12'))
                      .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
                  }
                  .justifyContent(FlexAlign.Center)
                }
                .margin({top:'6%'})
                .width('35%')
                .height('8%')
                .backgroundColor($r('app.color.20FFFFFF'))
                .borderRadius($r('app.float.virtualSize_6_4'))
                .onClick(() => {
                  // 按钮点击事件处理
                })
                Divider()
                  .margin({top:'3%'})
                  .vertical(false)
                  .strokeWidth(1)
                  .color($r('app.color.10FFFFFF'))
                  .width('100%')
                Text("写入磁卡")
                  .fontColor($r('app.color.FFFFFF'))
                  .fontSize($r('app.float.fontSize_15_2'))
                  .margin({top:'3%'})
                Image(this.isRfidOnline? $r('app.media.rfid_online'):$r('app.media.rfid_offline'))
                  .width('100%')
                  .height('40%')
                  .margin({top:'1%'})
                  .borderRadius($r('app.float.virtualSize_6_4'))
                  .objectFit(ImageFit.Contain)
              }
             // .margin({top:'3%'})
              .height('75%')
              .width('100%')
              .justifyContent(FlexAlign.Start)
              Row(){
                Text("当前编号：")
                  .fontColor($r('app.color.FFFFFF'))
                  .fontSize($r('app.float.fontSize_9_6'))
                  .margin({top:'3%'})
                Text("LX-00010")
                  .fontColor($r('app.color.0A84FF'))
                  .fontSize($r('app.float.fontSize_9_6'))
                  .margin({top:'3%'})
              }.height('5%')
              .margin({top:'2%'})
              Button({type:ButtonType.Normal}) {
                Row() {
                  Image($r('app.media.material_qr_code'))
                    .width('15%')
                    .height('45%')
                    .margin({ right: 8 })
                    .fillColor($r('app.color.0A84FF'))
                  Text("写入磁卡")
                    .fontSize($r('app.float.fontSize_12'))
                    .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
                }
                .justifyContent(FlexAlign.Center)
              }
              .margin({top:'3%'})
              .width('35%')
              .height('6%')
              .backgroundColor($r('app.color.20FFFFFF'))
              .borderRadius($r('app.float.virtualSize_6_4'))
              .onClick(() => {
                // 按钮点击事件处理
              })
            }
            .justifyContent(FlexAlign.Start)
            .width('45%')
            .height('100%')
          }
          .width('60%')
          .height('85%')
          .justifyContent(FlexAlign.SpaceAround)
          .backgroundColor($r('app.color.10FFFFFF'))
          Image($r('app.media.arrow_right'))
            .width($r('app.float.virtualSize_23'))
            .height($r('app.float.virtualSize_23'))
            .fillColor($r('app.color.FFFFFF'))
            .margin({left:'-2%',right:'-2%'})
          Column(){
            InBoundView({messages:this.messages});
          }
          .width('29%')
          .height('85%')
          .backgroundColor($r('app.color.10FFFFFF'))
          .justifyContent(FlexAlign.Center)
        }
        .height('88.6%')
        .width('100%')
        .justifyContent(FlexAlign.SpaceEvenly)

      }
      .width('100%')
      .backgroundColor($r('app.color.000000'))
    }
    .height('100%')
  }
}