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 = new ContentDTO()
  @State clicked: boolean = false;
  @State titleMarked: boolean = false;
  @State str01: string = '';
  @State str02: string = '';
  @State str03: string = '';

  async aboutToAppear(): Promise<void> {
    this.titleInit();
    console.log('card19',JSON.stringify(this.contentDTO))
  }

  titleInit() {
    if (this.contentDTO.title?.includes('<em>') && this.contentDTO.title?.includes('</em>')) {
      this.titleMarked = true;
      this.str01 = this.contentDTO.title?.split('<em>')[0] || '';
      this.str02 = this.contentDTO.title?.split('<em>')[1].split('</em>')[0] || '';
      this.str03 = this.contentDTO.title?.split('<em>')[1].split('</em>')[1] || '';
    }
  }

  build() {
    Column() {
      // rmh信息
      RmhTitle({ rmhInfo: this.contentDTO.rmhInfo, publishTime: this.contentDTO.publishTime })
      // 标题
      if (this.contentDTO.newsTitle) {
        Text() {
          if (this.titleMarked) {
            Span(this.str01)
            Span(this.str02)
              .fontColor(0xED2800)
            Span(this.str03)
          } else {
            Span(this.contentDTO.newsTitle)
          }
        }
          .fontSize($r('app.float.font_size_18'))
          .fontColor(this.clicked ? 0x848484 : $r('app.color.color_222222'))
          .textOverflowStyle(3)
          .margin({ bottom: 8 })
          .width(CommonConstants.FULL_WIDTH)
          .lineHeight(25)
          .onClick((event: ClickEvent) => {
            this.clicked = true;
            ProcessUtils.processPage(this.contentDTO)
          })
      }
      // 图片-从无图到9图展示
      createImg({ fullColumnImgUrls: this.contentDTO.fullColumnImgUrls })

      CarderInteraction({ contentDTO: this.contentDTO })
      //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> {
    if (this.fullColumnImgUrls.length === 4) { // 为了使用栅格布局以便于占用三分之二的宽度，加一个占位
      this.fullColumnImgUrls.splice(2, 0, {
        fullUrl: ''
      } as FullColumnImgUrlDTO)
    }
    this.loadImg = await onlyWifiLoadImg();
    console.log('card19-this.fullColumnImgUrls',JSON.stringify(this.fullColumnImgUrls))
  }

  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.picHeight) {
      if (this.picWidth / this.picHeight > 2/1) {
        return 1; //横长图
      } else if ( this.picWidth/this.picHeight < 1/2) {
        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 || item.url : '')
                    .backgroundColor(0xf5f5f5)
                    .width('100%')
                    .height(172)
                    .autoResize(true)
                    .borderRadius(this.caclImageRadius(index))
                } else if (this.getPicType() === 2) {
                  Image(this.loadImg ? item.fullUrl ||  item.url : '')
                    .width('100%')
                    .height(305)
                    .autoResize(true)
                    .borderRadius(this.caclImageRadius(index))
                }
                Flex({ direction: FlexDirection.Row }) {
                  Image($r('app.media.icon_long_pic'))
                    .width(12)
                    .height(12)
                    .margin({right: 4})
                  Text('长图')
                    .fontSize(10)
                    .fontWeight(400)
                    .textShadow({
                      radius: 1,
                      color: '#777',
                      offsetX:1,
                      offsetY:1
                    })
                    .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 }
          }) {
            Stack({alignContent: Alignment.BottomEnd}) {
              Image(this.loadImg ? item.fullUrl : '')
                .backgroundColor(0xf5f5f5)
                .aspectRatio(1)
                .borderRadius(this.caclImageRadius(index))
                .onComplete(callback => {
                  this.picWidth = callback?.width || 0;
                  this.picHeight = callback?.height || 0;
                })
              if(this.getPicType() !== 3){
                Flex({ direction: FlexDirection.Row }) {
                  Image($r('app.media.icon_long_pic'))
                    .width(12)
                    .height(12)
                    .margin({ right: 4 })
                  Text('长图')
                    .fontSize(10)
                    .fontWeight(400)
                    .textShadow({
                      radius: 1,
                      color: `rgba(0,0,0,0.5)`,
                      offsetY:1,
                      offsetX:1
                    })
                    .fontColor(0xffffff)
                    .fontFamily('PingFang SC')
                }
                .width(48)
                .align(Alignment.BottomEnd)
                .padding({ bottom: 3 })
              }
            }
          }
        } else {
          GridCol({
            span: { sm: 4, lg: 3 }
          }) {
            Stack({ alignContent: Alignment.BottomEnd }) {
              Image(this.loadImg ? item.fullUrl : '')
                .backgroundColor(0xf5f5f5)
                .aspectRatio(1)
                .borderRadius(this.caclImageRadius(index))
                .onComplete(callback => {
                  this.picWidth = callback?.width || 0;
                  this.picHeight = callback?.height || 0;
                })
              if (this.getPicType() !== 3) {
                Flex({ direction: FlexDirection.Row }) {
                  Image($r('app.media.icon_long_pic'))
                    .width(12)
                    .height(12)
                    .margin({ right: 4 })
                  Text('长图')
                    .fontSize(10)
                    .fontWeight(400)
                    .textShadow({
                      radius: 1,
                      color: `rgba(0,0,0,0.5)`,
                      offsetY: 1,
                      offsetX: 1
                    })
                    .fontColor(0xffffff)
                    .fontFamily('PingFang SC')
                }
                .width(48)
                .align(Alignment.BottomEnd)
                .padding({ bottom: 3 })
              }
            }
              .onClick(() => {
                const photoList: PhotoListBean[] = this.fullColumnImgUrls.map(item => {
                  const photo: PhotoListBean = {
                    width: item.weight,
                    height: item.height,
                    picPath: item.fullUrl||item.url,
                    picDesc: '',
                    itemType:2,
                    id:0
                  }
                  return photo
                })
                ProcessUtils.gotoMultiPictureListPage(photoList, index)
              })
          }
        }
      })
    }
  }
}


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