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 } 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 = 214
  @State isLoading: boolean = true
  @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  @State isConnectNetwork : boolean = NetworkUtil.isNetConnected()

  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){
      Stack({ alignContent: Alignment.TopStart }) {
        Stack({ alignContent: Alignment.Top }){
          // 顶部图片
          Image($r('app.media.home_page_bg'))
            .width('100%')
            .height('120vp')
            .objectFit(ImageFit.Auto)
            .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: 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

      // 获取关注
      // 登录后获取，是否关注
      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
      })
  }
}