import router from '@ohos.router'
import TopLogo from './compontents/topLogo'
import { examinerLoginService } from '../common/service/ExaminerService'
import Md5  from '../common/utils/md5';
import prompt from '@ohos.prompt'
import { voiceService } from '../common/service/voiceService'

@Entry
@Component
struct Index {
  @State ratio: number = 850 / 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 @Watch('outClick') outFlag: boolean = false;
  private vocObj = null;
  build() {
      Column() {
        TopLogo({outFlag:$outFlag})
        Column() {
          Text('请考官输入用户名密码').fontColor('#FFAD33').fontSize(36*this.ratio)
          Row() {
            ForEach(this.inputPlaceholderArr, (item:any, 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 ) {
                  Image(item).width('38%').height('24%').onClick(() => {

                    if(this.inputTextArr[0].trim()==''||this.inputTextArr[1].trim()==''){
                      prompt.showToast({
                        message: '请输入用户名和密码',
                        duration: 3000
                      });
                      return
                    }

                    const param = {
                      carId: globalThis.carInfo.carId,
                      examinationRoomId: globalThis.carInfo.examinationRoomId,
                      username: this.inputTextArr[0],
                      password: Md5.Instance.get_md5(this.inputTextArr[1])
                    }
                    console.log('paramparam',JSON.stringify(globalThis.carInfo))
                    examinerLoginService(param).then(res => {
                      // this.vocObj.playAudio({
                      //   type: 1,
                      //   name: 'media_button.wav'
                      // })
                      // this.url='pages/userInfo'
                      router.pushUrl({
                        url: 'pages/UserInfo',
                      },router.RouterMode.Single);
                      console.log('res11',JSON.stringify(res))
                      globalThis.username=this.inputTextArr[0]
                    })
                  })
                }else {
                  Image(item).width('18%').height('24%').onClick(() => {
                    // this.vocObj.playAudio({
                    //   type: 1,
                    //   name: 'media_button.wav'
                    // })
                    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)
                      }
                    }
                    console.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=''
    // this.vocObj = new voiceService(async (status,val) => {
    //   if (status == 'idle') {
    //     if(this.url=='pages/userInfo'){
    //       router.pushUrl({
    //         url: this.url,
    //       });
    //     }
    //   }
    // });
    console.info('ExmainerLogin aboutToAppear');
  }
  onPageShow() {
  }
  outClick(){
  }
}