import { CompDTO, ContentDTO, VideoInfoDTO, } from 'wdBean';
import { BreakpointConstants } from 'wdConstant';
import { Logger } from 'wdKit';
import { PaperSingleColumn999CardView } from '../page/CardView';
import { EmptyComponent } from '../view/EmptyComponent';

const TAG = 'SingleColumn999Component';

/**
 * 早晚报数据组件
 */
@Component
export struct SingleColumn999Component {
  @StorageLink('currentBreakpoint') @Watch('watchCurrentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_XS;
  @State compDTO: CompDTO = {
    compStyle: 'compStyle3',
    operDataList: [
      {
        newsTitle: '时政微观察丨从外贸“成绩单”看中国经济新亮色',
        description: "description0",
        coverUrl: 'https://cdnjdphoto.aikan.pdnews.cn/zhbj-20240116/image/content/a9028e7011bb440e94ba7c63d80b39b7.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg'
      } as ContentDTO,
      {
        newsTitle: '画好强国建设、民族复兴的最大同心圆',
        description: "description1",
        coverUrl: "https://cdnjdphoto.aikan.pdnews.cn/sjbj-20240116/image/display/80351784d4da4fc08b8987ba45a7647f.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg",
      } as ContentDTO,
      {
        newsTitle: '绿色“一带一路”十周年创新理念与实践案例',
        description: "description2",
        newsSummary: "共建“一带一路”倡议提出10年多来，在各方共同努力下，共建“一带一路”绿色发展取得积极进展，理念引领不断增强，交流机制不断完善，务实合作不断深化。",
        coverUrl: "",
      } as ContentDTO,
      {
        newsTitle: '瞭望 | 在深海聆听“幽灵粒子”',
        description: "description3",
        coverUrl: 'https://cdnjdphoto.aikan.pdnews.cn/zhbj-20240116/image/content/b77a3577594d4d24b84e7b2b20e38e41.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg'
      } as ContentDTO,
      {
        newsTitle: '一图读懂｜未来三年，长三角示范区安排了这些重大项目',
        description: "description4",
        coverUrl: "https://cdnjdphoto.aikan.pdnews.cn/zhbj-20240116/image/content/8d54ef1cbbe14ef08d6ab38f07867e4c.jpeg?x-oss-process=image/resize,w_550/quality,q_90/format,jpg",
      } as ContentDTO,
      {
        newsTitle: '一头江豚的自述',
        description: "description5",
        newsSummary: "我是生活在长江里的一头江豚，是长江中唯一的水生哺乳动物，更是国家一级保护动物。但曾几何时，我和我的江中小伙伴出现了生存危机……直到有一天，我突然发现，打渔人变成护渔人，江水变清澈了，长江逐渐恢复了生机，我的家族数量上升到了1249头。当长江之水再一次悠悠流淌，我们相拥在清澈波光中起舞。长江，我的家园。",
        coverUrl: "https://cdnjdphoto.aikan.pdnews.cn/sjbj-20240116/image/display/2ec7bccff2324b05ac4b6503d868a381.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg",
        visitorComment: 10,
        videoInfo: {
          // clarity: 0,
          // resolutionHeight: 0,
          // resolutionWidth: 0,
          videoDuration: 229,
          videoLandScape: 1,
          // videoType: 0,
          videoUrl: "https://cdnjdout.aikan.pdnews.cn/zhbj-20240116/vod/content/output/c72f4170db2c4d34befa453f60d39a69_opt.mp4",
          firstFrameImageUri: ""
        } as VideoInfoDTO
      } as ContentDTO,
      {
        newsTitle: '遇见习近平丨北京正在书写历史',
        description: "description6",
        coverUrl: "https://cdnjdphoto.aikan.pdnews.cn/zhbj-20240116/image/content/7c54d59b63844464a261dcbba82c7aed.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg",
      } as ContentDTO
    ]
  } as CompDTO

  watchCurrentBreakpoint() {
    Logger.info(TAG, `watchCurrentBreakpoint, this.currentBreakpoint: ${this.currentBreakpoint}`);
  }

  aboutToAppear() {
    Logger.info(TAG, `aboutToAppear, beanList:${this.compDTO?.operDataList?.length}, currentBreakpoint:${this.currentBreakpoint}`);
  }

  aboutToDisappear() {
    Logger.info(TAG, 'aboutToDisappear');
  }

  onPageShow() {
    Logger.info(TAG, 'onPageShow');
  }

  onPageHide() {
    Logger.info(TAG, 'onPageHide');
  }

  onBackPress() {
    Logger.info(TAG, 'onBackPress');
  }

  @Builder
  itemFooter(text: string) {
    Text("已显示全部内容")
      .width("100%")
      .height(100)
      .padding(9)
      .fontColor(Color.White)
      .fontSize($r('app.float.font_size_16'))
      .fontWeight(FontWeight.Medium)
      .textAlign(TextAlign.Center)
      .align(Alignment.Bottom)
      .maxLines(1)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
  }

  build() {
    if (this.compDTO && this.compDTO?.operDataList?.length > 0) {
      List({ space: 2, initialIndex: 0 }) {
        // ListItemGroup({
        //   // footer: this.itemFooter("")
        // }) {
          ForEach(this.compDTO?.operDataList, (item: ContentDTO, index: number) => {
            ListItem() {
              this.buildPaperItem(item, index)
            }
          }, (item: ContentDTO, index: number) => JSON.stringify(item))
        // }
        // .divider({ strokeWidth: 1, color: '#EFEFEF' }) // 每行之间的分界线

        ListItem() {
          Text("已显示全部内容")
            .width("100%")// .height(100)
            .padding(9)
            .fontColor(Color.White)
            .fontSize($r('app.float.font_size_16'))
            .fontWeight(FontWeight.Medium)
            .textAlign(TextAlign.Center)
            .align(Alignment.Bottom)
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
        }
      }
      .height("100%") // 必须设置height
      // .margin({ left: 14, right: 14 })
      // .listDirection(Axis.Vertical) // 默认值：Axis.Vertical
      // .lanes(this.buildLanes()) // 行/列数，一列 // 默认值：1
      .cachedCount(2)
      .sticky(StickyStyle.Header) // 吸顶
      .scrollBar(BarState.Off)
      .nestedScroll({
        scrollForward: NestedScrollMode.PARENT_FIRST,
        scrollBackward: NestedScrollMode.SELF_FIRST
      })
    } else {
      EmptyComponent({ emptyHeight: 200 })
    }
  }

  // public buildLanes(): number {
  //   return new BreakPointType({ xs: 1, sm: 1, md: 2, lg: 3 }).getValue(this.currentBreakpoint)
  // }

  /**
   * 组件项
   *
   * @param programmeBean item 组件项
   */
  @Builder
  buildPaperItem(item: ContentDTO, index: number) {
    PaperSingleColumn999CardView({
      item: item,
      index: index
    })
  }
}