YT_BabyFoodDiary/features/feature/src/main/ets/components/YTDiaLogBuild.ets

import { BasicType, IBestToast } from 'basic'
import { DiaLogPageEnum, DiaLogParam } from 'basic/src/main/ets/models/YTDiaLogModel'
import { Recipe, TurnTableRouteParams } from '../model/Index'
import { ReNameInput } from './bigwheel/ReNameInput'
import { NumberKeyBoard, NumberKeyBoardStyle } from './NumberKeyboard'
import { YtDatePicker } from './YtDatePicker'
import { _YtHeader } from './_YtHeader'


@Builder
export function getBuilder(param: DiaLogParam, onBack: (ans?: string) => void){
  if(param.pageEnum == DiaLogPageEnum.BottomMenu) BottomMenu(onBack, param.params)
  else if (param.pageEnum == DiaLogPageEnum.DatePicker) DatePickerBuilder(onBack, param.param)
  else if (param.pageEnum == DiaLogPageEnum.NumBerInput) NumberInputBuilder({onBack: onBack, param: param.param})
  else if (param.pageEnum == DiaLogPageEnum.Confirm) DoubleConfirm(onBack, param.param)
  else if (param.pageEnum == DiaLogPageEnum.TextInput) InputComp({onBack: onBack, param: param.param})

  /********  额外的   ***********/
  else if (param.pageEnum == DiaLogPageEnum.SelectGender) GenderPickerBuilder(onBack, param.param)
  else if (param.pageEnum == DiaLogPageEnum.RecipePopup) RecipePopupBuilder(onBack, param.param as BasicType<Recipe>)
  else if (param.pageEnum == DiaLogPageEnum.AddToRecipe) AddPlanComp({onBack: onBack})
  else if (param.pageEnum == DiaLogPageEnum.TurnTableSetting) BigWheelManagerBuilder({onBack: onBack, param: param.param})
  else if (param.pageEnum == DiaLogPageEnum.TurnTableName) BigWheelNameBuilder({onBack: onBack, param: param.param})
}

// 底部菜单
@Builder
function BottomMenu(onBack: (ans:string) => void, params?: Array<BasicType>) {
  Column(){
    ForEach(params, (item: BasicType, index) => {
      Row(){
        Text(item.text)
          .fontSize(16)
          .textAlign(TextAlign.Center)
      }
      .width("100%")
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .padding({ top: 24, bottom: 24 })
      .onClick(() => {
        let ans = item.message ?? item.text ?? `${index}`
        onBack(ans)
      })

      Divider().width("80%").height(1).backgroundColor('#000000F2')
    })
  }
  .width("100%")
  .padding({ bottom: 30 })
  .backgroundColor(Color.White)
  .justifyContent(FlexAlign.Center)
  .alignItems(HorizontalAlign.Center)
  .borderRadius({ topLeft: 8, topRight: 8 })
}

// 时间选择器
@Builder
function DatePickerBuilder(onBack: (ans?:string) => void, param?: BasicType){
  YtDatePicker({
    selectDateBack: (date?: Date) => {
    if(!date) return onBack()
    // 转换为 YY-MM-DD HH:mm:ss 格式
    const year = date.getFullYear().toString();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');

    const result = `${year}-${month}-${day}`;
    onBack(result)
  },
    selectedDate: param?.date ? new Date(param.date) : new Date(),
    linearInfo: { colors: [['#95C50A', 1]] },
    needCancel: true
  })
}

// 对话框
@Builder
function DoubleConfirm(onBack: (ans?:string) => void, param?: BasicType) {
  Column() {
    if(param?.text)
      Text(param.text)
        .fontColor(Color.Black)
        .lineHeight(18)
        .fontSize(18)
        .textAlign(TextAlign.Center)
        .margin({ bottom: 18 })
    Row() {
      Text('取消')
        .fontSize(16)
        .fontWeight(400)
        .borderRadius(param?.number ?? 36)
        .fontColor(Color.Black)
        .backgroundColor('#F5F5F7')
        .padding({ left: 36, top: 9, right: 36, bottom: 9})
        .onClick(() => {
          onBack()
        })

      Text('确定')
        .fontSize(16)
        .fontWeight(400)
        .borderRadius(param?.number ?? 36)
        .fontColor(Color.Black)
        .padding({ left: 36, top: 9, right: 36, bottom: 9})
        .linearGradient({
          colors: [ param?.color ? [param.color, 1 ] : ['#30E3CE', 0.4], ['#91F1FF', 0.8] ],
          angle: 200
        })
        .onClick(() => {
          onBack('true')
        })
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .width('100%')
  }
  // .height(160)
  .width(280)
  .padding({ top: 28, left: 32, right: 32, bottom: 20 })
  .backgroundColor(Color.White)
  .borderRadius(8)
}

// 数字输入框
@ComponentV2
struct NumberInputBuilder{
  @Event onBack: (ans:string) => void
  @Param @Require param: BasicType

  @Local ans: string = ''

  aboutToAppear(): void {
    this.ans = this.param.text ?? ''
  }


  build() {
    Column(){
      // 标题
      RelativeContainer(){
        _YtHeader({ title: this.param?.text ?? '', isShowBackComp: false, })
          .height(44)
          .id('_title')
          .width("100%")
          .alignRules({
            top: { anchor: "__container__", align: VerticalAlign.Top},
            left: { anchor: "__container__", align: HorizontalAlign.Start}
          })

        Text(this.ans)
          .fontSize(32)
          .fontWeight(500)
          .fontColor('#30E3CE')
          .id('weight')
          .padding({left: 58, right: 58, bottom: 10, top: 60})
          .alignRules({
            top: { anchor: "_title", align: VerticalAlign.Bottom},
            middle: { anchor: "__container__", align: HorizontalAlign.Center}
          })

        Row()
          .width(151)
          .height(3)
          .backgroundColor('#30E3CE')
          .borderRadius(8)
          .alignRules({
            top: { anchor: "weight", align: VerticalAlign.Bottom},
            middle: { anchor: "__container__", align: HorizontalAlign.Center}
          })

        Text(this.param?.message ?? '')
          .fontSize(20)
          .fontWeight(500)
          .padding({ bottom: 10 })
          .fontColor('rgba(0, 0, 0, 0.5)')
          .alignRules({
            bottom: { anchor: "weight", align: VerticalAlign.Bottom},
            right: { anchor: "weight", align: HorizontalAlign.End}
          })
      }
      .height(210)
      .backgroundColor(Color.White)

      // 数字键盘
      Column(){
        NumberKeyBoard({
          textInputValue: this.ans,
          maxInputNum: 3,
          keyBoardStyle: new NumberKeyBoardStyle()
            .setFinishBackGround('#30E3CE')
            .setZeroBackGround(Color.White)
            .setBorder({ width: 0 })
            .setDeleteIcon($r('app.media.icon_delback')),
          onTextInputValueChange: (textInputValue: string) => {
            this.ans = textInputValue
          },
          onFinishClick: (text: string) => {
            if(!text || text == '0' || text == '0.') return
            if(text.charAt(text.length-1) === '.') this.ans += '0'
            this.onBack(this.ans!)
          }
        })
      }
      .height(260)
      .width("100%")
      .backgroundColor('#F5F6FA')
      .padding({ top: 10, bottom: 35, left: 10, right: 10})
    }
    // .height(470)
    .width("100%")
    .backgroundColor(Color.White)
    .padding({
      top: 24,
    })
  }
}


// 输入框
@ComponentV2
struct InputComp{
  @Event onBack: (ans?:string) => void
  @Param @Require param: BasicType

  @Local ans: string = ''

  aboutToAppear(): void {
    this.ans = this.param.text ?? ''
  }

  build() {
    Column({space: 10}){
      Row(){
        Text("取消")
          .fontSize(12)
          .fontWeight(400)
          .borderRadius(45)
          // .backgroundColor('#C1EDE9')
          .padding({ left: 20,top: 8, right: 20, bottom: 8})
          .onClick(() => {
            this.onBack()
          })

        // Text(this.param.text ?? '')
        //   .fontSize(18)
        //   .fontWeight(500)

        Text("确定")
          .fontSize(12)
          .fontWeight(400)
          .borderRadius(45)
          .fontColor(Color.Black)
          // .backgroundColor('#30E3CE')
          .padding({ left: 20,top: 8, right: 20, bottom: 8})
          .onClick(() => {
            this.onBack(this.ans)
          })
      }
      .width("100%")
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.SpaceBetween)

      TextInput({text: $$this.ans, placeholder: this.param.message})
        .height('48')
        .borderRadius(8)
        .defaultFocus(true)
        .maxLength(13)
        .backgroundColor('#F6F6F6')
        .onSubmit(() => {
          this.onBack(this.ans)
        })
    }
    .width("100%")
    .borderRadius({ topLeft: 10, topRight: 10 })
    .backgroundColor(this.param.color ?? '#ffff')
    .padding({ bottom: 42, left: 16, right: 16, top: 24 })
  }
}

// 性别 - 选择器
@Builder
function GenderPickerBuilder(onBack: (ans?:string) => void, param?: BasicType){
  Column({space: 20}) {
    Row(){
      Text("性别")
        .fontSize(18)
        .fontWeight(500)
    }
    .alignItems(VerticalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .width("100%")

    Row({space: 16}){
      Text("女生")
        .fontSize(16)
        .textAlign(TextAlign.Center)
        .fontWeight(500)
        .fontColor(param?.number == 2 ? Color.White : Color.Black)
        .backgroundColor(param?.number == 2 ? '#FF5F84' : '#F6F6F6')
        .borderRadius(10)
        .layoutWeight(1)
        .padding({ left: 38, right: 38, top: 12, bottom: 12 })
        .onClick(() => {
          onBack('女')
        })

      Text("男生")
        .fontSize(16)
        .fontWeight(500)
        .textAlign(TextAlign.Center)
        .fontColor(param?.number == 1 ? Color.White : Color.Black)
        .backgroundColor(param?.number == 1 ? '#FF5F84' : '#F6F6F6')
        .borderRadius(10)
        .layoutWeight(1)
        .padding({ left: 38, right: 38, top: 12, bottom: 12 })
        .onClick(() => {
          onBack('男')
        })
    }
    .width('100%')
    .alignItems(VerticalAlign.Center)
    .justifyContent(FlexAlign.SpaceBetween)
  }
  .width("100%")
  .backgroundColor(Color.White)
  .padding({ bottom: 60, left: 16, right: 16, top: 24 })
}

// 食谱弹窗
@Builder
function RecipePopupBuilder(onBack: (ans?:string) => void, param?: BasicType<Recipe>){
  Column(){
    // 关闭按钮
    Row(){
      Image($r('app.media.close'))
        .width(20)
        .aspectRatio(1)
        .onClick(() => {
          onBack()
        })
    }
    .width('100%')
    .justifyContent(FlexAlign.End)
    .alignItems(VerticalAlign.Center)
    .padding({ top: 12, right: 20 })

    // 食谱名
    Column(){
      Text(param?.generics?.name)
        .fontSize(24)
        .fontWeight(600)
    }
    .width("100%")
    .padding({ left: 32 })
    .alignItems(HorizontalAlign.Start)
    .justifyContent(FlexAlign.Center)

    Row({space: 13}){
      // 图片和标签
      Column({space: 30}){
        Text(param?.generics?.monthRange)
          .fontSize(10)
          .borderRadius(4)
          .fontColor('#F0A040')
          .backgroundColor('#F8F0E6')
          .padding({left: 10, top: 4, right: 10, bottom: 4})

        Row()
          .width(180)
          .aspectRatio(1)
          .offset({x: -30})
          .backgroundImage(param?.generics?.imageUrl)
          .backgroundImageSize(ImageSize.Cover)
      }
      .width(134)
      .clip(true)
      .height('100%')
      .alignItems(HorizontalAlign.End)

      // 描述
      List(){
        ListItem(){
          Column(){
            Text(){
              Span('食材：\n')
              ForEach(param?.generics?.ingredients, (i: string) => {
                Span(i + '\n')
                  .fontSize(12)
                  .fontWeight(400)
                  .fontColor('#99161616')
              })
            }
            .fontSize(10)
            .fontWeight(400)
            .fontColor('#161616')

            Text(){
              Span('制作步骤：\n')
              ForEach(param?.generics?.steps, (i: string) => {
                Span(i + '\n')
                  .fontSize(12)
                  .fontWeight(400)
                  .fontColor('#99161616')
              })
            }
            .fontSize(10)
            .fontWeight(400)
            .fontColor('#161616')

            Text(){
              Span('营养信息：\n')
              Span(param?.generics?.description)
                .fontSize(12)
                .fontWeight(400)
                .fontColor('#99161616')

            }
            .fontSize(10)
            .fontWeight(400)
            .fontColor('#161616')
          }
          .justifyContent(FlexAlign.Start)
          .alignItems(HorizontalAlign.Start)
        }
      }
      .height('100%')
      .layoutWeight(1)
    }
    .width("100%")
    .height(250)
    .padding({top: 6, right: 16})
    .justifyContent(FlexAlign.SpaceBetween)


    // 确认按钮
    Row(){
      Text('添加至本周计划')
        .fontSize(16)
        .fontWeight(500)
        .borderRadius(10)
        .fontColor(Color.White)
        .backgroundColor('#95C50A')
        .padding({ left: 60, top: 10, right: 60, bottom: 10})
        .onClick(() => {
          onBack('好嘞')
        })
    }
    .width("100%")
    .alignItems(VerticalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .padding({top: 26, bottom: 29})
  }
  .width(320)
  .height(432)
  .borderRadius(8)
  .backgroundColor(Color.White)
}

// 添加周计划
@ComponentV2
struct AddPlanComp{
  @Local week: number = -1
  @Local meal: number = -1

  @Event onBack: (ans?:string) => void

  private weekList: string[] = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
  private mealList: string[] = ['早餐', '午餐', '晚餐']

  @Monitor('week', 'meal')
  checkAns(){
    if(this.week != -1 && this.meal != -1) {
      this.onBack(`${this.week}-${this.meal}`)
    }
  }

  build() {
    Column(){
      Row(){
        Text('添加至周计划')
          .fontColor(Color.White)

        Image($r('app.media.close'))
          .width(20)
          .aspectRatio(1)
          .onClick(() => { this.onBack() })
      }
      .width("100%")
      .backgroundColor('#95C50A')
      .padding({ top: 12, bottom: 12, left: 20, right: 20 })
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.SpaceBetween)
      .borderRadius({topLeft: 8, topRight: 8})

      Column({space: 20}){
        Column({space: 8}){
          Text('选择日期')
            .fontSize(14)
            .fontWeight(500)
            .padding({top: 8, bottom: 8})
          Row(){
            Text(this.weekList[this.week])
              .fontSize(16)
              .fontWeight(500)

            Image($r('[basic].media.ic_back'))
              .width(16)
              .aspectRatio(1)
              .rotate({angle: 270})
          }
          .width("100%")
          .borderRadius(10)
          .backgroundColor('#F6F6F6')
          .padding({ left: 16, right: 16, top: 12, bottom: 12 })
          .justifyContent(FlexAlign.SpaceBetween)
          .bindMenu(this.weekMenu, { hapticFeedbackMode: HapticFeedbackMode.ENABLED })
        }
        .alignItems(HorizontalAlign.Start)

        Column({space: 8}){
          Text('选择餐次')
            .fontSize(14)
            .fontWeight(500)
            .padding({top: 8, bottom: 8})

          Row(){
            Text(this.mealList[this.meal] ?? '')
              .fontSize(16)
              .fontWeight(500)
            Image($r('[basic].media.ic_back'))
              .width(16)
              .aspectRatio(1)
              .rotate({angle: 270})
          }
          .width("100%")
          .borderRadius(10)
          .backgroundColor('#F6F6F6')
          .padding({ left: 16, right: 16, top: 12, bottom: 12 })
          .justifyContent(FlexAlign.SpaceBetween)
          .bindMenu(this.mealMenu, { hapticFeedbackMode: HapticFeedbackMode.ENABLED })
        }
        .alignItems(HorizontalAlign.Start)
      }
      .width("100%")
      .layoutWeight(1)
      .padding({ left: 16, right: 16, top: 12})
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Start)
      .borderRadius({bottomLeft: 8, bottomRight: 8})
    }
    .width(320)
    .height(270)
    .borderRadius(8)
    .backgroundColor(Color.White)
  }

  @Builder
  weekMenu(){
    Column({space: 5}){
      ForEach(this.weekList, (item: string, index) => {
        Text(item)
          .fontSize(16)
          .fontWeight(500)
          .textAlign(TextAlign.Center)
          .fontColor(this.week == index ? Color.White : Color.Black)
          .backgroundColor(this.week == index ? '#FF5F84' : '#F6F6F6')
          .borderRadius(10)
          .padding({ left: 16, right: 16, top: 5, bottom: 5 })
          .onClick(() => { this.week = index })
      })
    }
  }

  @Builder
  mealMenu(){
    Column({space: 5}){
      ForEach(this.mealList, (item: string, index) => {
        Text(item)
          .fontSize(16)
          .fontWeight(500)
          .textAlign(TextAlign.Center)
          .fontColor(this.meal == index ? Color.White : Color.Black)
          .backgroundColor(this.meal == index ? '#FF5F84' : '#F6F6F6')
          .borderRadius(10)
          .padding({ left: 16, right: 16, top: 5, bottom: 5 })
          .onClick(() => { this.meal = index })
      })
    }
  }
}

// 大转盘 - 设置弹窗
@ComponentV2
struct  BigWheelManagerBuilder{
  @Local isRepeat: boolean = true
  @Local spinDurationTime: number = 1
  @Local spinDuration: number = 1

  @Event onBack: (ans?:string) => void
  @Param @Require param: BasicType<TurnTableRouteParams>

  aboutToAppear(): void {
    this.isRepeat = this.param.generics?.isRepeat!
    this.spinDurationTime = this.param.generics?.spinDurationTime!
    this.spinDuration = this.param.generics?.spinDuration!
  }

  build() {
    Column() {
      //允许结果是否重复
      Row() {
        Row({ space: 10 }) {
          Image($r('app.media.qiehuan')).width(24)
          Text('允许结果重复').fontWeight(700)
        }
        Row() {
          Toggle({ type: ToggleType.Switch ,isOn:$$this.isRepeat})
            .width(38)
            .height(20)
            .selectedColor('rgba(253, 84, 227, 1)')  //打开状态下的背景颜色
            .switchStyle({
              pointRadius: 8, //圆形滑块半径
              trackBorderRadius: 14, //滑轨的圆角
              pointColor: Color.White, //圆形滑块颜色  switchPointColor不生效
              unselectedColor: 'rgba(233, 233, 234, 1)'  //关闭状态的背景颜色
            })
            .onClick(() => {
              this.isRepeat=!this.isRepeat
            })
        }
      }
      .width('100%')
      .height(40)
      .backgroundColor('#F6F6F6')
      .borderRadius(8)
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({ left: 12, right: 12 })
      .alignItems(VerticalAlign.Center)

      Row() {
        Text('每次转动轮盘可能会随机选中相同的选项').fontSize(12).fontColor('rgba(0, 0, 0, 0.45)')
      }.width('100%')
      .justifyContent(FlexAlign.Start)
      .padding({ left: 22 })
      .margin({ bottom: 25, top: 10 })

      Row() {
        Row({ space: 10 }) {
          Image($r('app.media.xuanzhuantime')).width(24)
          Text('旋转时长').fontWeight(700)
        }

        Row() {
          Counter() {
            Text(this.spinDurationTime.toString() + 's').border({ width: 0 })
          }
          .onInc(() => {
            this.spinDurationTime++
            this.spinDuration = this.spinDurationTime * 1000
          })
          .onDec(() => {
            if(this.spinDurationTime==1){
              IBestToast.show({
                message:'秒数最低为1秒'
              })
              return
            }
            this.spinDurationTime--
            this.spinDuration = this.spinDurationTime * 1000
          })
        }

      }
      .width('100%')
      .height(40)
      .backgroundColor('#F6F6F6')
      .borderRadius(8)
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({ left: 12, right: 12 })
      .alignItems(VerticalAlign.Center)

      Row({space: 45}){
        Text('取消')
          .borderRadius(15)
          .fontColor(Color.Black)
          .backgroundColor('#F5F5F7')
          .padding({left: 30, right: 30, top: 12, bottom: 12})
          .onClick(() => {
            this.onBack()
          })


        Text('确定')
          .borderRadius(15)
          .fontColor(Color.White)
          .backgroundColor('#95C50A')
          .padding({left: 30, right: 30, top: 12, bottom: 12})
          .onClick(() => {
            let param: TurnTableRouteParams = {
              isRepeat: this.isRepeat,
              spinDurationTime: this.spinDurationTime,
              spinDuration: this.spinDuration
            }
            this.onBack(JSON.stringify(param))
          })
      }
      .width("100%")
      .justifyContent(FlexAlign.Center)
      .padding({top: 16})
    }
    .width('320')
    .height(240)
    .padding({ left: 22, top: 30, right: 22, bottom: 20 })
    .borderRadius(20)
    .backgroundColor(Color.White)
  }
}

// 大转盘 - 转盘命名
@ComponentV2
struct  BigWheelNameBuilder{
  @Local cells: string[] = []

  @Event onBack: (ans?:string) => void
  @Param @Require param: BasicType<string[]>

  aboutToAppear(): void {
    this.cells = this.param.generics!
  }

  build() {
    Column() {
      Row() {
        Text('转盘命名').fontSize(20).fontWeight(500).fontColor('#FF1C1C1C').margin({left:110,right:64,top:24})
        Column() {
          Image($r('app.media.quxiaocl')).width(10)
        }.width(24)
        .height(24)
        .backgroundColor(Color.White)
        .justifyContent(FlexAlign.Center)
        .borderRadius('50%')
        .onClick(() => {
          this.onBack()
        })

      }.width('100%')

      Column({space:10}){
        ForEach(this.cells,(item:string,index:number)=>{
          Row({space:10}){
            Text(`转盘${index}`)
            TextInput({text: item})
              .width(194)
              .height(30)
              .padding(0)
              .border({width:{bottom:1,left:0,right:0,top:0},color:'rgba(0, 0, 0, 0.3)'})
              .borderRadius(0)
              .maxLength(5)
              .backgroundColor(Color.Transparent)
              .onChange((value:string)=>{
                this.cells[index] = value
              })
          }.width('100%')
        })
      }

      Row({space: 45}){
        Text('取消')
          .borderRadius(15)
          .fontColor(Color.Black)
          .backgroundColor('#F5F5F7')
          .padding({left: 30, right: 30, top: 12, bottom: 12})
          .onClick(() => {
            this.onBack()
          })


        Text('确定')
          .borderRadius(15)
          .fontColor(Color.White)
          .backgroundColor('#95C50A')
          .padding({left: 30, right: 30, top: 12, bottom: 12})
          .onClick(() => {
            this.onBack(JSON.stringify(this.cells))
          })
      }
      .width("100%")
      .justifyContent(FlexAlign.Center)
      .padding({top: 26})
    }
    .width(300)
    .height(280 + ((this.cells.length-3) * 25))
    .justifyContent(FlexAlign.Start)
    .borderRadius(20)
    .padding({left:16,right:16})
    .linearGradient({
      angle:135,
      colors:[
        ['rgba(255, 255, 255, 1)',1]
      ]
    })
  }
}