import {OrderParams,MaterialItem,MaterialBox} from "../params/orderMaterialsStorageParams"
@Component
export struct ProcessFlow {
  @Prop circle1Color : string
  @Prop circle2Color : string
  @Prop circle3Color : string
  build() {
    Row() {
      // 步骤1
      FlowStep({
        stepNumber: 1,
        title: '选择订单',
        showConnector: true,
        backColor:this.circle1Color
      })
      // 步骤2
      FlowStep({
        stepNumber: 2,
        title: '调取料箱',
        showConnector: true,
        backColor:this.circle2Color
      })
      // 步骤3
      FlowStep({
        stepNumber: 3,
        title: '绑定入库',
        showConnector: false,
        backColor:this.circle3Color
      })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
  }
}

@Component
struct FlowStep {
  @Prop stepNumber: number
  @Prop title: string
  @Prop showConnector: boolean
  @Prop backColor : string
  build() {
    Row() {
      Column() {
        // 步骤圆圈
        Column() {
          Text(this.stepNumber.toString())
            .fontSize(16)
            .fontColor('#FFFFFF') // 深灰数字
        }
        .width(40)
        .height(40)
        .borderRadius(20) // 圆形
        .backgroundColor(this.backColor) // 浅灰背景
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)

        // 步骤文字
        Text(this.title)
          .fontSize(14)
          .margin({ top: 8 })
          .fontColor('#000000') // 黑色文字

        // 连接线（最后一个步骤不显示）
      }
      .justifyContent(FlexAlign.Center)
      .alignItems(HorizontalAlign.Center)

      if (this.showConnector) {
        Divider()
          .vertical(false)
          .strokeWidth(1)
          .color('#1890FF')
          .margin({ left: 10, right: 10,bottom:15 })
          .width('15%')
      }
    }
  }
}

// 订单项组件封装
@Component
export struct OrderItemView {
  @Prop orderName: string = '默认订单'
  @Prop orderNo: string = '000000'
  @Prop orderDate: string = '2023/01/01'
  @Prop progress: string = '0%'
  @Prop isSelected: boolean = false

  private onSelect: (index: number) => void = () => {}
  private index: number = 0

  build() {
    Column() {
      Text(this.orderName)
        .fontSize(16)
        .fontColor(this.isSelected ? '#FFFFFF' : '#000000')

      Text(`入库单号: ${this.orderNo}`)
        .fontSize(14)
        .fontColor(this.isSelected ? '#FFFFFF' : '#666666')

      Text(`下发时间: ${this.orderDate}`)
        .fontSize(14)
        .fontColor(this.isSelected ? '#FFFFFF' : '#666666')
        .margin({ top: 8 })

      Text(`入库比例: ${this.progress}`)
        .fontSize(14)
        .fontColor(this.isSelected ? '#FFFFFF' : '#1890FF')
        .margin({ top: 8 })
    }
    .backgroundColor(this.isSelected ? '#1890FF' : '#DFE5E7')
    .onClick(() => {
      this.onSelect(this.index)  // 点击时调用父组件的选中方法
    })
    .padding(16)
    .border({
      width: 1,
      color: this.isSelected ? '#1890FF' : '#CCCCCC',
      radius: 4
    })
    .width('100%')
  }
}

// 订单列表容器
@Component
export struct OrderListView {
  private scrollerForList: Scroller = new Scroller()
  @Prop orders: OrderParams[] = []
  @State selectedIndex: number = -1  // 添加选中索引状态
  @Link selectedOrderNo: string
  @Link selectedOrderDate: string
  @Link selectedOrderName: string

  // 处理选中逻辑
  private handleSelect(index: number): void {
    this.selectedIndex = index
    this.selectedOrderNo = this.orders[index].orderNo
    this.selectedOrderDate = this.orders[index].date
    this.selectedOrderName = this.orders[index].orderName
  }

  build() {
    List({ space: 12 ,scroller: this.scrollerForList}) {
      ForEach(this.orders, (item:OrderParams, index) => {
        ListItem() {
          OrderItemView({
            orderName: item.orderName,
            orderNo: item.orderNo,
            orderDate: item.date,
            progress: item.progress,
            isSelected: index === this.selectedIndex,
            onSelect: () => this.handleSelect(index),
            index: index
          })
        }
      })
    }
    .width('100%')
    .height('100%')
    .listDirection(Axis.Vertical)
    .divider({
      strokeWidth: 1,
      color: '#F0F0F0',
      startMargin: 16,
      endMargin: 16
    })
  }
}

@Component
export struct MaterialGrid {
  @Prop materials: MaterialItem[] = [];

  build() {
    Grid() {
      ForEach(this.materials, (item:MaterialItem) => {
        GridItem() {
          Column() {
            // 物料名称
            Text(item.name)
              .fontSize(16)
              .fontWeight(FontWeight.Bold)
              .margin({ bottom: 8 })
              .width('100%')
              .textAlign(TextAlign.Start)

            // 产品型号
            Text(item.model)
              .fontSize(14)
              .fontColor('#666666')
              .margin({ bottom: 12 })
              .width('100%')
              .textAlign(TextAlign.Start)

            // 数量进度
            Row() {
              Text(`已入库: ${item.completed}`)
                .fontSize(14)

              Text('/')
                .margin({ left: 4, right: 4 })

              Text(`计划: ${item.planned}`)
                .fontSize(14)
                .fontColor('#1890FF')
            }
            .width('100%')
            .justifyContent(FlexAlign.SpaceBetween)
          }
          .padding(12)
          .backgroundColor('#FFFFFF')
          .borderRadius(4)
          .border({
            width: 1,
            color: '#F0F0F0'
          })
        }
      })
    }
    .columnsTemplate('1fr 1fr 1fr')
    .columnsGap(10)  // 移除网格内部列间距
    .rowsGap(0)     // 移除网格内部行间距

    .width('100%')  // 确保填满父容器
    .height('100%')
    .padding(10)
    .backgroundColor('#F5F5F5')     // 背景色与图片一致
  }
}

@Component
export struct SingleOrder {
  @Prop selectedOrderNo: string
  @Prop selectedOrderDate: string
  @Prop selectedOrderName: string
  build() {
    Column() {
      // 订单标题
      Text(this.selectedOrderName)
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 12 })
      // 订单详情
      Text("入库单号： "+this.selectedOrderNo)
        .fontSize(14)
        .fontColor('#666666')
        .margin({ bottom: 8 })

      Text("下发时间： "+this.selectedOrderDate)
        .fontSize(14)
        .fontColor('#666666')
    }
    .padding(16)
    .backgroundColor('#F5F5F5') // 浅灰背景
    .width('100%') // 占Row的50%
    .alignItems(HorizontalAlign.Center)
  }
}

@Component
export struct materialScan {
  // @Prop selectedOrderNo: string
  // @Prop selectedOrderDate: string
  // @Prop selectedOrderName: string
  build() {
    Column() {
      // 扫码标题
      Text('物料扫码')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: '5%' })

      // 扫码提示
      TextInput({ placeholder: '请扫描物料编码' })
        .type(InputType.Normal)
        .placeholderFont({ size: 16 })
        .fontSize(16)
        .width('100%')
        .height(40)
        .margin({ bottom: '5%' })
        .border({
          width: 1,
          color: '#1890FF', // 使用图片中的蓝色边框
          radius: 4
        })
        .backgroundColor('#FFFFFF') // 白色背景

      // 操作说明
      Text('扫码查询同类物料，选择放入已有物料箱或空箱')
        .fontSize(12)
        .fontColor('#999999')
        .margin({ bottom: '15%' })
        .width('100%')

      // 物料信息展示区
      Column() {
        Text('物料名称XXXXXXX')
          .fontSize(16)
          .margin({ bottom: 8 })

        Text('产品型号xxxxxxx')
          .fontSize(14)
          .fontColor('#666666')
          .margin({ bottom: 8 })

        Text('序列号：2131231231')
          .fontSize(14)
          .margin({ bottom: 8 })

        Text('数量：500个')
          .fontSize(14)
          .fontColor('#1890FF')
      }
    }
    .padding(16)
    .backgroundColor('#F5F5F5') // 浅灰背景
    .width('100%') // 占Row的50%
    .alignItems(HorizontalAlign.Center)
  }
}

@Component
export struct BoxGrid {
  @Prop boxes: MaterialBox[] = [];


  build() {
    Grid() {
      ForEach(this.boxes, (box:MaterialBox) => {
        GridItem() {
          Column() {
            // 顶部标题区
            Text(box.name)
              .fontSize(16)
              .fontWeight(FontWeight.Bold)
              .width('100%')
              .textAlign(TextAlign.Center)
              .margin({ bottom: 8 })
            if (box.type === 'empty') {
              Text('空箱图片')
                .fontSize(14)
                .fontColor('#FF0000')// 红色文字
                .width('90%')
                .height(60)
                .backgroundColor('#FFFFFF')
                .textAlign(TextAlign.Center)
                .margin({ bottom: 8 })
            }
            BoxInfoRow({ label: '料箱编号', value: box.boxNumber})
            BoxInfoRow({ label: '位置', value: box.position })
            if (box.type === 'material') {
              BoxInfoRow({ label: '料箱类型', value: box.boxType })
              BoxInfoRow({ label: '所属订单', value: box.order || '' })
              BoxInfoRow({ label: '数量', value: `${box.quantity}` })
            }

          }.width('100%')
          .height('40%')
          .padding(12)
          .backgroundColor('#FFFFFF')
          .borderRadius(4)
          .border({
            width: 1,
            color: '#F0F0F0'
          })
        }
      })
    }
    .columnsTemplate('1fr 1fr 1fr')
    .columnsGap(10)  // 移除网格内部列间距
    .rowsGap(10)     // 移除网格内部行间距
    .width('100%')  // 确保填满父容器
    .height('100%')
    .padding(10)
    .backgroundColor('#F5F5F5')     // 背景色与图片一致

  }

}

// 辅助组件：料箱信息行
@Component
struct BoxInfoRow {
  @Prop label: string = ''
  @Prop value: string = ''

  build() {
    Row() {
      Text(`${this.label}：`)
        .fontSize(14)
        .fontColor('#666666')

      Text(this.value)
        .fontSize(14)
        .fontColor('#000000')
    }
    .width('100%')
    .margin({ bottom: 6 })
    .justifyContent(FlexAlign.Start)
  }
}