ItemDetail.ets

// 事项详情页面
import CommonConstants from '../public/CommonConstant'
import DataModel from '../viewmodel/DataModel'
import TodoItemModel from '../viewmodel/TodoItemModel'
import { promptAction } from '@kit.ArkUI'

@Component
@Preview
export default struct ItemDetail {
  @Consume('localPageStack') LocalPageStack: NavPathStack

  content: TodoItemModel = new TodoItemModel('', '', '', '', false)

  build() {
    NavDestination() {
      Column() {
        this.TopBar()
        this.MainPage()
      }
      .width('100%')
      .height('100%')
      .backgroundColor($r("app.color.grey"))
      .margin({bottom:10})

    }
    .hideTitleBar(true)
  }

  @Builder
  TopBar() {
    Row() {
      Column() {
        Button('<')
          .fontSize(CommonConstants.button_font_size)
          .width(CommonConstants.button_size)
          .height(CommonConstants.button_size)
          .margin({
            top: CommonConstants.button_margin_top,
            bottom: CommonConstants.button_margin_bottom,
          })
          .onClick(() => {
            this.LocalPageStack.pop()
          })
      }

      Column() {
        Text('事项详情')
          .fontWeight(FontWeight.Bold)
          .fontSize(CommonConstants.title1_font_size)
          .lineHeight(CommonConstants.title1_font_height)
          .width(CommonConstants.title1_width)
          .margin({
            top: CommonConstants.title1_margin_top,
            bottom: CommonConstants.title1_margin_bottom,
          })
          .textAlign(TextAlign.Center)
      }
      .width(CommonConstants.mid_title_col_width)

      Column() {
        Button('×')
          .fontSize(CommonConstants.button_font_size_yes)
          .width(CommonConstants.button_size)
          .height(CommonConstants.button_size)
          .margin({
            top: CommonConstants.button_margin_top,
            bottom: CommonConstants.button_margin_bottom,
          })
          .onClick(() => {
            this.deleteItem()
          })
      }
    }
  }

  @Builder
  MainPage() {
/*    Column() {
      Row() {
        Text('名字')
          .fontSize(CommonConstants.detail_title_font_size)
          .fontWeight(FontWeight.Bold)
          .width(CommonConstants.detail_width)
          .margin({
            left: CommonConstants.detail_margin_Left
          })

        Text(this.content.itemName)
          .fontSize(CommonConstants.detail_font_size)
          .width(CommonConstants.detail_width)
          .textAlign(TextAlign.Center)
      }
    }
    .margin({
      top: CommonConstants.list_margin_top
    })
    .width(CommonConstants.list_width)
    .height(CommonConstants.name_height)
    .backgroundColor($r('app.color.white'))
    .borderRadius(CommonConstants.border_radius)
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Start)

    Column() {
      Row() {
        Text('描述')
          .fontSize(CommonConstants.detail_title_font_size)
          .fontWeight(FontWeight.Bold)
          .width(CommonConstants.detail_width)
          .margin({
            left: CommonConstants.detail_margin_Left
          })

        Scroll() {
          Text(this.content.itemDisc)
            .fontSize(CommonConstants.detail_font_size)
            .width(CommonConstants.detail_width)
            .textAlign(TextAlign.Center)
        }
      }
    }
    .margin({
      top: CommonConstants.list_margin_top
    })
    .width(CommonConstants.list_width)
    .height(CommonConstants.disc_height)
    .backgroundColor($r('app.color.white'))
    .borderRadius(CommonConstants.border_radius)
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Start)

    Column() {
      Row() {
        Text('时间')
          .fontSize(CommonConstants.detail_title_font_size)
          .fontWeight(FontWeight.Bold)
          .width(CommonConstants.detail_width)
          .margin({
            left: CommonConstants.detail_margin_Left
          })

        Scroll() {
          Text(this.content.itemTime)
            .fontSize(CommonConstants.detail_font_size)
            .width(CommonConstants.detail_width)
            .textAlign(TextAlign.Center)
        }
      }
    }
    .margin({
      top: CommonConstants.list_margin_top
    })
    .width(CommonConstants.list_width)
    .height(CommonConstants.time_height)
    .backgroundColor($r('app.color.white'))
    .borderRadius(CommonConstants.border_radius)
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Start)

    if(this.content.isCompleted) {
      Column() {
        Row() {
          Text('完成时间')
            .fontSize(CommonConstants.detail_title_font_size)
            .fontWeight(FontWeight.Bold)
            .width(CommonConstants.detail_width)
            .margin({
              left: CommonConstants.detail_margin_Left
            })

          Scroll() {
            Text(this.content.completeTime)
              .fontSize(CommonConstants.detail_font_size)
              .width(CommonConstants.detail_width)
              .textAlign(TextAlign.Center)
          }
        }
      }
      .margin({
        top: CommonConstants.list_margin_top
      })
      .width(CommonConstants.list_width)
      .height(CommonConstants.time_height)
      .backgroundColor($r('app.color.white'))
      .borderRadius(CommonConstants.border_radius)
      .justifyContent(FlexAlign.Center)
      .alignItems(HorizontalAlign.Start)
    }*/
    Column() {
      // 名字行
      Row() {
        Text('名字')
          .fontSize(CommonConstants.detail_title_font_size)
          .fontWeight(FontWeight.Bold)
          .width(CommonConstants.detail_width)
          .margin({ left: CommonConstants.detail_margin_Left })

        Text(this.content.itemName)
          .fontSize(CommonConstants.detail_font_size)
          .width(CommonConstants.detail_width)
          .textAlign(TextAlign.Start)
          .margin({ left: 10 }) // 增加左侧间距，避免文本太挤
      }
      .margin({ top: CommonConstants.list_margin_top })
      .width(CommonConstants.list_width)
      .height(CommonConstants.name_height)
      .backgroundColor($r('app.color.white'))
      .borderRadius(CommonConstants.border_radius)
      .justifyContent(FlexAlign.Start)


      // 描述行
      Column() {
        Row() {
          Text('描述')
            .fontSize(CommonConstants.detail_title_font_size)
            .fontWeight(FontWeight.Bold)
            .width(CommonConstants.detail_width)
            .margin({ left: CommonConstants.detail_margin_Left })

          Text(this.content.itemDisc)
            .fontSize(CommonConstants.detail_font_size)
            .width(CommonConstants.detail_width)
            .textAlign(TextAlign.Start)
            .margin({ left: 10 })
            .maxLines(3) // 限制最大行数，避免描述过长
        }
        .margin({ top: CommonConstants.list_margin_top })
        .width(CommonConstants.list_width)
        .height(CommonConstants.disc_height)
        .backgroundColor($r('app.color.white'))
        .borderRadius(CommonConstants.border_radius)
        .justifyContent(FlexAlign.Start)

      }

      // 时间行
      Column() {
        Row() {
          Text('时间')
            .fontSize(CommonConstants.detail_title_font_size)
            .fontWeight(FontWeight.Bold)
            .width(CommonConstants.detail_width)
            .margin({ left: CommonConstants.detail_margin_Left })

          Text(this.content.itemTime)
            .fontSize(CommonConstants.detail_font_size)
            .width(CommonConstants.detail_width)
            .textAlign(TextAlign.Start)
            .margin({ left: 10 })
        }
        .margin({ top: CommonConstants.list_margin_top })
        .width(CommonConstants.list_width)
        .height(CommonConstants.time_height)
        .backgroundColor($r('app.color.white'))
        .borderRadius(CommonConstants.border_radius)
        .justifyContent(FlexAlign.Start)

      }

      // 如果已完成，显示完成时间
      if (this.content.isCompleted) {
        Column() {
          Row() {
            Text('完成时间')
              .fontSize(CommonConstants.detail_title_font_size)
              .fontWeight(FontWeight.Bold)
              .width(CommonConstants.detail_width)
              .margin({ left: CommonConstants.detail_margin_Left })

            Text(this.content.completeTime)
              .fontSize(CommonConstants.detail_font_size)
              .width(CommonConstants.detail_width)
              .textAlign(TextAlign.Start)
              .margin({ left: 10 })
          }
        }
        .margin({ top: CommonConstants.list_margin_top })
        .width(CommonConstants.list_width)
        .height(CommonConstants.time_height)
        .backgroundColor($r('app.color.white'))
        .borderRadius(CommonConstants.border_radius)
        .justifyContent(FlexAlign.Start)
        .alignItems(HorizontalAlign.Start)
      }
    }

  }

  private deleteItem() {
    DataModel.deleteData(this.content)
    promptAction.showToast({
      message: '删除成功！'
    })
    this.LocalPageStack.pop({},true)
  }
}