import router from '@ohos.router';
import TopLogo from './compontents/TopLogo';
import promptAction from '@ohos.promptAction';
import errorMsgDialog from './compontents/errorMsgDialog';
import imageBtn from './compontents/imageBtn';
import { UserLoginType } from '../model/ExaminerLogin';
import { BusinessError } from '@ohos.base';
import { examinerLogin } from '../api/login';
import { ApiResponseType, CarInfoType, ExaminerLoginInfo } from '../model/index';
import { CryptoJS } from '@ohos/crypto-js';
import { dConsole } from '../utils/LogWorker';


@Entry
@Component
struct Index {
  @State ratio: number = 1700 / 960
  @State url: string = ''
  @State inputPlaceholderArr: string[] = ['用户账户', '密码'];
  @State inputTextArr: string[] = ['', ''];
  @State imgArr1: Resource[] =
    [$r('app.media.1_nor'), $r('app.media.2_nor'), $r('app.media.3_nor'), $r('app.media.4_nor'), $r('app.media.5_nor'),
      $r('app.media.6_nor'), $r('app.media.7_nor'), $r('app.media.8_nor'), $r('app.media.9_nor'), $r('app.media.0_nor'),
      $r('app.media.x_nor'), $r('app.media.clear_nor'), $r('app.media.delete_nor'), $r('app.media.confirm_nor')]
  @State currentInputIndex: number = 0
  @State limit: boolean = false
  @State @Watch('outClick') outFlag: boolean = false;
  // private vocObj = null;
  private title = ''
  private type = '2'
  errorDialog: CustomDialogController = new CustomDialogController({
    builder: errorMsgDialog({
      title: this.title,
      type: this.type,
      cancel: () => {
      },
      confirm: () => {
      }
    }),
    customStyle: true,
    alignment: DialogAlignment.Center,
  },
  )

  build() {
    Column() {
      TopLogo({ outFlag: $outFlag })
      Column() {
        Text('请考官输入用户名密码').fontColor('#FFAD33').fontSize(36 * this.ratio)
        Row() {
          ForEach(this.inputPlaceholderArr, (item: string, index: number) => {
            Row() {
              TextInput({ placeholder: `${item}`, text: this.inputTextArr[index] })
                .fontSize(42 * this.ratio)
                .fontColor('white')
                .placeholderFont({ size: 42 * this.ratio })
                .placeholderColor('gray')
                .caretColor('white')
                .backgroundColor('transparent')
                .width('90%')
                .margin({ left: '4%' })
                .type(index === 0 ? InputType.Normal : InputType.Password)
                .focusable(false)
                .onClick(() => {
                  this.currentInputIndex = index;
                })
            }
            .backgroundImage(this.currentInputIndex == index ? $r('app.media.kuang_pre') : $r('app.media.kuang_nor'))
            .backgroundImageSize({ width: '100%', height: '100%' })
            .width('48%')
            .height('14.9%')
          })
        }
        .width('90%')
        .margin({ top: 25 * this.ratio }) //20
        .justifyContent(FlexAlign.SpaceBetween)

        Column() {
          Flex({
            wrap: FlexWrap.Wrap,
            justifyContent: FlexAlign.SpaceAround,
            alignContent: FlexAlign.SpaceAround
          }) {
            ForEach(this.imgArr1, (item: Resource, index: number) => {
              if (index === this.imgArr1.length - 1) {
                imageBtn({ btnWidth: '38%', btnHeight: '24%', imgSrc: item })
                  .onClick(() => {
                    if (this.inputTextArr[0].trim() == '' || this.inputTextArr[1].trim() == '') {
                      promptAction.showToast({
                        message: '请输入用户名和密码',
                        duration: 3000
                      });
                      return
                    }
                    if (this.limit) {
                      return
                    }
                    const carInfo: CarInfoType = AppStorage.get<CarInfoType>('carInfo')!
                    let password: string = CryptoJS.MD5(this.inputTextArr[1]).toString();
                    const param: UserLoginType = {
                      carId: carInfo.carId as string,
                      examinationRoomId: carInfo.examinationRoomId as string,
                      username: this.inputTextArr[0],
                      // password: Md5.Instance.get_md5(this.inputTextArr[1])
                      password
                    }
                    this.type = '2'
                    this.errorDialog.open()
                    this.limit = true
                    try {
                      // TODO
                      examinerLogin(param).then((res: ApiResponseType) => {
                        // AppStorage.setOrCreate('examinerInfo', res?.examinerLoginRsp?.body)
                        dConsole.log('res?.examinerLoginRsp?.head?.resultCode', res?.examinerLoginRsp?.head?.resultCode,
                          JSON.stringify(res))
                        this.errorDialog.close()

                        this.limit = false
                        if (res?.examinerLoginRsp?.head?.resultCode == '1') {
                          // this.type='1'
                          // this.title=decodeURIComponent(res.examinerLoginRsp.head.resultMessage)
                          // dConsole.log('this.titlt',this.title)
                          // this.errorDialog.open()
                          return
                        }
                        router.pushUrl({
                          url: 'pages/UserInfo',
                          params: {
                            type: 1
                          }
                        }, router.RouterMode.Single);

                        dConsole.log('res11', JSON.stringify(res))
                        const examinerLoginInfo: ExaminerLoginInfo | undefined = res.examinerLoginRsp?.body;
                        if (!examinerLoginInfo) {
                          dConsole.error('examinerLoginRsp.body is undefined');
                          return;
                        }
                        examinerLoginInfo.username = this.inputTextArr[0]
                        AppStorage.setOrCreate<ExaminerLoginInfo>('examinerInfo', examinerLoginInfo)
                      }).catch((err: BusinessError) => {
                        this.errorDialog.close()
                        this.limit = false
                      })
                    } catch (error) {
                      this.errorDialog.close()
                      this.limit = false
                    }

                  })
              } else {
                imageBtn({ btnWidth: '18%', btnHeight: '24%', imgSrc: item })
                  .onClick(() => {
                    this.url = ''
                    if (index < 9) {
                      this.inputTextArr[this.currentInputIndex] += (index + 1).toString()
                    } else {
                      if (index === 9) {
                        this.inputTextArr[this.currentInputIndex] += (0).toString()
                      }
                      if (index === 10) {
                        this.inputTextArr[this.currentInputIndex] += 'X';
                      } else if (index === 11) {
                        this.inputTextArr[this.currentInputIndex] = '';
                      }
                      if (index === 12) {
                        this.inputTextArr[this.currentInputIndex] =
                          this.inputTextArr[this.currentInputIndex].slice(0, -1)
                      }
                    }
                    dConsole.log(this.inputTextArr[this.currentInputIndex])
                  })
              }
            })
          }
          .height('100%')
        }
        .margin({ top: 20 * this.ratio })
        .width('90%')
        .height('62.7%')
        .backgroundColor('#E5E3DF')
        .borderRadius(20 * this.ratio)
      }
      .margin({ top: -10 * this.ratio })
      .justifyContent(FlexAlign.SpaceAround)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceBetween)
    .backgroundImagePosition({ x: 0, y: 0 })
    .backgroundImage($r('app.media.index_bg'))
    .backgroundImageSize({ width: '100%', height: '100%' })
  }

  aboutToAppear() {
    this.url = ''
  }

  onPageShow() {
  }

  outClick() {
  }
}