import { VMTabJobs } from '../../vm/VMTabJobs'

@Component
export struct TabJobs {
  @State vm: VMTabJobs = new VMTabJobs()

  build() {
    Column() {
      this.TopBar()
      Refresh({ refreshing: $$this.vm.isRefreshing }) {
        List() {
          ForEach(["今天", 2, 3, "昨天", 5, 6, 7, 8], (item: object, idx: number) => {
            if (idx == 0 || idx == 3) {
              ListItem() {
                this.ListItemTitle(item.toString())
              }
            } else {
              ListItem() {
                this.ListItemContent()
              }
              .width("100%")
              .height(175)
              .backgroundColor("#F8F9FA")
              .borderRadius(12)
              .border({ width: 1, color: "#EEEEEE" })
              .margin({ bottom: idx + 1 == 3 ? 0 : 15 })
              .padding(16)
            }
          })
        }.width("100%").height("100%").padding({ left: 16, right: 16 }).scrollBar(BarState.Off)
      }.width("100%").layoutWeight(1).onRefreshing(() => {
        this.vm.onRefresh()
      })
    }
    .width("100%")
    .height("100%")
    .clip(false)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
  }

  /**
   * 顶部状态栏
   */
  @Builder
  TopBar() {
    Column() {
      Row() {
        Text("我的作业")
          .fontSize(18)
          .fontColor(Color.White)
          .fontWeight(FontWeight.Medium)
          .height(36)
          .layoutWeight(1)

        Stack() {
          Image($r("app.media.add")).width(20).height(20).fillColor(Color.White)
        }.width(36).height(24).onClick(() => {
        })
      }
      .width("100%")
      .padding({
        left: 16,
        top: 15,
        right: 16,
        bottom: 15
      })
    }
    .width("100%")
    .backgroundColor("#FFA500")
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
  }

  @Builder
  ListItemTitle(title: string) {
    Text(title).fontColor("#333333").fontSize(16).height(45)
  }

  @Builder
  ListItemContent() {
    Column() {
      Row() {
        Text("冷却水系统能量隔离作业").fontSize(15).fontColor("#333333").fontWeight(FontWeight.Medium)
        Row().layoutWeight(1)
        Text("待办")
          .fontSize(12)
          .fontColor("#333333")
          .backgroundColor("#FFD700")
          .borderRadius(20)
          .height(24)
          .padding({ left: 10, right: 10 })
          .textAlign(TextAlign.Center)
      }

      Flex({ wrap: FlexWrap.Wrap, alignItems: ItemAlign.Center, direction: FlexDirection.Row }) {
        Image($r("app.media.location")).width(12).height(12).fillColor("#1E90FF").margin({ right: 5 })
        Text("车间B区")
          .fontSize(13)
          .fontColor("#666666")
          .margin({ right: 12 })
          .height(24)
          .textAlign(TextAlign.Center)
        Image($r("app.media.user")).width(12).height(12).fillColor("#666666").margin({ right: 5 })
        Text("负责人：王主管哈哈哈哈")
          .fontSize(13)
          .fontColor("#666666")
          .margin({ right: 12 })
          .height(24)
          .textAlign(TextAlign.Center)
        Image($r("app.media.jobs")).width(12).height(12).fillColor("#666666").margin({ right: 5 })
        Text("WO-2025-005")
          .fontSize(13)
          .fontColor("#666666")
          .margin({ right: 12 })
          .height(24)
          .textAlign(TextAlign.Center)
      }.margin({ top: 10 })

      Text("作业内容：上锁挂牌").fontSize(13).fontColor("#666666").height(24).textAlign(TextAlign.Center)

      Row() {
        Text("今天 14:00").layoutWeight(1).margin({ right: 10 }).fontColor("#999999").fontSize(12)
        Button("查看详情")
          .height(35)
          .padding({ left: 15, right: 15 })
          .backgroundColor("#4682B4")
          .borderRadius(4)
          .fontSize(13)
          .fontWeight(FontWeight.Medium)
      }.width("100%").layoutWeight(1)
    }.width("100%").height("100%").justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start)
  }
}