import { CompDTO, 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';

/**
 * 精选评论卡
 * Zh_Single_Row-06
 */
const TAG = 'Zh_Single_Row-06'

@Entry
@Component
export struct ZhSingleRow06 {
  @State compDTO: CompDTO = {} as CompDTO
  @State list: Array<string> = ['社会', '三个字', '是四个字', '时事', '社会', '三个字', '是四个字', '时事']
  @State activeIndexs: Array<number> = []

  getItemWidth(index: number) {
    if (index % 4 === 0 || index % 4 === 3) {
      return 80
    } else {
      return 96
    }
  }

  build() {
    Column() {
      //顶部
      this.CompHeader(this.compDTO)
      Grid() {
        ForEach(this.list, (item: string, index: number) => {
          GridItem() {
            Text(item)
              .fontSize(14)
              .fontColor(this.activeIndexs.includes(index) ? 0x222222 : 0x666666)
              .fontWeight(this.activeIndexs.includes(index) ? 600 : 400)
              .textAlign(TextAlign.Center)
          }
          .onClick(() => {
            if (this.activeIndexs.includes(index)) {
              const ind = this.activeIndexs.indexOf(index);
              this.activeIndexs.splice(ind, 1)
            } else {
              this.activeIndexs.push(index)
            }
          })
        })
      }
      .height(70)
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr')
      .margin({bottom: 10})


      Text('选中标签，为您推荐更多您感兴趣的内容')
        .fontSize(12)
        .fontColor(0xB0B0B0)
        .textAlign(TextAlign.Center)
        .margin({bottom: 10})

      Row() {
        Text('选好了')
          .fontSize(14)
          .fontColor(0x000000)
          .width('100%')
          .textAlign(TextAlign.Center)
      }
      .height(40)
      .backgroundColor(0xf9f9f9)
      .width('100%')
      .borderRadius(3)
    }
    .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(item: CompDTO) {
    Row() {
      Row() {
        Image($r("app.media.icon_interest_ask"))
          .width(24)
          .height(24)
          .margin({ right: 4 })
        Text('以下是否有您感兴趣？')
          .fontSize($r("app.float.font_size_17"))
          .fontColor(0x000000)
          .fontWeight(600)
      }

      Row() {
        Image($r("app.media.close_button"))
          .width(14)
          .height(14)
          .onClick(() => {
          })
      }
      .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() {
        Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween}) {
          Column() {
            Row() {
              Image('')
                .width(20)
                .height(20)
                .margin({right: 4})
                .border({width: 1, color: 0xcccccc, radius: 10})
              Text('立志之间')
                .fontColor(0x212228)
                .fontSize(12)
            }
          }

          Column() {
            Row() {
              Image($r('app.media.icon_like_no'))
                .width(16)
                .height(16)
                .margin({right: 4})
              Text('3835')
                .fontSize(14)
                .fontColor(0x999999)
            }
          }
        }
        .margin({top: 10, left: 10, right: 10, bottom: 8})

        Text('就业不仅是民生问题，也是发展问题，就业不仅是民生问题，也是发展问题，就业不仅是民生问题，也是发展问题，')
          .maxLines(2)
          .textOverflow({overflow: TextOverflow.Ellipsis})
          .margin({left: 10, right: 10, bottom: 8})
          .fontSize(17)
          .fontColor(0x212228)
          .lineHeight(25)

        Row() {
          Image('')
            .width(66)
            .height(44)
            .borderRadius({topLeft: 3, topRight: 0, bottomLeft: 3, bottomRight: 0})
          Text('原文｜强化就业优先政策 健全就业促进机制原文｜强化就业优先政策 健全就业促进机制原文｜强化就业优先政策 健全就业促进机制')
            .margin({left: 8})
            .width(172)
            .maxLines(2)
            .textOverflow({overflow: TextOverflow.Ellipsis})
        }
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [[0xffffff, 0.0],[0xffffff, 0.8], [0xf9f9f9, 1.0]]
        })
      }
      .width(276)
      .height(150)
      .margin({ right: 10 })
      .borderWidth(1)
      .borderColor($r('app.color.color_EDEDED'))
      .borderRadius($r('app.float.image_border_radius'))
      .backgroundColor(0xf9f9f9)
    }
    .onClick(() => {
      console.log('跳转到rmh');
    })
  }

  /**
   * 关注号主 TODO 这里后面需要抽离
   */
  handleAccention(item: ContentDTO, status: number) {
    this.rmhIsAttention = this.rmhIsAttention ? 0 : 1
    return
    // 未登录，跳转登录
    if (!HttpUrlUtils.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
      }
    })
  }
}