import { NewspaperListBean, NewspaperListItemBean } from 'wdBean';
import { NewspaperViewModel } from '../viewmodel/NewspaperViewModel';
import router from '@ohos.router';
import { ENewspaperItemComponent } from './ENewspaperItemComponent';
import { ENewspaperListDialog } from '../dialog/ENewspaperListDialog';
import display from '@ohos.display';
import { ENewspaperCalendarDialog } from '../dialog/ENewspaperCalendarDialog';
import font from '@ohos.font';
import { ENewspaperPageDialog } from '../dialog/ENewspaperPageDialog';
import { RMCalendarBean } from './calendar/RMCalendarBean';

@Component
export struct ENewspaperPageComponent {
  private displayTool = display.getDefaultDisplaySync()
  private screenWidth: number = 0
  private picWidth: number = 0
  @State picHeight: number = 0
  @State newspaperListBean: NewspaperListBean = {} as NewspaperListBean
  @Provide @Watch('onCurrentPageNumUpdated') currentPageNum: string = '01'
  @State pageDialogShow: boolean = false
  @State calendarDialogShow: boolean = false
  @State calendarDate: string = ''
  private swiperController: SwiperController = new SwiperController()
  @State swiperIndex: number = 0;

  //watch监听报纸页码回调
  onCurrentPageNumUpdated(): void {
    console.log("ENewspaperPageComponent-onCurrentPageNumUpdated", "currentPageNum：", this.currentPageNum)
    let _swiperIndex = Number.parseInt(this.currentPageNum)
    console.log("ENewspaperPageComponent-onCurrentPageNumUpdated", "_swiperIndex：", _swiperIndex)
    this.swiperIndex = _swiperIndex > 0 ? _swiperIndex - 1 : _swiperIndex
  }

  //日历选择弹框
  calendarDialogController: CustomDialogController = new CustomDialogController({
    builder: ENewspaperCalendarDialog({
      onDateChange: (date: RMCalendarBean) => {
        console.log("onDateChange-日历选择弹框", "date：", JSON.stringify(date))
        if (date.fullYear && date.month && date.date) {
          let month: number = date.month + 1
          this.calendarDate = `${date.fullYear}-${month > 9 ? month : '0' + month}-${date.date > 9 ? date.date : '0' + date.date}`
          this.getNewspaperTime()
          this.getNewspaperList()
        }
      }
    }),
    alignment: DialogAlignment.Top,
    offset: { dx: 0, dy: 80 },
    customStyle: true,
  })
  //图片版选择弹框
  pageDialogController: CustomDialogController = new CustomDialogController({
    builder: ENewspaperPageDialog({
      dialogType: 0,
      newspaperListBean: this.newspaperListBean,
    }),
    alignment: DialogAlignment.BottomStart,
    offset: { dx: 0, dy: -90 },
    customStyle: true,
  })
  //文字报纸弹框
  listDialogController: CustomDialogController = new CustomDialogController({
    builder: ENewspaperListDialog({
      newspaperListBean: this.newspaperListBean
    }),
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: 0 }
  })

  async aboutToAppear() {
    //获取宽高尺寸
    this.screenWidth = this.displayTool.width
    this.picWidth = this.screenWidth - vp2px(52)
    this.picHeight = this.picWidth * 566 / 378
    //注册字体
    font.registerFont({
      familyName: 'BebasNeue_Regular',
      familySrc: $rawfile('font/BebasNeue_Regular.otf')
    })
    this.getNewspaperTime()
    this.getNewspaperList()
  }

  aboutToDisappear() {
    // if (this.calendarDialogController) {
    //   this.calendarDialogController = null
    // }
    // if (this.listDialogController) {
    //   this.listDialogController = null
    // }
  }

  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) => {
            router.back()
          })

        Row() {
          Text(this.calendarDate)
            .fontSize($r('app.float.font_size_20'))
            .fontColor($r('app.color.white'))
            .fontFamily('BebasNeue_Regular')
            .fontWeight(FontWeight.Bold)

          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')
        .onClick(() => {
          this.calendarDialogShow = !this.calendarDialogShow
          if (this.calendarDialogShow) {
            this.calendarDialogController.open()
          } else {
            this.calendarDialogController.close()
          }
        })

        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 })
          })
        }
        .index(this.swiperIndex)
        .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
          this.swiperIndex = index
        })

        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'))
          .fontFamily('BebasNeue_Regular')
        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.pageDialogShow = !this.pageDialogShow
        if (this.pageDialogShow) {
          this.pageDialogController.open()
        } else {
          this.pageDialogController.close()
        }
      })

      // .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')
  }

  private async getNewspaperTime() {
    let newspaperTimes = await NewspaperViewModel.getNewspaperTime(this.calendarDate)
    if (newspaperTimes && newspaperTimes.length > 0) {
      this.calendarDate = newspaperTimes[0].date
      this.currentPageNum = '01'
    }
  }

  private async getNewspaperList() {
    try {
      let listBean = await NewspaperViewModel.getNewspaperList(this.calendarDate, this.picWidth + 'x' + this.picHeight)
      this.newspaperListBean = listBean;
    } catch (exception) {

    }
  }
}