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

@Component
export struct TabMessage {
  @State vm: VMTabMessage = new VMTabMessage()

  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(122)
              .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.all_read")).width(20).height(20).fillColor(Color.White).objectFit(ImageFit.Auto)
        }.width(36).height(24).onClick(() => {
        })

        Stack() {
          Image($r("app.media.delete")).width(18).height(18).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() {
    Row() {
      Stack() {
        Image($r("app.media.jobs")).fillColor(Color.White)
      }
      .width(40)
      .height(40)
      .padding(12)
      .borderRadius("50%")
      .backgroundColor("#1E90FF")
      .alignSelf(ItemAlign.Start)
      .clip(false)

      Column() {
        Text("新任务分配").fontSize(15).fontColor("#333333").fontWeight(FontWeight.Medium).margin({ bottom: 10 })
        Text("您有新的作业任务待处理，作业票号：WO-2025-003").fontSize(13).fontColor("#666666").lineHeight(18)
        Row().layoutWeight(1)
        Row() {
          Text("09:45").layoutWeight(1).fontSize(12).fontColor("#999999")
          Text("作业管理").fontSize(12).fontColor("#999999")
        }
      }.layoutWeight(1).height("100%").padding({ left: 15, right: 10 }).alignItems(HorizontalAlign.Start)

      Row().width(8).height(8).backgroundColor("#FF4500").borderRadius("50%")
    }.width("100%").height("100%")
  }
}