import { avPlayerManager, Vibration, YTAvoid, YTHeader, yTRouter } from 'basic';
import { faceDetector } from '@kit.CoreVisionKit';
import { trustedAppService } from '@kit.DeviceSecurityKit';

// 观察者模式装饰器
@ObservedV2
class Cell {
  value: string = '功德+1'; // 默认显示的文字
  @Trace // 跟踪属性变化
  opacity: number = 0; // 文字透明度
  @Trace // 跟踪属性变化
  y: number = 0; // 文字的垂直偏移量
}
@Component
export struct MainView{
  @State currentIndex: number = 0
  tabsController: TabsController = new TabsController()
  @StorageProp(YTAvoid.SAFE_TOP_KEY) top: number = 0
  @State list: Cell[] = []; // 存储所有 Cell 对象的数组
  private indexCount: number = 0; // 记录当前滚动的索引
  private count: number = 10; // 列表中 Cell 对象的数量
  private image: ResourceStr=$r('app.media.muyu')

  //是否是手动
  @State isHand:boolean=false
  //是否展示侧边工具栏
  @State isShowSilder:boolean=true
  //是否开启声音
  @State isOpenMusic:boolean=true
  //是否开启震动
  @State isOpenVibration:boolean=true

  //动画true/false
  @State isAnimation:boolean=false
  //进度条
  @State currentMerit:number=0
  @State totalMerit:number=500

  //时间间隔
  @State time:number=1000

  @State isShowTimeManger:boolean=false
  @State valueTime:number=10

  //开启关闭音乐
  async openMusic(){
    await avPlayerManager.playByRawSrc('music3.mp3')

  }
  async closeMusic(){
    await avPlayerManager.stop()
  }

  //点击动画
  onclikMerit(){
    if(this.isAnimation){
      return
    }
    if(this.isOpenMusic){
      this.openMusic()
    }
    if(this.isOpenVibration){
      Vibration.startVibration()
    }
    this.isAnimation=true
    this.currentMerit++
    let index = this.indexCount % this.count; // 计算当前滚动的索引
    this.indexCount++; // 更新索引计数器
    animateToImmediately({
      // 立即开始动画
      duration: 0, // 动画持续时间为0毫秒
      onFinish: () => { // 动画完成后的回调
        animateToImmediately({
          // 再次立即开始动画
          duration: 500, // 动画持续时间为1000毫秒
          onFinish:()=>{
            this.isAnimation=false
            this.closeMusic()
          }
        }, () => {
          this.list[index].y = -200 // 设置 Cell 的垂直偏移量
          this.list[index].opacity = 0 // 设置 Cell 的透明度
        })

      }
    }, () => {
      this.list[index].y = 0 // 设置 Cell 的垂直偏移量
      this.list[index].opacity = 1 // 设置 Cell 的透明度

    })

  }

  @Builder
  timeMangerBuilder(){
    Column(){
      Stack({alignContent:Alignment.Top}) {
        Tabs({ barPosition: BarPosition.Start, controller: this.tabsController  }) {
          TabContent() {
            Column() {
              Text('敲击间隔时长（1-10秒）')

              Row() {
                TextInput()
                  .width(70)
                  .height(40)
                  .padding(0)
                  .type(InputType.Number) // 设置输入类型为数字
                  .textAlign(TextAlign.Center)
                  .borderRadius(4)
                  .backgroundColor(Color.Gray)

                Text('秒')
              }
            }

          }.tabBar('无限')

          TabContent() {
            Column() {
              Column() {
                Text('敲击次数（1-9999次）')
                Row() {
                  TextInput()
                    .width(70)
                    .height(40)
                    .padding(0)
                    .type(InputType.Number) // 设置输入类型为数字
                    .textAlign(TextAlign.Center)
                    .borderRadius(4)
                    .backgroundColor(Color.Gray)

                  Text('秒')
                }
              }

              Column() {
                Text('敲击间隔时长（1-10秒）')
                Row() {
                  TextInput()
                    .width(70)
                    .height(40)
                    .padding(0)
                    .type(InputType.Number) // 设置输入类型为数字
                    .textAlign(TextAlign.Center)
                    .borderRadius(4)
                    .backgroundColor(Color.Gray)

                  Text('秒')
                }
              }

            }

          }.tabBar('固定次数')

          TabContent() {
            Column() {
              Column() {
                Text('倒计时（1-9999次）')
                Stack() {
                  Progress({ value: this.valueTime, total: 70, type: ProgressType.Linear }).backgroundColor('#4c4c4c')
                  Row({space:30}){
                    ForEach([0,10,20,30,40,50,60,70],(item:number,index:number)=>{
                      Column(){
                      }.width(10)
                      .height(10)
                      .borderRadius('50%')
                      .onClick(()=>{
                        if(index!=7){
                          this.valueTime=item
                        }else{
                          this.currentIndex=3
                          this.tabsController.changeIndex(this.currentIndex)
                        }

                      })
                      .backgroundColor(Color.Yellow)
                      // .backgroundColor(this.valueTime>=item?Color.Yellow:Color.White)
                    })


                  }.width('100%')

                }
              }

              Column() {
                Text('敲击间隔时长（1-10秒）')
                Row() {
                  TextInput()
                    .width(70)
                    .height(40)
                    .padding(0)
                    .type(InputType.Number) // 设置输入类型为数字
                    .textAlign(TextAlign.Center)
                    .borderRadius(4)
                    .backgroundColor(Color.Gray)

                  Text('秒')
                }
              }

            }


          }.tabBar('倒计时')
          TabContent() {
            Column() {
              Text('自定义时间')
              Row() {
                TextInput()
                  .width(70)
                  .height(40)
                  .padding(0)
                  .type(InputType.Number) // 设置输入类型为数字
                  .textAlign(TextAlign.Center)
                  .borderRadius(4)
                  .backgroundColor(Color.Gray)

                Text('秒')
              }
            }
          }.tabBar('自定义')

        }.width('100%').barHeight(0)
        Row(){
          Text('无限')
            .layoutWeight(1)
            .borderRadius(10)
            .height(30)
            .backgroundColor(this.currentIndex==0?Color.Green:Color.Transparent)
            .onClick(()=>{
            this.currentIndex=0
            this.tabsController.changeIndex(this.currentIndex)

          })
          Text('固定次数')
            .layoutWeight(1)
            .borderRadius(10)
            .height(30)
            .backgroundColor(this.currentIndex==1?Color.Green:Color.Transparent).onClick(()=>{
            this.currentIndex=1
            this.tabsController.changeIndex(this.currentIndex)

          })
          Text('倒计时')
            .layoutWeight(1)
            .borderRadius(10)
            .height(30)
            .backgroundColor((this.currentIndex==2||this.currentIndex==3)?Color.Green:Color.Transparent)
            .onClick(()=>{
            this.currentIndex=2
            this.tabsController.changeIndex(this.currentIndex)

          })

        }.width('100%')
        .borderRadius(10)
        .height(30)
        .backgroundColor(Color.Pink)
      }


    }.width('100%')
    .height('100%')
    .padding(20)
    .backgroundColor(Color.White)

  }

  // 初始化方法，在组件即将显示时被调用
  aboutToAppear(): void {
    for (let i = 0; i < this.count; i++) {
      this.list.push(new Cell()); // 初始化 Cell 数组
    }
  }

  build() {
    Column() {

      Row(){
        Column(){
          //积功德+清零
          Row({space:50}){
            Text(){
              Span('积功德: ').fontColor(Color.White)
              Span(`${this.currentMerit}`).fontColor($r('[basic].color.login_main_yellow'))
            }

            Row() {
              Text('清零')
                .borderRadius(6)
                .padding({
                  left: 6,
                  right: 6,
                  top: 4,
                  bottom: 4
                })
                .backgroundColor($r('[basic].color.login_main_yellow'))
                .fontColor(Color.Black)
                .onClick(() => {
                  this.currentMerit = 0
                })


            }

          }.width('100%').margin({left:80})

          //进度条
          Column(){
            Progress({ value: this.currentMerit, total: this.totalMerit, type: ProgressType.Ring })
              .width(80).color(Color.Blue)
              .style({ strokeWidth: 5, shadow: true })
              .backgroundColor(Color.White)

            Text(`${this.currentMerit}/${this.totalMerit}`).fontColor(Color.White).margin({left:10})

          }.width('100%').justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start)
        }.width('70%')
        //右边的按钮

        Column({space:30}){
          Image($r('app.media.muyu')).width(30).onClick(() => {
            this.isShowSilder=!this.isShowSilder

          })
          if(this.isShowSilder) {
            //是否开启声音
            Image($r('app.media.muyu')).width(30).onClick(()=>{
              this.isOpenMusic=!this.isOpenMusic
            })
            //是否开启震动
            Image($r('app.media.muyu')).width(30).onClick(()=>{
              this.isOpenVibration=this.isOpenVibration
            })

            Column() {
              Text(this.isHand ? '手动' : '自动').fontColor(Color.White).onClick(() => {
                this.isHand = !this.isHand
              })
              Text('设置').fontColor(Color.White).bindSheet($$this.isShowTimeManger, this.timeMangerBuilder(), {
                width: '100%',
                height: 400,
                showClose: false,
              }).onClick(() => {
                this.isShowTimeManger = true
              })
              Text('设置2').fontColor(Color.White).onClick(()=>{
                //去往设置页面
                yTRouter.router2FishSettingPage()
              })
            }
          }

        }.layoutWeight(1)
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.End)



      }.width('100%')
      .height(230)
      .margin({top:20})
      .alignItems(VerticalAlign.Top)

      // Row(){
      //   Button('改变文字').onClick(()=>{
      //     this.list.forEach(item=>{item.value='吴亮+1'})
      //   })
      //   Button('敲击时长间隔1秒').onClick(()=>{
      //     this.time=1000
      //
      //   })
      //   Button('固定10次').onClick(()=>{
      //     //自动敲击
      //     const a=setInterval(()=>{
      //       this.onclikMerit()
      //
      //     },this.time)
      //     const b=setTimeout(()=>{
      //       clearInterval(a)
      //       clearTimeout(b)
      //     },this.time*10)
      //
      //
      //   })
      //   Button('倒计时规定时间').onClick(()=>{
      //     this.onclikMerit()
      //     const a=setInterval(()=>{
      //       this.onclikMerit()
      //     },this.time)
      //     const b=setTimeout(()=>{
      //       clearInterval(a)
      //       clearTimeout(b)
      //     },10000)
      //
      //   })
      // }
      //
      // Button('xxx').bindSheet($$this.isShowTimeManger,this.timeMangerBuilder(),{
      //   width:'100%',
      //   height:400,
      //   showClose:false
      // }).onClick(()=>{
      //   this.isShowTimeManger=true
      // })
      //
      // Button('震动').onClick(()=>{
      //   Vibration.startVibration()
      // })


      // Stack() {
      //   Progress({ value: this.valueTime, total: 70, type: ProgressType.Linear }).backgroundColor(Color.White)
      //   Row({space:30}){
      //     ForEach([0,10,20,30,40,50,60,70],(item:number)=>{
      //       Column(){
      //       }.width(10)
      //       .height(10)
      //       .borderRadius('50%')
      //       .onClick(()=>{
      //         this.valueTime=item
      //       })
      //       .backgroundColor(this.valueTime>=item?Color.Pink:Color.White)
      //     })
      //
      //
      //   }.width('100%')
      //
      // }



      Column() { // 创建一个垂直布局容器
        Stack() { // 创建一个堆栈布局容器
          ForEach(this.list, (item: Cell, _index: number) => { // 遍历 list 中的每一个 Cell
            Text(item.value)// 显示 Cell 中的文字
              .fontColor(Color.White)// 设置文字颜色为白色
              .fontSize('50lpx')// 设置文字大小
              .translate({ x: 0, y: `${item.y}lpx` })// 设置文字的垂直偏移量
              .opacity(item.opacity) // 设置文字的透明度
          })
        }
        .width(200) // 设置堆栈布局容器的宽度
        .height(200) // 设置堆栈布局容器的高度
        .align(Alignment.BottomEnd) // 设置对齐方式为底部右端

        Image(this.image)// 显示图片
          .width(200)// 设置图片宽度
          .height(200)// 设置图片高度
          .objectFit(ImageFit.Contain)// 图片适应容器
          .clickEffect({
            // 点击效果配置
            scale: 0.5, // 缩放比例
            level: ClickEffectLevel.LIGHT // 效果级别
          })
          .onClick(() => { // 点击图片时触发的回调
            this.onclikMerit()
          })

        Row(){

          Image($r('app.media.muyu')).width(30)
        }.width('100%')
        .justifyContent(FlexAlign.End)
      }
      .width('100%')
      .backgroundColor(Color.Black) // 设置背景颜色为黑色

    }.width('100%')
    .height('100%')
    .padding({
      top:this.top,
      left:16,
      right:16
    })
    .backgroundColor(Color.Black)
  }
}