harmony_vehicle_terminal/entry/src/main/ets/pages/ExaminerLogin.ets

import HeaderComponent from './compontents/Header';
import LoadingComponent from './compontents/Loading';
import Prompt from '@system.prompt';
import { ApiResponseType, CarInfoType, ExaminerLoginInfo } from '../model';
import CryptoJS from '@ohos/crypto-js';
import { UserLoginType } from '../model/ExaminerLogin';
import { examinerLogin } from '../api/login';
import router from '@ohos.router';
import { dConsole } from '../utils/LogWorker';
import { ExaminerLoginTag } from '../config';


@Entry
@Component
struct ExaminerLoginPage {
  @State dataList: string[] = ["1", "2", "3", "4", "退格", "5", "6", "7", "8", "清空", "9", "0", "X"];
  @State userName: string = "";
  @State password: string = "";
  @State selectIndex: string = "0"
  loadingDialog: CustomDialogController = new CustomDialogController({
    builder: LoadingComponent({
      text: "正在登录，请稍候..."
    }),
    autoCancel: false
  })

  build() {
    Flex({
      direction: FlexDirection.Column,
    }) {
      HeaderComponent({
        shortLogo: true,
        shouBackArea: true
      })
      Row() {
        Text("请考官输入用户名和密码")
          .fontSize(40)
          .fontColor("#EF9335")
          .width("100%")
          .height(50)
          .textAlign(TextAlign.Center)
      }

      Column() {
        Row() {
          inputComponent({
            active: this.selectIndex === "0",
            value: this.userName,
            onSelect: () => {
              this.selectIndex = "0"
            }
          })
          inputComponent({
            active: this.selectIndex === "1",
            value: this.password,
            isPassword: true,
            placeholder: "请输入密码",
            onSelect: () => {
              this.selectIndex = "1"
            },
          })
        }.width("100%").justifyContent(FlexAlign.SpaceBetween)

        Column() {
          Flex({
            direction: FlexDirection.Column
          }) {
            Grid() {
              ForEach(this.dataList, (item: string) => {
                GridItem() {
                  btnComponent({
                    text: item
                  }).onClick(() => {
                    if (item === "退格") {
                      if (this.selectIndex === "0") {
                        this.userName = this.userName.slice(0, -1);
                      } else {
                        this.password = this.password.slice(0, -1);
                      }
                    } else if (item === "清空") {
                      if (this.selectIndex === "0") {
                        this.userName = "";
                      } else {
                        this.password = "";
                      }
                    } else if (item === "X") {
                      this.selectIndex = "0";
                    } else {
                      if (this.selectIndex === "0") {
                        this.userName += item;
                      } else {
                        this.password += item;
                      }
                    }
                  })
                }
              })
              GridItem() {
                btnComponent({
                  text: "确定"
                }).onClick(async () => {
                  if (this.userName === "" || this.password === "") {
                    Prompt.showToast({
                      message: "用户名或密码不能为空",
                      duration: 2000
                    });
                    return;
                  }
                  const carInfo: CarInfoType = AppStorage.get<CarInfoType>('carInfo')!
                  let password: string = CryptoJS.MD5(this.password).toString();
                  const param: UserLoginType = {
                    carId: carInfo.carId as string,
                    examinationRoomId: carInfo.examinationRoomId as string,
                    username: this.userName,
                    password
                  }
                  this.loadingDialog.open();
                  try {
                    const res: ApiResponseType = await examinerLogin(param)
                    if (res?.examinerLoginRsp?.head?.resultCode == '1') {
                      return
                    }
                    this.loadingDialog.close()
                    router.pushUrl({
                      url: 'pages/UserInfo',
                      params: {
                        type: 1
                      }
                    }, router.RouterMode.Single);
                    const examinerLoginInfo: ExaminerLoginInfo | undefined = res.examinerLoginRsp?.body;
                    if (!examinerLoginInfo) {
                      dConsole.error(ExaminerLoginTag, 'examinerLoginRsp.body is undefined');
                      return;
                    }
                    examinerLoginInfo.username = this.userName
                    AppStorage.setOrCreate<ExaminerLoginInfo>('examinerInfo', examinerLoginInfo)
                  } catch (e) {
                    this.loadingDialog.close();
                    dConsole.error(ExaminerLoginTag, 'examinerLogin error: ' + e);
                    Prompt.showToast({
                      message: "登录失败，请稍后重试",
                      duration: 2000
                    });
                  }
                })
              }.columnStart(4).columnEnd(5)
            }
            .columnsTemplate("1fr 1fr 1fr 1fr 1fr")
            .rowsTemplate("1fr 1fr 1fr")
            .height("100%")
          }
        }
        .width("100%")
        .flexGrow(1)
        .flexShrink(1)
        .backgroundColor("#E5E3DF")
        .borderRadius(20)
        .padding(20)
        .margin({
          top: 20
        })
        .shadow({
          radius: 30,
          color: "#E7B544"
        })
      }.width("100%").height("100%").padding(20)
    }.backgroundColor("#232424").height("100%").width("100%").padding({
      bottom: 10
    })
  }
}

@Component
struct btnComponent {
  @State text: string = "1";
  @State opacityNum: number = 1;

  build() {
    Row() {
      if (this.text != "确定" && this.text !== "退格" && this.text !== "清空") {
        Text(this.text).fontSize(40).fontColor("#F0DEC5")
      }
    }
    .backgroundImage(this.text === "确定" ? $r("app.media.queding_nor") : this.text === "退格" ? $r("app.media.delete_nor") : this.text === "清空" ? $r("app.media.clear_nor") : $r("app.media.nor_btn"))
    .width("100%")
    .height(160)
    .backgroundImageSize({
      width: "100%",
      height: "100%"
    })
    .justifyContent(FlexAlign.Center)
    .alignItems(VerticalAlign.Center)
  }
}

@Component
struct inputComponent {
  @State placeholder: string = "请输入用户名";
  @Prop value: string = "";
  @Prop active: boolean = false;
  @State isPassword: boolean = false;
  onSelect: () => void = () => {
  };

  build() {
    Row() {
      if (this.isPassword) {
        Text(this.value !== "" ? "*".repeat(this.value.length) : this.placeholder)
          .fontSize(40)
          .fontColor("#fff")
          .margin({
            left: 20
          })
      } else {
        Text(this.value !== "" ? this.value : this.placeholder)
          .fontSize(40)
          .fontColor("#fff")
          .margin({
            left: 20
          })
      }
    }
    .backgroundImage(
      this.active ? $r("app.media.kuang_pre") : $r("app.media.kuang_nor")
    )
    .backgroundImageSize({
      width: "100%",
      height: "100%"
    })
    .width(750)
    .height(120)
    .padding({
      left: 20
    })
    .onClick(() => {
      this.onSelect()
    })
  }
}