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_Column-09
 */
const TAG = 'Zh_Single_Column-09'

@Entry
@Component
export struct ZhSingleColumn09 {
  @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.compDTO.operDataList, (item: ContentDTO, index: number) => {
          GridItem() {
            Stack({alignContent: Alignment.TopEnd}) {
              Image(item.coverUrl)
                .width('100%')
                .height('100%')
              Text(item.newsTitle)
                .width('100%')
                .height('100%')
                .fontSize(14)
                .textAlign(TextAlign.Center)
                .fontColor(0xffffff)
              Image($r('app.media.icon_selected'))
                .width(19)
                .height(19)
                .opacity(this.activeIndexs.includes(index) ? 1 : 0)
                .objectFit(ImageFit.Contain)
            }
            .width('100%')
            .height('100%')
            .borderRadius(4)
          }
          .margin({right: index % 4 === 3 ? 0 : 6, bottom: 6})
          .onClick(() => {
            if (this.activeIndexs.includes(index)) {
              const ind = this.activeIndexs.indexOf(index);
              this.activeIndexs.splice(ind, 1)
            } else {
              this.activeIndexs.push(index)
            }
          })
        })
      }
      .height(90)
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr')
      .margin({bottom: 10})

      Row() {
        Row() {
          Text('换一换')
            .fontSize(14)
            .fontColor(0xed2800)
            .margin({right: 4})
          Image($r('app.media.icon_refresh'))
            .width(14)
            .height(14)
        }

        Image($r("app.media.close_button"))
          .width(14)
          .height(14)
          .onClick(() => {
          })
      }
      .height(40)
      .width('100%')
      .borderRadius(3)
      .justifyContent(FlexAlign.SpaceBetween)
    }
    .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() {
      Column() {
        Text('以下是否有您感兴趣？')
          .fontSize(18)
          .fontColor(0x000000)
          .fontWeight(600)
          .width('70%')
          .margin({bottom: 4})

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

      Text('选好了')
        .fontColor(0xed2800)
        .fontSize(14)
        .width(62)
        .height(26)
        .backgroundColor(0xfdf0ed)
        .textAlign(TextAlign.Center)
        // .lineHeight(26)
        .borderRadius(4)
        .margin({top: -10})

    }
    .justifyContent(FlexAlign.SpaceBetween)
    .width('100%')
  }
}

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