import { ContentDetailDTO, 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, NetworkUtil, CustomToast } from 'wdKit/Index';
import { TrackingContent, TrackConstants, TrackingButton } from 'wdTracking/Index';
import { WDShare } from 'wdShare/Index';
import { window } from '@kit.ArkUI';
import { WindowModel } from 'wdKit';

//电子报UI
@Component
export struct ENewspaperPageComponent {
  private windowClass?: window.Window;
  private displayTool = display.getDefaultDisplaySync()
  private screenWidth: number = 0
  @State picWidth: number = 0
  @State picHeight: number = 0
  @Provide itemPicWidth: number = 0
  @Provide itemPicHeight: 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()
  @Provide bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
  @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  @State ratio: string = '100%'
  @State toastText: ResourceStr = ""
  dialogToast: CustomDialogController = new CustomDialogController({
    builder: CustomToast({
      bgColor: $r("app.color.color_B3000000"),
      opacityValue: 1,
      fontSizeValue: "25lpx",
      lineHeightValue: "36lpx",
      msg: this.toastText,
    }),
    autoCancel: false,
    alignment: DialogAlignment.Center,
    customStyle: true,
    maskColor: "#00000000"
  })

  showToastTip(msg: ResourceStr) {
    this.toastText = msg
    this.dialogToast.open()
  }

  //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

    this.swiperIndex = this.newspaperListBean?.list.findIndex(_item => _item?.pageNum === this.currentPageNum)
    //电子报--版面序号选择点击
    TrackingContent.clickWithEvent('panel_number_selection_click', TrackConstants.PageName.NewsPaperPage,
      TrackConstants.PageName.NewsPaperPage
      , {
        'panelNumber': this.newspaperListBean?.list[this.swiperIndex].pageNum,
        'panelName': this.newspaperListBean?.list[this.swiperIndex].pageName,
        'currentPanelDate': this.selectDate.toDateString(),
        'currentNumber': this.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)
        }
        //日历选择点击
        TrackingContent.clickWithEvent('date_selection_click', TrackConstants.PageName.NewsPaperPage,
          TrackConstants.PageName.NewsPaperPage
          , {
            'panelNumber': this.newspaperListBean?.list[this.swiperIndex].pageNum,
            'panelName': this.newspaperListBean?.list[this.swiperIndex].pageName,
            'currentPanelDate': this.selectDate.toDateString(),
            'currentNumber': this.swiperIndex,
          })
      }
    }),
    alignment: DialogAlignment.Top,
    offset: { dx: 0, dy: 80 },
    customStyle: true,
    maskColor: $r('app.color.color_80000000'),
  })
  //图片版选择弹框
  pageDialogController: CustomDialogController = new CustomDialogController({
    builder: ENewspaperPageDialog({
      dialogType: 0,
      newspaperListBean: this.newspaperListBean,
    }),
    alignment: DialogAlignment.BottomStart,
    offset: { dx: 0, dy: -90 },
    customStyle: true,
    maskColor: $r('app.color.color_80000000'),
  })
  //文字报纸弹框
  @State isOpenListDialog: boolean = false

  // listDialogController: CustomDialogController = new CustomDialogController({
  //   builder: ENewspaperListDialog({
  //     newspaperListBean: this.newspaperListBean
  //   }),
  //   alignment: DialogAlignment.Bottom,
  //   offset: { dx: 0, dy: 0 }
  // })

  async aboutToAppear() {
    this.windowClass = WindowModel.shared.getWindowClass(); // 获取应用主窗口
    this.screenWidth = this.windowClass?.getWindowProperties()?.windowRect.width
    console.log('ENewspaperPageComponent this.screenWidth', this.screenWidth)
    // 2000折叠屏 TODO DeviceUtil 方法完善了换判断条件
    this.ratio = this.screenWidth > 2000 ? '50%' : '100%'
    //获取宽高尺寸
    // Swiper .margin({ left: 10, right: 10 })
    this.picWidth = this.screenWidth - vp2px(20)
    let screenHeight = this.displayTool.height;
    // bottomSafeHeight 底导高度 topSafeHeight 顶导高度 44 顶部高度 60 底部高度
    // newspaper_shadow 49 高度  e_newspaper_content 59 margin top
    let height =
      screenHeight - this.bottomSafeHeight - this.topSafeHeight - vp2px(44) - vp2px(60) - vp2px(49) - vp2px(59)
    this.picHeight = height

    let ratio = this.ratio == '100%' ? 1 : 0.5
    this.picWidth = this.picWidth * ratio
    // 默认日期
    const date = new Date()
    const month = date.getMonth() + 1
    const day = date.getDate()
    this.calendarDate =
      `${date.getFullYear()}-${month > 9 ? month : '0' + month}-${day > 9 ? day : '0' + day}`
    //注册字体
    font.registerFont({
      familyName: 'BebasNeueBold',
      familySrc: $rawfile('font/BebasNeueBold.otf')
    })
    this.getNewspaperTime()
    this.getNewspaperList()
    this.resizeWindow()
  }

  aboutToDisappear() {
    // if (this.calendarDialogController) {
    //   this.calendarDialogController = null
    // }
    // if (this.listDialogController) {
    //   this.listDialogController = null
    // }
    this.windowClass?.off('windowSizeChange');
  }

  resizeWindow() {
    this.windowClass?.on('windowSizeChange', () => {
      this.resize()
      this.getNewspaperList()
      this.swiperController.changeIndex(this.swiperIndex)
    });
  }

  resize() {
    this.screenWidth = this.windowClass?.getWindowProperties()?.windowRect.width || this.displayTool.width
    // 2000折叠屏 TODO DeviceUtil 方法完善了换判断条件
    this.ratio = this.screenWidth > 2000 ? '50%' : '100%'
    let ratio = this.ratio == '100%' ? 1 : 0.5
    this.picWidth = this.screenWidth - vp2px(20)
    this.picWidth = this.picWidth * ratio
  }

  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()
            }
          })

          if (this.newspaperListBean && this.newspaperListBean.list && this.newspaperListBean.list.length > 0) {
            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(() => {
                this.share()
              })
          }
        }
        .margin({ left: $r('app.float.margin_16'), right: $r('app.float.margin_16'), top: this.topSafeHeight + 'px' })
        .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(px2vp(this.picWidth))
            .height(px2vp(this.picHeight))
            .margin({ top: 59, left: 10, right: 10 })
          // .padding({ right: 10, left: 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 })
            })
          }
          .itemSpace(10)
          .index(this.swiperIndex)
          .width(px2vp(this.picWidth))
          .height(px2vp(this.picHeight))
          .vertical(true)
          .autoPlay(false)
          .cachedCount(1)
          .indicator(false)
          .loop(false)
          .displayCount(1)
          .margin({ top: 59, 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
          })

          Row() {
            Image($r('app.media.newspaper_shadow'))
              .height($r('app.float.vp_12'))
              .width(px2vp(this.picWidth))
              .objectFit(ImageFit.Contain)

          }.margin({ top: -1 }).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'))
              .lineHeight(20)
            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: 17 })
          .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()
            // 电子报--滑动查看下一版
            TrackingButton.click('panelPageViewNextPanel', TrackConstants.PageName.NewsPaperPage,
              TrackConstants.PageName.NewsPaperPage
              , {
                'panelNumber': this.newspaperListBean?.list[this.swiperIndex].pageNum,
                'panelName': this.newspaperListBean?.list[this.swiperIndex].pageName,
              })
          })
        }

        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) => {
          if (!NetworkUtil.isNetConnected()) {
            this.showToastTip('网络出小差了，请检查网络后重试')
            return
          }
          if (this.newspaperListBean.list && this.newspaperListBean.list.length > 0) {
            this.pageDialogShow = !this.pageDialogShow
            if (this.pageDialogShow) {
              this.pageDialogController.open()
            } else {
              this.pageDialogController.close()
            }
          } else {
            this.showToastTip('暂无数据')
          }
        })

        // .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) => {
          if (!NetworkUtil.isNetConnected()) {
            this.showToastTip('网络出小差了，请检查网络后重试')
            return
          }
          if (this.newspaperListBean.list && this.newspaperListBean.list.length > 0) {
            this.isOpenListDialog = true
            //电子报--读报纸点击
            TrackingContent.clickWithEvent('read_newspaper_click', TrackConstants.PageName.NewsPaperPage,
              TrackConstants.PageName.NewsPaperPage
              , {
                'panelNumber': this.newspaperListBean?.list[this.swiperIndex].pageNum,
                'panelName': this.newspaperListBean?.list[this.swiperIndex].pageName,
                'currentPanelDate': this.selectDate.toDateString(),
                'currentNumber': this.swiperIndex,
              })
          } else {
            this.showToastTip('暂无数据')
          }
        })
      }
      .width('100%')
      .height('100%')
      .backgroundColor($r('app.color.color_80000000'))
      //   .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
      .id('e_newspaper_container')

      if (this.isOpenListDialog) {
        ENewspaperListDialog({
          newspaperListBean: this.newspaperListBean,
          scrollIndex: this.swiperIndex,
          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() {
    // ENewspaperItemComponent .padding({ top:14, right: 10, bottom: 14, left: 10 })
    // 计算图片的内容宽高
    this.itemPicWidth = this.picWidth - vp2px(20)
    this.itemPicHeight = this.picHeight - vp2px(28)
    try {
      if (NetworkUtil.isNetConnected()) {
        let listBean =
          await NewspaperViewModel.getNewspaperList(this.calendarDate, this.itemPicWidth + 'x' + this.itemPicHeight)
        this.newspaperListBean = listBean;
      } else {
        this.showToastTip('网络出小差了，请检查网络后重试')
      }
    } catch (exception) {

    }
  }

  share() {
    let contentDetailData: ContentDetailDTO = {
      shareInfo: {
        shareTitle: this.newspaperListBean?.list[this.swiperIndex].pageName,
        appCustomPublishTime: this.newspaperListBean?.list[this.swiperIndex].periodNum,
        appCustomImageUrl: this.newspaperListBean?.list[this.swiperIndex].pagePic,
        shareUrl: this.newspaperListBean?.list[this.swiperIndex].sharePagePic.shareUrl,
        sharePosterCoverUrl: this.newspaperListBean?.list[this.swiperIndex].sharePagePic.sharePosterCoverUrl,
        appCustomShowReport: false,
        appCustomShowLike: -1,
        shareOpen: 1,
        sharePosterOpen: 1,
        appCustomPosterShareControl: '-1',
        appCustomShowPoster: -1,
        appCustomShowPosterType: 4,
      }
    } as ContentDetailDTO
    WDShare.shareContent(contentDetailData, TrackConstants.PageName.NewsPaperPage,
      TrackConstants.PageName.NewsPaperPage)
  }
}