import router from '@ohos.router'
import { FrontLinkObject, MorningEveningPaperDTO } from 'wdBean'

// import { Logger } from 'wdKit';
// import PageViewModel from '../viewmodel/PageViewModel';
// import { PageComponent } from './page/PageComponent';

const TAG = 'MorningEveningPaperComponent';

@Entry
@Component
export struct MorningEveningPaperComponent {
  @State currentTopNavSelectedIndex: number = 0;
  paperPageId: string = '21549'
  @State groupId: string = ''
  @State message: string = 'Hello World'
  @State morningEveningPaperDTO: MorningEveningPaperDTO = {
    name: "新闻夜读",
    topicInfo: {
      frontLinkObject: {
        coverSize: "599*798",
        coverUrl: "https://cdnjdphoto.aikan.pdnews.cn/zhbj-20240116/image/content/9a91a96077174087852cf93c5e26acce.jpeg",
        newsId: "30002086032",
        newsRelId: 500000256225,
        summary: "欧尔班多次明确反对欧盟此举。2023年底，匈牙利否决了欧盟对乌克兰的500亿欧元援助计划，认为欧盟不应向乌克兰提供更多资金，而应尽快结束俄乌冲突。因此，欧盟领导人在去年12月欧盟峰会上未能就该计划达成一致。欧尔班多次明确反对欧盟此举。2023年底，匈牙利否决了欧盟对乌克兰的500亿欧元援助计划，认为欧盟不应向乌克兰提供更多资金，而应尽快结束俄乌冲突。因此，欧盟领导人在去年12月欧盟峰会上未能就该计",
        title: "匈牙利总理欧尔班妥协，阻碍欧盟向乌克兰援助的最后一个障碍被解"
      },
      title: "新闻夜读",
      topicDate: "2024-01-16",
      topicId: "10000002068",
    }
  } as MorningEveningPaperDTO

  // @State morningEveningPaperDTO: MorningEveningPaperDTO = {} as MorningEveningPaperDTO

  async aboutToAppear() {
    console.info(TAG, `aboutToAppear`);
    // let paperDTO = await PageViewModel.getMorningEveningPaperData(this.paperPageId)
    // if (paperDTO) {
    //   this.morningEveningPaperDTO = paperDTO;
    //   if (paperDTO.groups && paperDTO.groups.length > 0) {
    //     this.groupId = paperDTO.groups[0].id + ''
    //   }
    //   Logger.info(TAG, `aboutToAppear, paperDTO is not empty`);
    // }
  }

  build() {
    Column() {
      RelativeContainer() {
        Image($r('app.media.icon_read_paper'))
          .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('img_logo1')


        Row() {
          Text(this.morningEveningPaperDTO?.topicInfo?.title ?? "")
            .fontSize(20)
            .fontColor($r('app.color.white'))
            .maxLines(1)

          Text(this.morningEveningPaperDTO?.topicInfo?.topicDate ?? '')// Text('2024年\n1月16日')
            .width(50)
            .fontSize(12)
            .fontColor($r('app.color.white'))
            .maxLines(2)

          Image($r('app.media.bg_event_status_end'))
            .height($r('app.float.top_arrow_size'))
            .width(100)
        }
        .alignItems(VerticalAlign.Bottom)
        .alignRules({
          left: { anchor: "img_logo1", align: HorizontalAlign.End },
          center: { anchor: "__container__", align: VerticalAlign.Center } })
        .id('row_paper_date')

        Image($r('app.media.icon_close'))
          .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('img_close')
          .onClick((event: ClickEvent) => {
            console.info(TAG, "img_close")
            router.back()
          })

        Image($r('app.media.icon_share'))
          .height($r('app.float.top_arrow_size'))
          .width($r('app.float.top_arrow_size'))
          .alignRules({
            right: { anchor: "img_close", align: HorizontalAlign.Start },
            center: { anchor: "__container__", align: VerticalAlign.Center } })
          .id('img_share')
      }
      .margin({ left: $r('app.float.margin_16'), right: $r('app.float.margin_16') })
      .height($r('app.float.top_bar_height'))
      .backgroundColor(Color.Black)

      List() {
        ListItem() {
          this.buildTopicInfoView(this.morningEveningPaperDTO?.topicInfo?.frontLinkObject)
        }

        ListItem() {
          Row() {
            Stack({ alignContent: Alignment.Start }) {
              Image($r('app.media.listen_left_bg'))
                .width('100%')
                .height('100%')
                .objectFit(ImageFit.Contain)
              Image($r('app.media.icon_listen'))
                .width(24)
                .height(24)
                .margin({ left: 10 })
                .alignSelf(ItemAlign.Start)

              Text('晚上好， 请收听今日新闻播报')
                .fontSize(14)
                .margin({ left: 50 })
                .fontColor(Color.Black)
                .maxLines(1)
                .textOverflow({ overflow: TextOverflow.Ellipsis })
            }
            .layoutWeight(1)
            .height('100%')

            Stack({ alignContent: Alignment.Center }) {
              Image($r('app.media.listen_right_bg'))
                .width('100%')
                .height('100%')
                .objectFit(ImageFit.Contain)

              Image($r('app.media.ic_red_triangle'))
                .width(24)
                .height(24)
                .margin({ left: 10 })// .alignSelf(ItemAlign.Center)
                .objectFit(ImageFit.Contain)
            }
            // .aspectRatio(7 / 4)
            .height('100%')
            // .justifyContent(FlexAlign.Center)
            // .width(94)
            // .width(140)
            .width('20%')
            // .height(56)
            .onClick(() => {
              console.info(TAG, `onClick listen_right_bg`);
            })
          }
          // .width('100%')
          .height(56)
          .alignItems(VerticalAlign.Center)
          .justifyContent(FlexAlign.SpaceBetween)
          // .backgroundColor(Color.Red)
        }

        ListItem() {
          // PageComponent({
          //   currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
          //   navIndex: 0,
          //   pageId: '31320', //this.groupId,
          //   channelId: ''
          // })
        }.height(500)
      }
      // .backgroundColor('#FFF1F3F5')
      // .backgroundColor(Color.Blue)
      .margin({ left: 14, right: 14 })

      // .alignListItem(ListItemAlign.Center)
    }.width('100%')

    // Row() {
    //   Column() {
    //     Text(this.message)
    //       .fontSize(50)
    //       .fontWeight(FontWeight.Bold)
    //   }
    //   .width('100%')
    // }
    // .height('100%')
  }

  /**
   * 布局描述
   *
   * @param FrontLinkObject item 组件项
   * @param index
   */
  @Builder
  buildTopicInfoView(item: FrontLinkObject) {
    RelativeContainer() {
      Image(item?.coverUrl)
        .width("100%")
        .height("100%")
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Top },
          left: { anchor: '__container__', align: HorizontalAlign.Start }
        })
        .id('img_cover')

      Row() {
        Text("查看详情")
          .fontSize(20)
          .fontColor($r('app.color.white'))
          .maxLines(1)

        Image($r('app.media.more'))
          .height($r('app.float.top_arrow_size'))
          .width(20)
      }
      .margin({ top: 10 })
      // .backgroundColor(Color.Red)
      .alignRules({
        left: { anchor: "__container__", align: HorizontalAlign.Start },
        bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
      })
      .id('row_detail')

      Text(item?.summary ?? "")
        .margin({ top: 10 })
        .fontSize(14)
        .fontColor($r('app.color.white'))
        .maxLines(3)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .alignRules({
          left: { anchor: "__container__", align: HorizontalAlign.Start },
          bottom: { anchor: "row_detail", align: VerticalAlign.Top }
        })
        .id('txt_summary')

      Text(item?.title ?? "")
        .fontSize(24)
        .fontColor($r('app.color.white'))
        .maxLines(2)
        .alignRules({
          left: { anchor: "__container__", align: HorizontalAlign.Start },
          bottom: { anchor: "txt_summary", align: VerticalAlign.Top }
        })
        .id('txt_title')
    }
    .width("100%")
    .aspectRatio(3 / 4)
    // .aspectRatio(1)
    // .backgroundColor(Color.Orange)
    // .hoverEffect(HoverEffect.Scale)
    .onClick((event: ClickEvent) => {
      console.info(TAG, `buildTopicInfoView onClick event`);
      // let taskAction: Action = {
      //   type: 'JUMP_H5_BY_WEB_VIEW',
      //   params: {
      //     url: ConfigConstants.DETAIL_URL
      //   } as Params,
      // };
      // WDRouterRule.jumpWithAction(taskAction)

      // let taskAction: Action = {
      //   type: 'JUMP_DETAIL_PAGE',
      //   params: {
      //     detailPageType: 7, // 沉浸式竖屏详情页
      //     contentID: '863556812'
      //   } as Params,
      // };
      // WDRouterRule.jumpWithAction(taskAction)
    })
  }
}