import { NewspaperListBean, NewspaperListItemBean } from 'wdBean/Index'

/**
 * 期刊日期选择弹窗
 */
@CustomDialog
export struct ENewspaperPageDialog {
  dialogType: number = 0 //0：图片版，1：文字版
  pageDialogController?: CustomDialogController
  @Consume @Watch('onCurrentPageNumUpdated') currentPageNum: string
  @Prop newspaperListBean: NewspaperListBean = {} as NewspaperListBean
  public dialogVisibility?: (visibility: boolean) => void

  onCurrentPageNumUpdated(): void {
    console.log("ENewspaperListDialog-onCurrentPageNumUpdated", "currentPageNum：", this.currentPageNum)
  }

  aboutToAppear(): void {
    if (this.dialogType == 1 && this.dialogVisibility) {
      this.dialogVisibility(true)
    }
  }

  aboutToDisappear(): void {
    if (this.dialogType == 1 && this.dialogVisibility) {
      this.dialogVisibility(false)
    }
  }

  build() {
    Column() {
      if (this.dialogType == 1) {
        Image($r("app.media.iv_e_news_pager_calendar_arrow_up"))
          .width(18).height(8.5)
          .margin({ left: 31 })
      }
      Stack() {
        GridRow({ columns: 5, gutter: { x: 15, y: 15 } }) {
          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'))
                  .fontFamily('BebasNeueBold')
              }
              .alignItems(VerticalAlign.Center)
              .justifyContent(FlexAlign.Center)
              .width(30)
              .height(30)
              .borderRadius(3)
              .backgroundColor(this.currentPageNum != item.pageNum ? Color.White : $r('app.color.color_ED2800'))
              .onClick((event: ClickEvent) => {
                this.currentPageNum = item.pageNum
                if (this.pageDialogController) {
                  this.pageDialogController.close()
                }
              })
            }
          })
        }
      }
      .padding(20)
      .width(260)
      .borderRadius(4)
      .backgroundColor(Color.White)

      if (this.dialogType == 0) {
        Image($r("app.media.iv_e_news_pager_calendar_arrow_down"))
          .width(18).height(8.5)
          .margin({ left: 31 })
      }
    }
    .margin({ left: 10 })
    .alignItems(HorizontalAlign.Start)
  }
}