/**
 * ReportCreatePage —— 报告创建（F3）：问卷六字段 + 模拟照片键 + 提交 + 任务轮询。
 *
 * 流程：
 *  1) 问卷表单（性别/身高/体重/生日/核心诉求多选/心理风格九型），提交前前端校验；
 *     身高/体重为滚轮选择器（showTextPickerDialog），不提供键盘输入
 *  2) 照片键为模拟：V1 骨架 COS 直传未接入，留空自动生成 report_photo/{userId}/{随机}.jpg
 *  3) POST /api/v1/reports（request_key 随机 hex；失败重试沿用同一 key，服务端幂等重放）
 *  4) 40920（本期已生成）→ 页内对话框：可跳最近一次报告（AppStorage 记录），
 *     无记录则提示稍后在任务中心查看
 *  5) 成功 → 3 秒轮询任务（TaskPollingPanel，页面销毁自动清定时器，轮询期间允许返回）
 *  6) SUCCEEDED → router.replaceUrl 结果页（params 带 reportId）；FAILED → 失败态 + 幂等重试
 */

import { router, componentUtils } from '@kit.ArkUI'
import { ApiClient } from '../core/ApiClient'
import { ApiError } from '../core/ApiTypes'
import { AuthStore } from '../core/AuthStore'
import { TaskPollingPanel } from '../components/f3/TaskPollingPanel'
import { ReportCreateResp, buildMockPhotoKey, formatDate, randomHex } from '../components/f3/ReportTypes'

const COLOR_PRIMARY: string = '#C2185B'
const GENDER_OPTIONS: string[] = ['女', '男', '不便告知']
const GOAL_OPTIONS: string[] = ['显高', '显瘦', '显白', '显气质', '遮肉', '修饰肩颈']
const STYLE_OPTIONS: string[] = ['戏剧', '睿智', '自然', '古典', '优雅', '浪漫', '前卫', '少女', '少年']
const LAST_REPORT_STORAGE_KEY: string = 'f3_last_report_id'

// 身高/体重改为选择器（不允许键盘输入）：数值范围与原校验一致
const HEIGHT_MIN: number = 100
const HEIGHT_MAX: number = 250
const HEIGHT_DEFAULT: number = 165
const WEIGHT_MIN: number = 25
const WEIGHT_MAX: number = 300
const WEIGHT_DEFAULT: number = 52

function buildRangeOptions(min: number, max: number): string[] {
  const arr: string[] = []
  for (let v = min; v <= max; v++) {
    arr.push(`${v}`)
  }
  return arr
}

const HEIGHT_OPTIONS: string[] = buildRangeOptions(HEIGHT_MIN, HEIGHT_MAX)
const WEIGHT_OPTIONS: string[] = buildRangeOptions(WEIGHT_MIN, WEIGHT_MAX)

interface FieldLabelParams {
  label: string
  err: string
  required: boolean
}

@Entry
@Component
struct ReportCreatePage {
  @State phase: string = 'form' // form | polling | failed
  @State gender: string = ''
  @State heightInput: string = ''
  @State weightInput: string = ''
  @State birthday: Date = new Date(2000, 0, 15)
  @State coreGoals: string[] = []
  @State psychStyle: string = ''
  @State photoKeyInput: string = ''
  @State genderErr: string = ''
  @State heightErr: string = ''
  @State weightErr: string = ''
  @State goalsErr: string = ''
  @State styleErr: string = ''
  @State submitting: boolean = false
  @State showDatePicker: boolean = false
  @State formSummary: string = ''
  @State navError: string = ''
  @State submitError: string = ''
  @State failMsg: string = ''
  @State showDupDialog: boolean = false
  @State lastReportId: string = ''
  private requestKey: string = '' // 失败重试沿用同一 key：重新提交即服务端幂等重放，不重复消耗额度
  private taskId: string = ''
  private reportId: string = ''
  private scroller: Scroller = new Scroller()

  aboutToAppear(): void {
    const cached = AppStorage.get<string>(LAST_REPORT_STORAGE_KEY)
    if (cached !== undefined && cached !== '') {
      this.lastReportId = cached
    }
  }

  private validateForm(): boolean {
    let ok = true
    this.genderErr = this.gender === '' ? '请选择性别' : ''
    if (this.genderErr !== '') {
      ok = false
    }
    // 选择器产出必然在合法区间，未选才是唯一错误态
    this.heightErr = this.heightInput === '' ? '请选择身高' : ''
    if (this.heightErr !== '') {
      ok = false
    }
    this.weightErr = this.weightInput === '' ? '请选择体重' : ''
    if (this.weightErr !== '') {
      ok = false
    }
    this.goalsErr = this.coreGoals.length === 0 ? '至少选择 1 项' : ''
    if (this.goalsErr !== '') {
      ok = false
    }
    this.styleErr = this.psychStyle === '' ? '请选择心理风格' : ''
    if (this.styleErr !== '') {
      ok = false
    }
    return ok
  }

  private toggleGoal(g: string): void {
    const idx = this.coreGoals.indexOf(g)
    if (idx >= 0) {
      this.coreGoals.splice(idx, 1)
    } else {
      this.coreGoals.push(g)
    }
    this.goalsErr = ''
  }

  private isSelectedGoal(g: string): boolean {
    return this.coreGoals.indexOf(g) >= 0
  }

  /** TextPickerResult.index 是联合类型（多列选择器为数组），单列取数字下标。 */
  private pickIndex(v: TextPickerResult): number {
    return typeof v.index === 'number' ? v.index : -1
  }

  /** 已有值从当前值滚起，未选过从常见默认值（165cm）滚起。 */
  private openHeightPicker(): void {
    const cur = this.heightInput !== '' ? Number(this.heightInput) : HEIGHT_DEFAULT
    const clamped = Math.min(Math.max(cur - HEIGHT_MIN, 0), HEIGHT_OPTIONS.length - 1)
    this.getUIContext().showTextPickerDialog({
      range: HEIGHT_OPTIONS,
      selected: clamped,
      canLoop: false,
      onAccept: (value: TextPickerResult) => {
        const idx = this.pickIndex(value)
        if (idx >= 0 && idx < HEIGHT_OPTIONS.length) {
          this.heightInput = HEIGHT_OPTIONS[idx]
          this.heightErr = ''
        }
      }
    })
  }

  private openWeightPicker(): void {
    const cur = this.weightInput !== '' ? Number(this.weightInput) : WEIGHT_DEFAULT
    const clamped = Math.min(Math.max(cur - WEIGHT_MIN, 0), WEIGHT_OPTIONS.length - 1)
    this.getUIContext().showTextPickerDialog({
      range: WEIGHT_OPTIONS,
      selected: clamped,
      canLoop: false,
      onAccept: (value: TextPickerResult) => {
        const idx = this.pickIndex(value)
        if (idx >= 0 && idx < WEIGHT_OPTIONS.length) {
          this.weightInput = WEIGHT_OPTIONS[idx]
          this.weightErr = ''
        }
      }
    })
  }

  private onSubmitTap(): void {
    if (this.submitting) {
      return
    }
    this.formSummary = ''
    if (!this.validateForm()) {
      // 字段级红字可能滚在视野外（真机实测的"点了没反应"就是这种情况）：
      // 汇总条点名缺哪几项，并自动滚到第一个缺失字段。
      const labels: string[] = this.missingLabels()
      this.formSummary = labels.length > 0 ? `请完成：${labels.join('、')}` : '请检查标红的字段'
      this.scrollToFirstError()
      return
    }
    this.doSubmit()
  }

  private missingLabels(): string[] {
    const labels: string[] = []
    if (this.genderErr !== '') {
      labels.push('性别')
    }
    if (this.heightErr !== '') {
      labels.push('身高')
    }
    if (this.weightErr !== '') {
      labels.push('体重')
    }
    if (this.goalsErr !== '') {
      labels.push('核心诉求')
    }
    if (this.styleErr !== '') {
      labels.push('心理风格')
    }
    return labels
  }

  private scrollToFirstError(): void {
    let firstId = ''
    if (this.genderErr !== '') {
      firstId = 'field_gender'
    } else if (this.heightErr !== '' || this.weightErr !== '') {
      firstId = 'field_height'
    } else if (this.goalsErr !== '') {
      firstId = 'field_goals'
    } else if (this.styleErr !== '') {
      firstId = 'field_style'
    }
    if (firstId === '') {
      return
    }
    try {
      // windowOffset 随滚动同步移动，两处相减即为内容坐标差，
      // 与当前滚动位置无关
      const root = componentUtils.getRectangleById('form_root')
      const target = componentUtils.getRectangleById(firstId)
      const dy = target.windowOffset.y - root.windowOffset.y - 8
      this.scroller.scrollTo({ xOffset: 0, yOffset: Math.max(0, dy), animation: { duration: 250, curve: Curve.EaseOut } })
    } catch (e) {
      console.error(`scrollTo ${firstId} failed: ${String(e).substring(0, 80)}`)
    }
  }

  private async doSubmit(): Promise<void> {
    this.submitting = true
    this.submitError = ''
    if (this.requestKey === '') {
      // 随机 hex；FAILED 后的重试复用同一 key（见 retrySubmit 注释）
      this.requestKey = randomHex(16)
    }
    const heightVal: number = Number(this.heightInput)
    const weightVal: number = Number(this.weightInput)
    const goalsObj: Object = this.coreGoals
    const questionnaire: Record<string, Object> = {
      'gender': this.gender,
      'height_cm': heightVal,
      'weight_kg': weightVal,
      'birthday': formatDate(this.birthday),
      'core_goals': goalsObj,
      'psych_style': this.psychStyle
    }
    const qObj: Object = questionnaire
    const photoInput = this.photoKeyInput.trim()
    const photoKey = photoInput !== '' ? photoInput : buildMockPhotoKey(AuthStore.getUserId() ?? 'anonymous')
    const req: Record<string, Object> = {
      'questionnaire': qObj,
      'photo_object_key': photoKey,
      'request_key': this.requestKey
    }
    try {
      const data = await ApiClient.post<ReportCreateResp>('/api/v1/reports', req)
      this.reportId = data.report_id ?? ''
      this.taskId = data.task_id ?? ''
      if (this.reportId !== '') {
        this.lastReportId = this.reportId
        AppStorage.setOrCreate<string>(LAST_REPORT_STORAGE_KEY, this.reportId)
      }
      if (this.taskId === '') {
        this.submitError = '服务端未返回任务 ID，请稍后重试'
        this.submitting = false
        return
      }
      this.submitting = false
      this.phase = 'polling'
    } catch (e) {
      this.submitting = false
      if (e instanceof ApiError) {
        if (e.code === 40920) {
          // 本期报告已生成：给“查看我的报告”入口（无记录则提示稍后在任务中心看）
          this.showDupDialog = true
          return
        }
        this.submitError = e.hint !== undefined ? `${e.message}（${e.hint}）` : e.message
        return
      }
      this.submitError = '请求失败，请检查网络'
    }
  }

  private retrySubmit(): void {
    // 幂等重试：沿用同一 request_key 重新提交，服务端按幂等重放处理，
    // 不会重复生成报告或重复扣减额度
    this.failMsg = ''
    this.doSubmit()
  }

  private onTaskSucceeded(): void {
    const params: Record<string, Object> = { 'reportId': this.reportId }
    // 显式 catch：replaceUrl 的 Promise 拒绝在无 catch 时完全静默（真机实测
    // 卡在轮询页无任何提示），至少把失败暴露出来并由兜底按钮接管。
    router.replaceUrl({ url: 'pages/ReportResultPage', params: params })
      .catch((e: Object): void => {
        this.navError = `报告已生成，但打开结果页失败：${String(e).substring(0, 80)}`
      })
  }

  private onTaskFailed(reason: string): void {
    this.phase = 'failed'
    this.failMsg = reason
  }

  private goLastReport(): void {
    this.showDupDialog = false
    if (this.lastReportId === '') {
      return
    }
    const params: Record<string, Object> = { 'reportId': this.lastReportId }
    router.pushUrl({ url: 'pages/ReportResultPage', params: params })
  }

  @Builder
  TopBar() {
    Row({ space: 8 }) {
      Text('←')
        .fontSize(20)
        .fontColor('#333333')
        .padding({ left: 4, right: 4, top: 2, bottom: 2 })
        .onClick(() => {
          router.back()
        })
      Text('生成报告')
        .fontSize(17)
        .fontWeight(FontWeight.Bold)
        .fontColor('#333333')
    }
    .width('100%')
    .padding({ left: 12, right: 16, top: 10, bottom: 6 })
  }

  // 按引用传递（$$）：@Builder 按值传参时 @State 变化不会触发刷新，
  // 字段级红字将永远停在初始空值（真机实测复现）
  @Builder
  FieldLabel($$: FieldLabelParams) {
    Row({ space: 6 }) {
      if ($$.required) {
        Text('*')
          .fontSize(14)
          .fontColor('#E5484D')
      }
      Text($$.label)
        .fontSize(13)
        .fontColor('#666666')
      if ($$.err !== '') {
        Text($$.err)
          .fontSize(11)
          .fontColor('#E5484D')
          .layoutWeight(1)
          .maxLines(1)
      }
    }
    .width('100%')
  }

  @Builder
  FormBody() {
    Scroll(this.scroller) {
      Column({ space: 12 }) {
        Column({ space: 4 }) {
          Text('生成你的形象诊断报告')
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .fontColor('#333333')
          Text('填写 6 项基础信息，约 1~3 分钟生成 32 维报告')
            .fontSize(12)
            .fontColor('#999999')
        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)
        .padding({ top: 4, bottom: 4 })

        Column({ space: 14 }) {
          Text('基础信息')
            .fontSize(15)
            .fontWeight(FontWeight.Medium)
            .fontColor('#333333')
          Column({ space: 8 }) {
            this.FieldLabel({ label: '性别', err: this.genderErr, required: true })
            Row({ space: 8 }) {
              ForEach(GENDER_OPTIONS, (g: string) => {
                Text(g)
                  .fontSize(14)
                  .fontColor(this.gender === g ? '#FFFFFF' : '#444444')
                  .padding({ left: 14, right: 14, top: 7, bottom: 7 })
                  .backgroundColor(this.gender === g ? COLOR_PRIMARY : '#F3F4F6')
                  .borderRadius(14)
                  .onClick(() => {
                    this.gender = g
                    this.genderErr = ''
                  })
              }, (g: string) => g)
            }
          }
          .width('100%')
          .alignItems(HorizontalAlign.Start)
          .id('field_gender')

          Row({ space: 12 }) {
            Column({ space: 8 }) {
              this.FieldLabel({ label: '身高 (cm)', err: this.heightErr, required: true })
              Row() {
                Text(this.heightInput === '' ? '请选择' : `${this.heightInput} cm`)
                  .fontSize(14)
                  .fontColor(this.heightInput === '' ? '#AAAAAA' : '#333333')
                  .layoutWeight(1)
                Text('▼')
                  .fontSize(10)
                  .fontColor('#999999')
              }
              .height(44)
              .padding({ left: 12, right: 12 })
              .backgroundColor('#F5F6F8')
              .borderRadius(10)
              .alignItems(VerticalAlign.Center)
              .onClick(() => {
                this.openHeightPicker()
              })
            }
            .layoutWeight(1)
            .alignItems(HorizontalAlign.Start)
            .id('field_height')

            Column({ space: 8 }) {
              this.FieldLabel({ label: '体重 (kg)', err: this.weightErr, required: true })
              Row() {
                Text(this.weightInput === '' ? '请选择' : `${this.weightInput} kg`)
                  .fontSize(14)
                  .fontColor(this.weightInput === '' ? '#AAAAAA' : '#333333')
                  .layoutWeight(1)
                Text('▼')
                  .fontSize(10)
                  .fontColor('#999999')
              }
              .height(44)
              .padding({ left: 12, right: 12 })
              .backgroundColor('#F5F6F8')
              .borderRadius(10)
              .alignItems(VerticalAlign.Center)
              .onClick(() => {
                this.openWeightPicker()
              })
            }
            .layoutWeight(1)
            .alignItems(HorizontalAlign.Start)
          }
          .width('100%')

          Column({ space: 8 }) {
            this.FieldLabel({ label: '生日', err: '', required: false })
            Row({ space: 12 }) {
              Text(`当前选择：${formatDate(this.birthday)}`)
                .fontSize(13)
                .fontColor('#333333')
                .layoutWeight(1)
              Text(this.showDatePicker ? '收起 ▲' : '修改 ▼')
                .fontSize(13)
                .fontColor('#C2185B')
                .onClick(() => {
                  this.showDatePicker = !this.showDatePicker
                })
            }
            .width('100%')
            // DatePicker 默认收起：展开态高约半屏，会把心理风格/提交按钮挤出
            // 视野并把滚动手势吃掉（真机实测：用户看不到必填项与错误提示，
            // 表现为"提交没反应"）。需要改生日时才展开。
            if (this.showDatePicker) {
              DatePicker({
                start: new Date(1930, 0, 1),
                end: new Date(),
                selected: this.birthday
              })
                .onDateChange((d: Date) => {
                  this.birthday = d
                })
            }
          }
          .width('100%')
          .alignItems(HorizontalAlign.Start)
        }
        .width('100%')
        .padding(16)
        .borderRadius(14)
        .backgroundColor('#FFFFFF')

        Column({ space: 14 }) {
          Text('风格偏好')
            .fontSize(15)
            .fontWeight(FontWeight.Medium)
            .fontColor('#333333')
          Column({ space: 8 }) {
            this.FieldLabel({ label: '核心诉求（多选）', err: this.goalsErr, required: true })
            Flex({ wrap: FlexWrap.Wrap }) {
              ForEach(GOAL_OPTIONS, (g: string) => {
                Text(g)
                  .fontSize(13)
                  .fontColor(this.isSelectedGoal(g) ? '#FFFFFF' : '#444444')
                  .padding({ left: 12, right: 12, top: 6, bottom: 6 })
                  .backgroundColor(this.isSelectedGoal(g) ? COLOR_PRIMARY : '#F3F4F6')
                  .borderRadius(13)
                  .margin({ right: 8, bottom: 8 })
                  .onClick(() => {
                    this.toggleGoal(g)
                  })
              }, (g: string) => g)
            }
            .width('100%')
          }
          .width('100%')
          .alignItems(HorizontalAlign.Start)
          .id('field_goals')

          Column({ space: 8 }) {
            this.FieldLabel({ label: '心理风格（九型·单选）', err: this.styleErr, required: true })
            Flex({ wrap: FlexWrap.Wrap }) {
              ForEach(STYLE_OPTIONS, (s: string) => {
                Text(s)
                  .fontSize(13)
                  .fontColor(this.psychStyle === s ? '#FFFFFF' : '#444444')
                  .padding({ left: 12, right: 12, top: 6, bottom: 6 })
                  .backgroundColor(this.psychStyle === s ? COLOR_PRIMARY : '#F3F4F6')
                  .borderRadius(13)
                  .margin({ right: 8, bottom: 8 })
                  .onClick(() => {
                    this.psychStyle = s
                    this.styleErr = ''
                  })
              }, (s: string) => s)
            }
            .width('100%')
          }
          .width('100%')
          .alignItems(HorizontalAlign.Start)
          .id('field_style')
        }
        .width('100%')
        .padding(16)
        .borderRadius(14)
        .backgroundColor('#FFFFFF')

        Column({ space: 8 }) {
          Text('照片（模拟）')
            .fontSize(15)
            .fontWeight(FontWeight.Medium)
            .fontColor('#333333')
          Text('V1 骨架：COS 直传未接入，此处模拟对象键')
            .fontSize(11)
            .fontColor('#999999')
          TextInput({ placeholder: 'report_photo/xxx.jpg（选填）', text: this.photoKeyInput })
            .height(44)
            .fontSize(13)
            .backgroundColor('#F5F6F8')
            .borderRadius(10)
            .onChange((v: string) => {
              this.photoKeyInput = v
            })
          Text('留空时自动生成 report_photo/{userId}/{随机}.jpg')
            .fontSize(11)
            .fontColor('#AAAAAA')
        }
        .width('100%')
        .padding(16)
        .borderRadius(14)
        .backgroundColor('#FFFFFF')
        .alignItems(HorizontalAlign.Start)

        if (this.formSummary !== '') {
          Text(this.formSummary)
            .fontSize(13)
            .fontColor('#E5484D')
            .width('100%')
            .padding(10)
            .backgroundColor('#FDECEC')
            .borderRadius(8)
            .textAlign(TextAlign.Start)
            .onClick(() => {
              this.scrollToFirstError()
            })
        }
        if (this.submitError !== '') {
          Text(this.submitError)
            .fontSize(12)
            .fontColor('#E5484D')
            .width('100%')
            .textAlign(TextAlign.Start)
        }

        Button(this.submitting ? '提交中…' : '提交并生成报告')
          .width('100%')
          .height(48)
          .fontSize(16)
          .backgroundColor(COLOR_PRIMARY)
          .enabled(!this.submitting)
          .margin({ bottom: 24 })
          .onClick(() => {
            this.onSubmitTap()
          })
      }
      .padding({ left: 16, right: 16 })
      .id('form_root')
    }
    .layoutWeight(1)
    .width('100%')
  }

  @Builder
  PollingBody() {
    Column({ space: 16 }) {
      Text('正在生成你的专属报告')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .fontColor('#333333')
      Text('32 维形象诊断通常需要 1~3 分钟，生成完成后自动进入结果页')
        .fontSize(13)
        .fontColor('#999999')
        .textAlign(TextAlign.Center)
      TaskPollingPanel({
        taskId: this.taskId,
        onSucceeded: (): void => {
          this.onTaskSucceeded()
        },
        onFailed: (reason: string): void => {
          this.onTaskFailed(reason)
        }
      })
        .width('86%')
      if (this.navError !== '') {
        Text(this.navError)
          .fontSize(12)
          .fontColor('#E5484D')
          .width('86%')
          .textAlign(TextAlign.Center)
      }
      // 兜底：自动跳转若失败（或用户中途离开又回来），手动进结果页。
      // reportId 在提交成功时即已保存，轮询页始终可进。
      if (this.reportId !== '') {
        Button('查看报告')
          .fontSize(14)
          .backgroundColor('#FFFFFF')
          .fontColor('#C2185B')
          .borderRadius(20)
          .padding({ left: 24, right: 24 })
          .margin({ top: 8 })
          .onClick(() => {
            this.onTaskSucceeded()
          })
      }
    }
    .width('100%')
    .layoutWeight(1)
    .justifyContent(FlexAlign.Center)
    .padding({ left: 24, right: 24 })
  }

  @Builder
  FailedBody() {
    Column({ space: 12 }) {
      Text('生成失败')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .fontColor('#333333')
      Text(this.failMsg)
        .fontSize(13)
        .fontColor('#999999')
        .textAlign(TextAlign.Center)
      Text('重试将沿用同一 request_key 重新提交，服务端按幂等重放处理，不会重复消耗额度。')
        .fontSize(11)
        .fontColor('#AAAAAA')
        .textAlign(TextAlign.Center)
      Button('重试提交')
        .width('62%')
        .height(44)
        .fontSize(15)
        .backgroundColor(COLOR_PRIMARY)
        .margin({ top: 8 })
        .onClick(() => {
          this.retrySubmit()
        })
      Button('返回修改问卷')
        .width('62%')
        .height(44)
        .fontSize(15)
        .backgroundColor('#F3F4F6')
        .fontColor('#666666')
        .onClick(() => {
          this.phase = 'form'
        })
    }
    .width('100%')
    .layoutWeight(1)
    .justifyContent(FlexAlign.Center)
    .padding({ left: 32, right: 32 })
  }

  @Builder
  DupDialog() {
    Column({ space: 14 }) {
      Text('本期报告已生成')
        .fontSize(17)
        .fontWeight(FontWeight.Bold)
        .fontColor('#333333')
      Text('每个周期仅可生成一次完整报告，无需重复提交。')
        .fontSize(13)
        .fontColor('#666666')
        .textAlign(TextAlign.Center)
      if (this.lastReportId !== '') {
        Text('将为你打开最近一次生成的报告。')
          .fontSize(12)
          .fontColor('#999999')
      } else {
        Text('本期报告稍后可在任务中心查看。')
          .fontSize(12)
          .fontColor('#999999')
      }
      Row({ space: 12 }) {
        Button('我知道了')
          .layoutWeight(1)
          .height(40)
          .fontSize(14)
          .backgroundColor('#F3F4F6')
          .fontColor('#666666')
          .onClick(() => {
            this.showDupDialog = false
          })
        if (this.lastReportId !== '') {
          Button('查看我的报告')
            .layoutWeight(1)
            .height(40)
            .fontSize(14)
            .backgroundColor(COLOR_PRIMARY)
            .onClick(() => {
              this.goLastReport()
            })
        }
      }
      .width('100%')
      .margin({ top: 4 })
    }
    .width('82%')
    .padding(20)
    .borderRadius(16)
    .backgroundColor('#FFFFFF')
  }

  build() {
    Stack() {
      Column() {
        this.TopBar()
        if (this.phase === 'form') {
          this.FormBody()
        } else if (this.phase === 'polling') {
          this.PollingBody()
        } else {
          this.FailedBody()
        }
      }
      .width('100%')
      .height('100%')

      if (this.showDupDialog) {
        Column() {
          this.DupDialog()
        }
        .width('100%')
        .height('100%')
        .backgroundColor('#66000000')
        .justifyContent(FlexAlign.Center)
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F6F8')
  }
}