YT_ZM_DIARY/features/feature/src/main/ets/view/DiaryView.ets

import { IBestToast, userInfo, UserInfo, YTAvoid, yTRouter, yTToast } from "basic"
import { DiaryCalendarPicker } from "../components/DiaryCalendarPicker"
import { DiaryTitleItem } from "../components/DiaryTitleItem"
import { DoubleConfirm } from "../components/DoubleConfirm"
import { LoginComponent } from "../components/LoginComponent"
import { DiaryData, PageStatus } from "../models"
import { DateUtils } from "../utils/DateUtils"
import { DiaryViewModel } from "../viewModels/DiaryViewModel"

/**
 * 日记页面
 */
@Component
export struct DiaryView {
  @StorageProp(YTAvoid.SAFE_TOP_KEY) safeTop: number = 0
  @State Vm: DiaryViewModel = new DiaryViewModel()
  @State ShowLoginDialog: boolean = false
  @StorageProp(UserInfo.KEY) @Watch('loginStateChanged')  userInfo: UserInfo = userInfo

  private linearInfo: LinearGradientOptions = {
    colors: [ ['#B9FD2A', 0.01], ['#F5FD6D', 1] ],
    angle: 110
  }

  /**
   * 登录状态发生变化
   */
  loginStateChanged(){
    console.log('登录状态发生变化 登录状态为 ' + this.userInfo.checkLogin())
    const loginState = this.userInfo.checkLogin()
    if(loginState){
      this.ShowLoginDialog = false
      this.reloadDiaryData()
    } else {
      this.Vm.diaryDataList = []
      this.Vm.dateList = []
    }
  }

  /**
   * 跳转日记详情
   * @param id 日记 id （可选），没有 id 表示新增日记
   */
  routerDiaryPage(id?: number) {
    yTRouter.pushPathByName("IncreaseDiaryPage", {
      'id': id,
      'PageStatus': PageStatus.DIARY
    } as Record<string, string | number>);
  }

  /**
   * 删除日记
   * @param index
   */
  decreaseDiary(index: number){
    yTToast.openToast(wrapBuilder(DoubleConfirm), {
      text: "确定删除该篇日记吗？",
      click: async () => {
        yTToast.hide()
        let ans = await this.Vm.deleteDiaryLog(index)
        if(ans){
          IBestToast.show({ message: '删除了日记' })
          this.reloadDiaryData()
        }
      }
    })
  }

  /**
   * 搜索日记
   */
  routerSearchPage(){
    yTRouter.pushPathByName("DiarySearchPage", null)
  }

  /**
   * 打开日期选择器
   */
  openDatePicker(){
    let controll: CustomDialogController = new CustomDialogController({
      builder: DiaryCalendarPicker({
        dateList: this.Vm.dateList,
        onConfirm: (value) => {
          this.toDiaryHead(value)
          controll.close()
        },
        onCancel: () => {
          controll.close()
        }
      }),
      alignment: DialogAlignment.Center,
    })

    controll.open()
  }

  /**
   * 跳转到指定的日期的日记索引 ( 如果找不到指定的日期， 跳转到最近的比目标值大的索引 )
   * @param date 选择的 日期
   */
  toDiaryHead(date: Date) {
    console.info("calendar onAccept:" + JSON.stringify(date));
    let ans = DateUtils.formatDateToCustomString(date, false);
    let target = 0;
    for (let i = 0; i < this.Vm.dateList.length; i++) {
      let current = this.Vm.dateList[i]
      if(current >= ans) {
        target = i;
      }
    }
    console.log("target " + target)
    this.Vm.scroller.scrollToIndex(target, true,  ScrollAlign.START)
  }


  /**
   * 重新加载日记数据
   */
  reloadDiaryData() {
    if(this.userInfo.checkLogin()){
      this.Vm.queryDiaryLogList(DateUtils.formatDateToCustomString(new Date(), false))
    } else {
      this.ShowLoginDialog = true
    }
  }

  aboutToAppear(): void {
    this.reloadDiaryData()
  }

  build() {
    Stack(){
      Column() {
        // title
        Row() {
          Image($r("app.media.calendar"))
            .width(30)
            .aspectRatio(1)
            .onClick(() => {
              this.openDatePicker()
            })

          Text("日记本")
            .fontSize(20)

          Image($r("app.media.Search"))
            .width(30)
            .aspectRatio(1)
            .onClick(this.routerSearchPage)
        }
        .width("100%")
        .justifyContent(FlexAlign.SpaceBetween)
        .padding({ top: this.safeTop + 22, left: 16, right: 16, bottom: 33 })

        // swiper
        Stack({ alignContent: Alignment.BottomEnd }) {
          // 日记列表
          List({ space: 16, scroller: this.Vm.scroller }) {
            // 空数据页面
            if(this.Vm.diaryDataList.length === 0) {
              ListItem(){
                Column({space: 12}){
                  Row({space: 8}){
                    Text("+")
                    Text("去添加")
                  }
                  .borderRadius(8)
                  .linearGradient(this.linearInfo)
                  .alignItems(VerticalAlign.Center)
                  .justifyContent(FlexAlign.Center)
                  .border({width: 1, color: Color.Black})
                  .padding({ left: 16, top: 12, right: 16, bottom: 12})
                  .onClick(() => {
                    this.routerDiaryPage()
                  })

                  Text("暂无记录~")
                    .fontSize(14)
                    .fontWeight(400)
                }
                .width("100%")
                .height("100%")
                .alignItems(HorizontalAlign.Center)
                .padding({ top: '40%'})
                // .justifyContent(FlexAlign.Center)
              }
              .layoutWeight(1)
              .width("100%")
            }

            ForEach(this.Vm.dateList, (groupTitle: string, index: number) => {
              ListItemGroup({
                header: this.DiaryHead(groupTitle),
              }) {
                ForEach(this.Vm.diaryDataList.filter((item) => item.diaryDate == groupTitle), (item: DiaryData, i: number) => {
                  ListItem() {
                    DiaryTitleItem({
                      title: item.title,
                      onClickBack: () => {
                        this.routerDiaryPage(item.id)
                      },
                      onActionBack: (event: GestureEvent) => {
                        console.log("触发删除")
                        this.decreaseDiary(item.id ?? -1)
                      }
                    })
                  }
                  .swipeAction({
                    end: this.DiaryDel(item.id),
                    edgeEffect: SwipeEdgeEffect.None
                  })
                }, (item: DiaryData) => item.id?.toString() + item.title!)
              }
            }, (groupTitle: string, index: number) => groupTitle)
          }
          .width("100%")
          .height("100%")
          .scrollBar(BarState.Off)
          .sticky(StickyStyle.Header)

          // 增加日记按钮
          Row() {
            Image($r("app.media.add_Img"))
              .width(50)
              .aspectRatio(1)
          }
          .onClick(() => {
            this.routerDiaryPage()
          })
          .width(50)
          .aspectRatio(1)
          .borderRadius(30)
          .margin({ bottom: 16 })
          .alignItems(VerticalAlign.Center)
          .justifyContent(FlexAlign.Center)
          .linearGradient(this.linearInfo)
        }
        .width("100%")
        .layoutWeight(1)
        .backgroundColor(Color.White)
        .padding({ left: 16, right: 16, top: 13 })
        .borderRadius({
          topLeft: 28, topRight: 28
        })
      }
      .width("100%")
      .height("100%")
      .linearGradient(this.linearInfo)
      .onVisibleAreaChange([0, 1], (isExpanding: boolean, currentRatio: number) => {
        if(isExpanding) {
          console.log("组件出来了")
          this.reloadDiaryData()
        } else {
          console.log("组件退了")
        }
      })

      if(this.ShowLoginDialog){
        LoginComponent()
      }
    }
    .width("100%")
    .height("100%")
  }

  // 日记时间组 - 头部组件
  @Builder
  DiaryHead(time: string) {
    Row(){
      Text(time)
    }
    .width("100%")
    .backgroundColor(Color.White)
  }

  // 日记条目删除组件
  @Builder
  DiaryDel(index: number) {
    Row() {
      Row(){
        Text("删除")
          .fontSize(16)
          .fontColor(Color.White)
      }
      .width(60)
      .height("100%")
      .backgroundColor(Color.Red)
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .borderRadius({
        topLeft: 20, bottomLeft: 20
      })
      .onClick(() => {
        this.decreaseDiary(index)
      })
    }
    .padding({left: 10})
  }
}