import { webview } from '@kit.ArkWeb'
import { AppStorageKeyFishCollect, avPlayerManager, IBestToast, YTHeader } from 'basic'
import { TextInputCom } from '../component/TextInputCom'

@Builder
function FragranceSettingBuilder() {
  NavDestination() {
    FragranceSettingView()
  }.title("设置")
  .hideTitleBar(true)
}

@Component
struct FragranceSettingView {
  @StorageLink(AppStorageKeyFishCollect.TEXTARR)
  textArr:string[]=[]
  @State
  currSelectNumber:number=1
  @State
  currSelectTimeNumber:number=1
  build() {
    Column() {
      YTHeader({title:'设置'})

      //悬浮文字
      Column({space:20}){

        Row() {
          Text('悬浮文字').fontColor(Color.White)
        }.width('100%')
        .justifyContent(FlexAlign.Start)
        List({space:20}){
          ForEach(this.textArr,(item:string,index:number)=>{
            ListItem() {
              TextInputCom({
                text: item,
                changeText: (value: string) => {
                  this.textArr[index] = value
                }
              })
            }
          })
        }.layoutWeight(1).scrollBar(BarState.Off)



        //取消
        Column(){
          Text('+').fontColor(Color.White)

          // Image($r('app.media.muyu')).width(20)
        }.width(73)
        .height(40)
        .borderRadius(8)
        .justifyContent(FlexAlign.Center)
        .backgroundColor('#646561')
        .onClick(()=>{
          if(this.textArr.length>6){
            IBestToast.show({
              message:'最多支持五行文本'
            })
            return
          }
          this.textArr.push('')
        })



      }.width('100%')
      .layoutWeight(1)
      .backgroundColor('#3f3f3f')
      .padding({left:10,right:10,top:20,bottom:20})
      .borderRadius(15)
      .margin({bottom:20})

      //上香数量
      Column({space:20}){

        Row() {
          Text('上香数量').fontColor(Color.White)
        }.width('100%')
        .justifyContent(FlexAlign.Start)

        Row(){
          Text('数量').fontColor(Color.White)

          Row(){

            Text('一支')
              .layoutWeight(1)
              .height('100%')
              .textAlign(TextAlign.Center)
              .borderRadius(8)
              .backgroundColor(this.currSelectNumber==1?'#FADE71':Color.Transparent)
              .onClick(()=>{
            this.currSelectNumber=1
            })
            Text('三支')
              .layoutWeight(1)
              .textAlign(TextAlign.Center)
              .height('100%')
              .borderRadius(8)
              .backgroundColor(this.currSelectNumber==3?'#FADE71':Color.Transparent)
              .onClick(()=>{
              this.currSelectNumber=3
            })

          }.width(106)
          .height(38)
          .backgroundColor('#646561')
          .borderRadius(8)

        }.width('100%')

        .justifyContent(FlexAlign.SpaceBetween)

      }.width('100%')
      .backgroundColor('#3f3f3f')
      .margin({bottom:20})
      .padding({left:10,right:10,top:20,bottom:20})
      .borderRadius(15)
      .height(150)
      //燃尽时间
      Column({space:20}){

        Row() {
          Text('燃尽时间').fontColor(Color.White)
        }.width('100%')
        .justifyContent(FlexAlign.Start)


          Row(){
            Text('10分钟')
              .width(62)
              .height(30)
              .fontSize(14)
              .textAlign(TextAlign.Center)
              .borderRadius(8)
              .margin({right:20})
              .fontColor(this.currSelectTimeNumber==1?Color.Black:'rgba(255, 255, 255, 0.4)')
              .backgroundColor(this.currSelectTimeNumber==1?'#FADE71':Color.Transparent)
              .onClick(()=>{
                this.currSelectTimeNumber=1
              })
            Text('30分钟')
              .width(62)
              .height(30)
              .fontSize(14)
              .textAlign(TextAlign.Center)
              .margin({right:20})
              .borderRadius(8)
              .fontColor(this.currSelectTimeNumber==2?Color.Black:'rgba(255, 255, 255, 0.4)')
              .backgroundColor(this.currSelectTimeNumber==2?'#FADE71':Color.Transparent)
              .onClick(()=>{
                this.currSelectTimeNumber=2
              })

            Text('不限时')
              .width(62)
              .height(30)
              .fontSize(14)
              .height('100%')
              .margin({right:20})
              .textAlign(TextAlign.Center)
              .borderRadius(8)
              .fontColor(this.currSelectTimeNumber==3?Color.Black:'rgba(255, 255, 255, 0.4)')
              .backgroundColor(this.currSelectTimeNumber==3?'#FADE71':Color.Transparent)
              .onClick(()=>{
                this.currSelectTimeNumber=3
              })

          }.width('100%')
          .height(30)
          .justifyContent(FlexAlign.Start)

      }.width('100%')
      .backgroundColor('#3f3f3f')
      .padding({left:10,right:10,top:20,bottom:20})
      .borderRadius(15)
      .height(150)
      .margin({bottom:20})



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