import { ContentDTO, FullColumnImgUrlDTO, PhotoListBean, CompDTO } 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';
import { persistentStorage, hasClicked } from '../../utils/persistentStorage';
import { InfomationCardClick } from '../../utils/infomationCardClick'
import { SearchShowRed, titleInitRes, textItem } from '../../utils/searchShowRed';
import router from '@ohos.router'

const TAG = 'Card19Component';

/**
 * 人民号-动态---19：动态图文卡人民号； 从无图--9图
 */
@Component
export struct Card19Component {
  @ObjectLink compDTO: CompDTO
  @State pageId: string = '';
  @State pageName: string = '';
  @State contentDTO: ContentDTO = new ContentDTO()
  @State clicked: boolean = false;
  @State titleMarked: boolean = false;
  @State textArr: textItem[] = []

  async aboutToAppear(): Promise<void> {
    this.titleInit();
    const curRouter = router.getState().name;
    this.clicked = hasClicked(this.contentDTO.objectId, curRouter)
    console.log('card19',JSON.stringify(this.contentDTO))
  }

  titleInit() {
    const titleInitRes:titleInitRes = SearchShowRed.titleInit(this.contentDTO.title);
    this.titleMarked = titleInitRes.titleMarked;
    this.textArr = titleInitRes.textArr;
  }

  build() {
    Column() {
      // rmh信息
      RmhTitle(
        {
          rmhInfo: this.contentDTO.rmhInfo,
          publishTime: this.contentDTO.publishTime,
          contentDTO: this.contentDTO,
          compDTO: this.compDTO,
          pageId: this.pageId,
          pageName: this.pageName
        }
      )      // 标题
      if (this.contentDTO.newsTitle) {
        Text() {
          if (this.titleMarked) {
            ForEach(this.textArr, (textItem: textItem) => {
              if (textItem.isRed) {
                Span(textItem.content)
                  .fontColor(0xED2800)
              } else {
                Span(textItem.content)
              }
            })
          } else {
            Span(this.contentDTO.newsTitle=='null'?"":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) => {
            InfomationCardClick.track(this.compDTO, this.contentDTO, this.pageId, this.pageName)
            if (router.getState().name !== 'MyCollectionListPage') {
              this.clicked = true;
            }
            ProcessUtils.processPage(this.contentDTO)
          })
      }
      // 图片-从无图到9图展示
      createImg({ fullColumnImgUrls: this.contentDTO.fullColumnImgUrls })

      CarderInteraction({ contentDTO: this.contentDTO })
      //TODO  底部的：分享、评论、点赞 功能；需要引用一个公共组件
    }
    .padding({
      left: 10,
      right: 10,
      top: $r('app.float.card_comp_pagePadding_tb'),
      bottom: $r('app.float.card_comp_pagePadding_tb')
    })
    .backgroundColor(0xffffff)
    .width(CommonConstants.FULL_WIDTH)
    .onClick((event: ClickEvent) => {
      InfomationCardClick.track(this.compDTO, this.contentDTO, this.pageId, this.pageName)
      if (router.getState().name !== 'MyCollectionListPage') {
        this.clicked = true;
      }
      persistentStorage(this.contentDTO.objectId);
      ProcessUtils.processPage(this.contentDTO)
    })
  }
}

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

interface picProps {
  width: number,
  height: number
}

@Component
struct createImg {
  @Prop fullColumnImgUrls: FullColumnImgUrlDTO[]
  @State loadImg: boolean = false;
  @State onePicW: number = 0; // 只有一张图时候图片的宽度
  @State onePicH: number = 0; // 只有一张图时候图片的高度

  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(picWidth: number, picHeight: number) {
    if (picWidth && picHeight) {
      if (picWidth / picHeight > 2/1) {
        return 1; //横长图
      } else if (picWidth/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(item.weight, item.height) !== 3) {
            GridCol({
              span: this.getPicType(item.weight, item.height) === 1 ? 12 : 8
            }){
              Stack({
                alignContent: Alignment.BottomEnd
              }) {
                if (this.getPicType(item.weight, item.height) === 1) {
                  Image(this.loadImg ? item.fullUrl || item.url : '')
                    .backgroundColor(0xf5f5f5)
                    .width('100%')
                    .height(198)
                    .autoResize(true)
                    .borderRadius(this.caclImageRadius(index))
                } else if (this.getPicType(item.weight, item.height) === 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')
                    .visibility(
                      item.weight / item.height > 2 / 1 || item.weight / item.height < 1 / 2
                        ? Visibility.Visible : Visibility.None
                    )
                }
                .width(48)
                .padding({bottom: 9})

              }
            }
          } else {
            GridCol({
              span: this.onePicW > this.onePicH ? 12 : 8
            }) {
              Image(this.loadImg ? item.fullUrl : '')
                .backgroundColor(0xf5f5f5)
                // .aspectRatio(this.onePicW > this.onePicH ? 343 / 198 : 228 / 305)
                .width('100%')
                .autoResize(true)
                .autoResize(true)
                .borderRadius(this.caclImageRadius(index))
                .opacity(!item.weight && !item.height ? 0 : 1)
                .onComplete((event?) => {
                  this.onePicW = event?.width || 0;
                  this.onePicH = event?.height || 0;
                })
            }
          }
        } else if (this.fullColumnImgUrls.length === 5) {
          // 四图卡里面塞了一张补位卡
          GridCol({
            span: { xs: 4 }
          }) {
            Stack({alignContent: Alignment.BottomEnd}) {
              Image(this.loadImg ? item.fullUrl : '')
                .backgroundColor(index === 2 ? 0xffffff : 0xf5f5f5)
                .aspectRatio(1)
                .width('226lvp')
                .height('226lvp')
                .borderRadius(this.caclImageRadius(index))
              if(this.getPicType(item.weight, item.height) !== 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')
                    .visibility(
                      item.weight / item.height > 2 / 1 || item.weight / item.height < 1 / 2
                        ? Visibility.Visible : Visibility.None
                    )
                }
                .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))
                .width('100%')
                .autoResize(true)
              if (this.getPicType(item.weight, item.height) !== 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')
                    .visibility(
                      item.weight / item.height > 2 / 1 || item.weight / item.height < 1 / 2
                        ? Visibility.Visible : Visibility.None
                    )
                }
                .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 })
}