import { VMHome } from '../../vm/VMHome';
import { VMTabHome } from '../../vm/VMTabHome';
import { abilityAccessCtrl } from '@kit.AbilityKit';
import { BleManager } from 'bozzys_sdk/src/main/ets/ble/BleManager';

/**
 * 首页Tab页面
 */
@Component
export struct TabHome {
  // 父组件传递
  @Link vmHome: VMHome
  // 页面状态
  @State vm: VMTabHome = new VMTabHome()

  aboutToAppear(): void {
    this.vm.init()
  }

  build() {
    Column() {
      this.TopBar()
      Refresh({ refreshing: $$this.vm.isRefreshing }) {
        Column() {
          this.TODOStatus()
          this.TODOList()
        }.width("100%").height("100%")
      }.width("100%").layoutWeight(1).onRefreshing(() => {
        this.vm.onRefresh()
      })
    }
    .width("100%")
    .height("100%")
    .clip(false)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
  }

  /**
   * 顶部状态栏
   */
  @Builder
  TopBar() {
    Column() {
      Row() {
        Stack() {
          Image($r("app.media.user")).fillColor(Color.White)
        }
        .width(36)
        .height(36)
        .borderRadius("50%")
        .backgroundColor("#FFD700")
        .padding(8)

        Column() {
          Text(this.vm.username).fontSize(16).fontColor(Color.White).fontWeight(FontWeight.Medium)
          Text("操作员 电气维护组").fontSize(12).fontColor(Color.White).opacity(0.8)
        }.layoutWeight(1).margin({ left: 10, right: 10 }).alignItems(HorizontalAlign.Start)

        Stack() {
          Image($r("app.media.bell")).width(19).height(19).fillColor(Color.White)
          Text("99")
            .backgroundColor("#FF4500")
            .borderRadius("50%")
            .fontColor(Color.White)
            .fontSize(10)
            .position({ top: -5, left: "52%" })
            .constraintSize({ minWidth: 15, minHeight: 15 })
            .textAlign(TextAlign.Center)
        }.width(36).height(24).onClick(() => {
        })

        Stack() {
          Image($r("app.media.settings")).width(18).height(18).fillColor(Color.White)
        }.width(36).height(24).onClick(() => {
          // const am = abilityAccessCtrl.createAtManager()
          // am.requestPermissionsFromUser(this.getUIContext().getHostContext(), ["ohos.permission.ACCESS_BLUETOOTH"]).then((data) => {
          //   console.log("权限请求", JSON.stringify(data))
          // })
          const bm = new BleManager("CC:BA:97:21:71:CA")
          bm.connect()
        })
      }
      .width("100%")
      .padding({
        left: 16,
        top: 15,
        right: 16,
        bottom: 15
      })
    }
    .width("100%")
    .backgroundColor("#FFA500")
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
  }

  /**
   * 待办状态
   */
  @Builder
  TODOStatus() {
    Column() {
      Text("中午好，今天有2个待办任务")
        .width("100%")
        .height(51)
        .backgroundColor("#E6F7FF")
        .fontSize(14)
        .fontColor("#333333")
        .textAlign(TextAlign.Center)
      Row() {
        Column() {
          Text("2").fontSize(24).fontColor("#FF4500").fontWeight(FontWeight.Bold)
          Text("待处理").fontSize(12).fontColor("#333333").margin({ top: 10, bottom: 5 })
          Image($r("app.media.job_todo")).width(18).height(18).fillColor(Color.Black)
        }
        .margin(5)
        .layoutWeight(1)
        .aspectRatio(1)
        .backgroundColor("#FFF5EB")
        .borderRadius(12)
        .justifyContent(FlexAlign.Center)

        Column() {
          Text("5").fontSize(24).fontColor("#FFA500").fontWeight(FontWeight.Bold)
          Text("进行中").fontSize(12).fontColor("#333333").margin({ top: 10, bottom: 5 })
          Image($r("app.media.job_ing")).width(18).height(18).fillColor(Color.Black)
        }
        .margin(5)
        .layoutWeight(1)
        .aspectRatio(1)
        .backgroundColor("#FFF5EB")
        .borderRadius(12)
        .justifyContent(FlexAlign.Center)

        Column() {
          Text("10").fontSize(24).fontColor("#32CD32").fontWeight(FontWeight.Bold)
          Text("本月完成").fontSize(12).fontColor("#333333").margin({ top: 10, bottom: 5 })
          Image($r("app.media.job_finish")).width(18).height(18).fillColor(Color.Black)
        }
        .margin(5)
        .layoutWeight(1)
        .aspectRatio(1)
        .backgroundColor("#FFF5EB")
        .borderRadius(12)
        .justifyContent(FlexAlign.Center)
      }
      .padding({
        left: 5,
        right: 5,
        top: 10,
        bottom: 10
      })
    }.width("100%").margin({ top: 3 })
  }

  @Builder
  TODOList() {
    List() {
      ListItem() {
        Row() {
          Text("我的当前任务").fontSize(14).fontColor("#333333").fontWeight(FontWeight.Medium)
          Row().layoutWeight(1)
          Text("查看全部").fontSize(14).fontColor("#1E90FF").fontWeight(FontWeight.Medium)
        }.width("100%").height(46).onClick(() => {
          this.vmHome.updateTabIndex(1)
        })
      }

      ForEach([1, 2], (item: number, index: number) => {
        ListItem() {
          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)
        }
        .width("100%")
        .height(175)
        .backgroundColor("#F8F9FA")
        .borderRadius(12)
        .border({ width: 1, color: "#EEEEEE" })
        .margin({ bottom: index == 1 ? 0 : 15 })
        .padding(16)
      })
      ListItem() {
        Row() {
          Text("最新消息").fontSize(14).fontColor("#333333").fontWeight(FontWeight.Medium)
          Row().layoutWeight(1)
          Text("全部消息").fontSize(14).fontColor("#1E90FF").fontWeight(FontWeight.Medium)
        }.width("100%").height(46).onClick(() => {
          this.vmHome.updateTabIndex(2)
        })
      }

      ForEach([1, 2], (item: number) => {
        ListItem() {
          Column() {
            Text("系统通知：您有新的作业任务待处理，请及时查看并执行操作,请及时查看并执行操作,请及时查看并执行操作,请及时查看并执行操作")
              .fontSize(14)
              .fontColor("#333333")
              .textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(2)
            Text("5分钟前")
              .layoutWeight(1)
              .width("100%")
              .textAlign(TextAlign.End)
              .fontSize(12)
              .fontColor("#999999")
          }
          .width("100%")
          .height("100%")
          .justifyContent(FlexAlign.Start)
          .alignItems(HorizontalAlign.Start)
          .padding(16)
        }
        .width("100%")
        .height(102)
        .backgroundColor("#F8F9FA")
        .borderRadius(12)
        .border({ width: 1, color: "#EEEEEE" })
        .margin({ bottom: 15 })
      })
    }
    .width("100%").layoutWeight(1).padding({ left: 16, right: 16 }).scrollBar(BarState.Off)
  }
}