import { TitleBarComponent } from '../view/TitleBarComponent';

@Builder
export function GuideBuilder() {
  GuideLayout()
}

/**
 * 拍照指南页面
 */
@Component
export struct GuideLayout {
  @StorageProp('statusBarHeight') statusBarHeight: number = 0;
  @Consume('pageInfos') pageStack: NavPathStack;

  build() {
    NavDestination() {
      Stack(){
        Stack() {
          Image($r('app.media.ic_guide_watermark'))
            .width(185)
            .height(185)
        }
        .width('100%')
        .alignContent(Alignment.End)
        Column() {
          //标题栏
          TitleBarComponent({
            titleName: '',
            isShowTitle: false,
            isShowBack: true,
            isShowSave: false,
            onSave: () => {
            }
          })

          Scroll(){
            // 内容区
            Column() {
              Text('如何拍照？')
                .width('100%')
                .fontSize(24)
                .fontColor('#FF1A1A1A')
                .fontWeight(FontWeight.Bold)

              Stack(){
                Column(){
                  Text('1.注意光线均匀\n' +
                    '2.不能耸肩或斜肩\n' +
                    '3.正对镜头，双耳露出\n' +
                    '4.不要佩戴眼镜\n' +
                    '5.注意纯色墙作背景\n' +
                    '6.避免衣服与背景色相同')
                    .width('100%')
                    .lineHeight(27)
                    .fontSize(14)
                    .fontColor('#FF1A1A1A')
                    .fontWeight(FontWeight.Normal)
                }
                .justifyContent(FlexAlign.Start)
                .width('100%')
                .padding({ left: 16, right: 16, top: 20, bottom: 20 })

                Column(){
                  Image($r('app.media.ic_guide_example'))
                    .width(93)
                    .height(130)

                  Text('照片示例')
                    .fontSize(12)
                    .fontColor('#FFFFFFFF')
                    .fontWeight(FontWeight.Normal)
                    .backgroundColor('#801a1a1a')
                    .borderRadius(4)
                    .padding({left: 8, right: 8, top: 5, bottom: 5})
                    .margin({top: 12})
                }
                .margin({right: 16, top:11})
                .align(Alignment.Top)
              }
              .alignContent(Alignment.TopEnd)
              .width('100%')
              .borderRadius(16)
              .backgroundColor('#FFFFFFFF')
              .padding({bottom: 10})
              .margin({left: 16, right: 16, top: 20})


              Text('证件照背景颜色要求')
                .width('100%')
                .fontSize(24)
                .fontColor('#FF1A1A1A')
                .fontWeight(FontWeight.Bold)
                .margin({top: 24})

              Stack(){
                Column(){
                  // 白色背景
                  Row(){
                    Stack().backgroundColor('#FFFFFFFF').borderRadius(369).width(18).height(18).borderColor('#FFAAAAAA').borderWidth(0.5)
                    Text('白色背景：')
                      .width('100%')
                      .fontSize(12)
                      .fontColor('#FF1A1A1A')
                      .fontWeight(FontWeight.Normal)
                      .margin({left: 4})
                  }
                  Text('用于护照、签证、驾驶证、身份证、二代身份证、驾驶证、黑白证件、医保卡、港澳通行证、护照等。')
                    .width('100%')
                    .fontSize(12)
                    .fontColor('#FF1A1A1A')
                    .fontWeight(FontWeight.Normal)
                    .margin({top: 12})

                  // 蓝色背景
                  Row(){
                    Stack().backgroundColor('#FF438EDB').borderRadius(369).width(18).height(18).borderColor('#FF438EDB').borderWidth(0.5)
                    Text('蓝色背景：')
                      .width('100%')
                      .fontSize(12)
                      .fontColor('#FF1A1A1A')
                      .fontWeight(FontWeight.Normal)
                      .margin({left: 4})
                  }
                  .margin({top: 24})
                  Text('用于毕业证、工作证、简历等\n' +
                    '(蓝色数值为R:0 G:191 B:243 或 C:67 M:Z Y:0 k:0)')
                    .width('100%')
                    .fontSize(12)
                    .fontColor('#FF1A1A1A')
                    .fontWeight(FontWeight.Normal)
                    .margin({top: 12})

                  // 红色背景
                  Row(){
                    Stack().backgroundColor('#FFFF0000').borderRadius(369).width(18).height(18).borderColor('#FFFF0000').borderWidth(0.5)
                    Text('红色背景：')
                      .width('100%')
                      .fontSize(12)
                      .fontColor('#FF1A1A1A')
                      .fontWeight(FontWeight.Normal)
                      .margin({left: 4})
                  }
                  .margin({top: 24})
                  Text('用于保险、医保、IC卡、暂住证、结婚照\n' +
                    '(红色数值为R:255 G:0 B:0 或 C:0 M:99 Y:100 K: 0)')
                    .width('100%')
                    .fontSize(12)
                    .fontColor('#FF1A1A1A')
                    .fontWeight(FontWeight.Normal)
                    .margin({top: 12})
                }
                .justifyContent(FlexAlign.Start)
                .width('100%')
                .padding({ left: 16, right: 16, top: 20, bottom: 20 })
              }
              .alignContent(Alignment.TopEnd)
              .width('100%')
              .borderRadius(16)
              .backgroundColor('#FFFFFFFF')
              .margin({left: 16, right: 16, top: 20})
            }
            .margin({top: 16 })
            .width('100%')
            .padding({left: 16, right: 16})
          }
          .width('100%')
          .layoutWeight(1)
          .scrollBar(BarState.Off)
          .align(Alignment.TopStart)
        }
        .width('100%')
        .height('100%')
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#FFF4F4F4')
      .alignContent(Alignment.TopStart)
    }
    .hideTitleBar(true)
  }


}
