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

/**
 * 我的页面
 */
@Component
export struct MinePageComponent {
  //是否是创作者
  @State isActive:boolean = false
  @State isLogin:boolean = true
  @State icons:MineFunctionModel[] = []
  scroller: Scroller = new Scroller()

  private context = getContext(this) as common.UIAbilityContext

  aboutToAppear(){
    // TODO 获取用户信息
    //初始化 icon
    this.initIconDatas()
  }

  /**
   * 初始化 icon
   */
  initIconDatas(){
    this.icons.push(new MineFunctionModel("评论",$r('app.media.mine_comment_icon')))
    this.icons.push(new MineFunctionModel("关注",$r('app.media.mine_order_icon')))
    this.icons.push(new MineFunctionModel("收藏",$r('app.media.mine_collect_icon')))
    this.icons.push(new MineFunctionModel("历史",$r('app.media.mine_history_icon')))
    this.icons.push(new MineFunctionModel("消息",$r('app.media.mine_msg_icon')))
    this.icons.push(new MineFunctionModel("留言板",$r('app.media.mine_msgboard_icon')))
    this.icons.push(new MineFunctionModel("预约",$r('app.media.mine_order_icon')))
  }


  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(){
      Grid(){
        ForEach(this.icons,(item:MineFunctionModel,index:number)=>{
          GridItem(){
            Row(){
              Column(){
                Image(item.imgSrc)
                  .width(30)
                  .height(30)

                Text(`${item.msg}`)
                  .margin({top:2})
                  .fontColor($r('app.color.white'))
              }
              .alignItems(HorizontalAlign.Center)
              .width('100%')
              Blank()
                .layoutWeight(1)
              if(index % 4 < 3 && index != this.icons.length){
                Text().backgroundColor($r('app.color.white'))
                  .width(2)
                  .height(15)
              }
            }
          }.onClick(()=>{
            console.log(index+"")
          })
        }, item => item)
      }
      .rowsTemplate('1fr 1fr')
      .columnsTemplate('1fr 1fr 1fr 1fr')
      // .columnsGap(10)
      .height(140)
      .margin({top:15 })
    }
  }

  @Builder CardUI(){
    Row(){
      Stack(){
        Image($r('app.media.mine_card_01'))
          .width(170)
          .objectFit(ImageFit.Auto)
        Column(){
          Text("积分商城")
            .fontColor($r('app.color.color_FF2E0C'))
            .width(120)
          Text("华为MATE40手机")
            .width(120)
            .fontColor($r('app.color.color_FF2E0C'))
            .fontSize(14)
            .margin({top:3})
        }.padding({left:20})
      }.alignContent(Alignment.Start)
      Stack(){
        Image($r('app.media.mine_card_02'))
          .width(170)
          .objectFit(ImageFit.Auto)
        Column(){
          Text("数字藏品").fontColor($r('app.color.color_AD6000'))
            .width(120)
          Text("黑胶唱片NFT").width(120)
            .fontColor($r('app.color.color_AD6000'))
            .fontSize(14)
            .margin({top:3})
        }.padding({left:30})
      }.alignContent(Alignment.Start)
    }.width('100%')
    .height(70)
  }

  @Builder ScrollUI(){
    Scroll(this.scroller){
      Column(){

      }.height(600)
      .setFullWidth()
      .backgroundColor($r('app.color.white'))
    }.setFullWidth()
    .layoutWeight(1)
    .scrollable(ScrollDirection.Vertical)
    .scrollBar(BarState.Off)
    .edgeEffect(EdgeEffect.None)
  }

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

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

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

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

}