import router from '@ohos.router';
import { HomePageBottomComponent } from './home/HomePageBottomComponent';

@Component
export struct MyHomeComponent {
  @State tileOpacity: number = 0;
  firstPositionY:number = 0;
  @State isHasIntroduction: boolean = true
  @State desc:string = "点击添加简介，让大家认识你" //text 搞两个样式，如果三行，就显示 另外一个text  没有显示高度的
  fontColor: string = '#999999'
  selectedFontColor: string = '#000000'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()
  isChangeToUserEdit = false;


  build() {
    Stack({ alignContent: Alignment.Top }){
      Image($r('app.media.title_bg'))
        .width('100%')
        .height('355lpx')
        .objectFit(ImageFit.Cover)

      Column(){
        Stack({ alignContent: Alignment.Top }){
          this.MineHomeTitleTransparent()
          this.MineHomeTitleWhite()
        }

        Scroll() {
          Column() {
            //用户信息区域
            Row() {
              Image($r('app.media.default_head'))
                .width('115lpx')
                .height('115lpx')
                .objectFit(ImageFit.Cover)
                .borderRadius(50)

              Column() {
                Row() {
                  Text("人民日报6G")
                    .fontColor($r('app.color.white'))
                    .maxLines(1)
                    .textOverflow({ overflow: TextOverflow.Ellipsis })
                    .fontSize('38lpx')
                    .lineHeight('50lpx')
                    .fontWeight('500lpx')

                  Text("等级8")
                    .textAlign(TextAlign.Center)
                    .fontColor($r('app.color.color_ED2800'))
                    .backgroundColor($r('app.color.white'))
                    .fontSize('19lpx')
                    .width('96lpx')
                    .height('35lpx')
                    .margin({ left: '10lpx' })
                  Blank()
                }.width('507lpx')

                Row() {
                  Row() {
                    Text("3.6万")
                      .textStyle()
                    Text("阅读")
                      .textStyle2()
                  }
                  .margin({ right: '15lpx' })

                  Divider()
                    .height('19lpx')
                    .width('2lpx')
                    .color($r('app.color.white'))
                    .vertical(true)
                    .opacity(0.4)
                  Row() {
                    Text("6242")
                      .textStyle()
                    Text("评论")
                      .textStyle2()
                  }.margin({ right: '15lpx', left: '15lpx' })

                  Divider()
                    .height('19lpx')
                    .width('2lpx')
                    .color($r('app.color.white'))
                    .vertical(true)
                    .opacity(0.4)
                  Row() {
                    Text("86")
                      .textStyle()
                    Text("关注")
                      .textStyle2()
                  }.margin({ left: '15lpx' })
                }.margin({ top: '23lpx' })
              }.alignItems(HorizontalAlign.Start)
              .margin({ left: '32lpx' })
            }
            .onAreaChange((oldValue: Area, newValue: Area) => {
              if (this.firstPositionY === 0) {
                this.firstPositionY = newValue.globalPosition.y as number
              }else{
                let persent = (this.firstPositionY - Number(newValue.globalPosition.y)) / (this.firstPositionY * 0.3)
                if(persent > 1){
                  persent = 1
                }
                this.tileOpacity = persent
              }
            })
            .backgroundColor($r('app.color.color_transparent'))
            .height('184lpx')
            .width('100%')
            .padding({ left: '35lpx' })
            //用户简介区域
            Column() {
              Row() {
                Text(this.desc)
                  .fontSize('27lpx')
                  .maxLines(3)
                  .textOverflow({ overflow: TextOverflow.Ellipsis })
                  .lineHeight('40lpx')
                  .fontWeight('400lpx')
                  .fontColor(this.isHasIntroduction?$r('app.color.color_222222'):$r('app.color.color_999999'))
                  .textAlign(TextAlign.Start)

                if(!this.isHasIntroduction){
                  Image($r('app.media.user_info_edit_icon'))
                    .width('27lpx')
                    .height('27lpx')
                    .objectFit(ImageFit.Auto)
                }
              }
              Text("来到人民日报365天")
                .fontSize('23lpx')
                .lineHeight('25lpx')
                .fontWeight('400lpx')
                .fontColor($r('app.color.color_999999'))
                .textAlign(TextAlign.Start)
                .margin({ top: '15lpx' })

            }.padding({ left: '31lpx',right:'31lpx',top:'19lpx',bottom:'31lpx'})
            .alignItems(HorizontalAlign.Start)
            .justifyContent(FlexAlign.Center)
            .width('100%')
            .backgroundColor($r('app.color.white'))
            //间隔符

            Divider().width('100%').height('12lpx').color($r('app.color.color_F5F5F5')).strokeWidth('12lpx')

            //tab 页面
            Tabs({controller: this.controller}) {
              TabContent() {
                HomePageBottomComponent({style:0})
              }.tabBar(this.TabBuilder(0,"评论"))
              TabContent() {
                HomePageBottomComponent({style:1})
              }.tabBar(this.TabBuilder(1,"关注"))
            }
            .backgroundColor($r('app.color.white'))
            .animationDuration(0)
            .onChange((index: number) => {
              this.currentIndex = index
            })
            .vertical(false)
            .height("100%")
          }.width("100%")
        }
        .edgeEffect(EdgeEffect.None)
        .scrollBar(BarState.Off)
        .width('100%')
        .height('100%')
      }
    }.width('100%')
    .height('100%')

  }
  @Builder MineHomeTitleTransparent() {
    RelativeContainer() {
      //标题栏目
      Image($r('app.media.icon_arrow_left_white') )
        .width('46lpx')
        .height('46lpx')
        .objectFit(ImageFit.Auto)
        .id("back_icon")
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          left: { anchor: "__container__", align: HorizontalAlign.Start }
        })
        .margin({ left: '31lpx' })
        .onClick(() => {
          router.back()
        })

      Text("编辑资料")
        .height('42lpx')
        .maxLines(1)
        .id("rightText")
        .fontSize('35lpx')
        .fontWeight('400lpx')
        .fontColor($r('app.color.white') )
        .lineHeight('42lpx')
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          right: { anchor: "__container__", align: HorizontalAlign.End }
        })
        .margin({ right: '31lpx' })
        .onClick(()=>{
          this.editUserInfo()
        })
    }
    .visibility(this.tileOpacity > 0 ? 1 : 0)
    .height('84lpx')
    .width('100%')
    .backgroundColor($r('app.color.color_transparent'))
  }


  @Builder MineHomeTitleWhite() {
    RelativeContainer() {
      //标题栏目
      Image($r('app.media.back_icon'))
        .width('46lpx')
        .height('46lpx')
        .objectFit(ImageFit.Auto)
        .id("back_icon")
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          left: { anchor: "__container__", align: HorizontalAlign.Start }
        })
        .margin({ left: '31lpx' })
        .onClick(() => {
          router.back()
        })
      Image($r('app.media.default_head'))
        .width('60lpx')
        .height('60lpx')
        .objectFit(ImageFit.Auto)
        .id("head_icon")
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          left: { anchor: "back_icon", align: HorizontalAlign.End }
        })
        .margin({ left: '31lpx' })
        .onClick(() => {
          router.back()
        })

      Text("我的昵称")
        .height('42lpx')
        .maxLines(1)
        .id("title")
        .fontSize('35lpx')
        .fontWeight('400lpx')
        .fontColor($r('app.color.color_222222'))
        .lineHeight('42lpx')
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          left: { anchor: "head_icon", align: HorizontalAlign.End }
        })
        .margin({ left: '12lpx' })

      Text("编辑资料")
        .height('42lpx')
        .maxLines(1)
        .id("rightText")
        .fontSize('35lpx')
        .fontWeight('400lpx')
        .fontColor($r('app.color.color_222222'))
        .lineHeight('42lpx')
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          right: { anchor: "__container__", align: HorizontalAlign.End }
        })
        .margin({ right: '31lpx' })
        .onClick(()=>{
          this.editUserInfo()
        })
    }
    .visibility(this.tileOpacity > 0 ? 0 : 1)
    .height('84lpx')
    .width('100%')
    .backgroundColor($r('app.color.white'))
    .opacity(this.tileOpacity )

  }

  @Builder TabBuilder(index: number, title: string) {
    Stack(){
      Text(title)
        .height('38lpx')
        .fontSize('33lpx')
        .fontWeight(this.currentIndex === index ? 600 : 400)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .lineHeight('38lpx')

      if(this.currentIndex === index){
        Divider()
          .width('31lpx')
          .height('4lpx')
          .color('#ED2800')
          .strokeWidth('4lpx')
          .margin({top:'50lpx'})
          .id("divTag")
      }
    }.onClick(()=>{
      this.currentIndex = index
      this.controller.changeIndex(this.currentIndex)
    })
    .height('100%')
    .width('100%')
    .margin({right:'9lpx'})
  }

  /**
   * 跳转编辑资料(防止二次点击)
   */
  editUserInfo(){
    if(!this.isChangeToUserEdit){
      this.isChangeToUserEdit = true;
      let c = setInterval(() => {
        this.isChangeToUserEdit = false
      }, 1000);
      //route 跳转写这里 TODO
    }
  }

}

@Extend(Text) function textStyle() {
  .fontColor($r('app.color.white'))
  .textStyleDefault()
  .margin({ right: '10lpx' })
}

@Extend(Text) function textStyle2() {
  .textStyleDefault()
  .fontColor($r('app.color.color_B2FFFFFF'))
}

@Extend(Text) function textStyleDefault() {
  .textAlign(TextAlign.Start)
  .fontSize('23lpx')
  .fontWeight('400lpx')
  .lineHeight('31lpx')
}