import TimeUtil from "../util/TimeUtil"
@Component
export struct TimeAndTitle {
  @State currentTime: string = TimeUtil.getHourAndMinute(); // 响应式时间数据
  @State timePeriod: string = TimeUtil.getTimePeriod();
  @State dateAndWeek: string = TimeUtil.getDateAndWeek();
  private timerID: number | undefined; // 定时器ID
  aboutToAppear() {
    this.timerID = setInterval(() => {
      this.updateAllTime(); // 每秒更新
    }, 1000);
  }
  aboutToDisappear() {
    if (this.timerID) {
      clearInterval(this.timerID);
    }
  }
  private updateAllTime() {
    this.currentTime = TimeUtil.getHourAndMinute();
    this.timePeriod = TimeUtil.getTimePeriod();
    this.dateAndWeek = TimeUtil.getDateAndWeek();
  }

  build() {
    Row() {
      Row(){
        Text(this.dateAndWeek)
          .fontSize($r('app.float.fontSize_16'))
          .fontColor($r('app.color.FFFFFF'))
          .fontWeight(FontWeight.Lighter)
        Text(' ' + this.timePeriod)
          .fontSize($r('app.float.fontSize_16'))
          .fontColor($r('app.color.FFFFFF'))
          .fontWeight(FontWeight.Lighter)
        Text(' ' + this.currentTime)
          .fontSize($r('app.float.fontSize_16'))
          .fontColor($r('app.color.FFFFFF'))
          .fontWeight(FontWeight.Lighter)
      }
      Row() {
        Image($r('app.media.state_ai'))
          .width($r('app.float.virtualSize_24'))
          .height($r('app.float.virtualSize_24'))
          .fillColor($r('app.color.FFFFFF'))
        Image($r('app.media.state_ipc'))
          .width($r('app.float.virtualSize_24'))
          .height($r('app.float.virtualSize_24'))
          .fillColor($r('app.color.FFFFFF'))
        Image($r('app.media.state_voice'))
          .width($r('app.float.virtualSize_24'))
          .height($r('app.float.virtualSize_24'))
          .fillColor($r('app.color.FFFFFF'))
        Image($r('app.media.state_microphone'))
          .width($r('app.float.virtualSize_24'))
          .height($r('app.float.virtualSize_24'))
          .fillColor($r('app.color.FFFFFF'))
      }
      .width('10%')
      .justifyContent(FlexAlign.SpaceEvenly)
      .alignItems(VerticalAlign.Bottom)
      .margin({ right: 1 })
      .height('100%')
    }
    .justifyContent(FlexAlign.SpaceEvenly)
    .alignItems(VerticalAlign.Bottom)
  }
}