//日历demo
@Entry
@Component
struct CalendarDemo {
  @State isShow: boolean = false;
  @State selectNumber: number = 0;
  @State currentIndex: number = 0;

  build() {
    Column() {
      Stack() {
        SwiperComp({ currentIndex: $currentIndex, selectDate: $selectNumber })
        if (this.isShow) {
          GridComp({ currentIndex: $currentIndex, selectDate: $selectNumber })
            .backgroundColor('#fff')
            .transition(TransitionEffect.OPACITY.animation({ duration: 600 })
            )
        }
      }

      Row()
        .width('20%')
        .height(8)
        .backgroundColor('#ccc')
        .borderRadius(10)
        .onClick(() => {
          animateTo({ duration: 600 }, () => {
            this.isShow = !this.isShow;
          })
        })
    }
  }
}

@Component
struct SwiperComp {
  @State data: number[][] = [];
  @State rowsTemplate: string = '1fr 1fr 1fr 1fr 1fr';
  @State count: number = 5;
  // @State swiperIndex: number = 0;
  @Link currentIndex: number
  @Link selectDate: number
  controller: SwiperController = new SwiperController()

  aboutToAppear(): void {
    let tempArr: number[] = [];
    for (let i = 1; i < 32; i++) {
      tempArr.push(i);
      if (i % 7 === 0) {
        this.data.push(tempArr);
        tempArr = [];
      }
    }
  }

  build() {
    Column() {
      Swiper() {
        ForEach(this.data, (itemArr: number[], index: number) => {
          Grid() {
            ForEach(itemArr, (item: number, subIndex: number) => {
              GridItem() {
                Text(item.toString()).height(50).onClick(() => {
                  this.currentIndex = index * 7 + subIndex;
                  this.selectDate = item;
                })
              }.backgroundColor(this.currentIndex === index * 7 + subIndex ? '#33ff00ff' : '#fff')

            })
          }.columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
          .rowsTemplate('1fr')
          .width('100%')
          .height(50)
        })
      }.width('100%').index(Math.floor(this.currentIndex / 7)).indicator(false)
    }
  }
}

@Component
struct GridComp {
  @State data: number[] = [];
  @Link currentIndex: number;
  @Link selectDate: number

  aboutToAppear(): void {
    for (let i = 1; i < 32; i++) {
      this.data.push(i);
    }
  }

  build() {
    Column() {
      Grid() {
        ForEach(this.data, (item: number, index: number) => {
          GridItem() {
            Text(item.toString()).onClick(() => {
              this.currentIndex = index;
              this.selectDate = item;
            })
          }.width('100%').height('100%')
          .backgroundColor(this.currentIndex === index ? '#33ff00ff' : '#fff')
        })
      }
      .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
      .height(5 * 50)
      .width('100%')
    }
  }
}