import { it } from "@ohos/hypium";

@CustomDialog
export struct HeroPopWindow {
  private years: string[] = ['2019年英雄榜','2018年英雄榜','2017年英雄榜','2016年英雄榜','2015年英雄榜'];
  controller: CustomDialogController;
  build() {
    Stack() {
      //半透明黑色背景
      Column().width('100%').height('100%').backgroundColor('#50000000')

      //弹窗主体
      Column() {
        //头部图标
        Image($r('app.media.heroPop_headericon'))
          .width(80)
          .height(80)
          .margin({top:-25})
          .zIndex(2)
        //标题和正文范围
        Column() {
          Text('肝胆英雄榜')
            .fontSize(20)
            .fontColor('#673986')
            .margin({top:20})
            Grid() {
              ForEach(this.years,(item:string)=>{
                GridItem({style:GridItemStyle.PLAIN}) {
                  Text(item)
                    .fontSize(10)
                    .fontColor(Color.Black)
                    .backgroundColor(Color.White)  // 添加背景色确保可见
                    .textAlign(TextAlign.Center)
                    .width('100%')  // 确保文本容器宽度
                }
                .height(20)
                .width('48%')
                .padding(5)
                .borderRadius(10)
                .borderWidth(1)
                .borderColor(Color.Red)
              })
            }
            .columnsGap(10)
            .rowsGap(10)
            .padding(10)
            .width('100%')
            .height('auto')
          Text('感谢有您，一路相伴。"肝胆英雄榜"是由国内最具影响力的肝胆病互联网线上服务平台-\n' +
            '肝胆相照依据肝胆病医生在各自领域年度所做工作，综合评选出来的最认可的"肝胆好医生"，授予证书并赠送精美感恩好礼。\n' +
            '目前"肝胆英雄榜"荣誉包括："护肝大使"护肝新量""公益之星""科普达入"、"视频之星"、"人气科室"及"宣传之星"等。')
            .fontSize(12)
            .fontColor('#666666')
            .textAlign(TextAlign.Start)
            .lineHeight(20)
            .width('90%')
            .margin({bottom:10})
        }
        .zIndex(1)
        .margin({top:-10,bottom:10})
        .justifyContent(FlexAlign.Center)
        .backgroundColor(Color.White)
        .borderRadius(16)
        .height('auto')
        .width('90%')

        //删除按钮
        Button() {
          Image($r('app.media.heropop_delete'))
            .width(30)
            .height(30)
        }
        .zIndex(3)
        .position({ x: '88%', y: 10 })
        .onClick(() => this.controller.close())
      }
      .width('90%')
      .backgroundImage($r('app.media.heroPop_bg'))
      .backgroundImageSize(ImageSize.Cover)
      .borderRadius(16)
    }
  }
}