import {NavigationBar} from '../component/NavigationBar'
import {TimeAndTitle} from "../component/TimeAndTitle"
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;
  build() {
    Row() {
      Column() {
        Row(){
          TimeAndTitle()
        }.width('100%')
        .height('3.4%')
        .alignItems(VerticalAlign.Bottom)
        .justifyContent(FlexAlign.End)
        Row(){
          Text('< 空箱入库')
            .fontColor($r('app.color.FFFFFF'))
            .fontSize($r('app.float.fontSize_15_2'))
            .onClick(()=>{
              router.back({
                url :"pages/Menu"
              })
            })
        }
        .height('4%')
        .width('100%')
        .justifyContent(FlexAlign.Start)
        .margin({left:'5%'})
        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)
            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'))

          Column(){
            Column(){
              Text("空箱入库")
                .fontColor($r('app.color.FFFFFF'))
                .fontSize($r('app.float.fontSize_15_2'))
                .margin({top:'3%'})
              Column(){
                Stack() {
                  Image($r('app.media.drawer_in_box')) // 替换为您的电梯图片资源
                    .width('100%')
                    .height('100%')
                    .borderRadius($r('app.float.virtualSize_6_4'))
                    .objectFit(ImageFit.Contain)
                  // 文字信息层（左下角）
                  Column() {
                    Row(){
                      Image($r('app.media.material_weight'))
                        .width('5%')
                        .height('30%')
                        .fillColor($r('app.color.30D158'))
                      Text("15Kg")
                        .margin({left:10})
                        .fontSize($r('app.float.fontSize_15_2'))
                        .fontColor($r('app.color.30D158')) // 绿色文字
                    }
                    Row(){
                      Image($r('app.media.material_rfid'))
                        .width('5%')
                        .height('30%')
                        .fillColor($r('app.color.30D158'))

                      Text("LX-00010")
                        .margin({left:10})
                        .fontSize($r('app.float.fontSize_15_2'))
                        .fontColor($r('app.color.30D158')) // 绿色文字
                    }
                  }.height('19%').alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.SpaceEvenly)
                  .position({ x: '3%', y: '78%' })

                  // 右上角物料信息
                  Text("物料: 0")
                    .fontSize(16)
                    .fontColor(Color.White)
                    .position({ x: '80%', y: '5%' })

                  // 右侧纵向时间信息
                  Column({ space: 12 }) {
                    Text("12-12-12")
                    Text("12:12-12")
                    Text("12:12 12")
                  }
                  .position({ x: '85%', y: '30%' })
                  .alignItems(HorizontalAlign.End)
                }
                .width('95%')
                .height('100%') // 根据实际需求调整
              }
              .height('75%')
              .width('100%')
              .margin({top:'2%'})
              //.justifyContent(FlexAlign.SpaceAround)
              Row(){
                Button({type:ButtonType.Normal}) {
                    Text("伸出")
                      .fontSize($r('app.float.fontSize_12'))
                      .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
                }
                .margin({top:'6%'})
                .width('35%')
                .height('8%')
                .backgroundColor($r('app.color.20FFFFFF'))
                .borderRadius($r('app.float.virtualSize_6_4'))
                .onClick(() => {
                  // 按钮点击事件处理
                })
                Button({type:ButtonType.Normal}) {
                  Text("缩回")
                    .fontSize($r('app.float.fontSize_12'))
                    .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
                }
                .margin({top:'6%'})
                .width('35%')
                .height('8%')
                .backgroundColor($r('app.color.20FFFFFF'))
                .borderRadius($r('app.float.virtualSize_6_4'))
                .onClick(() => {
                  // 按钮点击事件处理
                })
              }.width('100%')
              .justifyContent(FlexAlign.SpaceAround)
              Button({type:ButtonType.Normal}) {
                Text("空箱入库")
                  .fontSize($r('app.float.fontSize_12'))
                  .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
              }
              .margin({top:'6%'})
              .width('35%')
              .height('8%')
              .backgroundColor($r('app.color.20FFFFFF'))
              .borderRadius($r('app.float.virtualSize_6_4'))
              .onClick(() => {
                // 按钮点击事件处理
              })
            }
            .width('100%')
            .height('100%')
            .justifyContent(FlexAlign.Start)
          }
          .width('32%')
          .height('85%')
          .backgroundColor($r('app.color.10FFFFFF'))
          .justifyContent(FlexAlign.Center)
        }
        .height('88.6%')
        .width('100%')
        .justifyContent(FlexAlign.SpaceAround)

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