import { YTAvoid, YTHeader } from 'basic'
import { promptAction, PromptAction } from '@kit.ArkUI'

@Builder
function RollDiceViewBuilder(){
  NavDestination(){
    RollDiceView()
  }.title("掷筛子")
  .hideTitleBar(true)
}

@Component
struct RollDiceView {
  @StorageProp(YTAvoid.SAFE_TOP_KEY) safeBottom: number = 0
  images: ImageFrameInfo[] = Array.from<string>({ length: 6 }).map<ImageFrameInfo>((v: string, index: number) => {
    return {
      src: $r(`[basic].media.shai_${index+1}`),
    }
  })


  @State currentIndex:number=0
  controller: VideoController = new VideoController();


  //几颗筛子
  @State
  number:number=1

  randomNumber():number{
   return Math.floor(Math.random()*6)
  }
  //筛子结果
  @State
  RollDiceList:number[]=[]

  build() {
    Column() {
      YTHeader({ title: '掷筛子' })

      Column(){

        // Column(){
        //   Video({
        //     src:$rawfile('[basic].beizi.mp4'),
        //     controller:this.controller
        //   })
        //     .width(300)
        //     .height(600)
        //     .objectFit(ImageFit.TOP_START)
        //     .controls(false)
        //
        // }.width('100%')
        // .height(500)
        // //
        // //
        // //
        // //
        // //
        // //
        // Row(){
        //   Button('开始播放').onClick(()=>{
        //     this.controller.start()
        //   })
        //   Button('停止播放').onClick(()=>{
        //     this.controller.stop()
        //   })
        //   // Button('开始播放').onClick(()=>{
        //   //   this.controller.start()
        //   // })
        //
        //
        // }.width('100%')
        // .height('100%')

        //随机选取图片
       Button('xxx').onClick(()=>{
         this.RollDiceList=[]
         this.number=(Math.floor(Math.random()*6)+1)

         for(let i=0;i<this.number;i++){
          this.RollDiceList.push(this.randomNumber())
         }


         promptAction.showToast({
           message:this.number.toString()+"----"+JSON.stringify(this.RollDiceList)
         })
       })
        Column() {
          if (this.number==1) {
            Column() {
              Image($r(`[basic].media.shai_${this.RollDiceList[0]+1}`)).width(200).height(200)
            }
          }else if (this.number==2){
            Column(){
              Row(){
                Image($r(`[basic].media.shai_${this.RollDiceList[0]+1}`)).width(100).height(100)
              }.width('100%')
              .justifyContent(FlexAlign.Start)

              Row(){
                Image($r(`[basic].media.shai_${this.RollDiceList[1]+1}`)).width(100).height(100)
              }.width('100%')
              .justifyContent(FlexAlign.End)
            }
          }else if(this.number==3){
            Column(){
              Row(){
                Image($r(`[basic].media.shai_${this.RollDiceList[0]+1}`)).width(100).height(100)
              }.width('100%')
              .justifyContent(FlexAlign.Center)

              Row(){
                Image($r(`[basic].media.shai_${this.RollDiceList[1]+1}`)).width(100).height(100)
                Image($r(`[basic].media.shai_${this.RollDiceList[2]+1}`)).width(100).height(100)
              }.width('100%')
              .justifyContent(FlexAlign.End)
            }
          }else if(this.number==4){
            Column(){
              Row(){
                Image($r(`[basic].media.shai_${this.RollDiceList[0]+1}`)).width(100).height(100)
                Image($r(`[basic].media.shai_${this.RollDiceList[1]+1}`)).width(100).height(100)
              }.width('100%')
              .justifyContent(FlexAlign.Center)

              Row(){
                Image($r(`[basic].media.shai_${this.RollDiceList[2]+1}`)).width(100).height(100)
                Image($r(`[basic].media.shai_${this.RollDiceList[3]+1}`)).width(100).height(100)
              }.width('100%')
              .justifyContent(FlexAlign.End)
            }
          }else if(this.number==5){
            Column(){
              Row(){
                Image($r(`[basic].media.shai_${this.RollDiceList[0]+1}`)).width(60).height(60)
                Image($r(`[basic].media.shai_${this.RollDiceList[1]+1}`)).width(60).height(60)
              }.width('100%')
              .justifyContent(FlexAlign.Center)

              Row(){
                Image($r(`[basic].media.shai_${this.RollDiceList[2]+1}`)).width(60).height(60)
                Image($r(`[basic].media.shai_${this.RollDiceList[3]+1}`)).width(60).height(60)
                Image($r(`[basic].media.shai_${this.RollDiceList[4]+1}`)).width(60).height(60)
              }.width('100%')
              .justifyContent(FlexAlign.End)
            }
          }else if(this.number==6){
            Column(){
              Row(){
                Image($r(`[basic].media.shai_${this.RollDiceList[0]+1}`)).width(60).height(60)
                Image($r(`[basic].media.shai_${this.RollDiceList[1]+1}`)).width(60).height(60)
                Image($r(`[basic].media.shai_${this.RollDiceList[2]+1}`)).width(60).height(60)

              }.width('100%')
              .justifyContent(FlexAlign.Center)

              Row(){
                Image($r(`[basic].media.shai_${this.RollDiceList[3]+1}`)).width(60).height(60)
                Image($r(`[basic].media.shai_${this.RollDiceList[4]+1}`)).width(60).height(60)
                Image($r(`[basic].media.shai_${this.RollDiceList[5]+1}`)).width(60).height(60)
              }.width('100%')
              .justifyContent(FlexAlign.End)
            }
          }
        }.width('100%')
        .height(300)






        // Column() {
        // //   if (this.currentIndex == 0) {
        // //     Image($r('[basic].media.one_1'))
        // //   } else if (this.currentIndex == 1) {
        // //     Image($r('[basic].media.one_2'))
        // //   } else if (this.currentIndex == 2) {
        // //     Image($r('[basic].media.one_3'))
        // //   } else if (this.currentIndex == 3) {
        // //     Image($r('[basic].media.one_4'))
        // //   } else if (this.currentIndex == 4) {
        // //     Image($r('[basic].media.one_5'))
        // //   } else if (this.currentIndex == 5) {
        // //     Image($r('[basic].media.one_6'))
        // //   }
        // // }.width(100)
        // // .height(100)
        //
        //   if (this.currentIndex == 0) {
        //     Row({space:10}){
        //       Image($r('[basic].media.one_1')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //     }
        //
        //   } else if (this.currentIndex == 1) {
        //     Row({space:10}){
        //       Image($r('[basic].media.one_1')).width(50)
        //       Image($r('[basic].media.one_3')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //     }
        //   } else if (this.currentIndex == 2) {
        //     Row({space:10}){
        //       Image($r('[basic].media.one_1')).width(50)
        //       Image($r('[basic].media.one_4')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //     }
        //   } else if (this.currentIndex == 3) {
        //     Row({space:10}){
        //       Image($r('[basic].media.one_1')).width(50)
        //       Image($r('[basic].media.one_5')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //     }
        //   } else if (this.currentIndex == 4) {
        //     Row({space:10}){
        //       Image($r('[basic].media.one_1')).width(50)
        //       Image($r('[basic].media.one_6')).width(50)
        //       Image($r('[basic].media.one_1')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //     }
        //   } else if (this.currentIndex == 5) {
        //     Row({space:10}){
        //       Image($r('[basic].media.one_2')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //       Image($r('[basic].media.one_6')).width(50)
        //       Image($r('[basic].media.one_1')).width(50)
        //     }
        //   }
        //   else if (this.currentIndex == 6) {
        //     Row({space:10}){
        //       Image($r('[basic].media.one_1')).width(50)
        //       Image($r('[basic].media.one_3')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //     }
        //   }
        //   else if (this.currentIndex == 7) {
        //     Row({space:10}){
        //       Image($r('[basic].media.one_1')).width(50)
        //       Image($r('[basic].media.one_4')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //     }
        //   }
        //   else if (this.currentIndex == 8) {
        //     Row({space:10}){
        //       Image($r('[basic].media.one_1')).width(50)
        //       Image($r('[basic].media.one_5')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //     }
        //   }
        //   else if (this.currentIndex == 9) {
        //     Row({space:10}){
        //       Image($r('[basic].media.one_1')).width(50)
        //       Image($r('[basic].media.one_6')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //     }
        //   }
        //   else if (this.currentIndex == 10) {
        //     Row({space:10}){
        //       Image($r('[basic].media.one_3')).width(50)
        //       Image($r('[basic].media.one_3')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //     }
        //   }
        //   else if (this.currentIndex == 11) {
        //     Row({space:10}){
        //       Image($r('[basic].media.one_3')).width(50)
        //       Image($r('[basic].media.one_4')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //       Image($r('[basic].media.one_2')).width(50)
        //     }
        //   }
        // }.width('100%')
        // .height(100)





      }.width('100%')
      .height(500)
      .justifyContent(FlexAlign.Center)

      // ImageAnimator()
      //   .animatorFancy() // 抽取公共属性
      //   .images(this.images) // 动画数组
      //   .duration(this.images.length * 100)// 持续
      //   .state(this.state)// 动画状态
      //   .iterations(-1) // 播放次数
      // //
      // // Button('x').onClick(()=>{
      // //   this.currentIndex=Math.floor(Math.random()*6) as number
      // // })
      // Button('xx').onClick(()=>{
      //   this.currentIndex=Math.floor(Math.random()*12) as number
      // })
      //
      // // 按钮控制区域
      // Row({ space: 20 }) {
      //   Button('启动').onClick(() => {
      //     this.state = AnimationStatus.Running
      //   })
      //   Button('暂停').onClick(() => {
      //     this.state = AnimationStatus.Paused
      //   })
      //   Button('停止').onClick(() => {
      //     this.state = AnimationStatus.Stopped
      //   })
      // }




    }.padding({ bottom: this.safeBottom })
    .height('100%')
    .backgroundColor(Color.White)
  }

  @Styles
  animatorFancy() {
    .width(300)
    .aspectRatio(2)
    .padding(10)
    .borderRadius(10)
  }
}