import CommonConstants from '../../common/constants/CommonConstants'
import WmsRequest from '../../common/util/request/WmsRequest'
import StationOperationInfo from '../../viewmodel/wms/StationOperationInfo'
import OperationInfo from '../../viewmodel/wms/OperationInfo'
import RequestParamModel from '../../viewmodel/wms/RequestParamModel'
import WorkOrderInfo from '../../viewmodel/wms/WorkOrderInfo'
import OperationMaterial from '../../viewmodel/wms/OperationMaterial'
import OperationItem from '../../viewmodel/wms/OperationItem'
import HashMap from '@ohos.util.HashMap'
import DictInfo from '../../viewmodel/DictInfo'

@Component
export struct OperationMaterialKitOneStep {
  // 选择的工单
  @Link workOrder: WorkOrderInfo
  // 选中的工序数组
  @Link selectOperations: OperationInfo[]
  // 选中工序需要的物料
  @Link operationItems: OperationItem[]
  
  @State workOrderArray: WorkOrderInfo[] = []
  @State stationOperations: StationOperationInfo[] = []
  @State operationMaterialArray: OperationMaterial[] = []

  @State selectWorkOrder: number = 0
  @State selectOperationIds: string[] = []
  selectStationSortId: number = 0

  fixed38px: number = 22.8
  fixed52px: number = 31.2
  fixed100px: number = 60

  stationTypeDictType: string = 'station_type'
  stationTypeDictMap: HashMap<string, string> = new HashMap<string, string>()
  // 选中工序方法
  selectOperationFunc = async (operation: OperationInfo)=>{
    if (this.selectOperationIds.length > 0 && this.selectStationSortId != operation.stationSortId) {
      this.selectOperationIds = []
      this.selectOperations = []
      this.selectStationSortId = operation.stationSortId!
    }
    if (this.selectOperationIds.includes(operation.id!)) {
      this.selectOperationIds.splice(this.selectOperationIds.indexOf(operation.id!), 1)
      this.selectOperations.splice(this.selectOperations.indexOf(operation), 1)
    } else {
      this.selectOperationIds.push(operation.id!)
      this.selectOperations.push(operation)
    }
    this.operationMaterialArray = await WmsRequest.post('/api/v1/wms/operationMaterial/list', {
      //查询工序需求的物料
      operationIds: this.selectOperationIds,
    } as RequestParamModel) as OperationMaterial[]
    this.operationItems = []
    if (this.operationMaterialArray) {
      for (const element of this.operationMaterialArray) {
        this.operationItems = this.operationItems.concat(element.itemList!);
      }
    }
  }

  async aboutToAppear() {
    this.workOrderArray = await WmsRequest.post('/api/v1/wms/workOrder/list', {
      //查询未完成的工单
      queryComplete: 0,
    } as RequestParamModel) as WorkOrderInfo[]
    if (this.workOrderArray && this.workOrderArray.length > 0) {
      this.workOrder = this.workOrderArray[0]
      this.selectWorkOrder = 0
      this.stationOperations = await WmsRequest.post('/api/v1/wms/operation/list', {
        //查询未完成的工单
        processRouteId: this.workOrderArray[0]?.processRouteId,
      } as RequestParamModel) as StationOperationInfo[]
    }
    if (!CommonConstants.DICT_DATA || CommonConstants.DICT_DATA.length <= 0) {
      let res: DictInfo[] = await WmsRequest.post('/api/v1/sys/dictData/all',)
      if (res && res.length > 0) {
        for (const dict of res) {
          CommonConstants.DICT_DATA.set(dict.dictCode, dict.list)
          if (this.stationTypeDictType === dict.dictCode) {
            for (const element of dict?.list!) {
              this.stationTypeDictMap.set(element.dictValue, element.dictLabel);
            }
          }
        }
      }
    } else {
      let dictList = CommonConstants.DICT_DATA.get(this.stationTypeDictType);
      for (const element of dictList) {
        this.stationTypeDictMap.set(element.dictValue, element.dictLabel);
      }
    }
  }

  build() {
    Row() {
      // 选择工单
      Column() {
        Row() {
          Text('选择工单')
            .fontSize($r('app.float.fontSize_30'))
            .fontColor($r('app.color.FFFFFF'))
            .fontWeight(FontWeight.Medium)
        }
        .height('10%')
        .width('100%')
        .justifyContent(FlexAlign.Center)

        List({space: 5}) {
          ForEach(this.workOrderArray, (item: WorkOrderInfo, index: number) => {
            ListItem() {
              Column() {
                Row() {
                  Text((item.orderName ? item.orderName : '') + (item.orderCode ? item.orderCode : ''))
                    .fontSize($r('app.float.fontSize_24'))
                    .fontWeight(FontWeight.Medium)
                    .fontColor($r('app.color.FFFFFF'))
                    .maxLines(1)
                }
                .height('38%')
                .width('91%')
                .alignItems(VerticalAlign.Bottom)

                Column() {
                  Text('工单编号：' + (item.workOrderCode ? item.workOrderCode : ''))
                    .fontSize($r('app.float.fontSize_16'))
                    .fontWeight(FontWeight.Lighter)
                    .fontColor($r('app.color.FFFFFF'))
                    .maxLines(1)

                  Text('下发时间：' + item.updated)
                    .fontSize($r('app.float.fontSize_16'))
                    .fontWeight(FontWeight.Lighter)
                    .fontColor($r('app.color.FFFFFF'))
                    .maxLines(1)

                  Text('齐套进度：' + (item.kitCompleteProgress ? item.kitCompleteProgress : 0) + '%')
                    .fontSize($r('app.float.fontSize_16'))
                    .fontWeight(FontWeight.Lighter)
                    .fontColor($r('app.color.FFFFFF'))
                    .maxLines(1)
                }
                .height('48.3%')
                .width('91%')
                .alignItems(HorizontalAlign.Start)
                .justifyContent(FlexAlign.SpaceAround)
              }
              .height('15.4%')
              .width('92.6%')
              .borderRadius($r('app.float.virtualSize_16'))
              .justifyContent(FlexAlign.Start)
              .backgroundColor(this.selectWorkOrder === index ? $r('app.color.2030D158') : $r('app.color.20FFFFFF'))
              .borderWidth(1)
              .borderColor(this.selectWorkOrder === index ? $r('app.color.30D158') : $r('app.color.20FFFFFF'))
              .onClick(async ()=>{
                if (this.selectWorkOrder === index) {
                  return
                }
                this.stationOperations = await WmsRequest.post('/api/v1/wms/operation/list', {
                  //查询未完成的工单
                  processRouteId: this.workOrderArray[index]?.processRouteId,
                } as RequestParamModel) as StationOperationInfo[]
                if (this.stationOperations) {
                  for (const station of this.stationOperations) {
                    if (station.operationList) {
                      for (const operation of station.operationList) {
                        operation.stationSortId = station.sortId!
                      }
                    }
                  }
                }
                this.selectWorkOrder = index
                this.workOrder = this.workOrderArray[this.selectWorkOrder]
              })
            }
          })
        }
        .width('100%')
        .height('90%')
        .alignListItem(ListItemAlign.Center)
      }
      .height('100%')
      .width('29.6%')
      .borderRadius($r('app.float.virtualSize_16'))
      .justifyContent(FlexAlign.Center)
      .backgroundColor($r('app.color.10FFFFFF'))
      Image($r("app.media.wms_arrow_right"))
        .height($r('app.float.virtualSize_48'))
        .width($r('app.float.virtualSize_48'))
      // 选择工序
      Column() {
        Row() {
          Text('选择工序')
            .fontSize($r('app.float.fontSize_30'))
            .fontColor($r('app.color.FFFFFF'))
            .fontWeight(FontWeight.Medium)
        }
        .height('10%')
        .width('100%')
        .justifyContent(FlexAlign.Center)
        // 工序列表
        List() {
          ForEach(this.stationOperations, (item: StationOperationInfo, index: number) => {
            ListItem() {
              Column() {
                Row() {
                  Row() {
                    Text(this.stationTypeDictMap.get(item.stanType!) ? this.stationTypeDictMap.get(item.stanType!) : item.stanType!)
                      .fontSize($r('app.float.fontSize_16'))
                      .fontWeight(FontWeight.Lighter)
                      .fontColor($r('app.color.FFFFFF'))
                  }
                  .height('100%')
                  .width('40%')
                  .alignItems(VerticalAlign.Center)
                  .justifyContent(FlexAlign.Start)

                  Column() {
                    ForEach(item.operationList, (operation: OperationInfo, index: number) => {
                      Column() {
                        Row().height(6)
                        Row({space: 5}) {
                          Checkbox()
                            .select(this.selectOperationIds.indexOf(operation.id) > -1 ? true : false)
                            .selectedColor($r('app.color.30D158'))
                            .width($r('app.float.virtualSize_24'))
                            .height($r('app.float.virtualSize_24'))
                            .onChange(async (value: boolean) => {
                              if (value) {
                                if (!this.selectOperationIds.includes(operation.id)) {
                                  this.selectOperationFunc(operation)
                                }
                              } else {
                                if (this.selectOperationIds.includes(operation.id)) {
                                  this.selectOperationIds.splice(this.selectOperationIds.indexOf(operation.id), 1)
                                  this.selectOperations.splice(this.selectOperations.indexOf(operation), 1)
                                }
                              }
                            })
                          Text(operation.operationName ? operation.operationName : '')
                            .fontSize($r('app.float.fontSize_24'))
                            .fontWeight(FontWeight.Medium)
                            .fontColor($r('app.color.FFFFFF'))
                        }
                        .width('100%')
                        .height(48)
                        .padding({left: '6%'})
                        .backgroundColor(this.selectOperationIds.indexOf(operation.id) > -1 ? $r('app.color.2030D158') : $r('app.color.20FFFFFF'))
                        .borderWidth(1)
                        .borderColor(this.selectOperationIds.indexOf(operation.id) > -1 ? $r('app.color.30D158') : $r('app.color.20FFFFFF'))
                        .borderRadius($r('app.float.virtualSize_16'))
                        .onClick(async ()=>{
                          this.selectOperationFunc(operation)
                        })
                        Row().height(6)
                      }
                      .justifyContent(FlexAlign.Center)
                    })
                  }
                  .width('60%')
                  .height('100%')
                  .justifyContent(FlexAlign.Center)
                }
                Divider().vertical(false)
                  .color($r('app.color.15FFFFFF'))
                  .width('100%')
              }
              .width('92.6%')
              .height(item.operationList?.length! * this.fixed100px)
            }
          })
        }
        .width('100%')
        .height('90%')
        .alignListItem(ListItemAlign.Center)
      }
      .height('100%')
      .width('29.6%')
      .borderRadius($r('app.float.virtualSize_16'))
      .justifyContent(FlexAlign.Center)
      .backgroundColor($r('app.color.10FFFFFF'))
      Image($r("app.media.wms_arrow_right"))
        .height($r('app.float.virtualSize_48'))
        .width($r('app.float.virtualSize_48'))
      // 工序所需物料
      Column() {
        Row() {
          Text('需求物料')
            .fontSize($r('app.float.fontSize_30'))
            .fontColor($r('app.color.FFFFFF'))
            .fontWeight(FontWeight.Medium)
        }
        .height('10%')
        .width('100%')
        .justifyContent(FlexAlign.Center)

        List() {
          ForEach(this.operationMaterialArray, (item: OperationMaterial, index: number) => {
            ListItem() {
              Column() {
                Row({space: 5}) {
                  Circle()
                    .width($r('app.float.virtualSize_5'))  // 设置圆点直径
                    .height($r('app.float.virtualSize_5'))
                    .fill($r('app.color.FFFFFF'))
                  Text(item.operationName ? item.operationName : '')
                    .fontSize($r('app.float.fontSize_24'))
                    .fontWeight(FontWeight.Medium)
                    .fontColor($r('app.color.FFFFFF'))
                    .maxLines(1)
                }
                .height(this.fixed52px)
                .width('100%')
                .alignItems(VerticalAlign.Center)
                ForEach(item.itemList, (material: OperationItem)=>{
                  Column({space: 5}) {
                    Row() {
                      Text(material.itemName! + '-' + material.itemCode!)
                        .fontSize($r('app.float.fontSize_16'))
                        .fontWeight(FontWeight.Bold)
                        .fontColor($r('app.color.FFFFFF'))
                        .maxLines(1)

                      Text((material.kitNum? material.kitNum : 0) + '/' + (material.storageNum? material.storageNum : 0))
                        .fontSize($r('app.float.fontSize_16'))
                        .fontWeight(FontWeight.Bold)
                        .fontColor($r('app.color.FFFFFF'))
                        .maxLines(1)
                    }
                    .width('100%')
                    .justifyContent(FlexAlign.SpaceBetween)
                    Row() {
                      Text('型号：' + (material.itemModel ? material.itemModel : ''))
                        .fontSize($r('app.float.fontSize_12'))
                        .fontWeight(FontWeight.Lighter)
                        .fontColor($r('app.color.FFFFFF'))
                        .maxLines(1)
                      Text('齐套/入库数量')
                        .fontSize($r('app.float.fontSize_12'))
                        .fontWeight(FontWeight.Lighter)
                        .fontColor($r('app.color.60FFFFFF'))
                    }
                    .width('100%')
                    .justifyContent(FlexAlign.SpaceBetween)

                    Divider().vertical(false)
                      .color($r('app.color.15FFFFFF'))
                      .width('100%')
                  }
                  .width('100%')
                  .height(this.fixed52px)
                  .justifyContent(FlexAlign.End)
                })
                Row().height(this.fixed38px)
              }
              .height((item.itemList?.length! + 1) * this.fixed52px + this.fixed38px)
              .width('92.6%')
              .justifyContent(FlexAlign.Start)
            }
          })
        }
        .width('100%')
        .height('90%')
        .alignListItem(ListItemAlign.Center)
      }
      .height('100%')
      .width('29.6%')
      .borderRadius($r('app.float.virtualSize_16'))
      .justifyContent(FlexAlign.Center)
      .backgroundColor($r('app.color.10FFFFFF'))
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceBetween)
  }
}