import router from '@ohos.router';
import common from '@ohos.app.ability.common';
const TAG = 'PageComponent';

/**
 * 我的页面
 */
@Component
export struct MinePageComponent {
  //是否是创作者
  @State isActive:boolean = false
  @State isLogin:boolean = true

  private context = getContext(this) as common.UIAbilityContext

  aboutToAppear(){
    // TODO 获取用户信息
  }

  build() {
    Column(){
      Stack({alignContent:Alignment.Top}){
        Image($r('app.media.mine_head_bg'))
          .setFullWidth()
          .height('50%')
          .objectFit(ImageFit.Auto)
        this.TopUI()
      }.setFullWidthAndHeight()
      .backgroundColor($r('app.color.color_F5F5F5'))
    }.setFullWidthAndHeight()

  }


  @Builder TopUI(){
    Column(){
      //头像层
      this.HeaderUI()
      //Grid 区域
      this.GridUI()
      //Card
      this.CardUI()
      //滑动区域
      this.ScrollUI()
    }
    .padding({left:11,right:11})
    .setFullWidthAndHeight()
  }

  @Builder HeaderUI(){
    Row(){
      //头像
      Stack(){
        Button({type:ButtonType.Circle})
          .backgroundColor($r('app.color.white'))
          .width(74)
          .height(74)

        Image($r('app.media.mine_head_icon'))
          .width(70)
          .height(70)
          .objectFit(ImageFit.Cover)
          .borderRadius(50)
      }.width(74)
      .height(74)

      //昵称信息
      Column(){
        Row(){
          Text("人民日报网友ABCDEF")
            .fontColor($r('app.color.white'))

          Image($r('app.media.mine_user_edit'))
            .width(20)
            .height(20)
        }
        Text("等级8")
          .textAlign(TextAlign.Center)
          .backgroundImage($r('app.media.mine_grade_bg'))
          .backgroundImageSize({width:55})
          .fontColor($r('app.color.white'))
          .fontSize(12)
          .width(40)
          .margin({top:20})
      }.alignItems(HorizontalAlign.Start)
      .width(200)
      .margin({left:10})

      Blank()

      Stack({alignContent:Alignment.Start}){
        Text("签到")
          .textAlign(TextAlign.Center)
          .borderRadius({ topLeft:10,bottomLeft:10})
          .width(50)
          .fontColor($r('app.color.white'))
          .backgroundColor($r('app.color.color_FFC460'))
          .margin({left:20})
        Image($r("app.media.mine_sign_icon"))
          .width(30)
          .height(30)
      }.width(60)

    }
    .setFullWidth()
    .margin({top:30})
  }

  @Builder GridUI(){
    Column(){

    }
  }

  @Builder CardUI(){
    Row(){

    }
  }

  @Builder ScrollUI(){
    Column(){
      Scroll(){

      }
    }
  }

  @Styles setFullWidthAndHeight(){
    .width('100%')
    .height('100%')
  }

  @Styles setFullWidth(){
    .width('100%')
  }

  @Styles setFullHeight(){
    .width('100%')
  }

  change(){
    router.pushUrl({
      url: 'pages/IndexPage',
      params: {
      }
    }).catch((error: Error) => {
    });
  }

}