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

@Entry
@Component
struct MineHomePage {
  @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')
}