xf-ohos/entry/src/main/ets/pages/OutboundStation.ets

import { TitleStateComp } from '../common/component/TitleStateComp'
import { CompleteSet } from '../view/CompleteSet'
import { Statistics } from '../view/Statistics'
import { AdjustStorageView } from '../view/storage/AdjustStorageView'
import { ManualOutbound } from '../view/ManualOutbound'
import { WarehouseMap } from './WarehouseMap'
import { MaterialCirculationPage } from './process/MaterialCirculationPage'
import { SureToDoDialog } from '../common/component/SureToDoDialog'

/*
 * 出库工位
 * */
@Entry
@Component
struct OutboundStation {
  //齐套按钮(0:齐套 1:手动出库 2:调仓：3:统计)
  @State inboundButton: number = 0
  @State Button: number = 0
  //仓储和其他仓储点击按钮变色
  @State warehouseButton: number = 0
  @State isHomePage: boolean = false
  fourWidth: number = 280
  twoWidth: number = 150
  // 切换tab添加提示
  goingToChangeTabIndex: number = 0
  goingToChangeTab = (tabIndex: number) => {

    if (this.inboundButton == 3) {
      this.inboundButton = tabIndex
    }
    else {
      this.goingToChangeTabIndex = tabIndex
      this.changeTabController.open()
    }
  }
  sureToChangeTab = () => {
    this.inboundButton = this.goingToChangeTabIndex
  }
  cancel = () => {
    this.changeTabController.close()
  }
  changeTabController: CustomDialogController = new CustomDialogController({
    builder: SureToDoDialog(
      {
        cancel: this.cancel,
        confirm: this.sureToChangeTab,
        title: "提示",
        info: '切换会中断当前的操作'
      }
    ),
    alignment: DialogAlignment.Center,
    customStyle: true,
    autoCancel: false,
  })

  build() {
    Column() {
      TitleStateComp({ isHomePage: this.isHomePage, })
      Column() {
        Row({ space: px2vp(24) }) {
          Row() {
            Text('智能仓储')
              .textAlign(TextAlign.Center)
              .borderRadius(px2vp(16))
              .width(px2vp(this.fourWidth))
              .height(px2vp(80))
              .fontWeight(FontWeight.Medium)
              .fontSize(px2vp(24))
              .fontColor(this.warehouseButton === 0 ? $r('app.color.black_90') : $r('app.color.black_60'))
              .backgroundColor(this.warehouseButton === 0 ? $r('app.color.process_divider_white_color') : '')
              .onClick(() => {
                this.warehouseButton = 0
              })
            // Blank()
            // Text('xxxxxxx')
            //   .textAlign(TextAlign.Center)
            //   .borderRadius(px2vp(16))
            //   .width(px2vp(292))
            //   .height(px2vp(80))
            //   .fontWeight(FontWeight.Medium)
            //   .fontSize(px2vp(24))
            //   .fontColor(this.warehouseButton===1?$r('app.color.black_90'):$r('app.color.black_60'))
            //   .backgroundColor(this.warehouseButton===1?$r('app.color.process_divider_white_color'):'')
            //   .onClick(()=>{
            //     this.warehouseButton=1
            //   })
          }
          .width(px2vp(this.fourWidth))
          .borderRadius(px2vp(16))
          .height(px2vp(80))
          .backgroundColor($r('app.color.black_10'))

          Row({ space: px2vp(24) }) {
            Text('齐套')
              .textAlign(TextAlign.Center)
              .borderRadius(px2vp(16))
              .width(px2vp(this.twoWidth))
              .height(px2vp(80))
              .fontWeight(FontWeight.Medium)
              .fontSize(px2vp(24))
              .fontColor(this.inboundButton === 0 ? $r('app.color.black_90') : $r('app.color.black_60'))
              .backgroundColor(this.inboundButton === 0 ? $r('app.color.process_divider_white_color') : '')
              .onClick(() => {
                this.goingToChangeTab(0)
              })
            Text('手动出库')
              .textAlign(TextAlign.Center)
              .borderRadius(px2vp(16))
              .width(px2vp(this.fourWidth))
              .height(px2vp(80))
              .fontWeight(FontWeight.Medium)
              .fontSize(px2vp(24))
              .fontColor(this.inboundButton === 1 ? $r('app.color.black_90') : $r('app.color.black_60'))
              .backgroundColor(this.inboundButton === 1 ? $r('app.color.process_divider_white_color') : '')
              .onClick(() => {
                this.goingToChangeTab(1)
              })

            // Text('物料流转')
            //   .textAlign(TextAlign.Center)
            //   .borderRadius(px2vp(16))
            //   .width(px2vp(292))
            //   .height(px2vp(80))
            //   .fontWeight(FontWeight.Medium)
            //   .fontSize(px2vp(24))
            //   .fontColor(this.inboundButton === 4 ? $r('app.color.black_90') : $r('app.color.black_60'))
            //   .backgroundColor(this.inboundButton === 4 ? $r('app.color.process_divider_white_color') : '')
            //   .onClick(() => {
            //     this.Button = 1
            //     this.inboundButton = 4
            //   })
            Text('调仓')
              .textAlign(TextAlign.Center)
              .borderRadius(px2vp(16))
              .width(px2vp(this.twoWidth))
              .height(px2vp(80))
              .fontWeight(FontWeight.Medium)
              .fontSize(px2vp(24))
              .fontColor(this.inboundButton === 2 ? $r('app.color.black_90') : $r('app.color.black_60'))
              .backgroundColor(this.inboundButton === 2 ? $r('app.color.process_divider_white_color') : '')
              .onClick(() => {
                this.goingToChangeTab(2)
              })
            Text('统计')
              .textAlign(TextAlign.Center)
              .borderRadius(px2vp(16))
              .width(px2vp(this.twoWidth))
              .height(px2vp(80))
              .fontWeight(FontWeight.Medium)
              .fontSize(px2vp(24))
              .fontColor(this.inboundButton === 3 ? $r('app.color.black_90') : $r('app.color.black_60'))
              .backgroundColor(this.inboundButton === 3 ? $r('app.color.process_divider_white_color') : '')
              .onClick(() => {
                this.goingToChangeTab(3)
              })

          }.width(px2vp(this.fourWidth + this.twoWidth * 3 + 24 * 3))
          .borderRadius(px2vp(16))
          .height(px2vp(80))
          .backgroundColor($r('app.color.black_10'))
        }
        .width(px2vp(1920))
        .height(px2vp(80))
        .padding({ left: px2vp(24), right: px2vp(24) })

        if (this.warehouseButton === 0 && this.inboundButton === 0) {
          //齐套
          Column() {
            CompleteSet()
          }
          .margin({ top: px2vp(20), bottom: $r('app.float.topMargins_20') })
          .width(px2vp(1920))
          .height(px2vp(900))
        } else if (this.warehouseButton === 0 && this.inboundButton === 2) {
          Column() {
            //调仓
            //AdjustStorageView()
            WarehouseMap()
          }
          .width('100%')
          .height('92%')
        } else if (this.warehouseButton === 0 && this.inboundButton === 3) {
          Column() {
            //智能仓储统计
            Statistics()
          }
          .width('100%')
          .height('92%')
        }
        else if (this.warehouseButton === 0 && this.inboundButton === 1) {
          Column() {
            //手动出库
            ManualOutbound()
          }
          .margin({ top: $r('app.float.topMargins_20'), bottom: $r('app.float.topMargins_20') })
          .width('100%')
          .height('92%')
        }
        else if (this.warehouseButton === 0 && this.inboundButton === 4) {
          Column() {
            //物料流转
            MaterialCirculationPage()
          }
          .margin({ top: $r('app.float.topMargins_20'), bottom: $r('app.float.topMargins_20') })
          .width('100%')
          .height('92%')
        }

      }
      .width('100%')
      .height('92%')
      .padding({ left: px2vp(24), right: px2vp(24) })
      .backgroundColor($r('app.color.white_f1f3f5'))
    }.width('100%')
    .height('100%')

  }
}