import {MaterialList,OrderListComponent} from "../../component/OrderMaterialsStorageView"
import {OrderParams,DemandMaterial} from "../../params/OrderMaterialsStorageParams"
import WmsRequest from '../../common/util/request/WmsRequest'
import RequestParamModel from '../../viewmodel/wms/RequestParamModel'
import WorkOrderInfo from '../../viewmodel/wms/WorkOrderInfo'
import WorkOrderMaterialInfo from "../../viewmodel/wms/WorkOrderMaterialInfo"

@Component
export struct OrderMaterialStorageFirstStep {
  @Link currentStep: number
  @Link materialData: WorkOrderMaterialInfo[] ;

  @Link selectWorkOrder: WorkOrderInfo
  @State workOrderArray: WorkOrderInfo[] = []
  @State nextStepButtonClick:number =1

  loadWorkOrders = async () => {
    this.workOrderArray = await WmsRequest.post('/api/v1/plan/workOrder/list', {
      queryComplete: 0,
    } as RequestParamModel) as WorkOrderInfo[]
  }
  aboutToAppear(): void {
    this.loadWorkOrders();
    this.selectWorkOrder = {}
  }


  build() {
    Column(){
      Row(){
        Column(){
          Row(){
            Text("选择工单")
              .fontColor($r('app.color.FFFFFF'))
              .fontSize($r('app.float.fontSize_15_2'))
          }.height('10%')
          Row(){
            OrderListComponent({
              workOrders:this.workOrderArray,
              selectWorkOrder: this.selectWorkOrder,
              materialData:this.materialData
            }).width('95%').height('90%')
          }
        }.width('30%').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(){
          Row(){
            Text("需求物料")
              .fontColor($r('app.color.FFFFFF'))
              .fontSize($r('app.float.fontSize_15_2'))
          }.height('10%')
          Row() {
            MaterialList({ MaterialData: this.materialData })
              .width('100%')
              .height('100%')
          }.width('95%').height('90%')
        }.width('62%').backgroundColor($r('app.color.10FFFFFF'))
      }
      .height('85%')
      .justifyContent(FlexAlign.SpaceEvenly)
      .width('100%')

      Button({type:ButtonType.Normal}) {
        Text("下一步")
          .fontSize($r('app.float.fontSize_12'))
          .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
      }
      .width('22%')
      .height('6%')
      .margin({bottom:'3%',left:'73%'})
      .backgroundColor(this.selectWorkOrder.orderCode ?$r('app.color.20FFFFFF'):$r('app.color.10FFFFFF'))
      .borderRadius($r('app.float.virtualSize_6_4'))
      .enabled(!!this.selectWorkOrder.orderCode ) // 只有选中订单时才启用按钮
      .scale({ x: this.nextStepButtonClick, y: this.nextStepButtonClick })
      .animation({
        duration: 200,
        curve: Curve.Linear  // 弹性曲线更生动
      })
      .onClick(() => {
        this.nextStepButtonClick = 0.9;
        setTimeout(() => {
          this.nextStepButtonClick = 1;
          this.currentStep = 2;
        }, 200);
      })
    }.height('83.6%').margin({top:'3%'}).width('100%')
    .justifyContent(FlexAlign.SpaceAround)
    .width('100%')
  }
}