import { HMRouter, HMRouterMgr } from "@hadss/hmrouter";
import { FeedBackBean } from "../../model/requestModel/MessageRequestModel";
import { BaseTopBar } from "../custom/BaseTopTar";
import AppConstants from "../../app/AppConstant";
import { createWaterMark } from "../custom/Watermark";
import { StringUtils } from "../../util/StringUtils";
import { cardRoundBorderStyle } from "../../style/BorderStyle";
import { ToastUtil } from "@pura/harmony-utils/src/main/ets/action/ToastUtil";
import { plainToInstance } from "class-transformer";
import { webview } from "@kit.ArkWeb";
import { StrUtil } from "@pura/harmony-utils/src/main/ets/utils/StrUtil";

/**
 * 反馈详情
 */
@HMRouter({ pageUrl: 'FeedBackDetailsPage' })
@Component
export struct FeedBackDetailsPage {
  @State param: FeedBackBean | undefined = undefined;

  webController: webview.WebviewController = new webview.WebviewController();
  aboutToAppear(): void {
    let param = HMRouterMgr.getCurrentParam() as FeedBackBean;
    if (!param) {
      ToastUtil.showToast("参数错误")
      HMRouterMgr.pop()
      return
    }
    this.param = plainToInstance(FeedBackBean,param)
    // if (StrUtil.isNotEmpty(this.param?.replyContent)){
    //   setTimeout(() => {
    //
    //   },800)
    // }

  }

  build() {
    Column() {
      BaseTopBar({
        title: $r('app.string.title_feedback_details'),
      })

      Text(StringUtils.get(this.param?.title, ""))
        .constraintSize({
          minHeight: $r('app.float.default_40'),
        })
        .width(AppConstants.PERCENTAGE_MAX)
        .backgroundColor($r('app.color.white'))
        .fontColor($r('app.color.colorGrey8'))
        .fontSize($r('app.float.text_size_16'))
        .textAlign(TextAlign.Center)
        .padding({
          left: $r('app.float.default_10'),
          right: $r('app.float.default_10'),
          top: $r('app.float.default_8'),
          bottom: $r('app.float.default_8'),
        })

      Scroll(){
        Column() {
          Row() {
            Text(this.getTypeStr(StringUtils.getNumber(this.param?.type, 0)))
              .fontColor($r('app.color.colorYellow7'))
              .fontSize($r('app.float.text_size_10'))
              .padding({
                left: $r('app.float.default_5'),
                right: $r('app.float.default_5'),
                top: $r('app.float.default_2'),
                bottom: $r('app.float.default_2')
              })
              .border({
                width: $r('app.float.default_1'),
                color: $r('app.color.colorYellow7'),
                radius: $r('app.float.default_8')
              })
            Text(StringUtils.get(this.param!.applicationName,""))
              .fontColor($r('app.color.colorBluen7'))
              .fontSize($r('app.float.text_size_10'))
              .padding({
                left: $r('app.float.default_5'),
                right: $r('app.float.default_5'),
                top: $r('app.float.default_2'),
                bottom: $r('app.float.default_2')
              })
              .border({
                width: $r('app.float.default_1'),
                color: $r('app.color.colorBluen7'),
                radius: $r('app.float.default_8')
              })
              .margin({ left: $r('app.float.default_8') })
              .visibility(StringUtils.isNullOrEmpty(this.param!.applicationName) ? Visibility.None : Visibility.Visible)

            Text(this.getReplyStatusStr(this.param!.replyStatus))
              .fontColor(this.param!.replyStatus == 0 ? $r('app.color.colorGrey6') : $r('app.color.colorGreen6'))
              .fontSize($r('app.float.text_size_10'))
              .padding({
                left: $r('app.float.default_5'),
                right: $r('app.float.default_5'),
                top: $r('app.float.default_2'),
                bottom: $r('app.float.default_2')
              })
              .border({
                width: $r('app.float.default_1'),
                color: this.param!.replyStatus == 0 ? $r('app.color.colorGrey6') : $r('app.color.colorGreen6'),
                radius: $r('app.float.default_8')
              })
              .margin({ left: $r('app.float.default_8') })
          }
          .width(AppConstants.PERCENTAGE_MAX)
          .alignItems(VerticalAlign.Center)
          .justifyContent(FlexAlign.Start)
          .margin({ top: $r('app.float.default_5') })

          Text(this.param!.createTime)
            .fontColor($r('app.color.colorGrey6'))
            .fontSize($r('app.float.text_size_12'))
            .width(AppConstants.PERCENTAGE_MAX)
            .textAlign(TextAlign.End)
            .margin({ top: $r('app.float.default_8') })


          Column(){

            Text("意见建议")
              .fontColor($r('app.color.colorGrey8'))
              .fontSize($r('app.float.text_size_16'))
              .textAlign(TextAlign.Start)
              .height($r('app.float.default_36'))


            Divider()
              .width(AppConstants.PERCENTAGE_MAX)
              .height($r('app.float.default_1'))
              .backgroundColor($r('app.color.colorGrey2'))

            Text(this.param!.content)
              .fontColor($r('app.color.colorGrey8'))
              .fontSize($r('app.float.text_size_14'))
              .textAlign(TextAlign.Start)
              .margin({ top: $r('app.float.default_10') })
          }
          .backgroundColor($r('app.color.white'))
          .alignItems(HorizontalAlign.Start)
          .border(cardRoundBorderStyle)
          .width(AppConstants.PERCENTAGE_MAX)
          .height('auto')
          .padding($r('app.float.default_10'))
          .margin({ top: $r('app.float.default_10') })

          Column(){
            Text(StringUtils.get(this.param!.replier,"暂无"))
              .fontColor($r('app.color.colorBluen6'))
              .fontSize($r('app.float.text_size_16'))
              .textAlign(TextAlign.Start)
              .height($r('app.float.default_36'))

            Divider()
              .width(AppConstants.PERCENTAGE_MAX)
              .height($r('app.float.default_1'))
              .backgroundColor($r('app.color.colorGrey2'))


            Web({src:"",controller: this.webController})
              .width(AppConstants.PERCENTAGE_MAX)
              .height("auto")
              .zoomAccess(true)

              .onAppear(() =>{
                let data = this.param?.getReplyContent();
                // 在组件引用上使用loadData方法
                this.webController.loadData(data, "text/html", "UTF-8")
              })

            Divider()
              .width(AppConstants.PERCENTAGE_MAX)
              .height($r('app.float.default_1'))
              .margin({ top: $r('app.float.default_8') })
              .backgroundColor($r('app.color.colorGrey2'))

            Text(this.param!.updateTime)
              .fontColor($r('app.color.colorGrey6'))
              .fontSize($r('app.float.text_size_12'))
              .width(AppConstants.PERCENTAGE_MAX)
              .textAlign(TextAlign.End)
              .margin({ top: $r('app.float.default_8') })

          }
          .visibility(this.param!.replyStatus == 1? Visibility.Visible : Visibility.None)
          .backgroundColor($r('app.color.white'))
          .alignItems(HorizontalAlign.Start)
          .border(cardRoundBorderStyle)
          .width(AppConstants.PERCENTAGE_MAX)
          .height('auto')
          .padding($r('app.float.default_10'))
          .margin({ top: $r('app.float.default_10') })
        }
        .width(AppConstants.PERCENTAGE_MAX)
        .height(AppConstants.PERCENTAGE_MAX)
        .padding({
          left: $r('app.float.default_10'),
          right: $r('app.float.default_10'),
        })
      }
      .width(AppConstants.PERCENTAGE_MAX)
      .layoutWeight(1)

    }
    .width(AppConstants.PERCENTAGE_MAX)
    .height(AppConstants.PERCENTAGE_MAX)
    .backgroundColor($r('app.color.page_background'))
    .overlay(createWaterMark())

  }

  getTypeStr(type: number): string {
    switch (type) {
      case 1:
        return "个人建议";
      case 2:
        return "软件问题";
      case 3:
        return "硬件问题";
      case 4:
      default:
        return "其它";
    }
  }

  getReplyStatusStr(replyStatus: number): string {
    return replyStatus == 0 ? "未回复" : "已回复";
  }
}