import { HMRouter, HMRouterMgr } from "@hadss/hmrouter";
import { ToastUtil } from "@pura/harmony-utils/src/main/ets/action/ToastUtil";
import AppConstants from "../../app/AppConstant";
import { AppDataModel } from "../../model/resultModel/ApplicationResultModel";
import { BasePageResult } from "../../model/uiModel/PageResultModel";
import { addFeedBack } from "../../request/Api";
import { cardRoundBorderGreyStyle, cardRoundBorderStyle } from "../../style/BorderStyle";
import { StringUtils } from "../../util/StringUtils";
import { BaseTopBar } from "../custom/BaseTopTar";
import { createWaterMark } from "../custom/Watermark";
import { router } from "@kit.ArkUI";

/**
 * 意见建议页面
 */
@Component
@Preview
@HMRouter({ pageUrl: 'OpinionsSuggestionsPages' })
export struct OpinionsSuggestionsPages {
  @State selectType: number = 1;
  @State inputTitle: string = "";
  @State inputContent: string = "";
  @State appName: string = "";
  appId: string = "";
  textInputController: TextInputController = new TextInputController()
  textAreaController: TextInputController = new TextInputController()

  aboutToAppear(): void {
  }

  submit() {
    if (this.selectType == 2 && StringUtils.isNullOrEmpty(this.appName)) {
      ToastUtil.showToast("请选择应用!")
      return
    }
    if (StringUtils.isNullOrEmpty(this.inputTitle)) {
      ToastUtil.showToast("请输入标题!")
      return
    }
    if (StringUtils.isNullOrEmpty(this.inputContent)) {
      ToastUtil.showToast("请输入内容!")
      return
    }
    addFeedBack(this.appId, this.appName, this.selectType, this.inputTitle, this.inputContent)
      .then((res) => {
        console.debug("submit feedBack", JSON.stringify(res))
        ToastUtil.showToast(res.msg)
        if (res.code == 20011) {
          setTimeout(() => {
            HMRouterMgr.pop()
          }, 800)
        }
      })
      .catch((err: Error) => {
        console.error("submit feedBack", JSON.stringify(err))
        ToastUtil.showToast(err.message)

      })
  }

  build() {
    Column() {
      BaseTopBar({
        title: $r('app.string.title_Feedback'),
        rightText: "我的反馈",
        rightClickEvent: () => {
          HMRouterMgr.push({ navigationId: 'startNavigation', pageUrl: "MyFeedBackPage" })
        }
      })
      Scroll() {
        Column() {
          //上部分
          this.topModel()
          this.bottomModel()

        }
        .padding({
          left: $r('app.float.default_15'),
          right: $r('app.float.default_15')
        })
        .width(AppConstants.PERCENTAGE_MAX)
        .height(AppConstants.PERCENTAGE_MAX)
      }
      .width(AppConstants.PERCENTAGE_MAX)
      .layoutWeight(1)

      Column() {
        Button("提交反馈", { type: ButtonType.Normal })
          .borderRadius(8)
          .width(AppConstants.PERCENTAGE_MAX)
          .height($r('app.float.default_40'))
          .fontColor($r('app.color.white'))
          .fontSize($r('app.float.text_size_14'))
          .backgroundColor($r('app.color.bull'))
          .onClick(() => {
            this.submit()
          })
      }
      .padding({
        left: $r('app.float.default_15'),
        right: $r('app.float.default_15')
      , bottom: $r('app.float.default_28')
      })
      .width(AppConstants.PERCENTAGE_MAX)
      .height('auto')

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

    // .onVisibleAreaChange([0.5, 1], (isVisible) => {
    //   if (isVisible) {
    //     let param = HMRouterMgr.getCurrentParam() as BasePageResult;
    //     if (param) {
    //       let data = param.data as AppDataModel;
    //       if (data) {
    //         this.appName = data.name
    //         this.appId = data.id
    //       }
    //       router.getParams()
    //     }
    //   }
    // })
  }

  @Builder
  bottomModel() {
    //上部分
    Column() {

      Row() {
        Text("*")
          .fontColor($r('app.color.colorRed9'))
          .margin({ top: $r('app.float.default_5') })
          .fontSize($r('app.float.text_size_16'));

        Text("反馈标题")
          .fontColor($r('app.color.colorGrey8'))
          .fontSize($r('app.float.text_size_16'))
          .margin({ top: $r('app.float.default_5') });

      }
      .justifyContent(FlexAlign.Start)
      .alignItems(VerticalAlign.Center)
      .width(AppConstants.PERCENTAGE_MAX);

      TextInput({ text: this.inputTitle, placeholder: '请输入标题', controller: this.textInputController })
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .caretColor(Color.Blue)
        .width(AppConstants.PERCENTAGE_MAX)
        .height($r('app.float.default_46'))
        .margin({ top: $r('app.float.default_10') })
        .fontSize(14)
        .fontColor($r('app.color.colorGrey8'))
        .backgroundColor($r('app.color.colorGrey1'))
        .border(cardRoundBorderStyle)
        .padding({ left: $r('app.float.default_10'), right: $r('app.float.default_10') })
        .onChange((value: string) => {
          this.inputTitle = value
        })

      Divider()
        .width(AppConstants.PERCENTAGE_MAX)
        .height($r('app.float.default_1'))
        .color($r('app.color.colorGrey3'))
        .margin({ top: $r('app.float.default_10') });

      Row() {
        Text("*")
          .fontColor($r('app.color.colorRed9'))
          .margin({ top: $r('app.float.default_5') })
          .fontSize($r('app.float.text_size_16'));

        Text("反馈内容")
          .fontColor($r('app.color.colorGrey8'))
          .fontSize($r('app.float.text_size_16'))
          .margin({ top: $r('app.float.default_5') });

      }
      .justifyContent(FlexAlign.Start)
      .alignItems(VerticalAlign.Center)
      .width(AppConstants.PERCENTAGE_MAX)
      .margin({ top: $r('app.float.default_10') });

      TextArea({
        text: this.inputContent,
        placeholder: '请输入反馈内容(500字以内)',
        controller: this.textAreaController
      })
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .caretColor(Color.Blue)
        .width(AppConstants.PERCENTAGE_MAX)
        .height($r('app.float.default_180'))
        .margin({ top: $r('app.float.default_10') })
        .fontSize(14)
        .fontColor($r('app.color.colorGrey8'))
        .backgroundColor($r('app.color.colorGrey1'))
        .border(cardRoundBorderStyle)
        .padding({ left: $r('app.float.default_10'), right: $r('app.float.default_10') })
        .onChange((value: string) => {
          this.inputContent = value
        })
    }
    .padding($r('app.float.default_10'))
    .alignItems(HorizontalAlign.Start)
    .width(AppConstants.PERCENTAGE_MAX)
    .margin({ top: $r('app.float.default_10') })
    .backgroundColor($r('app.color.white'))
    .border(cardRoundBorderStyle)

  }

  @Builder
  topModel() {
    //上部分
    Column() {
      Text("反馈类型")
        .fontColor($r('app.color.colorGrey8'))
        .fontSize($r('app.float.text_size_16'));

      //类型选项
      Row() {

        Text("个人建议")
          .fontColor(this.selectType == 1 ? $r('app.color.white') : $r('app.color.colorGrey7'))
          .fontSize($r('app.float.text_size_14'))
          .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')
          })
          .backgroundColor(this.selectType == 1 ? $r('app.color.bull') : $r('app.color.white'))
          .border(cardRoundBorderGreyStyle)
          .onClick(() => {
            if (this.selectType == 1) {
              return;
            }
            this.selectType = 1;
          });

        Blank()
          .layoutWeight(1);

        Text("软件问题")
          .fontColor(this.selectType == 2 ? $r('app.color.white') : $r('app.color.colorGrey7'))
          .fontSize($r('app.float.text_size_14'))
          .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')
          })
          .backgroundColor(this.selectType == 2 ? $r('app.color.bull') : $r('app.color.white'))
          .border(cardRoundBorderGreyStyle)
          .onClick(() => {
            if (this.selectType == 2) {
              return;
            }
            this.selectType = 2;
          });

        Blank()
          .layoutWeight(1);
        Text("硬件问题")
          .fontColor(this.selectType == 3 ? $r('app.color.white') : $r('app.color.colorGrey7'))
          .fontSize($r('app.float.text_size_14'))
          .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')
          })
          .backgroundColor(this.selectType == 3 ? $r('app.color.bull') : $r('app.color.white'))
          .border(cardRoundBorderGreyStyle)
          .onClick(() => {
            if (this.selectType == 3) {
              return;
            }
            this.selectType = 3;
          });

        Blank()
          .layoutWeight(1);
        Text("其他")
          .fontColor(this.selectType == 4 ? $r('app.color.white') : $r('app.color.colorGrey7'))
          .fontSize($r('app.float.text_size_14'))
          .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')
          })
          .backgroundColor(this.selectType == 4 ? $r('app.color.bull') : $r('app.color.white'))
          .border(cardRoundBorderGreyStyle)
          .onClick(() => {
            if (this.selectType == 4) {
              return;
            }
            this.selectType = 4;
          });

      }
      .margin({ top: $r('app.float.default_10') })
      .width(AppConstants.PERCENTAGE_MAX);

      Divider()
        .width(AppConstants.PERCENTAGE_MAX)
        .height($r('app.float.default_1'))
        .color($r('app.color.colorGrey3'))
        .margin({ top: $r('app.float.default_10') });

      Row() {

        Text("*")
          .fontColor($r('app.color.colorRed9'))
          .fontSize($r('app.float.text_size_16'))
          .margin({ top: $r('app.float.default_5') })
          .visibility(this.selectType == 2 ? Visibility.Visible : Visibility.Hidden);

        Text("反馈应用")
          .fontColor($r('app.color.colorGrey8'))
          .fontSize($r('app.float.text_size_16'))
          .margin({ top: $r('app.float.default_5') });

      }
      .justifyContent(FlexAlign.Start)
      .alignItems(VerticalAlign.Center)
      .margin({ top: $r('app.float.default_10') })
      .width(AppConstants.PERCENTAGE_MAX);

      Row() {
        Text(StringUtils.get(this.appName, "请选择"))
          .fontColor(StringUtils.isNullOrEmpty(this.appName) ? $r('app.color.colorGrey6') : $r('app.color.colorGrey8'))
          .fontSize($r('app.float.text_size_16'))
          .layoutWeight(1)
          .maxLines(1)
          .ellipsisMode(EllipsisMode.END)
          .textAlign(TextAlign.Start);

        Image($r('app.media.arrow_right'))
          .width($r('app.float.default_20'))
          .height($r('app.float.default_20'));

      }
      .padding({ left: $r('app.float.default_5'), right: $r('app.float.default_5') })
      .justifyContent(FlexAlign.Start)
      .alignItems(VerticalAlign.Center)
      .height($r('app.float.default_46'))
      .margin({ top: $r('app.float.default_10') })
      .width(AppConstants.PERCENTAGE_MAX)
      .backgroundColor($r('app.color.colorGrey1'))
      .border(cardRoundBorderStyle)
      .onClick(() => {
        HMRouterMgr.push({ navigationId: 'startNavigation', pageUrl: "SelectAppListPage" }, {
          onResult: (result) => {
            let param = result.result as BasePageResult
            if (param) {
              let data = param.data as AppDataModel
              if (data) {
                this.appName = data.name
                this.appId = data.id
              }
            }
          }
        })
      });
    }
    .padding($r('app.float.default_10'))
    .alignItems(HorizontalAlign.Start)
    .width(AppConstants.PERCENTAGE_MAX)
    .margin({ top: $r('app.float.default_10') })
    .backgroundColor($r('app.color.white'))
    .border(cardRoundBorderStyle)
  }
}