import { ContentDTO, FullColumnImgUrlDTO, PhotoListBean } from 'wdBean';
import { RmhTitle } from '../cardCommon/RmhTitle'
import { ProcessUtils } from 'wdRouter';
import { CommonConstants } from 'wdConstant/Index';
import {CarderInteraction} from '../CarderInteraction'
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';

const TAG = 'Card19Component';

/**
 * 人民号-动态---19：动态图文卡人民号； 从无图--9图
 */
@Component
export struct Card19Component {
  @State contentDTO: ContentDTO = {
  } as ContentDTO
  @State clicked: boolean = false;

  build() {
    Column() {
      // rmh信息
      RmhTitle({ rmhInfo: this.contentDTO.rmhInfo, publishTime: this.contentDTO.publishTime })
      // 标题
      if (this.contentDTO.newsTitle) {
        Text(this.contentDTO.newsTitle)
          .fontSize($r('app.float.font_size_17'))
          .fontColor(this.clicked ? 0x848484 : $r('app.color.color_222222'))
          .textOverflowStyle(3)
          .margin({ bottom: 8 })
          .width(CommonConstants.FULL_WIDTH)
          .onClick((event: ClickEvent) => {
            this.clicked = true;
            ProcessUtils.processPage(this.contentDTO)
          })
      }
      // 图片-从无图到9图展示
      createImg({ fullColumnImgUrls: this.contentDTO.fullColumnImgUrls })
        .onClick(() => {
          const photoList: PhotoListBean[] = this.contentDTO.fullColumnImgUrls.map(item => {
            const photo: PhotoListBean = {
              width: item.weight,
              height: item.height,
              picPath: item.fullUrl,
              picDesc: ''
            }
            return photo
          })
          ProcessUtils.gotoMultiPictureListPage(photoList,0)
        })
      CarderInteraction()
      //TODO  底部的：分享、评论、点赞 功能；需要引用一个公共组件
    }
    .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')
    })
    .onClick((event: ClickEvent) => {
      this.clicked = true;
      ProcessUtils.processPage(this.contentDTO)
    })
  }
}

interface radiusType {
  topLeft: number | Resource;
  topRight: number | Resource;
  bottomLeft: number | Resource;
  bottomRight: number | Resource;
}

@Component
struct createImg {
  @Prop fullColumnImgUrls: FullColumnImgUrlDTO[]
  @State picWidth: number = 0;
  @State picHeight: number = 0;
  @State loadImg: boolean = false;

  async aboutToAppear(): Promise<void> {
    this.loadImg = await onlyWifiLoadImg();
    if(this.fullColumnImgUrls.length === 4) { // 为了使用栅格布局以便于占用三分之二的宽度，加一个占位
      this.fullColumnImgUrls.splice(2,0, {
        fullUrl: ''
      } as FullColumnImgUrlDTO)
    }
  }

  caclImageRadius(index: number) {
    let radius: radiusType = {
      topLeft: index === 0 ? $r('app.float.image_border_radius') : 0,
      topRight: 0,
      bottomLeft: 0,
      bottomRight: 0,
    }
    if (this.fullColumnImgUrls.length === 1) {
      radius.topRight = index === 0 ? $r('app.float.image_border_radius') : 0
      radius.bottomLeft = index === 0 ? $r('app.float.image_border_radius') : 0
      radius.bottomRight = index === 0 ? $r('app.float.image_border_radius') : 0
    } else if (this.fullColumnImgUrls.length === 5 && !this.fullColumnImgUrls[2].fullUrl) {
      radius.topRight = index === 1 ? $r('app.float.image_border_radius') : 0
      radius.bottomLeft = index === 3 ? $r('app.float.image_border_radius') : 0
      radius.bottomRight = index === 4 ? $r('app.float.image_border_radius') : 0
    } else {
      radius.topRight = index === 2 ? $r('app.float.image_border_radius') : 0
      radius.bottomLeft = index === 6 ? $r('app.float.image_border_radius') : 0
      radius.bottomRight = index === 8 ? $r('app.float.image_border_radius') : 0
    }
    return radius
  }

  getPicType(){
    if (this.picWidth && this.picWidth) {
      if (this.picWidth / this.picHeight > 343/172) {
        return 1; //横长图
      } else if (this.picHeight / this.picWidth > 305/228) {
        return 2; //竖长图
      } else {
        return 3
      }
    } else {
      return 3; //普通图
    }
  }


  build() {
    GridRow({
      gutter: { x: 2, y: 2 }
    }) {
      ForEach(this.fullColumnImgUrls, (item: FullColumnImgUrlDTO, index: number) => {
        if (this.fullColumnImgUrls.length === 1) {
          if (this.getPicType() !== 3) {
            GridCol({
              span: this.getPicType() === 1 ? 12 : 8
            }){
              Stack({
                alignContent: Alignment.BottomEnd
              }) {
                if (this.getPicType() === 1) {
                  Image(this.loadImg ? item.fullUrl : '')
                    .backgroundColor(0xf5f5f5)
                    .width('100%')
                    // .height(172)
                    .autoResize(true)
                    .borderRadius(this.caclImageRadius(index))
                } else if (this.getPicType() === 2) {
                  Image(this.loadImg ? item.fullUrl : '')
                    // .width('100%')
                    .height(305)
                    .autoResize(true)
                    .borderRadius(this.caclImageRadius(index))
                }
                Flex({ direction: FlexDirection.Row }) {
                  Image($r('app.media.icon_long_pic'))
                    .width(14)
                    .height(14)
                    .margin({right: 4})
                  Text('长图')
                    .fontSize(12)
                    .fontWeight(400)
                    .fontColor(0xffffff)
                    .fontFamily('PingFang SC')
                }
                .width(48)
                .padding({bottom: 9})

              }
            }
          } else {
            GridCol({
              span: { xs: 8 }
            }) {
              Image(this.loadImg ? item.fullUrl : '')
                .backgroundColor(0xf5f5f5)
                .width('100%')
                .borderRadius(this.caclImageRadius(index))
                .autoResize(true)
                .opacity(!this.picWidth && !this.picHeight ? 0 : 1)
                .onComplete(callback => {
                  this.picWidth = callback?.width || 0;
                  this.picHeight = callback?.height || 0;
                })
            }
          }
        } else if (this.fullColumnImgUrls.length === 4) {
          GridCol({
            span: { xs: 4 }
          }) {
            Image(this.loadImg ? item.fullUrl : '')
              .backgroundColor(0xf5f5f5)
              .aspectRatio(1)
              .borderRadius(this.caclImageRadius(index))
          }
        } else {
          GridCol({
            span: { sm: 4, lg: 3 }
          }) {
            Image(this.loadImg ? item.fullUrl : '')
              .backgroundColor(0xf5f5f5)
              .aspectRatio(1)
              .borderRadius(this.caclImageRadius(index))
          }
        }
      })
    }
  }
}


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