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

const TAG = 'Card19Component';

/**
 * 人民号-动态---19：动态图文卡人民号； 从无图--9图
 */
@Component
export struct Card19Component {
  @State contentDTO: ContentDTO = {
      // appStyle: '19',
      // coverUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994160362418176.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
      // fullColumnImgUrls: [
      //   {
      //     fullUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994155727712256.png?x-oss-process=image/quality,q_90/auto-orient,1',
      //     height: 1500,
      //     landscape: 1,
      //     size: 1,
      //     url: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994160362418176.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
      //     weight: 2000
      //   },
        // {
        //   fullUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994155727712256.png?x-oss-process=image/quality,q_90/auto-orient,1',
        //   height: 1500,
        //   landscape: 1,
        //   size: 1,
        //   url: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994155727712256.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
        //   weight: 2000
        // },
        // {
        //   fullUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994132109586432.png?x-oss-process=image/quality,q_90/auto-orient,1',
        //   height: 1280,
        //   landscape: 1,
        //   size: 1,
        //   url: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994132109586432.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
        //   weight: 1707
        // },
        // {
        //   fullUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994132109586432.png?x-oss-process=image/quality,q_90/auto-orient,1',
        //   height: 1280,
        //   landscape: 1,
        //   size: 1,
        //   url: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994132109586432.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
        //   weight: 1707
        // }
      // ],
      // newsSummary: '#平安建设双提升#【进工地，送安全】3月21日下午，@合肥交警 包河大队走进辖区建筑工地为驾驶员、安全员们开展春季交通安全主题宣传活动。活动中，交警结合涉工程运输车、渣土车交通事故案例，详细讲解行驶注意事项，并普及了“一盔一带”“右转必停”等安全常识，要求驾驶员牢固树立交通安全意识，自觉遵守交通法律法规，确保出行安全。',
      // newsTitle: '#平安建设双提升#【进工地，送安全】3月21日下午，@合肥交警 包河大队走进辖区建筑工地为驾驶员、安全员们开展春季交通安全主题宣传活动。活动中，交警结合涉工程运输车、渣土车交通事故案例，详细讲解行驶注意事项，并普及了“一盔一带”“右转必停”等安全常识，要求驾驶员牢固树立交通安全意识，自觉遵守交通法律法规，确保出行安全。',
      // publishTime: '1711185754000',
      // relType: '1',
      // rmhInfo: {
      //   authIcon: '',
      //   authTitle: '',
      //   authTitle2: '',
      //   banControl: 0,
      //   cnIsAttention: 1,
      //   cnIsComment: 1,
      //   cnIsLike: 1,
      //   cnMainControl: 1,
      //   cnShareControl: 1,
      //   posterShareControl: 1,
      //   rmhDesc: '合肥市公安局官方人民号',
      //   rmhHeadUrl: 'https://uatjdcdnphoto.aikan.pdnews.cn/vod/content/202302/202302Sa121448724/TUw.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg',
      //   rmhId: '4255290',
      //   rmhName: '合肥警方',
      //   userId: '513697181730757',
      //   userType: '2'
      // }
  } as ContentDTO

  aboutToAppear(): void {
  }

  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($r('app.color.color_222222'))
          .textOverflowStyle(2)
          .margin({ bottom: 8 })
          .width(CommonConstants.FULL_WIDTH)
          .onClick((event: ClickEvent) => {
            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)
        })
      //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) => {
      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;
  aboutToAppear(): void {
    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(item.fullUrl)
                    .width('100%')
                    .height(172)
                    .autoResize(true)
                    .borderRadius(this.caclImageRadius(index))
                } else if (this.getPicType() === 2) {
                  Image(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(item.fullUrl)
                .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(item.fullUrl)
              .aspectRatio(1)
              .borderRadius(this.caclImageRadius(index))
          }
        } else {
          GridCol({
            span: { sm: 4, lg: 3 }
          }) {
            Image(item.fullUrl)
              .aspectRatio(1)
              .borderRadius(this.caclImageRadius(index))
          }
        }
      })
    }
  }
}


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