import { AppStorageKeyFishCollect, YTHeader, yTRouter } from 'basic';

@Component
export struct FragranceView{
  // @StorageProp(AppStorageKeyFishCollect.TEXTARR)
  // @State
  // textArr:string[]=['xxxx','xxxx','xxxx','xxx','xxxx','xxxx']
  private averageAngle: number = 0
  private radius1: number = 50
  private radius2: number =1
  private img: number = 80
  private isRotate:boolean = true;//按下暂停转动
  @State widAr:Array<number> = [this.radius1,this.radius1,this.radius1,this.radius1,this.radius1]
  @State heiAr:Array<number> = [this.radius2,this.radius2,this.radius2,this.radius2,this.radius2]
  @State rotateAngle: number = 0

  private intervalID = setInterval(()=> {//每0.1秒执行5°的转动，动画更平滑

    for (let index = 0; index < 6; index++) {
      let doubleAngle = (this.averageAngle -60 * index + 0) * Math.PI / 180
      let sin = Math.sin(doubleAngle);
      let cos = Math.cos(doubleAngle);
      this.widAr[index] =this.radius1+this.radius1*cos
      this.heiAr[index] =this.radius2+this.radius2*sin * Math.cos(Math.PI * 5 / 18)
    }

    if (this.isRotate) {
      if (this.averageAngle<360) {//0~360°循环
        this.averageAngle+=1
      }else {
        this.averageAngle = 0;
      }
      this.rotateAngle = 360
    }


  }, 100)

  FragranceImages: ImageFrameInfo[] =Array.from<string>({length:23}).map<ImageFrameInfo>((v:string,index:number)=>{
    return {
      src: $r(`app.media.fragrance${index}`),
    }
  })
  //烟
  @State FragranceState:AnimationStatus = AnimationStatus.Initial
  //香
  @State FraState:AnimationStatus = AnimationStatus.Initial

  // aboutToAppear(): void {
  //
  //   if(this.textArr.length==0){
  //     this.textArr.push('诸事顺遂')
  //   }
  //
  //   this.widAr=[]
  //   this.heiAr=[]
  //   this.textArr.forEach((item)=>{
  //     this.widAr.push(this.radius1)
  //     this.heiAr.push(this.radius2)
  //   })
  // }

  aboutToDisappear() {
    clearInterval(this.intervalID);
  }



  build() {
    Column(){

        Stack() {
          Column() {
            RelativeContainer() {
              // ForEach(this.textArr,(item:string,index:number)=>{
              //   Column() {
              //     Text(item)
              //       .width(this.img)
              //       .height(this.img)
              //       .fontColor(Color.White)
              //   }.position({ x: this.widAr[index], y: this.heiAr[index] })
              // })

              Column() {
                Text('天天向上')
                  .width(this.img)
                  .height(this.img)
                  .fontColor(Color.White)

              }.position({ x: this.widAr[1], y: this.heiAr[1] })

              Column() {
                Text('清纯男大')
                  .width(this.img)
                  .height(this.img)
                  .fontColor(Color.White)

              }.position({ x: this.widAr[2], y: this.heiAr[2] })

              Column() {
                Text('官人梧州')
                  .width(this.img)
                  .height(this.img)
                  .fontColor(Color.White)

              }.position({ x: this.widAr[3], y: this.heiAr[3] })

              Column() {
                Text('年年岁岁')
                  .width(this.img)
                  .height(this.img)
                  .fontColor(Color.White)

              }.position({ x: this.widAr[4], y: this.heiAr[4] })
            }.width(250).height(200)
            .onAreaChange((oldValue: Area, newValue: Area) => {
              this.radius1 = new Number(newValue.width).valueOf() / 3
              this.radius2 = new Number(newValue.height).valueOf() / 4
            })
          }.width('100%')
          .height('100%')
          .alignItems(HorizontalAlign.Center)

        }.width('100%')
        .height(200)


          // Column() {
          //
          // }.width(5)
          // .height(300)
          // .backgroundColor(Color.Pink)

          Row() {
            ImageAnimator()
              .width(100)
              .height(300)
              .images(this.FragranceImages)// 动画数组
              .duration(this.FragranceImages.length * 150)// 持续
              .state(this.FragranceState)// 动画状态
              .backgroundColor(Color.Black)
              .iterations(-1) // 播放次数



            // ImageAnimator()
            //   .width(100)
            //   .height(300)
            //   .images(this.FragranceImages)// 动画数组
            //   .duration(this.FragranceImages.length * 100)// 持续
            //   .state(this.FragranceState)// 动画状态
            //   .iterations(-1) // 播放次数


          }



        Button('xxx').onClick(() => {
          this.FragranceState = AnimationStatus.Running
        })
        Button('xxx').onClick(() => {
          this.FragranceState = AnimationStatus.Stopped
        })

        Button('xxxxx').onClick(()=>{
          yTRouter.router2FragranceSettingPage()
        })

    }.width('100%')
    .height('100%')
    .backgroundColor(Color.Black)


  }
}