import { CompDTO, ContentDTO, Params } from 'wdBean';
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
import { postInteractAccentionOperateParams } from 'wdBean';
import { PageRepository } from '../../repository/PageRepository';
import { CommonConstants } from 'wdConstant/Index';
import { HttpUtils } from 'wdNetwork/Index';
import { InfomationCardClick } from '../../utils/infomationCardClick';

/**
 * 人民号横划卡
 * Zh_Single_Row-05
 */
const TAG = 'Zh_Single_Row-05'

@Entry
@Component
export struct ZhSingleRow05 {
  @State pageId: string = '';
  @State pageName: string = '';
  @State compDTO: CompDTO = {
    // objectTitle: '创作者推荐',
    // operDataList: [
    //   {
    //     rmhInfo: {
    //       rmhId: '2489729',
    //       rmhName: '陕西青年职业学院',
    //       rmhDesc: '陕西青年职业学院陕西青年职业学院是经陕西省人民政陕西青年职业学院是经陕西省人民政是经陕西省人民政',
    //       rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20210113/a_533807397399949312' +
    //         '.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg'
    //     }
    //   },
    // ]
  } as CompDTO

  build() {
    Column() {
      //顶部
      this.CompHeader(this.compDTO)
      Row(){
        // 列表内容
        List({ space: 8 }) {
          ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
            CreatorItem({
              item
            })
              .margin({right: index === this.compDTO.operDataList.length - 1 ? $r('app.float.card_comp_pagePadding_lf') : 0})
          })
        }
        .listDirection(Axis.Horizontal)
        .scrollBar(BarState.Off)
      }
      .width(CommonConstants.FULL_WIDTH)
      .height(170)
    }
    .padding({
      left: 10,
      // right: 10,
      top: $r('app.float.card_comp_pagePadding_tb'),
      bottom: $r('app.float.card_comp_pagePadding_tb')
    })
    .backgroundColor(0xffffff)
    .width('100%')
  }

  @Builder
  CompHeader(item: CompDTO) {
    Row() {
      Row() {
        Image($r("app.media.redLine"))
          .width(3)
          .height(16)
          .margin({ right: 4 })
        Text(item.objectTitle)
          .fontSize($r("app.float.font_size_17"))
          .fontColor($r("app.color.color_222222"))
          .fontWeight(600)
      }

      Row() {
        Text("更多")
          .fontSize($r("app.float.font_size_14"))
          .fontColor($r("app.color.color_999999"))
          .margin({ right: 1 })
        Image($r("app.media.more"))
          .width(14)
          .height(14)
          .onClick(() => {
            // TODO 跳转的页面，定义的入参可能不合理。推荐id: 41
            // let params = {'index': "1"} as Record<string, string>;
            // WDRouterRule.jumpWithPage(WDRouterPage.followListPage, params)
          })
      }
      .padding({
        right: $r('app.float.card_comp_pagePadding_lf'),
      })
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .margin({ top: 8, bottom: 8 })
    .width('100%')
  }
}

@Extend(Text)
function textOverflowStyle(maxLine: number) {
  .maxLines(maxLine)
  .textOverflow({ overflow: TextOverflow.Ellipsis })
}

@Component
struct CreatorItem {
  @Prop item: ContentDTO
  @State rmhIsAttention: number = 0
  build() {
    ListItem() {
      Column() {
        Image(this.item.rmhInfo.rmhHeadUrl)
          .width(44)
          .height(44)
          .margin({ top: 12, bottom: 8 })
        Text(this.item.rmhInfo.rmhName)
          .fontColor($r('app.color.color_222222'))
          .fontSize($r('app.float.font_size_14'))
          .fontWeight(500)
          .textOverflowStyle(1)
        Text(this.item.rmhInfo.rmhDesc)
          .fontColor($r('app.color.color_B0B0B0'))
          .fontSize($r('app.float.font_size_12'))
          .margin({ top: 8, bottom: 14 })
          .textOverflowStyle(2)
          .height(34)
        if (!this.rmhIsAttention) {
          Text('关注')
            .width(60)
            .height(24)
            .textAlign(TextAlign.Center)
            .fontSize($r('app.float.font_size_12'))
            .borderRadius($r('app.float.button_border_radius'))
            .backgroundColor($r('app.color.color_ED2800'))
            .fontColor($r('app.color.color_fff'))
            .onClick(() => {
              this.handleAccention(this.item, 1)
            })
        } else {
          Text('已关注')
            .width(60)
            .height(24)
            .borderWidth(1)
            .textAlign(TextAlign.Center)
            .fontSize($r('app.float.font_size_12'))
            .borderRadius($r('app.float.button_border_radius'))
            .borderColor($r('app.color.color_CCCCCC'))
            .fontColor($r('app.color.color_CCCCCC'))
            .onClick(() => {
              this.handleAccention(this.item, 0)
            })
        }

      }
      .width(100)
      .height(170)
      .padding({ left: 6, right: 6 })
      .borderWidth(1)
      .borderColor($r('app.color.color_EDEDED'))
      .borderRadius($r('app.float.image_border_radius'))
    }
    .onClick(() => {
      console.log('跳转到rmh');
    })
  }

  /**
   * 关注号主 TODO 这里后面需要抽离
   */
  handleAccention(item: ContentDTO, status: number) {
    this.rmhIsAttention = this.rmhIsAttention ? 0 : 1
    return
    // 未登录，跳转登录
    if (!HttpUtils.getUserId()) {
      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
      return
    }

    const params: postInteractAccentionOperateParams = {
      attentionUserType: item.rmhInfo?.userType || '', //被关注用户类型（1 普通用户 2 视频号 3 矩阵号）
      attentionUserId: item.rmhInfo?.userId || '', // 被关注用户号主id
      attentionCreatorId: item.rmhInfo?.rmhId || '', // 被关注用户号主id
      // userType: 1,
      // userId: '1', // TODO 用户id需要从本地获取
      status: status,
    }
    PageRepository.postInteractAccentionOperate(params).then(res => {
      console.log(TAG, '关注号主==', JSON.stringify(res.data))
      if (status === 1) {
        this.rmhIsAttention = 0
      } else {
        this.rmhIsAttention = 1
      }
    })
  }
}