//报工用户用时占比
import { Font } from '@ohos.arkui.UIContext'

@CustomDialog
export struct ReportWorkHourRateDialog {

  controller: CustomDialogController

  onConfirm: (rate: number)=> void = () => {}

  //选择的占比
  @State selectIndex: number = 4
  // 占比数字（eg: 50%的50）
  rateNum: number = 50
  private rateList: string[] = ['10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%']

  aboutToAppear(): void {
    this.rateNum = Number.parseFloat(this.rateList[this.selectIndex].slice(0, -1) as string)
  }

  build() {
    Column(){
      Column() {
        Text('用时占比')
          .fontColor($r('app.color.FFFFFF'))
          .fontSize($r('app.float.fontSize_30'))
          .fontWeight(FontWeight.Medium)
      }
      .height('20%')
      .width('100%')
      .justifyContent(FlexAlign.End)

      TextPicker({ range: this.rateList, selected: this.selectIndex })
        .onChange((value: string | string[], index: number| number[]) => {
          this.rateNum = Number.parseFloat(value.slice(0, -1) as string)
          this.selectIndex = index as number
        })
        .selectedTextStyle({color: $r('app.color.FFFFFF'), font: {size: $r('app.float.fontSize_30'), weight: FontWeight.Medium }})
        .textStyle({color: $r('app.color.FFFFFF'), font: {size: $r('app.float.fontSize_24'), weight: FontWeight.Medium }})
        .disappearTextStyle({color: $r('app.color.FFFFFF'), font: {size: $r('app.float.fontSize_16'), weight: FontWeight.Lighter}})
        .backgroundColor($r('app.color.2A2A2A'))
        .width('85%')
        .height('65%')

      // 确认/取消栏
      Column() {
        Divider()
          .vertical(false)
          .strokeWidth(1)
          .color($r('app.color.15FFFFFF'))
        Row() {
          Row() {
            Text('取消')
              .fontColor($r('app.color.60FFFFFF'))
              .fontSize($r('app.float.fontSize_30'))
          }
          .justifyContent(FlexAlign.Center)
          .width('50%')
          .onClick(() => this.controller.close())
          Divider()
            .vertical(true)
            .strokeWidth(1)
            .color($r('app.color.15FFFFFF'))
          Row() {
            Text('确定')
              .fontColor($r('app.color.007AFF'))
              .fontSize($r('app.float.fontSize_30'))
          }
          .justifyContent(FlexAlign.Center)
          .width('50%')
          .onClick(() => {
            this.onConfirm(this.rateNum);
            this.controller.close()
          })
        }
      }
      .width('100%')
      .height('15%')
    }
    .height('34%')
    .width('28%')
    .backgroundColor($r('app.color.2A2A2A'))
    .justifyContent(FlexAlign.End)
    .alignItems(HorizontalAlign.Center)
    .borderRadius($r('app.float.virtualSize_16'))
  }
}