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

@Entry
@Component
struct MineHomePage {

  @State tileOpacity: number = 0;
  @State isScroll: boolean = false
  @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;


  aboutToAppear() {
  }

  build() {
    Column() {
      Stack() {
        Image($r('app.media.title_bg'))
          .width('100%')
          .height('84lpx')
          .objectFit(ImageFit.Cover)
        this.MineHomeTitle(1)
        this.MineHomeTitle(2)
      }

      Scroll() {
        Column() {
          //用户信息区域
          Stack() {
            Image($r('app.media.title_bg'))
              .width('100%')
              .objectFit(ImageFit.Cover)
            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' })
            }
            .height('184lpx')
            .width('100%')
            .padding({ left: '35lpx' })
          }.height('184lpx')

          //用户简介区域
          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%')
          //间隔符

          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,"关注"))
          }
          .animationDuration(0)
          .onChange((index: number) => {
            this.currentIndex = index
          })
          .vertical(false)
          .height("100%")
        }.width("100%")
      }
      .edgeEffect(EdgeEffect.None)
      .scrollBar(BarState.Off)
      .width('100%')
      .height('100%')
    }.height('100%')
    .width('100%')
  }

  @Builder MineHomeTitle(style: number) {
    RelativeContainer() {
      //标题栏目
      Image(style === 1 ? $r('app.media.icon_arrow_left_white') : $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()
        })
      if (style === 2)
        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()
          })

      if (style === 2)
        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(style === 1 ? $r('app.color.white') : $r('app.color.color_222222'))
        .lineHeight('42lpx')
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          right: { anchor: "__container__", align: HorizontalAlign.End }
        })
        .margin({ right: '31lpx' })
    }
    .height('84lpx')
    .width('100%')
    .backgroundColor(style === 1 ? "" : $r('app.color.white'))
    .opacity(style === 1 ? 1 : this.isScroll ? this.tileOpacity : 0)
    .onClick(()=>{
      this.editUserInfo()
    })
  }

  @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(){
    console.log("ycg","a"+this.isChangeToUserEdit)
    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')
}