import { IBestToast, YTAvoid, YtButton, YTHeader, YTRequest } from 'basic'

@Builder
function suggestionBuilder() {
  NavDestination() {
    SuggestionPage()
  }
  .hideTitleBar(true)
}

@Component
struct SuggestionPage {
  @StorageProp(YTAvoid.SAFE_BOTTOM_KEY) safeBottom: number = 0
  @State description: string = ''
  @State contact: string = ''

  build() {
    Column() {
      YTHeader({ title: '意见反馈' })
      Row() {
        Row() {
          Text()
            .width(3)
            .height(10)
            .backgroundColor($r('[basic].color.main_ac_color_dark'))
            .margin({ right: 3 })
          Text() {
            Span('问题描述 ')
              .fontColor('#CC000000')

            Span('(必填)')
              .fontColor('#FFFD4437')
          }
          .fontSize($r('[basic].float.page_text_font_size_12'))
          .fontWeight(500)
        }
      }
      .width('100%')
      .alignItems(VerticalAlign.Bottom)
      .margin({ bottom: 4, top: 26 })
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({ left: 16, right: 20 })


      Text('请尽量将问题描述详细')
        .fontSize($r('[basic].float.page_text_font_size_10'))
        .fontColor('#4D000000')
        .margin({ bottom: 8 })
        .width('100%')
        .textAlign(TextAlign.Start)
        .padding({ left: 22 })

      Column() {
        TextArea({ text: $$this.description })
          .width('100%')
          .padding(5)
          .fontSize($r('[basic].float.page_text_font_size_12'))
          .fontColor('#CC000000')
          .borderRadius(4)
          .border({ width: 1, color: '#14000000' })
          .height(155)
          .backgroundColor(Color.White)
      }
      .padding({ left: 22, right: 22 })
      .margin({ bottom: 23 })

      Row() {
        Row() {
          Text()
            .width(3)
            .height(10)
            .backgroundColor($r('[basic].color.main_ac_color_dark'))
            .margin({ right: 3 })
          Text() {
            Span('联系方式 ')
              .fontColor('#CC000000')

            Span('(选填)')
              .fontColor('#CC000000')
          }
          .fontSize($r('[basic].float.page_text_font_size_12'))
          .fontWeight(500)
        }
      }
      .width('100%')
      .alignItems(VerticalAlign.Bottom)
      .margin({ bottom: 4, top: 26 })
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({ left: 16, right: 20 })


      Text('请输入手机号或QQ号')
        .fontSize($r('[basic].float.page_text_font_size_10'))
        .fontColor('#4D000000')
        .margin({ bottom: 8 })
        .width('100%')
        .textAlign(TextAlign.Start)
        .padding({ left: 22 })

      Column() {
        TextArea({ text: $$this.contact })
          .width('100%')
          .borderRadius(4)
          .padding(5)
          .fontSize($r('[basic].float.page_text_font_size_12'))
          .fontColor('#CC000000')
          .border({ width: 1, color: '#14000000' })
          .height(87)
          .backgroundColor(Color.White)
      }
      .padding({ left: 22, right: 22 })
      .margin({ bottom: 160 })

      Column() {
        YtButton({
          btContent: '提交反馈',
          click: () => {
            if (!this.description) {
              IBestToast.show({
                type: 'warning',
                message: '请输入问题描述'
              })
              return
            }
            YTRequest.questionBack(this.description, this.contact)
            // //TODO 发请求提交反馈
            // YTLog.info(this.description + this.contact + '反馈提交了')
          }
        })
      }
      .padding({ left: 18, right: 18 })

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

  }
}