import router from '@ohos.router'
@Entry
@Component
export struct GuidePage {
  @State currentIndex: number = 0  // 当前页索引
  private swiperRef: SwiperController = new SwiperController()  // Swiper控制器

  // 图片资源路径数组
  private imageList: Resource[] = [
    $r('app.media.guide1'),  // 路径对应resources/base/media目录
    $r('app.media.guide2'),
    $r('app.media.guide3')
  ]

  build() {
    Stack({alignContent:Alignment.Bottom}) {  // 使用堆叠布局实现按钮覆盖
      Swiper(this.swiperRef) {
        ForEach(this.imageList, (item: Resource) => {
          Image(item)
            .objectFit(ImageFit.Cover)  // 图片填充模式
            .width('100%')
            .height('100%')
        }, (item: Resource) => JSON.stringify(item))
      }
      .indicator(false)  // 隐藏默认指示器
      .loop(false)       // 禁用循环滑动
      .onChange((index: number) => {
        this.currentIndex = index
      })
      // 只在最后一页显示按钮
      if (this.currentIndex === 2) {
        Button('立即体验', { type: ButtonType.Capsule })
          .width(160)
          .height(40)
          .backgroundColor('#FFFFFF')
          .fontColor('#8B2316')
          .onClick(() => {
            router.replaceUrl({ url: 'pages/LoginPage/LoginPage' })
          })
          .margin({bottom:30})
      }
    }
    .width('100%')
    .height('100%')
  }
}
