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

import { AppStorageKeyCollect, IBestToast, userInfo, UserInfo, YTAvoid, yTRouter } from 'basic'
import { DateInfo } from '../models/DateInfo'
import { RecodeViewModel } from '../viewModels/RecodeViewModel'
import { DiaryDatePicker } from '../components/DiaryDatePicker'
import { DiaryTimePicker } from '../components/DiaryTimePicker'
import { DateUtils } from '../utils/DateUtils'
import { DiaryData, PageStatus } from '../models'
import { CollaborationCameraStateDialog } from '@hms.collaboration.camera'
import { LoginComponent } from '../components/LoginComponent'

/**
 * 记录页面
 */
@Component
export struct RecodView {
  @StorageProp(YTAvoid.SAFE_BOTTOM_KEY) bottom: number = 0
  @StorageProp(YTAvoid.SAFE_TOP_KEY) safeTop: number = 0
  @State Vm: RecodeViewModel = new RecodeViewModel()
  @State heightList: number[] = []
  // 去登录界面
  @State ShowLoginDialog: boolean = false
  @StorageProp(UserInfo.KEY) @Watch('loginStateChanged')  userInfo: UserInfo = userInfo

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

  selectDateChange = (index: number) => {
    this.Vm.selectedDate = index
    this.Vm.changeDataByIndex()
    console.log('改变了选择的日期')
  }


  /**
   * 登录状态发生变化
   */
  loginStateChanged(){
    console.log('登录状态发生变化 登录状态为 ' + this.userInfo.checkLogin())
    const loginState = this.userInfo.checkLogin()
    if(loginState){
      this.ShowLoginDialog = false
      this.loadDataList(DateUtils.formatDateToCustomString(new Date(), false))
    } else {
      this.Vm.recodeList = []
    }
  }

  // 加载小记录数据列表
  async loadDataList(targetDate: string) {
    if(this.userInfo.checkLogin()) {
      this.Vm.queryNoteList(targetDate)
    } else {
      this.ShowLoginDialog = true
    }
  }

  /**
   * 更新小记录时间
   * @param index
   * @param time
   */
  async updateNoteTime(index: number, time: string) {
    let currentNote: DiaryData = this.Vm.recodeList[index]
    currentNote.noteTime = currentNote.noteTime?.split(' ')[0] + ' ' + time + ':00'
    let ans = await this.Vm.updateNoteTime(currentNote)
    if(ans) {
      this.Vm.changeDataByIndex()
      IBestToast.show('更改成功')
    } else {
      IBestToast.show('更改失败')
    }
  }

  /**
   * 跳转至添加小记录页面
   * @param id
   */
  routerAddNote(id?: number) {
    yTRouter.pushPathByName("IncreaseDiaryPage", {
      'id': id,
      'PageStatus': PageStatus.RECODE
    } as Record<string, boolean | number | string>);
  }

  aboutToAppear(): void {
    this.Vm.selectedDateChange = this.selectDateChange
    this.loadDataList(DateUtils.formatDateToCustomString(new Date(), false))
  }

  build() {
    Stack(){
      Column(){
        Row(){
          Image($r("app.media.RecodeTitle"))
            .width(140)
            .height(44)

          Image($r("app.media.calendar"))
            .width(30)
            .aspectRatio(1)
            .onClick(() => {
              animateToImmediately({
                duration: 200
              }, () => {
                if(this.Vm.showDatePicker) {
                  this.Vm.showDatePicker = false
                } else {
                  this.Vm.showDatePicker = true
                  this.Vm.showTimePicker = -1
                }
              })
            })
        }
        .width("100%")
        .height(76)
        .justifyContent(FlexAlign.SpaceBetween)
        .alignItems(VerticalAlign.Center)
        .padding({ left: 17, right: 17, bottom: 17, top: 17})
        .onClick(() => {
          this.Vm.showTimePicker = -1
          this.Vm.showDatePicker = false
        })

        // 时间选择器 - 使用区域变换实现
        if(this.Vm.showTimePicker != -1) {
          DiaryTimePicker({
            timeStr: this.Vm.getTime(this.Vm.showTimePicker),
            onConfirm: (time: string) => {
              this.updateNoteTime(this.Vm.showTimePicker, time)
              this.Vm.showTimePicker = -1
            },
            onCancel: () => {
              this.Vm.showTimePicker = -1
            }
          })
            .position({
              // x: 5,
              // y: 35
              x: this.Vm.getPostion('x'),
              y: this.Vm.getPostion('y')
            })
            .zIndex(100)
        }

        // 主体内容
        Stack({alignContent: Alignment.TopEnd}){
          Column(){
            // 日期选择
            Swiper(this.Vm.swiperController){
              LazyForEach(this.Vm.weekLoop, (item: DateInfo, index: number) => {
                Column({space: 2}) {
                  Column({space: 15}){
                    Text(item.week)
                    // ${item.month}-
                    Text(`${item.day}`)
                  }
                  .width("100%")
                  .padding({ top: 5, bottom: 5 })
                  .borderRadius(10)
                  .linearGradient(this.Vm.selectedDate === index ? this.linearInfo : null)

                  // TODO 表示某天有数据 - 暂无接口，待定
                  if(false) {
                    Row()
                      .width(6)
                      .height(6)
                      .borderRadius(3)
                      .backgroundColor('#BAFE2B')
                  }
                }
                .width(50)
                .height(80)
                .padding({
                  left: 7,
                  right: 7,
                  top: 9,
                })
                .onClick(() => {
                  this.selectDateChange(index)
                })
              }, (item: DateInfo, index: number) => { return item.id.toString() })
            }
            .loop(false)
            .displayCount(7)
            .indicator(false)
            .direction(Direction.Rtl)
            .onChange((index: number) => {
              this.Vm.swiperOnChange(index)
            })

            // 记录内容主体
            Stack({alignContent: Alignment.BottomEnd}){
              List({space: 10}) {
                ListItem()
                  .height(20)
                  .onClick(() => {
                    this.Vm.showTimePicker = -1
                    this.Vm.showDatePicker = false
                  })

                ForEach(this.Vm.recodeList, (item: DiaryData, index: number) => {
                  ListItem(){
                    Row({space: 20}){
                      // 时间 和 分隔线
                      Column({space: 5}){
                        Row(){
                          Text(this.Vm.getTime(index))
                            .fontSize(14)
                            .padding({
                              top: 5,
                              left: 8,
                              right: 8,
                              bottom: 5
                            })
                            .fontWeight(400)
                            .borderRadius(8)
                            .fontColor(Color.Black)
                            .linearGradient(this.linearInfo)
                        }
                        .width(54)
                        .height(30)
                        .alignItems(VerticalAlign.Center)
                        .justifyContent(FlexAlign.Center)
                        .onClick(() => {
                          if(this.Vm.showTimePicker === index) {
                            this.Vm.showTimePicker = -1
                          } else {
                            this.Vm.showTimePicker = index
                            this.Vm.showDatePicker = false
                          }
                        })

                        // 分隔线
                        Column(){
                          Row() {
                            Row()
                              .width(7)
                              .aspectRatio(1)
                              .borderRadius(4)
                              .backgroundColor(Color.White)
                          }
                          .width(10)
                          .aspectRatio(1)
                          .borderRadius(5)
                          .backgroundColor('#B9FD2A')
                          .alignItems(VerticalAlign.Center)
                          .justifyContent(FlexAlign.Center)

                          Row()
                            .width(3)
                            .backgroundColor('#E9E9EC')
                            .layoutWeight(1)

                          Row() {
                            Row()
                              .width(7)
                              .aspectRatio(1)
                              .borderRadius(4)
                              .backgroundColor(Color.White)
                          }
                          .width(10)
                          .aspectRatio(1)
                          .borderRadius(5)
                          .backgroundColor('#B9FD2A')
                          .alignItems(VerticalAlign.Center)
                          .justifyContent(FlexAlign.Center)
                        }
                        .width(30)
                        .height(this.heightList[index] + 15)
                      }
                      // .layoutWeight(1)

                      // 标题 和 内容
                      Column({space: 5}){
                        Row(){
                          Text(item.title)
                            .fontSize(14)
                            .fontWeight(600)
                            .padding({
                              top: 5,
                              left: 8,
                              right: 8,
                              bottom: 5
                            })
                        }
                        .height(30)
                        .alignItems(VerticalAlign.Center)
                        .justifyContent(FlexAlign.Center)

                        // 内容
                        Column({space: 8}){
                          Text(item.content)
                            .fontSize(12)
                            .fontColor('#212245')
                            .opacity(0.5)

                          // 图片显示
                          Scroll(){
                            Row({space: 5}){
                              ForEach(item.imageUrls, (url: string, index: number) => {
                                Image(url)
                                  .width(100)
                                  .height(150)
                                  .borderRadius(12)
                              })
                            }
                          }
                          .scrollable(ScrollDirection.Horizontal)
                          .scrollBar(BarState.Off)

                        }
                        .alignItems(HorizontalAlign.Start)
                        .justifyContent(FlexAlign.Start)
                        .onAreaChange((_o: Area, _n: Area) => {
                          this.heightList[index] = _n.height as number
                        })

                        Blank().height(15)
                      }
                      .layoutWeight(1)
                      .alignItems(HorizontalAlign.Start)
                      .justifyContent(FlexAlign.Start)
                      .onClick(() => {
                        this.routerAddNote(item.id!)
                        this.Vm.showDatePicker = false
                        this.Vm.showTimePicker = -1
                      })
                      .gesture(
                        LongPressGesture()
                          .onAction(() => {
                            console.log("长按了哦")
                            this.Vm.onDelRecode(item.id!)
                          })
                      )
                    }
                    .onClick(() => {
                      this.Vm.showTimePicker = -1
                      this.Vm.showDatePicker = false
                    })
                    .onAreaChange((_o: Area, _n: Area) => {
                      console.log('位置信息' + JSON.stringify(_n.globalPosition))
                      let postion = this.Vm.postionList
                      postion[index] = _n.globalPosition
                      this.Vm.postionList = postion
                    })
                  }
                })

                // 空数据页面
                if(this.Vm.recodeList.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.routerAddNote()
                      })

                      Text("暂无记录~")
                        .fontSize(14)
                        .fontWeight(400)
                    }
                    .width("100%")
                    .height("100%")
                    .alignItems(HorizontalAlign.Center)
                    .padding({ top: '30%'})
                    // .justifyContent(FlexAlign.Center)
                  }
                  .layoutWeight(1)
                  .width("100%")
                }
              }
              .width("100%")
              .height("100%")
              .scrollBar(BarState.Off)
              .padding({top: 10})
              .onScrollIndex(() => {
                this.Vm.showTimePicker = -1
              })

              // 增加日记按钮
              Row() {
                Image($r("app.media.add_Img"))
                  .width("100%")
                  .aspectRatio(1)
              }
              .onClick(() => {
                this.routerAddNote()
              })
              .width(40)
              .aspectRatio(1)
              .borderRadius(20)
              .margin({ bottom: 16 })
              .alignItems(VerticalAlign.Center)
              .justifyContent(FlexAlign.Center)
              .linearGradient(this.linearInfo)
            }
            .width("100%")
            .layoutWeight(1)
            .padding({
              bottom: 20, left: 24, right: 24
            })

            // 记录内容主体
            // Stack({ alignContent: Alignment.BottomEnd }){
            //
            //   // 增加日记按钮
            //   Row() {
            //     Image($r("app.media.add"))
            //       .width(20)
            //       .aspectRatio(1)
            //   }
            //   .onClick(() => {
            //     this.routerAddNote()
            //   })
            //   .width(40)
            //   .aspectRatio(1)
            //   .borderRadius(20)
            //   .padding(8)
            //   // .border({ width: 1 })
            //   .margin({ bottom: 16 })
            //   // .backgroundColor(Color.White)
            //   .alignItems(VerticalAlign.Center)
            //   .justifyContent(FlexAlign.Center)
            //   .linearGradient(this.linearInfo)
            // }
            // .width("100%")
            // .layoutWeight(1)


          }

          // 日期选择器
          if(this.Vm.showDatePicker) {
            DiaryDatePicker({
              selectedDate: this.Vm.weekLoop.getData(this.Vm.swiperCurrentIndex).id,
              selectDateBack: (date: Date) => {
                this.Vm.showDatePicker = false
                this.Vm.jumpToDate(date)
              }
            })
              .width(267)
          }
        }
        .width("100%")
        .layoutWeight(1)
        .backgroundColor(Color.White)
        .borderRadius({
          topLeft: 20,
          topRight: 20
        })
      }
      .width("100%")
      .height("100%")
      .padding({ top: this.safeTop})
      .linearGradient({
        colors: [ ['#B9FD2A', 0.01], ['#F5FD6D', 1] ],
        angle: 150
      })
      .onVisibleAreaChange([0, 1], (isExpanding: boolean, currentRatio: number) => {
        if(isExpanding) {
          console.log("组件出来了")

          this.loadDataList(this.Vm.getSelectedDate())
        } else {
          console.log("组件退了")
        }
      })

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


  }
}