@Entry
@Component
struct OfficialPanGesturePage {
  @State message: string = '默认只左右移动'
  @State offsetX: number = 0
  @State offsetY: number = 0
  @State positionX: number = 0
  @State positionY: number = 0
    //默认pan的参数，1根手指，左右方向
  private panOption: PanGestureOptions = new PanGestureOptions({fingers:1, direction:PanDirection.Left | PanDirection.Right})

  build() {
      Column() {
        Column() {
          Text(this.message)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
        }
        .height(200)
        .width(300)
        .padding(20)
        .border({width:3})
        .margin(50)
        //更新Text的位置
        .translate({x:this.offsetX,y:this.offsetY,z:0})
        .gesture(PanGesture(this.panOption)
          .onActionStart(() => {
            console.log('pan gesture start')
          })
          .onActionUpdate((event: GestureEvent) => {
            this.offsetX = this.positionX+event.offsetX
            this.offsetY = this.positionY+event.offsetY
            console.log('pan gesture update')
          })
          .onActionEnd(() => {
            this.positionX = this.offsetX
            this.positionY = this.offsetY
            console.log('pan gesture end')
          })
        )

        Button('修改为四个方向条件')
          .type(ButtonType.Capsule)
          .onClick(() => {
            this.message = '四个方向都可移动'
            this.panOption.setDirection(PanDirection.All)
          })
      }
      .width('100%')
      .height('100%')
  }
}