import router from '@ohos.router'
import { PeopleShipHomePageNavComponent } from '../peopleShipHomePage/PeopleShipHomeNavComponent'
import { PeopleShipHomePageTopComponent } from '../peopleShipHomePage/PeopleShipHomePageTopComponent'
import { Logger, NetworkUtil, WindowModel } from 'wdKit'
import { PeopleShipHomePageDataModel } from '../../viewmodel/PeopleShipHomePageDataModel'
import { PeopleShipHomeListComponent } from '../peopleShipHomePage/PeopleShipHomeListComponent'
import { QueryListIsFollowedItem } from '../../viewmodel/QueryListIsFollowedItem'
import { HttpUtils } from 'wdNetwork/Index'
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index'
import { PageRepository } from '../../repository/PageRepository'
import {
  postInteractAccentionOperateParams,
  PeopleShipUserDetailData,
  ArticleCountData
} from 'wdBean'
import { EmptyComponent,WDViewDefaultType } from '../view/EmptyComponent'
import { CustomTitleUI } from '../reusable/CustomTitleUI'

@Entry
@Component
struct PeopleShipHomePage {
  // Todo 传入数据  后续在修改
  creatorId: string = (router.getParams() as Record<string, string>)['creatorId'];
  // 页面详情数据
  @Provide detailModel: PeopleShipUserDetailData = {} as PeopleShipUserDetailData
  // 每个分类数量
  @State articleModel: ArticleCountData = {} as ArticleCountData
  // 总滑动空间
  scroller: Scroller = new Scroller()
  // 顶部透明度
 @Watch('topOpacityChange') @State topOpacity: number = 0
  //发布数量
  @State publishCount: number = 0
  // 是否关注
  @Provide isAttention: string = '0'
  // 是否开始更新关注
  @Provide @Watch('handleChangeAttentionStata') isLoadingAttention: boolean = false
  //关注显示
  @State attentionOpacity: boolean = false
  @Provide topHeight: number = 190
  @State isLoading: boolean = true
  @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  @State isConnectNetwork : boolean = NetworkUtil.isNetConnected()
  @State isHasHomePage: boolean = true

  onPageShow(): void {
    WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#ffffff'})
  }

  onPageHide(): void {
    WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000'})
  }

  topOpacityChange(){
    if(this.topOpacity > 0.8){
      WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000', })
    }else{
      WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#ffffff'})
    }
  }

  build() {
    if(this.isConnectNetwork){
      if (this.isHasHomePage){
        Stack({ alignContent: Alignment.TopStart }) {
          Stack({ alignContent: Alignment.Top }){
            // 顶部图片
            Image($r('app.media.home_page_bg'))
              .width('100%')
              .height('120vp')
              .objectFit(ImageFit.Fill)
              .objectRepeat(ImageRepeat.NoRepeat)
              .backgroundColor(Color.White)
              .visibility(this.isLoading ? Visibility.None : Visibility.Visible)

            Row()
              .height(px2vp(this.topSafeHeight))
              .width("100%")
              .backgroundColor($r('app.color.white'))
              .visibility(this.topOpacity > 0 ? Visibility.Visible : Visibility.None)
              .opacity(this.topOpacity )
          }

          Column(){
            // 头部返回
            PeopleShipHomePageNavComponent({
              attentionOpacity: this.attentionOpacity,
              topOpacity: this.topOpacity,
              detailModel: this.detailModel
            })
              .height($r('app.float.top_bar_height'))
              .backgroundColor(Color.Transparent)
            if (this.detailModel && this.detailModel.userName) {
              Scroll(this.scroller) {
                Column() {
                  // 顶部相关
                  PeopleShipHomePageTopComponent({
                    creatorId: this.creatorId,
                    detailModel: this.detailModel,
                    publishCount: this.publishCount,
                    topHeight: this.topHeight
                  })
                    .width("100%")
                    // .height(this.topHeight)
                  // 列表
                  Column(){
                    PeopleShipHomeListComponent({
                      publishCount: this.publishCount,
                      creatorId: this.creatorId
                    })
                  }.height('100%')


                }
                .width("100%")
                .justifyContent(FlexAlign.Start)
                .alignItems(HorizontalAlign.Start)
                // .height('100%')
                // .height(this.publishCount == 0 ? '100%' : '')
              }
              .scrollable(ScrollDirection.Vertical)
              // .alignSelf(ItemAlign.Start)
              // .align(Alignment.Start)
              .edgeEffect(EdgeEffect.None)
              .friction(0.7)
              .backgroundColor(Color.White)
              .scrollBar(BarState.Off)
              .width('100%')
              .height('calc(100% - 44vp)')
              // .layoutWeight(1)
              .onDidScroll(() => {
                // this.topOpacity = yOffset / (this.getDeviceHeight() * 0.2)
                this.topOpacity = this.scroller.currentOffset().yOffset / 100
                if (this.scroller.currentOffset().yOffset >= this.topHeight - 66) {
                  this.attentionOpacity = true
                } else {
                  this.attentionOpacity = false
                }
                Logger.debug('PeopleShipHomePage',`透明度:${this.topOpacity}`)

              })
            }
          }
          .alignItems(HorizontalAlign.Start)
          .justifyContent(FlexAlign.Start)
          .width('100%')
          .margin({top:px2vp(this.topSafeHeight)})
        }
        .width('100%')
      }else {
        Column(){
          CustomTitleUI({ titleName: "" })
          EmptyComponent({emptyType:WDViewDefaultType.WDViewDefaultType_NoUserHomepage}).height('70%')
        }.width("100%")
        .height("100%")
        .padding({top:px2vp(this.topSafeHeight)})
      }
    }else{
      Column(){
        CustomTitleUI({ titleName: "" })
        EmptyComponent({ emptyType: 1,emptyHeight:"100%" ,retry: () => {
          this.isConnectNetwork = NetworkUtil.isNetConnected()
          if(this.isConnectNetwork){
            this.detailModel = {} as PeopleShipUserDetailData
            this.getData()
          }
        }})
          .height('calc(100% - 84lpx)')
          .width('100%')
      }.width("100%")
      .height("100%")
    }
  }

   aboutToAppear() {
     this.getData()
  }

  private async getData() {
    try {
      this.isLoading = true
      // 获取页面信息
      this.detailModel = await PeopleShipHomePageDataModel.getPeopleShipHomePageDetailInfo(this.creatorId, '', '')
      Logger.debug('PeopleShipHomePage', '获取页面信息' + `${JSON.stringify(this.detailModel)}`)
      this.isLoading = false

    } catch (exception) {
      this.isLoading = false
      this.isHasHomePage = false
    }

    try {
      // 获取关注
      // 登录后获取，是否关注
      if (HttpUtils.getUserId()) {
        let followList: QueryListIsFollowedItem[] = await PeopleShipHomePageDataModel.getHomePageFollowListStatusData(this.creatorId)
        Logger.debug('PeopleShipHomePage', '获取关注信息' + `${JSON.stringify(followList)}`)
        this.findFollowStata(followList)
      }

    } catch (exception) {
      this.isLoading = false
    }
  }

  findFollowStata(followList: QueryListIsFollowedItem[]) {
    if (followList.length > 0) {
      let item: QueryListIsFollowedItem = followList[0]
      Logger.debug('PeopleShipHomePage', '关注' + `${JSON.stringify(item.status)}`)
      this.isAttention = item.status
    }
  }

  handleChangeAttentionStata() {

    if (!this.isLoadingAttention) {
      return
    }
    // 未登录，跳转登录
    if (!HttpUtils.getUserId()) {
      this.isLoadingAttention = false
      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
      return
    }

    let status = 0
    if (this.isAttention == '0') {
      status = 1
    }
    const params: postInteractAccentionOperateParams = {
      attentionUserType: this.detailModel.userType || '', //被关注用户类型（1 普通用户 2 视频号 3 矩阵号）
      attentionUserId: this.detailModel.userId || '', // 被关注用户号主id
      attentionCreatorId: this.creatorId || '', // 被关注用户号主id
      // userType: 1,
      // userId: HttpUrlUtils.getUserId(),
      status: status,
    }
    PageRepository.postInteractAccentionOperate(params).then(() => {
      if (this.isAttention == '1') {
        this.isAttention = '0'
        this.detailModel.fansNum -= 1
      } else {
        this.isAttention = '1'
        this.detailModel.fansNum += 1
      }
      this.isLoadingAttention = false
    })
      .catch(() => {
        this.isLoadingAttention = false
      })
  }
}