import { CompDTO, ContentDTO, Params } from 'wdBean';
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
import { postInteractAccentionOperateParams } from 'wdBean';
import { PageRepository } from '../../repository/PageRepository';
import { CommonConstants } from 'wdConstant/Index';
import { ProcessUtils } from 'wdRouter';
import { HttpUtils } from 'wdNetwork/Index';
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';
import { InfomationCardClick } from '../../utils/infomationCardClick'
import { StringUtils } from 'wdKit';

/**
 * 小视频横划卡
 * Zh_Single_Row-02
 */
const TAG = 'Zh_Single_Row-02'

@Component
export struct ZhSingleRow02 {
  @Prop loadImg: boolean = true;
  @State pageId: string = '';
  @State pageName: string = '';
  @State compDTO: CompDTO = {} as CompDTO
  @State initMoreWidth: number = 22;
  @State moreWidth:number = 22
  @State moreTips: string = ''
  scroller: Scroller = new Scroller()
  @State compIndex: number = 0;

  resetMoreTips() {
    if (this.moreWidth < this.initMoreWidth * 2) {
      this.moreTips = '查看更多';
    }
  }

  edgeAnimation() {
    if (this.moreWidth < this.initMoreWidth * 3) {
      if (!this.moreTips) {
        this.moreTips = '查看 ';
      }
      this.moreWidth = this.moreWidth + 2
    }
    if (this.moreWidth > this.initMoreWidth * 2) {
      this.moreTips = '松手查看';
    } else {

    }
  }

  reverseEdgeAnimation() {
    if (this.moreWidth > this.initMoreWidth) {
      this.moreWidth = this.moreWidth - 2
    }
    this.resetMoreTips()
  }

  resetEdgeAnimation() {
    if (this.moreWidth > this.initMoreWidth) {
      this.moreWidth = 22
    }
    this.resetMoreTips()
  }

  toMore() {
    if (this.moreWidth > this.initMoreWidth * 2) {

      ProcessUtils.compJumpPage(this.compDTO)
      // if (this.compDTO?.objectType === '11') {
      //   ProcessUtils.jumpChannelTab(this.compDTO.objectId, this.compDTO.pageId as string, this.compDTO.objectTitle)
      // } else {
      //   const contentDTO: ContentDTO = {
      //     objectId: this.compDTO.objectId,
      //     objectType: this.compDTO.objectType,
      //     linkUrl: this.compDTO.linkUrl,
      //     pageId: this.compDTO.pageId
      //   } as ContentDTO
      //   ProcessUtils.processPage(contentDTO)
      // }
    }
  }

  showMore():boolean {
    let showMore = this.checkMoreJumpPage()
    if(!showMore){
      return true
    }else{
      if(this.compDTO && StringUtils.isNotEmpty(this.compDTO?.objectType)){
        if(this.compDTO?.objectType === '0'){
          return false
        }else{
          return true
        }
      }else{
        return false
      }
    }

    // return !!this.compDTO.dataSourceType || !(this.compDTO?.objectType === '0' || this.compDTO?.objectType === '')
  }

  checkMoreJumpPage():boolean{
    let localJump = true

    if(this.compDTO && StringUtils.isNotEmpty(this.compDTO?.objectType)){
      let type = this.compDTO?.objectType
      if(type == "LIVE_HORIZONTAL_CARD" || type == "LIVE_RESERVATION" || type == "LIVE_MONTHLY_RANKING") {
        localJump = false
      }
    }
    return localJump
  }


  build() {
    Column() {
      //顶部
      this.CompHeader(this.compDTO)
      // 列表内容
      Scroll(this.scroller) {
        Row() {
          Row() {
            ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
              CreatorItem({
                item,
                index,
                compDTO: this.compDTO,
                pageId: this.pageId,
                pageName: this.pageName, loadImg: this.loadImg
              })
                .margin({ right: 8, left: index === 0 ? 16 : 0 })
            })
          }
          if (this.compDTO.operDataList.length > 2 && this.showMore()) {
            Row() {
              Ellipse()
                .width(2* (this.moreWidth - this.initMoreWidth - 1))
                .height('100%')
                .fill(0xe9e9e9)
                .position({ left: -(this.moreWidth - this.initMoreWidth - 3) * 0.8 , top: 0 })

              Column() {
                if (this.moreWidth > this.initMoreWidth + 2) {
                  Text(this.moreTips)
                    .fontSize(9)
                    .fontColor(0x858585)
                    .width(8)
                }
              }
              .justifyContent(FlexAlign.Center)
              .align(Alignment.Center)
              .height('100%')
              .width(this.initMoreWidth)
              .backgroundColor(0xe9e9e9)
              .borderRadius({ topLeft: 5, bottomLeft: 5 })
            }
            .margin({left: 1.5 * (this.moreWidth - this.initMoreWidth)})
          }
        }
        .padding({right: 10})
      }
      .width(CommonConstants.FULL_WIDTH)
      .height(208)
      .align(Alignment.Start)
      .scrollable(this.compDTO.operDataList.length >= 2 ? ScrollDirection.Horizontal : ScrollDirection.None)
      .scrollBar(BarState.Off)
      .edgeEffect(EdgeEffect.None)
      .onReachEnd(() => {
        this.edgeAnimation()
      })
      .onScrollStop(() => {
        // this.resetEdgeAnimation();
      })
      .onScroll((xOffset: number, yOffset: number) => {
        if (xOffset < 0) {
          this.reverseEdgeAnimation();
        }
      })
      .onTouch((event?: TouchEvent) => {
        if(event) {
          if (event.type === TouchType.Up) {
            this.toMore();
            this.resetEdgeAnimation();
          }
        }
      })
    }
    .padding({
      // left: 10,
      // right: 10,
      top: $r('app.float.card_comp_pagePadding_tb'),
      bottom: $r('app.float.card_comp_pagePadding_tb')
    })
    .backgroundColor(0xffffff)
    .width('102%')
    .margin({ bottom: 8, left: -6 })
    .borderRadius({
      topLeft:this.compIndex === 0 ? $r('app.float.image_border_radius'):0,
      topRight:this.compIndex === 0 ? $r('app.float.image_border_radius'):0
    })
  }

  @Builder
  CompHeader(item: CompDTO) {
    Row() {
      Row() {
        Image($r("app.media.redLine"))
          .width(3)
          .height(16)
          .margin({ right: 4 })
        Text(item.objectTitle)
          .fontSize($r("app.float.font_size_17"))
          .fontColor($r("app.color.color_222222"))
          .fontWeight(600)
      }

      Row() {
        Text("更多")
          .fontSize($r("app.float.font_size_14"))
          .fontColor($r("app.color.color_999999"))
          .margin({ right: 1 })
        Image($r("app.media.more"))
          .width(14)
          .height(14)
      }
      .padding({
        right: $r('app.float.card_comp_pagePadding_lf'),
      })
      .visibility(this.showMore() ? Visibility.Visible : Visibility.None)
      .onClick(() => {
        if (this.compDTO?.objectType === '11') {
          ProcessUtils.jumpChannelTab(this.compDTO.objectId, this.compDTO.pageId as string, this.compDTO.objectTitle)
        } else {
          const contentDTO: ContentDTO = {
            objectId: this.compDTO.objectId,
            objectType: this.compDTO.objectType,
            linkUrl: this.compDTO.linkUrl,
            pageId: this.compDTO.pageId
          } as ContentDTO
          ProcessUtils.processPage(contentDTO)
        }
      })
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .margin({ bottom: 10 })
    .padding({left: 16})
    .width('100%')
  }
}

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

@Component
struct CreatorItem {
  @Prop pageId: string = '';
  @Prop pageName: string = '';
  @Prop compDTO: CompDTO
  @Prop item: ContentDTO
  @Prop index: number
  @State rmhIsAttention: number = 0
  @Prop loadImg: boolean = true;

  async aboutToAppear(): Promise<void> {
    // this.loadImg = await onlyWifiLoadImg();
  }

  build() {
    ListItem() {
      Column() {
        Stack({ alignContent: Alignment.Bottom }) {
          Image(this.loadImg ? this.item.coverUrl : '')
            .width(156)
            .height(208)
            .backgroundColor(0xf5f5f5)
            .borderRadius(4)
            .borderStyle(BorderStyle.Solid)
            .borderWidth(0.5)
            .borderColor($r('app.color.color_0D000000'))

          Row()
            .width(156)
            .height(80)
            .linearGradient({
              direction: GradientDirection.Bottom,
              colors: [['rgba(0, 0, 0, 0.0)', 0.0], ['rgba(0, 0, 0, 0.6)', 1.0]]
            })
            .borderRadius(4)
          Text(this.item.newsTitle)
            .fontColor(0xffffff)
            .fontSize(15)
            .maxLines(2)
            .textOverflow({overflow: TextOverflow.Ellipsis})
            .width(140)
            .margin({bottom: 8})
            .height(42)
            .lineHeight(21)
        }
      }
      .width(156)
      .height(208)
      .borderColor($r('app.color.color_EDEDED'))
      .borderRadius(4)
    }
    .onClick((event: ClickEvent) => {
      InfomationCardClick.track(this.compDTO, this.item, this.pageId, this.pageName)
      ProcessUtils.processPage(this.item)
    })
  }

  /**
   * 关注号主 TODO 这里后面需要抽离
   */
  handleAccention(item: ContentDTO, status: number) {
    this.rmhIsAttention = this.rmhIsAttention ? 0 : 1
    return
    // 未登录，跳转登录
    if (!HttpUtils.getUserId()) {
      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
      return
    }

    const params: postInteractAccentionOperateParams = {
      attentionUserType: item.rmhInfo?.userType || '', //被关注用户类型（1 普通用户 2 视频号 3 矩阵号）
      attentionUserId: item.rmhInfo?.userId || '', // 被关注用户号主id
      attentionCreatorId: item.rmhInfo?.rmhId || '', // 被关注用户号主id
      // userType: 1,
      // userId: '1', // TODO 用户id需要从本地获取
      status: status,
    }
    PageRepository.postInteractAccentionOperate(params).then(res => {
      console.log(TAG, '关注号主==', JSON.stringify(res.data))
      if (status === 1) {
        this.rmhIsAttention = 0
      } else {
        this.rmhIsAttention = 1
      }
    })
  }
}