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 activeIndexs: Array<number> = []
  @State operDataList: ContentDTO[] = this.compDTO?.operDataList || []
  @State selfClosed: Boolean = false;

  aboutToAppear(): void {
    this.operDataList = this.shuffleArray(this.compDTO?.operDataList)
  }


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

  shuffleArray(array: ContentDTO[]) {
    for(let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      const tempArray = array[i];
      array[i] = array[j];
      array[j] = tempArray
    }
    return array
  }

  build() {
    Column() {
      //顶部
      Row() {
        Column() {
          Text('以下是否有您感兴趣？')
            .fontSize(18)
            .fontColor(0x000000)
            .fontWeight(600)
            .width('70%')
            .margin({bottom: 4})

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

        Button('选好了', { type: ButtonType.Normal, stateEffect: false })
          .fontColor(this.activeIndexs.length > 0 ? 0xed2800 : 0xB0B0B0)
          .fontSize(14)
          .width(62)
          .height(26)
          .backgroundColor(this.activeIndexs.length > 0 ? 0xfdf0ed : 0xf5f5f5)
            // .lineHeight(26)
          .borderRadius(4)
          .margin({top: -10})
          .padding({top: 0, bottom: 0, left: 0, right: 0})
          .onClick(() => {
            if (this.activeIndexs.length > 0) {
              this.selfClosed = true;
            }
          })
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')

      Grid() {
        ForEach(this.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(this.compDTO?.operDataList.length > 8 ? 0xed2800 : 0xB0B0B0)
            .margin({right: 4})
          Image(this.compDTO?.operDataList.length > 8 ? $r('app.media.icon_refresh') : $r('app.media.ic_refresh'))
            .width(14)
            .height(14)
        }
        .onClick(() => {
          if (this.compDTO?.operDataList.length > 8) {
            this.operDataList = this.shuffleArray(this.operDataList)
            this.activeIndexs = [];
          }
        })

        Image($r("app.media.close_button"))
          .width(14)
          .height(14)
          .onClick(() => {
            this.selfClosed = true;
          })
      }
      .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'))
    .visibility(this.selfClosed ? Visibility.None : Visibility.Visible)
  }
}

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