import { ContentDTO, NewspaperListItemBean, NewspaperPositionItemBean, Params } from 'wdBean';
import { StringUtils } from 'wdKit';
import { ProcessUtils } from 'wdRouter';
import { TrackingContent, TrackConstants } from 'wdTracking/Index';
import { newsSkeleton } from './skeleton/newsSkeleton';

@Component
export struct ENewspaperItemComponent {
  private newspaperListItemBean: NewspaperListItemBean = {} as NewspaperListItemBean
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  private startX: number = 0
  private startY: number = 0
  private itemBeanClicked: NewspaperPositionItemBean = {} as NewspaperPositionItemBean
  @State isShowSkeleton: boolean = true
  @State contentWidth: number = 0
  @State contentHeight: number = 0
  @Consume itemPicWidth: number
  @Consume itemPicHeight: number

  aboutToAppear(): void {
    for (let index = 0; index < this.newspaperListItemBean.items.length; index++) {
      const element = this.newspaperListItemBean.items[index];
      TrackingContent.common(TrackConstants.EventType.Show, TrackConstants.PageName.NewsPaperPage,
        TrackConstants.PageName.NewsPaperPage
        , {
          'contentName': element.title,
          'contentType': element.newsType,
          'contentId': element.newsId,
          'panelNumber': this.newspaperListItemBean.pageNum,
          'panelName': this.newspaperListItemBean.pageName,
          'readMode': '1',
        })
    }
  }

  build() {
    Stack() {

      Image(this.newspaperListItemBean.pagePic)
        .width(px2vp(this.itemPicWidth))
        .height(px2vp(this.itemPicHeight))
        .onComplete((event) => {
          if (event?.loadingStatus == 1) {
            this.contentWidth = event?.contentWidth
            this.contentHeight = event?.contentHeight
          }

          this.isShowSkeleton = false
        })
        .objectFit(ImageFit.Fill)
        .zIndex(10)

      newsSkeleton({showBottom: this.isShowSkeleton})
        .visibility(this.isShowSkeleton ? Visibility.Visible : Visibility.None)
        .width('100%')
        .zIndex(1)

      
      if (this.contentWidth !== 0) {
        Canvas(this.context)
          .width(px2vp(this.contentWidth))
          .height(px2vp(this.contentHeight))
          .backgroundColor(Color.Transparent)
          .onReady(() => {

          })
          .zIndex(15)
      }
    }
    .padding({
      top: 14,
      right: 10,
      bottom: 14,
      left: 10
    })
    .backgroundColor(Color.White)
    .width('100%')
    .onTouch((event: TouchEvent) => {
      if (event.type === TouchType.Down) {
        let x = event.touches[0].x;
        let y = event.touches[0].y;
        this.startX = x;
        this.startY = y;
        let points: number[][] = this.getArea(x, y, this.newspaperListItemBean.items);
        // console.log("event.points", JSON.stringify(points))
        if (points && points.length > 2) {
          let path = new Path2D();
          path.moveTo(px2vp(points[0][0]), px2vp(points[0][1]));
          for (let point of points.slice(1, points.length)) {
            path.lineTo(px2vp(point[0]), px2vp(point[1]));
          }
          path.closePath();
          // 设定填充色为蓝色
          this.context.fillStyle = '#33000000';
          // 使用填充的方式，将Path2D描述的五边形绘制在canvas组件内部
          this.context.fill(path);
        }

      }
      if (event.type === TouchType.Up) {
        this.context.clearRect(0, 0, this.context.width, this.context.height)
        if (this.itemBeanClicked != null && this.itemBeanClicked.newsId != 0 && this.itemBeanClicked.newsType ) {
          //公共跳转
          let content: ContentDTO = {
            objectId: this.itemBeanClicked.newsId + '',
            objectType: this.itemBeanClicked.newsType + '',
            relId: this.itemBeanClicked.relId + '',
            relType: this.itemBeanClicked.relType ?? '0'
          } as ContentDTO
          ProcessUtils.processPage(content)
          //内容点击
          TrackingContent.clickWithEvent('current_Number_Panel_content_click', TrackConstants.PageName.NewsPaperPage,
            TrackConstants.PageName.NewsPaperPage
            , {
              'contentName': this.itemBeanClicked.title,
              'contentType': this.itemBeanClicked.newsType,
              'contentId': this.itemBeanClicked.newsId,
              'panelNumber': this.newspaperListItemBean.pageNum,
              'panelName': this.newspaperListItemBean.pageName,
              'readMode': '1',
            })
          this.itemBeanClicked = {} as NewspaperPositionItemBean
        }
      }
      if (event.type === TouchType.Move) {
        let mx = event.touches[0].x;
        let my = event.touches[0].y;
        if (this.startX - mx > 5 || mx - this.startX > 5 || this.startY - my > 5 || my - this.startY > 5) {
          this.itemBeanClicked = {} as NewspaperPositionItemBean
          this.context.clearRect(0, 0, this.context.width, this.context.height)
        }

      }
    })
  }

  public getArea(x: number, y: number, itemBeans: NewspaperPositionItemBean[]): number[][] {
    if (itemBeans && itemBeans.length > 0) {
      for (let itemBean of itemBeans) {
        if (itemBean.points) {
          let area: string[] = itemBean.points.split(';')
          if (area && area.length > 0) {
            let xys: number[][] = []
            let minX: number = -1;
            let maxX: number = -1;
            let minY: number = -1;
            let maxY: number = -1;
            for (let item of area) {
              let pair: string[] = item.split(',');
              if (pair && pair.length > 1) {
                let xy: number[] = [StringUtils.parseNumber(pair[0]), StringUtils.parseNumber(pair[1])]
                if (minX < 0) {
                  minX = xy[0]
                } else {
                  if (minX > xy[0]) {
                    minX = xy[0]
                  }
                }
                if (maxX < 0) {
                  maxX = xy[0]
                } else {
                  if (maxX < xy[0]) {
                    maxX = xy[0]
                  }
                }
                if (minY < 0) {
                  minY = xy[1]
                } else {
                  if (minY > xy[1]) {
                    minY = xy[1]
                  }
                }
                if (maxY < 0) {
                  maxY = xy[1]
                } else {
                  if (maxY < xy[1]) {
                    maxY = xy[1]
                  }
                }
                xys.push(xy);
              }

            }
            if (vp2px(x) > minX && vp2px(x) < maxX && vp2px(y) > minY && vp2px(y) < maxY) {
              this.itemBeanClicked = itemBean;
              return xys;
            }
          }
        }

      }
    }
    return []
  }
}