import router from '@ohos.router'
import { Params } from 'wdBean';
import { StringUtils } from 'wdKit';
import { OtherHomePageBottomCommentComponent } from '../components/mine/home/OtherHomePageBottomCommentComponent';
import { OtherHomePageBottomFollowComponent } from '../components/mine/home/OtherHomePageBottomFollowComponent';
import MinePageDatasModel from '../model/MinePageDatasModel';
import { OtherUserDetailRequestItem } from '../viewmodel/OtherUserDetailRequestItem';

const  TAG = "OtherNormalUserHomePage"

@Entry
@Component
struct OtherNormalUserHomePage {
  @State params:Params =  router.getParams() as Params;
  @State curUserId: string = '-1';

  onPageShow() {
    this.curUserId = this.params?.pageID;
  }

  @State tileOpacity: number = 0;
  firstPositionY:number = 0;
  fontColor: string = '#999999'
  selectedFontColor: string = '#000000'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()
  isChangeToUserEdit = false;
  @State userName:string = ""
  @State headPhotoUrl:string = ""
  @State levelHead:string = ""
  @State levelId:number = 0
  @State browseNum:number = 0//阅读数
  @State commentNum:number = 0//评论数
  @State attentionNum:number = 0//关注数
  @State desc:string = ""

  aboutToAppear(){
    this.getUserInfo()
    this.getUserLevel()
  }



  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() {
              Stack(){
                Image(this.headPhotoUrl)
                  .alt($r('app.media.default_head'))
                  .width('115lpx')
                  .height('115lpx')
                  .objectFit(ImageFit.Cover)
                  .borderRadius(50)
                Image(this.levelHead)
                  .width('130lpx')
                  .height('130lpx')
                  .objectFit(ImageFit.Cover)
                  .borderRadius(50)
              }

              Column() {
                Row() {
                  Text(`${this.userName}`)
                    .fontColor($r('app.color.white'))
                    .maxLines(1)
                    .textOverflow({ overflow: TextOverflow.Ellipsis })
                    .fontSize('38lpx')
                    .lineHeight('50lpx')
                    .fontWeight('500lpx')

                  Text(`等级${this.levelId}`)
                    .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(`${this.browseNum}`)
                      .textStyle()
                    Text("阅读")
                      .textStyle2()
                  }
                  .margin({ right: '15lpx' })

                  Divider()
                    .height('19lpx')
                    .width('2lpx')
                    .color($r('app.color.white'))
                    .vertical(true)
                    .opacity(0.4)
                  Row() {
                    Text(`${this.commentNum}`)
                      .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(`${this.attentionNum}`)
                      .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' })

            //用户简介区域
            if(StringUtils.isNotEmpty(this.desc)){
              Column() {
                Row() {
                  Text(this.desc)
                    .fontSize('27lpx')
                    .maxLines(3)
                    .textOverflow({ overflow: TextOverflow.Ellipsis })
                    .lineHeight('40lpx')
                    .fontWeight('400lpx')
                    .fontColor($r('app.color.color_222222'))
                    .textAlign(TextAlign.Start)

                }
              }.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() {
                OtherHomePageBottomCommentComponent({curUserId:this.curUserId,levelHead:this.levelHead})
              }.tabBar(this.TabBuilder(0,"评论"))
              TabContent() {
                OtherHomePageBottomFollowComponent({curUserId:this.curUserId})
              }.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()
        })
    }
    .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(this.headPhotoUrl)
        .alt($r('app.media.default_head'))
        .width('60lpx')
        .height('60lpx')
        .borderRadius(50)
        .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(`${this.userName}`)
        .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' })
    }
    .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'})
  }


  getUserInfo(){
    let item = new OtherUserDetailRequestItem("","1",this.curUserId)
    MinePageDatasModel.getOtherUserDetailData(item,getContext(this)).then((value)=>{
      if(value!=null){
        this.userName = value.userName
        this.headPhotoUrl = value.headPhotoUrl
        if(StringUtils.isNotEmpty(value.introduction)){
          this.desc = value.introduction
        }
        this.browseNum = StringUtils.isEmpty(value.browseNum)?0:value.browseNum
        this.commentNum = StringUtils.isEmpty(value.commentNum)?0:value.commentNum
        this.attentionNum = StringUtils.isEmpty(value.attentionNum)?0:value.attentionNum
      }
    }).catch((err:Error)=>{
      console.log(TAG,JSON.stringify(err))
    })
  }
  getUserLevel(){
    MinePageDatasModel.getOtherUserLevelData([this.curUserId],getContext(this)).then((value)=>{
      if(value!=null){
        this.levelHead = value[0].levelHead
        this.levelId = value[0].level
      }
    }).catch((err:Error)=>{
      console.log(TAG,JSON.stringify(err))
    })
  }

}

@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')
}