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'

/*
 * 出库工位
 * */
@Entry
@Component
struct OutboundStation {
  //齐套按钮(0:齐套 1:手动出库 2:调仓：3:统计)
  @State inboundButton: number = 0
  @State Button: number = 0
  //仓储和其他仓储点击按钮变色
  @State warehouseButton: number = 0
  @State isHomePage: boolean = false

  build() {
    Column() {
      TitleStateComp({ isHomePage: this.isHomePage, })
      Column() {
        Row({ space: px2vp(24) }) {
          Row() {
            Text('智能仓储')
              .textAlign(TextAlign.Center)
              .borderRadius(px2vp(16))
              .width(px2vp(292))
              .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(608))
          .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(292))
              .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.inboundButton = 0
              })
            Text('手动出库')
              .textAlign(TextAlign.Center)
              .borderRadius(px2vp(16))
              .width(px2vp(292))
              .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.inboundButton = 1
              })
            Text('调仓')
              .textAlign(TextAlign.Center)
              .borderRadius(px2vp(16))
              .width(px2vp(292))
              .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.inboundButton = 2
              })
            Text('统计')
              .textAlign(TextAlign.Center)
              .borderRadius(px2vp(16))
              .width(px2vp(146))
              .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.inboundButton = 3
              })
            Text('叫车')
              .textAlign(TextAlign.Center)
              .borderRadius(px2vp(16))
              .width(px2vp(124))
              .height(px2vp(80))
              .fontWeight(FontWeight.Medium)
              .fontSize(px2vp(24))
              .fontColor(this.Button === 1 ? $r('app.color.black_90') : $r('app.color.black_60'))
              .backgroundColor(this.Button === 1 ? $r('app.color.process_divider_white_color') : '')
              .onClick(() => {
                this.Button = 1

              })

          }.width(px2vp(1240))
          .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%')
        }
      }
      .width('100%')
      .height('92%')
      .padding({ left: px2vp(24), right: px2vp(24) })
      .backgroundColor($r('app.color.white_f1f3f5'))
    }.width('100%')
    .height('100%')

  }
}