import { CompDTO, ContentDTO, LiveRoomDataBean } from 'wdBean';
import { CommonConstants } from 'wdConstant/Index';
import { Logger } from 'wdKit/Index';
import { ProcessUtils } from 'wdRouter';
import PageViewModel from '../../viewmodel/PageViewModel';
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';

const TAG = 'Zh_Grid_Layout-02';
const FULL_PARENT: string = '100%';
let listSize: number = 2;

/**
 * 双图卡
 * 枚举值Zh_Grid_Layout-02
 * Zh_Grid_Layout-02
 *
 */
@Component
export struct ZhGridLayout02 {
  @State compDTO: CompDTO = {} as CompDTO
  @State operDataList: ContentDTO[] = []
  @State loadImg: boolean = false;
  @State liveRoomList: LiveRoomDataBean[] = []
  currentPage = 1
  pageSize = 12

  async aboutToAppear(): Promise<void> {
    Logger.debug(TAG, 'aboutToAppear ' + this.compDTO.objectTitle)
    this.currentPage = 1
    PageViewModel.getLiveReviewUrl(this.currentPage, this.pageSize).then((liveReviewDTO) => {
      this.operDataList = []
      this.operDataList.push(...liveReviewDTO.list)
      this.getLiveRoomDataInfo(this.operDataList)
    })

    this.loadImg = await onlyWifiLoadImg();
  }

  build() {
    Column() {
      Scroll() {
        Column() {
          Row() {
            Image($r("app.media.redLine"))
              .width(3)
              .height(16)
              .margin({ right: 4 })
            Text(this.compDTO.objectTitle)
              .fontSize($r("app.float.font_size_17"))
              .fontColor($r("app.color.color_222222"))
              .fontWeight(600)
          }
          .justifyContent(FlexAlign.Start)
          .margin({ top: 16, bottom: 8 })
          .width(CommonConstants.FULL_WIDTH)

          GridRow({
            gutter: { x: 12, y: 13 },
            columns: { sm: listSize, md: 2 },
            breakpoints: { value: ['320vp', '520vp', '840vp'] }
          }) {
            ForEach(this.operDataList, (item: ContentDTO, index: number) => {
              GridCol() {
                this.buildItemCard(item);
              }
            })
          }
        }
      }
      .width("100%")
      .height("100%")
      // .layoutWeight(1)
      .edgeEffect(EdgeEffect.None)
      .scrollBar(BarState.Off)
      .onReachStart(() => {
        Logger.debug(TAG, 'onReachStart')
      })
      .onReachEnd(() => {
        Logger.debug(TAG, 'onReachEnd')
        this.addItems()
      })
      .nestedScroll({
        scrollForward: NestedScrollMode.PARENT_FIRST,
        scrollBackward: NestedScrollMode.SELF_FIRST
      })
    }
    .width(CommonConstants.FULL_WIDTH)
    // .width("100%")
    .height("100%")
    .padding({ left: 16, right: 16 })

    // .layoutWeight(1)

  }

  /**
   * 组件项
   *
   * @param programmeBean item 组件项, 上面icon,下面标题
   */
  @Builder
  buildItemCard(item: ContentDTO) {
    Column() {
      Stack({ alignContent: Alignment.BottomEnd }) {
        Image(this.loadImg ? item.fullColumnImgUrls[0].url : '')
          .backgroundColor(0xf5f5f5)
          .width('100%')
          .height(95)
          .borderRadius(4)
        if (this.getLiveRoomNumber(item).length > 0) {
          Text(this.getLiveRoomNumber(item))
            .fontSize('11vp')
            .fontWeight(400)
            .fontColor(Color.White)
            .margin({
              right: '5vp',
              bottom: '5vp'
            })
        }
      }

      Text(item.newsTitle)
        .margin({top:'6'})
        .fontSize(13)
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
    }
    .width('100%')
    .onClick(() => {
      ProcessUtils.processPage(item)
    })
  }

  // 获取评论数
  async getLiveRoomDataInfo(list: ContentDTO[]) {
    const reserveIds = this.getLiveDetailIds(list)
    PageViewModel.getLiveRoomBatchInfo(reserveIds).then((result) => {
      if (result && result.length > 0) {
        this.liveRoomList.push(...result)
      }
    }).catch(() => {
    })
  }

  // 判断是否预约
  getLiveRoomNumber(item: ContentDTO): string {
    const objc = this.liveRoomList.find((element: LiveRoomDataBean) => {
      return element.liveId.toString() == item.objectId
    })
    if (objc && objc.pv && objc.pv > 0) {
      return this.computeShowNum(objc.pv)
    }
    return ''
  }

  addItems() {
    Logger.debug(TAG, 'addItems')
    this.currentPage++
    PageViewModel.getLiveReviewUrl(this.currentPage, this.pageSize).then((liveReviewDTO) => {
      this.operDataList.push(...liveReviewDTO.list)
      this.getLiveRoomDataInfo(this.operDataList)
      Logger.debug(TAG, 'addItems after: ' + this.operDataList.length)
    })
  }

  private getLiveDetailIds(list: ContentDTO[]): string {
    let idList: string[] = []
    list.forEach(item => {
      idList.push(item.objectId)
    });
    return idList.join(',')
  }

  private computeShowNum(count: number): string {
    if (count >= 10000) {
      let num = (count / 10000).toFixed(1)
      if (Number(num.substring(num.length - 1)) == 0) {
        num = num.substring(0, num.length - 2)
      }
      return num + '万人参加'
    }
    return `${count}人参加`
  }
}