/*
 * 工序齐套
 * */
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() {
          Column({space: 5}) {
            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'))
            Text('选择工序')
              .fontSize($r('app.float.fontSize_6_4'))
              .fontColor(this.step === 1 ? $r('app.color.FFFFFF') : $r('app.color.60FFFFFF'))
              .fontWeight(FontWeight.Regular)
          }
          Column({space: 5}) {
            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'))
            Text('齐套装箱')
              .fontSize($r('app.float.fontSize_6_4'))
              .fontColor(this.step === 2 ? $r('app.color.FFFFFF') : $r('app.color.60FFFFFF'))
              .fontWeight(FontWeight.Regular)
          }
          Column({space: 5}) {
            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'))
            Text('齐套入库')
              .fontSize($r('app.float.fontSize_6_4'))
              .fontColor(this.step === 3 ? $r('app.color.FFFFFF') : $r('app.color.60FFFFFF'))
              .fontWeight(FontWeight.Regular)
          }
        }
        .height('80%')
        .width('18%')
        .justifyContent(FlexAlign.SpaceBetween)
        .alignItems(VerticalAlign.Top)

        Blank()
        Row() {
          NavigationBar()
        }
        .height('80%')
        .width('30%')
      }
      .height('14.2%')
      .width('100%')

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

      Row() {
        if (this.step > 2) {
          Row () {
            Text('第一步')
              .fontSize($r('app.float.fontSize_9_6'))
              .fontColor($r('app.color.0A84FF'))
              .fontWeight(FontWeight.Medium)
          }
          .height('85%')
          .width('24.1%')
          .justifyContent(FlexAlign.Center)
          .backgroundColor($r('app.color.20FFFFFF'))
          .borderRadius($r('app.float.fontSize_6_4'))
          .onClick(()=>{
            this.step = 1
          })
        } else {
          Row().width('24.1%')
        }
        Row().width('1.2%')
        if (this.step > 1) {
          Row () {
            Text('上一步')
              .fontSize($r('app.float.fontSize_9_6'))
              .fontColor($r('app.color.0A84FF'))
              .fontWeight(FontWeight.Medium)
          }
          .height('85%')
          .width('24.1%')
          .justifyContent(FlexAlign.Center)
          .backgroundColor($r('app.color.20FFFFFF'))
          .borderRadius($r('app.float.fontSize_6_4'))
          .onClick(()=>{
            this.step -= 1
          })
        } else {
          Row().width('24.1%')
        }

        Row().width('1.2%')

        if (this.step === 2) {
          Row () {
            Text('空箱出库')
              .fontSize($r('app.float.fontSize_9_6'))
              .fontColor($r('app.color.0A84FF'))
              .fontWeight(FontWeight.Medium)
          }
          .height('85%')
          .width('24.1%')
          .justifyContent(FlexAlign.Center)
          .backgroundColor($r('app.color.20FFFFFF'))
          .borderRadius($r('app.float.fontSize_6_4'))
        } else {
          Row().width('24.1%')
        }

        Row().width('1.2%')

        if (this.step < 3) {
          Row () {
            Text('下一步')
              .fontSize($r('app.float.fontSize_9_6'))
              .fontColor($r('app.color.0A84FF'))
              .fontWeight(FontWeight.Medium)
          }
          .height('85%')
          .width('24.1%')
          .justifyContent(FlexAlign.Center)
          .backgroundColor($r('app.color.20FFFFFF'))
          .borderRadius($r('app.float.fontSize_6_4'))
          .onClick(()=>{
            this.step += 1
          })
        } else {
          Row().width('24.1%')
        }
      }
      .width('94.8%')
      .height('6.1%')
      .alignItems(VerticalAlign.Center)
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.000000'))
  }
}