import {OrderListView,ProcessFlow,MaterialGrid,SingleOrder,materialScan,BoxGrid} from "../component/OrderMaterialsStorageView"
import {OrderParams,MaterialItem,MaterialBox} from "../params/OrderMaterialsStorageParams"
import router from '@ohos.router';
@Entry
@Component
struct orderMaterialsStorage {
  @State materialBoxID: string = 'LX-00010';
  @State selectedOrderNo: string = '';
  @State selectedOrderDate: string = ''
  @State selectedOrderName: string = ''
  @State currentStep: number = 0;
  @State boxData: MaterialBox[] = [
  // 第一行物料箱
    {
      id: '1', type: 'material',
      name: '物料名称XXXXX',
      boxNumber: 'LX-12345',
      boxType: '通用类型',
      order: 'XXXXX订单',
      quantity: 10,
      position: 'X-1 Y-2'
    },
    // 其他2个物料箱...

    // 第二行空箱
    {
      id: '4', type: 'empty',
      name: '空箱',
      boxNumber: 'LX-67890',
      boxType: '通用类型',
      position: 'X-3 Y-1'
    },
    {
      id: '1', type: 'material',
      name: '物料名称XXXXX',
      boxNumber: 'LX-12345',
      boxType: '通用类型',
      order: 'XXXXX订单',
      quantity: 10,
      position: 'X-1 Y-2'
    },
    // 其他2个物料箱...

    // 第二行空箱
    {
      id: '4', type: 'empty',
      name: '空箱',
      boxNumber: 'LX-67890',
      boxType: '通用类型',
      position: 'X-3 Y-1'
    },
    {
      id: '1', type: 'material',
      name: '物料名称XXXXX',
      boxNumber: 'LX-12345',
      boxType: '通用类型',
      order: 'XXXXX订单',
      quantity: 10,
      position: 'X-1 Y-2'
    },
    // 其他2个物料箱...

    // 第二行空箱
    {
      id: '4', type: 'empty',
      name: '空箱',
      boxNumber: 'LX-67890',
      boxType: '通用类型',
      position: 'X-3 Y-1'
    },
    {
      id: '1', type: 'material',
      name: '物料名称XXXXX',
      boxNumber: 'LX-12345',
      boxType: '通用类型',
      order: 'XXXXX订单',
      quantity: 10,
      position: 'X-1 Y-2'
    },
    // 其他2个物料箱...

    // 第二行空箱
    {
      id: '4', type: 'empty',
      name: '空箱',
      boxNumber: 'LX-67890',
      boxType: '通用类型',
      position: 'X-3 Y-1'
    },
    {
      id: '1', type: 'material',
      name: '物料名称XXXXX',
      boxNumber: 'LX-12345',
      boxType: '通用类型',
      order: 'XXXXX订单',
      quantity: 10,
      position: 'X-1 Y-2'
    },
    // 其他2个物料箱...

    // 第二行空箱
    {
      id: '4', type: 'empty',
      name: '空箱',
      boxNumber: 'LX-67890',
      boxType: '通用类型',
      position: 'X-3 Y-1'
    },
    {
      id: '1', type: 'material',
      name: '物料名称XXXXX',
      boxNumber: 'LX-12345',
      boxType: '通用类型',
      order: 'XXXXX订单',
      quantity: 10,
      position: 'X-1 Y-2'
    },
    // 其他2个物料箱...
    {
      id: '1', type: 'material',
      name: '物料名称XXXXX',
      boxNumber: 'LX-12345',
      boxType: '通用类型',
      order: 'XXXXX订单',
      quantity: 10,
      position: 'X-1 Y-2'
    },
    // 其他2个物料箱...

    // 第二行空箱
    {
      id: '4', type: 'empty',
      name: '空箱',
      boxNumber: 'LX-67890',
      boxType: '通用类型',
      position: 'X-3 Y-1'
    }, {
    id: '1', type: 'material',
    name: '物料名称XXXXX',
    boxNumber: 'LX-12345',
    boxType: '通用类型',
    order: 'XXXXX订单',
    quantity: 10,
    position: 'X-1 Y-2'
  },

    // 其他2个物料箱...

    // 第二行空箱
    {
      id: '4', type: 'empty',
      name: '空箱',
      boxNumber: 'LX-67890',
      boxType: '通用类型',
      position: 'X-3 Y-1'
    },
    // 第二行空箱
    {
      id: '4', type: 'empty',
      name: '空箱',
      boxNumber: 'LX-67890',
      boxType: '通用类型',
      position: 'X-3 Y-1'
    },
  // 其他2个空箱...
  ];
  @State orders:OrderParams[]= [
    { orderName: '订单名称XXXXX', orderNo: '123123213', date: '2025/11/11', progress: '50%' },
    { orderName: '订单名称XXXX', orderNo: '123123213', date: '2025/11/11', progress: '75%' },
    { orderName: '特殊订单', orderNo: 'SH2024001', date: '2024/03/01', progress: '100%' },
    { orderName: '订单名称XXXXX', orderNo: '123123213', date: '2025/11/11', progress: '50%' },
    { orderName: '订单名称XXXX', orderNo: '123123213', date: '2025/11/11', progress: '75%' },
    { orderName: '特殊订单', orderNo: 'SH2024001', date: '2024/03/01', progress: '100%' }
  ]
  @State materialData: MaterialItem[] = [
    { id: '1', name: '物料名称XXXX', model: '型号×××××', completed: 11, planned: 20 },
    { id: '2', name: '物料名称XXX', model: '型号××××××', completed: 11, planned: 20 },
    { id: '1', name: '物料名称XXXX', model: '型号×××××', completed: 11, planned: 20 },
    { id: '2', name: '物料名称XXX', model: '型号××××××', completed: 11, planned: 20 },
    { id: '1', name: '物料名称XXXX', model: '型号×××××', completed: 11, planned: 20 },
    { id: '2', name: '物料名称XXX', model: '型号××××××', completed: 11, planned: 20 },
    { id: '1', name: '物料名称XXXX', model: '型号×××××', completed: 11, planned: 20 },
    { id: '2', name: '物料名称XXX', model: '型号××××××', completed: 11, planned: 20 },
    { id: '1', name: '物料名称XXXX', model: '型号×××××', completed: 11, planned: 20 },
    { id: '2', name: '物料名称XXX', model: '型号××××××', completed: 11, planned: 20 },
    { id: '1', name: '物料名称XXXX', model: '型号×××××', completed: 11, planned: 20 },
    { id: '2', name: '物料名称XXX', model: '型号××××××', completed: 11, planned: 20 },
    { id: '1', name: '物料名称XXXX', model: '型号×××××', completed: 11, planned: 20 },
    { id: '2', name: '物料名称XXX', model: '型号××××××', completed: 11, planned: 20 },
    { id: '1', name: '物料名称XXXX', model: '型号×××××', completed: 11, planned: 20 },
    { id: '2', name: '物料名称XXX', model: '型号××××××', completed: 11, planned: 20 },
  // 其他7项数据...
  ];

  build() {
    Row() {
      Column() {
        Row(){
          Text('<订单物料入库')
            .width('40%')
            .onClick(()=>{
              router.back({
                url :"pages/Menu"
              })
            })
          //.margin({left:'%'})
          Row(){
            Button('统计')
              .width('22%')
            Button('叫料通知')
              .width('22%')
            Button('仓储日志')
              .width('22%')
            Button('仓储车调试')
              .width('22%')
          }
          .width('55%')
          .justifyContent(FlexAlign.SpaceBetween)
        }
        .height('10%')
       if(this.currentStep === 0)
       {


         Row(){
           ProcessFlow({
             circle1Color:"#1890FF",
             circle2Color:"#676D6F",
             circle3Color:"#676D6F",
           }
           )
         }
         .height('8%')
         .width('100%')
         .margin({bottom:'2%'})
         .justifyContent(FlexAlign.SpaceAround)

           Row(){
             OrderListView({
               orders: this.orders,
               selectedOrderNo: this.selectedOrderNo,
               selectedOrderDate:this.selectedOrderDate,
               selectedOrderName:this.selectedOrderName
             })
               .width('20%')

             Row(){
               MaterialGrid({ materials: this.materialData })
                 .width('100%')
                 .height('100%')
             }.width('75%')
             .border({width:1})
             .height("100%")
             .alignItems(VerticalAlign.Top)

           }.height('65%')
           .justifyContent(FlexAlign.SpaceAround)
           .width('100%')

           Button("下一步")
             .width("30%")
             .backgroundColor(this.selectedOrderNo ? '#1890FF' : '#CCCCCC')
             .enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
             .onClick(() => {
               this.currentStep = 1;
             })
         }
        else if(this.currentStep === 1)
        {
          Row(){
            ProcessFlow({
              circle1Color:"#676D6F",
              circle2Color:"#1890FF",
              circle3Color:"#676D6F",
            }
            )
          }
          .height('8%')
          .width('100%')
          .margin({bottom:'2%'})
          .justifyContent(FlexAlign.SpaceAround)

          Row(){
            Column(){
              SingleOrder({
                selectedOrderNo:this.selectedOrderNo,
                selectedOrderDate:this.selectedOrderDate,
                selectedOrderName:this.selectedOrderName
              }).height('25%')
              materialScan().margin({top:'5%'}).height('65%')
            }.width('30%')
            .justifyContent(FlexAlign.Start)
            .height('100%')
            Row(){
              BoxGrid({ boxes: this.boxData })
                .width('100%')
                .height('100%')
            }.width('65%')
            .border({width:1})
            .height("100%")
            .alignItems(VerticalAlign.Top)

          }.height('65%')
          .justifyContent(FlexAlign.SpaceAround)
          .width('100%')

          Row(){
            Button("上一步")
              .width("25%")
              .onClick(()=>{
                this.currentStep = 0;
              })
            Button("料箱出库")
              .width("25%")
              .onClick(()=>{
                this.currentStep = 1;
              })
            Button("下一步")
              .width("25%")
              .onClick(()=>{
                this.currentStep = 2;
              })
          }.justifyContent(FlexAlign.SpaceEvenly)
          .width('100%')
        }
        if(this.currentStep === 2)
        {
          Row(){
            ProcessFlow({
              circle3Color:"#1890FF",
              circle2Color:"#676D6F",
              circle1Color:"#676D6F",
            }
            )
          }
          .height('8%')
          .width('100%')
          .margin({bottom:'2%'})
          .justifyContent(FlexAlign.SpaceAround)

          Row(){


            Row(){
              MaterialGrid({ materials: this.materialData })
                .width('100%')
                .height('100%')
            }.width('75%')
            .border({width:1})
            .height("100%")
            .alignItems(VerticalAlign.Top)

          }.height('65%')
          .justifyContent(FlexAlign.SpaceAround)
          .width('100%')
          Row(){
            Button("上一步")
              .width("30%")
              .onClick(()=>{
                this.currentStep = 1;
              })
            Button("料箱出库")
              .width("30%")
              .onClick(()=>{
                this.currentStep = 1;
              })
            Button("下一步")
              .width("30%")
              .onClick(()=>{
                this.currentStep = 1;
              })
          }
        }
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.SpaceAround)
    }
    .height('100%')
  }
}
