/*
 * 工序齐套
 * */
import { TimeAndTitle } from '../component/TimeAndTitle'
import router from '@ohos.router'
import { NavigationBar } from '../component/NavigationBar'
import { ProcessMaterialKitOneStep } from '../view/wms/ProcessMaterialKitOneStep'
import WorkOrderInfo from '../viewmodel/wms/WorkOrderInfo'

@Entry
@Component
struct ProcessMaterialKit {

  @State step: number = 1
  // 选中的工单
  @State workOrder: WorkOrderInfo = {}

  build() {
    Column() {
      // 顶部时间和菜单栏
      Row(){
        TimeAndTitle()
      }
      .width('100%')
      .height('3.5%')
      .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('工序齐套')
          .fontSize($r('app.float.fontSize_12'))
          .fontColor($r('app.color.FFFFFF'))
          .fontWeight(FontWeight.Medium)
      }
      .width('94.8%')
      .height('5.2%')
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.Start)

      // 齐套步骤和操作栏
      Row() {
        Row().width('41%')
        Row() {
          Stack() {
            Circle()
              .width($r('app.float.virtualSize_19_2'))
              .height($r('app.float.virtualSize_19_2'))
              .fill(this.step === 1 ? $r('app.color.0A84FF') : $r('app.color.10FFFFFF'))
            Text('1')
              .fontSize($r('app.float.fontSize_12'))
              .fontColor(this.step === 1 ? $r('app.color.FFFFFF') : $r('app.color.60FFFFFF'))
              .fontWeight(FontWeight.Medium)
          }
          .width($r('app.float.virtualSize_19_2'))
          .height($r('app.float.virtualSize_19_2'))

          Stack() {
            Circle()
              .width($r('app.float.virtualSize_19_2'))
              .height($r('app.float.virtualSize_19_2'))
              .fill(this.step === 2 ? $r('app.color.0A84FF') : $r('app.color.10FFFFFF'))
            Text('2')
              .fontSize($r('app.float.fontSize_12'))
              .fontColor(this.step === 2 ? $r('app.color.FFFFFF') : $r('app.color.60FFFFFF'))
              .fontWeight(FontWeight.Medium)
          }
          .width($r('app.float.virtualSize_19_2'))
          .height($r('app.float.virtualSize_19_2'))

          Stack() {
            Circle()
              .width($r('app.float.virtualSize_19_2'))
              .height($r('app.float.virtualSize_19_2'))
              .fill(this.step === 3 ? $r('app.color.0A84FF') : $r('app.color.10FFFFFF'))
            Text('3')
              .fontSize($r('app.float.fontSize_12'))
              .fontColor(this.step === 3 ? $r('app.color.FFFFFF') : $r('app.color.60FFFFFF'))
              .fontWeight(FontWeight.Medium)
          }
          .width($r('app.float.virtualSize_19_2'))
          .height($r('app.float.virtualSize_19_2'))
        }
        .height('100%')
        .width('18%')
        .justifyContent(FlexAlign.SpaceBetween)
        Blank()

        Row() {
          NavigationBar()
        }
        .height('100%')
        .width('30%')
      }
      .width('100%')
      .height('5.2%')
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.Center)

      Row() {
        Row() {
          Text('选择工序')
            .fontSize($r('app.float.fontSize_6_4'))
            .fontColor(this.step === 1 ? $r('app.color.FFFFFF') : $r('app.color.60FFFFFF'))
            .fontWeight(FontWeight.Regular)
          Text('齐套装箱')
            .fontSize($r('app.float.fontSize_6_4'))
            .fontColor(this.step === 2 ? $r('app.color.FFFFFF') : $r('app.color.60FFFFFF'))
            .fontWeight(FontWeight.Regular)
          Text('齐套入库')
            .fontSize($r('app.float.fontSize_6_4'))
            .fontColor(this.step === 3 ? $r('app.color.FFFFFF') : $r('app.color.60FFFFFF'))
            .fontWeight(FontWeight.Regular)
        }
        .height('100%')
        .width('18%')
        .justifyContent(FlexAlign.SpaceBetween)
      }
      .width('100%')
      .height('1.4%')
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.Center)

      Column() {
        if (this.step === 1) {
          ProcessMaterialKitOneStep({
            workOrder: this.workOrder
          })
        }
      }
      .height('71%')
      .width('94.8%')

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