import {NavigationBar} from '../component/NavigationBar'
import {TimeAndTitle} from "../component/TimeAndTitle"
import router from '@ohos.router';
@Entry
@Component
struct emptyBoxStorage {
  @State materialBoxID: string = 'LX-00010';

  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'))
              Row(){
                Stack() {
                  Image($r('app.media.identified_material_box'))
                    .width('100%')
                    .height('100%')
                    .objectFit(ImageFit.Contain)
                  Text("lx-0010")
                    .fontSize(16)
                    .fontColor($r('app.color.FFFFFF'))
                    .position({
                      x: '50%', // 水平位置
                      y: '68%', // 垂直位置

                    })
                }
              }
              .height('60%')
              .width('100%')
              Button() {
                Row() {
                  Image($r('app.media.material_qr_code'))
                    .width(20)
                    .height(20)
                    .margin({ right: 8 })
                    .fillColor('#0A84FF')
                  Text("生成料箱编号")
                    .fontSize(16)
                    .fontColor('#0A84FF') // 图片中的蓝色
                }
                .justifyContent(FlexAlign.Center)
              }
              .width('50%')
              .height('10%')
              .backgroundColor($r('app.color.20FFFFFF'))
              .borderRadius(8)
              .onClick(() => {
                // 按钮点击事件处理
              })
            }
            .width('50%')

            Column(){
              Text("打印条码：")
              Row(){}.height('20%')
              Button("打印")
                .width('80%')
              Path()
                .width('100%')
                .strokeWidth(1)
                .stroke(Color.Black)
                .commands('M0 0 L600 0')
                .margin({top:'5%',bottom:'5%'})
              Text("写入磁卡：")
              Row(){}.height('25%')
              Text("当前编码：无编码").height('10%')
              Button("写入")
                .width('80%')
            }
            .justifyContent(FlexAlign.SpaceEvenly)
            .width('50%')
          }
          .width('60%')
          .height('80%')
          .backgroundColor($r('app.color.10FFFFFF'))
          Row(){
            Column(){
              Text("空箱入库")
              Column(){
                Text('物料：0').textAlign(TextAlign.End).width('100%')
                Row(){}.border({width:1}).width('90%').height('50%')
                Text("料箱重量").textAlign(TextAlign.Start).width('100%')
                Text("12.56kg").textAlign(TextAlign.Start).width('100%')
                Text("料箱编号").textAlign(TextAlign.Start).width('100%')
                Text("LX-0010").textAlign(TextAlign.Start).width('100%')
              }
              .height('65%')
              .width('95%')
              .border({width:1})
              .justifyContent(FlexAlign.SpaceAround)
              Row(){
                Button("伸出").width('40%')
                Button("缩回").width('40%')
              }.width('100%')
              .justifyContent(FlexAlign.SpaceAround)
              Button("空箱入库").width('90%')
            }
            .width('90%')
            .height('90%')
            .justifyContent(FlexAlign.SpaceEvenly)
          }
          .width('35%')
          .height('80%')
          .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%')
  }
}