import { NewspaperListBean, NewspaperListItemBean } from 'wdBean';
import { NewspaperViewModel } from '../viewmodel/NewspaperViewModel';
import router from '@ohos.router';
import { Logger } from 'wdKit';
import { ENewspaperItemComponent } from './ENewspaperItemComponent';
import { ENewspaperListDialog } from '../dialog/ENewspaperListDialog';
import display from '@ohos.display';

@Component
export struct ENewspaperPageComponent {
  @State newspaperListBean: NewspaperListBean = {} as NewspaperListBean
  @State currentPageNum: string = '01'
  @State pageNumPopup: boolean = false
  @State date: string = '2024-01-26'
  @State picHeight: number = 0
  private swiperController: SwiperController = new SwiperController()
  listDialogController: CustomDialogController = new CustomDialogController({
    builder: ENewspaperListDialog({ newspaperListBean: this.newspaperListBean,
      currentPageNum: this.currentPageNum,
    }),
    alignment: DialogAlignment.Bottom
  })

  @Builder
  popupBuilder() {
    Row() {
      GridRow({ columns: 5 }) {
        ForEach(this.newspaperListBean.list, (item: NewspaperListItemBean, index) => {
          GridCol() {
            Row() {
              Text(item.pageNum)
                .fontSize($r('app.float.normal_text_size'))
                .fontColor(this.currentPageNum == item.pageNum ? Color.White : $r('app.color.color_222222'))
            }
            .alignItems(VerticalAlign.Center)
            .justifyContent(FlexAlign.Center)
            .width(30)
            .height(30)
            .backgroundColor(this.currentPageNum != item.pageNum ? Color.White : $r('app.color.color_ED2800'))
            .onClick((event: ClickEvent) => {
              this.pageNumPopup = !this.pageNumPopup
            })
          }
        })
      }
    }
    .padding({ top: 20, bottom: 20 })
    .margin({ left: 10 })
    .width(260)
  }

  build() {
    RelativeContainer() {
      RelativeContainer() {
        Image($r('app.media.icon_arrow_down'))
          .height($r('app.float.top_arrow_size'))
          .width($r('app.float.top_arrow_size'))
          .alignRules({ left: { anchor: "__container__", align: HorizontalAlign.Start },
            center: { anchor: "__container__", align: VerticalAlign.Center } })
          .id('e_newspaper_back')
          .onClick((event: ClickEvent) => {
            Logger.info("sfsfsd", "" + vp2px(10))
            router.back()
          })

        Row() {
          Text(this.date)
            .fontSize($r('app.float.font_size_20'))
            .fontColor($r('app.color.white'))

          Image($r('app.media.icon_triangle'))
            .width($r('app.float.border_radius_6'))
            .height($r('app.float.border_radius_6'))
            .margin({ left: 2, bottom: 5 })
        }
        .alignItems(VerticalAlign.Bottom)
        .alignRules({ middle: { anchor: "__container__", align: HorizontalAlign.Center },
          center: { anchor: "__container__", align: VerticalAlign.Center } })
        .id('e_newspaper_date')

        Image($r('app.media.icon_share'))
          .height($r('app.float.top_arrow_size'))
          .width($r('app.float.top_arrow_size'))
          .alignRules({ right: { anchor: "__container__", align: HorizontalAlign.End },
            center: { anchor: "__container__", align: VerticalAlign.Center } })
          .id('e_newspaper_share')
      }
      .margin({ left: $r('app.float.margin_16'), right: $r('app.float.margin_16') })
      .height($r('app.float.top_bar_height'))
      .alignRules({ top: { anchor: '__container__', align: VerticalAlign.Top },
        left: { anchor: '__container__', align: HorizontalAlign.Start },
        right: { anchor: '__container__', align: HorizontalAlign.End } })
      .id('e_newspaper_top')

      if (this.newspaperListBean && this.newspaperListBean.list && this.newspaperListBean.list.length > 0) {
        Swiper(this.swiperController) {
          ForEach(this.newspaperListBean?.list, (item: NewspaperListItemBean, index: number) => {
            ENewspaperItemComponent({ newspaperListItemBean: item })
          })
        }
        .width('100%')
        .height(px2vp(this.picHeight) + 32)
        .vertical(true)
        .autoPlay(false)
        .cachedCount(3)
        .indicator(false)
        .displayCount(1)
        .margin({ top: 35, left: 10, right: 10 })
        .id('e_newspaper_content')
        .alignRules({ top: { anchor: "e_newspaper_top", align: VerticalAlign.Bottom },
          middle: { anchor: "__container__", align: HorizontalAlign.Center } })
        .onChange((index: number) => {
          this.currentPageNum = this.newspaperListBean?.list[index]?.pageNum
        })

        Image($r('app.media.newspaper_shadow'))
          .height($r('app.float.vp_12'))
          .margin({ left: 20, right: 20, top: -1 })
          .objectFit(ImageFit.Contain)
          .alignRules({ top: { anchor: "e_newspaper_content", align: VerticalAlign.Bottom },
            left: { anchor: 'e_newspaper_content', align: HorizontalAlign.Start },
            right: { anchor: 'e_newspaper_content', align: HorizontalAlign.End } })
          .id('e_newspaper_shadow')

        Row() {
          Text('滑动查看下一版')
            .fontColor(Color.White)
            .fontSize($r('app.float.font_size_14'))
          Image($r('app.media.icon_next_page'))
            .width($r('app.float.vp_16'))
            .height($r('app.float.vp_16'))
        }
        .justifyContent(FlexAlign.Center)
        .margin({ top: $r('app.float.margin_16') })
        .alignRules({ top: { anchor: "e_newspaper_shadow", align: VerticalAlign.Bottom },
          middle: { anchor: "__container__", align: HorizontalAlign.Center } })
        .id('e_newspaper_next')
        .onClick((event: ClickEvent) => {
          this.swiperController.showNext()
        })
      }

      Row() {
        Text(this.currentPageNum)
          .fontSize($r('app.float.font_size_36'))
          .fontColor($r('app.color.white'))
        Text('版')
          .fontSize($r('app.float.font_size_16'))
          .fontColor($r('app.color.white'))
          .margin({ bottom: 6 })

        Image($r('app.media.icon_triangle'))
          .width($r('app.float.border_radius_6'))
          .height($r('app.float.border_radius_6'))
          .margin({ left: 2, bottom: 6 })
      }
      .alignItems(VerticalAlign.Bottom)
      .margin({ left: $r('app.float.margin_16'), bottom: $r('app.float.top_tab_bar_height') })
      .alignRules({ bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
        left: { anchor: '__container__', align: HorizontalAlign.Start } })
      .id('e_newspaper_page_num')
      .onClick((event: ClickEvent) => {
        this.pageNumPopup = !this.pageNumPopup
      })
      .bindPopup(this.pageNumPopup, {
        builder: this.popupBuilder,
        placement: Placement.Top,
        popupColor: Color.White
      })

      Row() {
        Image($r('app.media.icon_read_paper'))
          .width($r('app.float.vp_20'))
          .height($r('app.float.vp_20'))
          .margin({ right: $r('app.float.vp_3') })
        Text('读报纸')
          .fontSize($r('app.float.font_size_14'))
          .fontColor($r('app.color.white'))
      }
      .alignItems(VerticalAlign.Center)
      .margin({ right: $r('app.float.margin_16'), bottom: $r('app.float.top_tab_bar_height') })
      .alignRules({ bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
        right: { anchor: '__container__', align: HorizontalAlign.End } })
      .id('e_newspaper_read')
      .onClick((event: ClickEvent) => {
        this.listDialogController.open()
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.color_80000000'))
    .id('e_newspaper_container')
  }

  async aboutToAppear() {
    let newspaperTimes = await NewspaperViewModel.getNewspaperTime()
    if (newspaperTimes && newspaperTimes.length > 0) {
      this.date = newspaperTimes[0].date
    }
    try {
      let displayTool = display.getDefaultDisplaySync()
      let screenWidth = displayTool.width
      let picWidth = screenWidth - vp2px(52)
      this.picHeight = picWidth * 566 / 378
      let listBean = await NewspaperViewModel.getNewspaperList(this.date, picWidth + 'x' + this.picHeight)
      this.newspaperListBean = listBean;
    } catch (exception) {

    }


  }

  aboutToDisappear() {

  }
}