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';
import { newsSkeleton } from './skeleton/newsSkeleton';
import { Logger, ToastUtils } from 'wdKit/Index';

@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;
  //当前选择的日期标记
  @State selectDate: Date = new Date()

  //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({
      selectDate: this.selectDate,
      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()
          this.selectDate =
            new Date(date.fullYear ? date.fullYear : 0, date.month ? date.month : 0, date.date ? date.date : 0)
        }
      }
    }),
    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,
  })
  //文字报纸弹框
  @State isOpenListDialog: boolean = false

  // 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: 'BebasNeueBold',
      familySrc: $rawfile('font/BebasNeueBold.otf')
    })
    this.getNewspaperTime()
    this.getNewspaperList()
  }

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

  build() {
    Stack() {
      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?.replace('-', '.')?.replace('-', '.'))
              .fontSize($r('app.float.font_size_20'))
              .fontColor($r('app.color.white'))
              .fontFamily('BebasNeueBold')
              .fontWeight(FontWeight.Regular)

            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')
            .onClick(() => {
              ToastUtils.showToast('分享为公共方法，待开发', 1000);
          })
        }
        .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) {
          newsSkeleton()
            .alignRules({
              top: { anchor: "e_newspaper_top", align: VerticalAlign.Bottom },
              middle: { anchor: "__container__", align: HorizontalAlign.Center }
            })
            .id('news_skeleton_id')
            .width('100%')
            .height(px2vp(this.picHeight) + 32)
            .margin({ top: 35, left: 10, right: 10 })
        }

        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)
          .loop(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 }
          })
          .effectMode(EdgeEffect.None)
          .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: 10, right: 10, 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(this.swiperIndex + 1 == this.newspaperListBean?.list?.length ? '已到底部，可以选择其他日期' :
              '滑动查看下一版')
              .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'))
              .visibility(this.swiperIndex + 1 == this.newspaperListBean?.list?.length ? Visibility.None :
              Visibility.Visible)
          }
          .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('BebasNeueBold')
          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.isOpenListDialog = true
        })
      }
      .width('100%')
      .height('100%')
      .backgroundColor($r('app.color.color_80000000'))
      .id('e_newspaper_container')

      if (this.isOpenListDialog) {
        ENewspaperListDialog({
          newspaperListBean: this.newspaperListBean,
          closeDialog: () => {
            this.isOpenListDialog = false
          }
        })
      }
    }
  }

  private async getNewspaperTime() {
    let newspaperTimes = await NewspaperViewModel.getNewspaperTime(this.calendarDate)
    if (newspaperTimes && newspaperTimes.length > 0) {
      this.calendarDate = newspaperTimes[0].date
      this.selectDate = new Date(this.calendarDate)
      Logger.debug('ENewspaperPageComponent', this.calendarDate)
      this.currentPageNum = '01'
    }
  }

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

    }
  }
}