import { RmhInfoDTO, ContentDTO, Params } from 'wdBean';
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
import { HttpUrlUtils } from 'wdNetwork/Index';
import { postInteractAccentionOperateParams } from 'wdBean';
import { PageRepository } from '../../repository/PageRepository';
import { CommonConstants } from 'wdConstant/Index';

/**
 * 人民号--推荐---没有关注的情况下，推荐的优质号主---ui称为：人民号冷启动卡
 * RecommendAttentionRmh
 */
const TAG = 'RecommendAttentionRmh'

interface RmhInfo extends RmhInfoDTO {
  isSelected: boolean;
  headPhotoUrl: string;
  introduction: string;
  userName: string;
}

@Entry
@Component
export struct RecommendAttentionRmh {
  @State recommendRmhList: RmhInfo[] = [
    // {
    //   authIcon: 'https://cdnjdphoto.aikan.pdnews.cn/creator-category/icon/auth/blue.png',
    //   headPhotoUrl: 'https://uatjdcdnphoto.aikan.pdnews.cn/vod/content/202302/202302Sa121448724/TUw.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg',
    //   introduction: '1。',
    //   userName: '中国'
    // } as RmhInfo,
  ]
  @State selectedCount: number = 0

  @Builder
  buildItemCard(item: RmhInfo) {
    Column() {
      Image(item.headPhotoUrl)
        .width(44)
        .aspectRatio(1 / 1)
        .margin(16)
      Text(item.userName)
        .fontSize(13)
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
    }
    .width('100%')
  }

  build() {
    Column() {
      //顶部
      this.CompHeader()
      GridRow({
        gutter: 10,
        columns: { sm: 3, md: 4, lg: 8 },
        breakpoints: {
          value: ['320vp', '520vp', '840vp'],
          reference: BreakpointsReference.WindowSize
        }
      }) {
        ForEach(this.recommendRmhList, (item: RmhInfo, index: number) => {
          GridCol() {
            CreatorItem({ item, index, list: $recommendRmhList, selectedCount: $selectedCount })
          }
        })
      }

      Button(`一键关注(${this.selectedCount})`, { type: ButtonType.Normal })
        .borderRadius($r('app.float.button_border_radius'))
        .height(36)
        .backgroundColor($r('app.color.color_ED2800'))
        .margin({ top: 20 })
        .onClick(() => {
          // TODO 调用一键关注的接口
          const selectedLists = this.recommendRmhList.filter(item => {
            console.log(`选中状态：${item.isSelected}`)
            return item.isSelected !== false
          })
          console.log(JSON.stringify(selectedLists))
        })
    }
    .padding({
      left: $r('app.float.card_comp_pagePadding_lf'),
      right: $r('app.float.card_comp_pagePadding_lf'),
      top: $r('app.float.card_comp_pagePadding_tb'),
      bottom: $r('app.float.card_comp_pagePadding_tb')
    })
    .backgroundColor($r('app.color.white'))
    .margin({ bottom: 8 })
  }

  @Builder
  CompHeader() {
    Row() {
      Row() {
        Image($r("app.media.redLine"))
          .width(3)
          .height(16)
          .margin({ right: 4 })
        Text('为你推荐优质号主')
          .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.ic_refresh"))
          .width(14)
          .height(14)
          .onClick(() => {
            // TODO 通知父组件，重新查询推荐数据
          })
      }
      .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: RmhInfo
  @Prop index: number
  @Link list: RmhInfo[]
  @Link selectedCount: number;
  @State isSelected: boolean = true;

  getSelectedCount() {
    const selected = this.list.filter(item => {
      return item.isSelected !== false
    })
    this.selectedCount = selected.length
  }

  aboutToAppear(): void {
    this.getSelectedCount()
  }

  build() {
    Column() {
      Stack() {
        Image(this.item.headPhotoUrl)
          .width(44)
          .height(44)
        if (this.isSelected) {
          Image($r('app.media.rmh_selected'))
            .width(16)
            .height(16)
        } else {
          Image($r('app.media.rmh_unselected'))
            .width(16)
            .height(16)
        }
      }
      .margin({ top: 2, bottom: 5 })
      .alignContent(Alignment.BottomEnd)

      Flex({ justifyContent: FlexAlign.Center }) {
        Text(this.item.userName)
          .fontColor($r('app.color.color_222222'))
          .fontSize($r('app.float.font_size_14'))
          .fontWeight(500)
          .textOverflowStyle(1)
          .textAlign(TextAlign.Center)
        Image(this.item.authIcon)
          .width(14)
          .height(14)
          .borderRadius(50)
          .flexShrink(0)
      }
      .width(CommonConstants.FULL_WIDTH)

      Text(this.item.introduction)
        .fontColor($r('app.color.color_B0B0B0'))
        .fontSize($r('app.float.font_size_12'))
        .margin({ top: 8, bottom: 14 })
        .textOverflowStyle(2)
        .textAlign(TextAlign.Center)
    }
    .padding({ left: 6, right: 6 })
    .width('100%')
    .onClick(() => {
      // 选中或者取消选中
      this.isSelected = !this.isSelected
      this.list[this.index].isSelected = this.isSelected
      this.getSelectedCount()
    })
  }
}