import { PhotoListBean } from 'wdBean/Index';
import { Logger } from 'wdKit/Index';
import { display, router } from '@kit.ArkUI';
import { ImageDownloadComponent } from './ImageDownloadComponent';
import { ImageItemView } from './view/ImageItemView';

const TAG = 'ImageSwiperComponent';

@Component
export struct ImageSwiperComponent {
  @Provide @Watch('onCurrentPageNumUpdated') currentPageNum: string = '01'
  private scroller: Scroller = new Scroller()
  @State swiperIndex: number = 0;
  photoList: PhotoListBean[] = [];
  private swiperController: SwiperController = new SwiperController()
  private displayTool = display.getDefaultDisplaySync()
  private screenWidth: number = 0
  private picWidth: number = 0
  @State picHeight: number = 0
  @State isEnableSwipe: boolean = true;

  // @Provide bgc: Color = Color.White;

  //watch监听页码回调
  onCurrentPageNumUpdated(): void {
    Logger.info(TAG, `currentPageNum：${this.currentPageNum}`,)
    let _swiperIndex = Number.parseInt(this.currentPageNum)
    Logger.info(TAG, `_swiperIndex：${_swiperIndex}`)
    this.swiperIndex = _swiperIndex > 0 ? _swiperIndex - 1 : _swiperIndex
  }

  aboutToAppear(): void {
    //获取宽高尺寸
    this.screenWidth = this.displayTool.width
    // this.picWidth = this.screenWidth - vp2px(52)
    this.picWidth = this.screenWidth
    this.picHeight = this.picWidth * 578 / 375
  }

  build() {
    RelativeContainer() {
      Image($r('app.media.icon_arrow_left_white'))
        .width(24)
        .height(24)
        .aspectRatio(1)
        .interpolation(ImageInterpolation.High)
        .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top },
          left: { anchor: "__container__", align: HorizontalAlign.Start }
        })
        .onClick(() => {
          router.back();
        })
        .id("backImg")

      if (this.photoList && this.photoList?.length > 0) {
        Swiper(this.swiperController) {
          ForEach(this.photoList, (item: PhotoListBean) => {
            // MultiPictureDetailItemComponent({ MultiPictureDetailItem: item })
            ImageItemView({ MultiPictureDetailItem: item, isEnableSwipe: this.isEnableSwipe })
          })
        }
        .index(this.swiperIndex)
        .width('100%')
        .height(px2vp(this.picHeight) + 32)
        .vertical(false)
        .autoPlay(false)
        .cachedCount(3)
        .indicator(false)
        .displayCount(1)
        .id('e_swiper_content')
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
        .onChange((index: number) => {
          this.swiperIndex = index
        })

        Row() {
          Scroll(this.scroller) {
            Row() {
              Flex({
                direction: FlexDirection.Column,
                justifyContent: FlexAlign.Start
              }) {
                Text() {
                  Span(`${this.swiperIndex + 1}`)
                    .fontSize(24)
                    .fontFamily('PingFang SC-Medium')
                    .fontWeight(500)
                    .lineHeight(28)
                  Span(`/${this.photoList.length}`)
                    .fontSize(14)
                    .fontFamily('PingFang SC-Medium')
                    .fontWeight(500)
                    .lineHeight(19)
                }.fontColor(Color.White).margin(4)
              }
            }
            .width('100%')
            .margin({
              top: 8,
              left: 18,
              bottom: 24,
              right: 18
            })
          }
          .scrollable(ScrollDirection.Vertical)
          .scrollBarWidth(0)
        }
        .id('e_swiper_titles')
        .alignRules({
          bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
      }

      ImageDownloadComponent({ url: this.photoList[this.swiperIndex].picPath })
        .alignRules({
          bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
          right: { anchor: "__container__", align: HorizontalAlign.End }
        })
        .margin({
          top: 8,
          left: 18,
          bottom: 24,
          right: 18
        })
        .id("downloadImg")
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Black)
    .id('e_picture_container')
    // 设置顶部绘制延伸到状态栏
    // 设置底部绘制延伸到导航条
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}