import { YTAvoid, YTHeader } from 'basic'

@Builder
function EatWhatViewBuilder(){
  NavDestination(){
    EatWhatView()
  }.title("吃什么")
  .hideTitleBar(true)
}

@Component
struct EatWhatView{
  @StorageProp(YTAvoid.SAFE_TOP_KEY) safeBottom: number = 0

  @State
  eat:string[]=['1111','2222','3333','33333','4444','55555','66666','77777','88888']
  @State
  eatEat:string=""
  @State
  isrun:boolean=false


  eatRandom(){
    return  this.eat[Math.floor(Math.random()*this.eat.length)]
  }
  build() {
    Column() {
      YTHeader({ title: '吃什么' })
      Row({ space: 20 }) {
        // Stack() {
        Image($r('[basic].media.voicemuisc')).width(30).height(30).margin({left:20,right:50})

      }.width('100%').margin({top:20}).justifyContent(FlexAlign.Start); // 设置宽度和内容居中对齐


      Column() {

          Column(){
            Text(this.eatEat).fontSize(20)
          }.width(80)
          .height(70)
          .justifyContent(FlexAlign.Center)
          .backgroundImage($r('[basic].media.number'))
          .backgroundImageSize({width:'100%',height:"100%"})
          .margin({bottom:40})

        Image($r('[basic].media.eatwhatGai')).width(150)

      }.width('100%').height(500).justifyContent(FlexAlign.Center).margin({bottom:100}) // 设置组件的宽度、权重、对齐方式和底部内边距




        Button('换一个').fontColor(Color.White)
        .backgroundColor('#fd54e3').width('70%')
        .height(44).borderRadius(20)
        .onClick(()=>{
          this.isrun=true

          setTimeout(()=>{
            this.isrun=false
          },3000)

          if(this.isrun) {
            setInterval(() => {
              this.eatEat = this.eatRandom()
            }, 100)
          }

        })




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