import { DiamondRuleEntity } from "../entity/DiamondRuleEntity";
import { DiamondRuleItemView } from "../view/DiamondRuleItemView";

@CustomDialog
export struct DiamondRuleDialog {
  controller: CustomDialogController;

  build() {
    RelativeContainer() {
      Image($r('app.media.ic_diamond_rule_top_bg')).width('100%').aspectRatio(1.811)

      Image($r('app.media.ic_diamond_rule_indicator')).width(86).height(16)
        .alignRules({
          left: {anchor: 'tv_title', align: HorizontalAlign.Start},
          right: {anchor: 'tv_title', align: HorizontalAlign.End},
          bottom: {anchor: 'tv_title', align: VerticalAlign.Bottom}
        })
        .margin({left: -8, bottom: -4})
      Text('规则说明').fontColor($r('app.color.color_1a1a1a')).fontSize(20).fontFamily('almmsht').id('tv_title')
        .alignRules({
          left: {anchor: '__container__', align: HorizontalAlign.Start},
          right: {anchor: '__container__', align: HorizontalAlign.End}
        })
        .width('auto')
        .margin({top: 20})

      Image($r('app.media.ic_close2')).width(24).height(24)
        .alignRules({
          top: {anchor: 'tv_title', align: VerticalAlign.Top},
          right: {anchor: '__container__', align: HorizontalAlign.End},
          bottom: {anchor: 'tv_title', align: VerticalAlign.Bottom}
        })
        .margin({right: 16})
        .onClick(() => {
          this.controller.close()
        })

      List({space: 20}) {
        ForEach(DiamondRuleEntity.getRuleList(), (item: DiamondRuleEntity) => {
          ListItem() {
            DiamondRuleItemView({entity: item})
          }
        })
      }
      .width('auto')
      .height('auto')
      .margin({left: 16, top: 24, right: 16, bottom: 30})
      .backgroundColor(Color.White)
      .borderRadius(10)
      .padding({left: 16, top: 20, right: 16, bottom: 20})
      .alignRules({
        top: {anchor: 'tv_title', align: VerticalAlign.Bottom}
      })
    }
    .width('100%')
    .height('auto')
    .backgroundColor(Color.White)
  }
}