import UserCommit from '../dialog/UserCommit'
import AreaPickerDialog from '../dialog/AreaPickerDialog'
import { ValidateInputHandle } from '../utils/validateInputHandle'
import { personData } from '../api/userType'
import baseUrl from '../utils/baseUrl'
import { userRegister, queryUserNameType, queryUsername, queryIdNoType, queryIdNo } from '../api/user'
import { promptAction, router } from '@kit.ArkUI';
import { AxiosResponse } from '@ohos/axios'
import { uploadFile, uploadResult } from '../utils/uploadFile'
import { request } from '@kit.BasicServicesKit'

@Entry
@Component
struct UserRegister {
  @Builder indicatorBuilder(icon: ResourceStr) {
    Image(icon)
  }
  @State userErrorMsg: string = ''
  @State idErrorMsg: string = ''
  @State emailErrorMsg: string = ''
  @State phoneErrorMsg: string = ''
  @State userInfo: personData = {
    username: '',
    password: '',
    personName: '',
    email: '',
    gender: '0',
    birthDate: '选择日期',
    code: '',
    phone: '',
    idNo: '',
    personalImg: '',
    idImgFront: '',
    idImgBack: '',
    address: '广西壮族自治区 南宁市 青秀区',
    companyId: 0,
    personId: 0,
    userId: 0,
    state: ''
  }
  private selectedDate: Date = new Date('2000-01-01')
  @State confirmPassword: string = ''
  dialogController: CustomDialogController = new CustomDialogController({
    builder: UserCommit(),
    autoCancel: false,
    customStyle: true
  })
  @State pickerValue:string[] = ['广西壮族自治区','南宁市','青秀区']//省市区选中值
  @State initEmail: string = this.userInfo.email
  areaController: CustomDialogController = new CustomDialogController({
    builder: AreaPickerDialog({
      value:this.pickerValue,//首次默认选中值
      onChange: (value:string[]) => {//选择改变回调
        this.pickerValue = value
        this.userInfo.address = this.pickerValue.join(' ')
      }
    }),
    customStyle: true
  })
  async aboutToAppear() {
    this.dialogController.open()
  }

  // 查询用户名是否被占用
  queryName = async (userName: string) => {
    const res: AxiosResponse<queryUserNameType> = await queryUsername(userName)
    this.userErrorMsg = res.data.data == 1 ? '' : res.data.msg
}

  // 查身份证是否被占用
  queryId = async (id: string) => {
    const res: AxiosResponse<queryIdNoType> = await queryIdNo(id)
    this.idErrorMsg = res.data.total == 0 ? '' : '身份证号码已存在，请重新输入'
}
  build() {
    Column(){
      Scroll(){
        Column(){
          Column(){
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('用户名')
              }.width(90)
              TextInput({placeholder: '4-20位，数字/字母组成', text: $$this.userInfo.username})
                .backgroundColor('#fff').layoutWeight(1).showError(this.userErrorMsg).onBlur(() => {
                  this.queryName(this.userInfo.username)
              }).onChange((value) => {
                this.userErrorMsg = ValidateInputHandle(value, 'username') ? '' : '4-20位数字字母组成'
              })
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('密码')
              }.width(90)
              TextInput({placeholder: '请输入密码', text: $$this.userInfo.password})
                .backgroundColor('#fff').layoutWeight(1).type(InputType.Password)
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('确认密码')
              }.width(90)
              TextInput({placeholder: '请输入密码', text: $$this.confirmPassword})
                .backgroundColor('#fff').layoutWeight(1).type(InputType.Password).borderWidth(0)
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('姓名')
              }.width(90)
              TextInput({placeholder: '请输入姓名', text: $$this.userInfo.personName})
                .backgroundColor('#fff').layoutWeight(1)
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('邮箱')
              }.width(90)
              TextInput({placeholder: '请输入邮箱', text: $$this.userInfo.email})
                .backgroundColor('#fff').layoutWeight(1).type(InputType.Email)
                .showError(this.emailErrorMsg).onChange(() => {
                  this.emailErrorMsg = ValidateInputHandle(this.userInfo.email, 'email') ? '' : '请正确输入邮箱'
              })
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('性别')
              }.width(90)
              Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
                Row() {
                  Radio({ value: '0', group: 'radioGroup',
                    indicatorType:RadioIndicatorType.CUSTOM,
                    indicatorBuilder:()=>{this.indicatorBuilder($r('app.media.man'))}
                  }).checked(this.userInfo.gender == '0')
                    .height(20)
                    .width(20)
                    .onChange(() => {
                      this.userInfo.gender = '0'
                    })
                  Text('男')
                }
                Row() {
                  Radio({ value: '1', group: 'radioGroup',
                    indicatorType:RadioIndicatorType.CUSTOM,
                    indicatorBuilder:()=>{this.indicatorBuilder($r('app.media.pain_woman'))}
                  }).checked(this.userInfo.gender == '1')
                    .height(20)
                    .width(20)
                    .onChange(() => {
                      this.userInfo.gender = '1'
                    })
                  Text('女')
                }
              }
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('出生日期')
              }.width(90)
              Text(this.userInfo.birthDate).padding({top: 8, bottom: 8, left: 16, right: 16})
                .backgroundColor('#fff').layoutWeight(1).fontColor('#000').onClick(() => {
                CalendarPickerDialog.show({
                  selected: this.selectedDate,
                  onAccept: (value) => {
                    this.userInfo.birthDate = JSON.stringify(value).slice(1, 11)
                  }
                })
              })
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('身份证号')
              }.width(90)
              TextInput({placeholder: '请输入身份证号', text: $$this.userInfo.idNo})
                .backgroundColor('#fff').layoutWeight(1).type(InputType.Number)
                .showError(this.idErrorMsg).onBlur(() => {
                  this.queryId(this.userInfo.idNo)
                }).onChange(() => {
                this.idErrorMsg = ValidateInputHandle(this.userInfo.idNo, 'idCard') ? '' : '请正确输入身份证'
              })
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('手机号')
              }.width(90)
              TextInput({placeholder: '请输入手机号', text: $$this.userInfo.phone})
                .backgroundColor('#fff').layoutWeight(1).type(InputType.PhoneNumber)
                .showError(this.phoneErrorMsg).onChange(() => {
                this.phoneErrorMsg = ValidateInputHandle(this.userInfo.phone, 'phone') ? '' : '请正确输入手机号'
              })
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('个人照片')
              }.width(90)
              Row(){
                Image(this.userInfo.personalImg !== '' ? baseUrl + this.userInfo.personalImg : $r('app.media.userAvatar')).width(80)
                  .onClick(async () => {
                    let that = this
                    let uploader = await uploadFile() as request.UploadTask
                    // 3. 监控上传错误
                    uploader.on('fail', (err) => {
                      console.log('上传错误--->', JSON.stringify(err))
                    })
                    //   4. 获取服务器返回来的数据
                    uploader.on('headerReceive',(res)=>{
                      let uploadInfo = JSON.parse(res['body']) as uploadResult
                      console.log(JSON.stringify(uploadInfo))
                      that.userInfo.personalImg = uploadInfo.fileName as string
                    })
                  })
              }.layoutWeight(1).margin({left: 20})
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('证件正面')
              }.width(90)
              Row(){
                Image(this.userInfo.idImgFront !== '' ? baseUrl + this.userInfo.idImgFront : $r('app.media.idCard')).width(120)
                  .onClick(async () => {
                    let that = this
                    let uploader = await uploadFile() as request.UploadTask
                    // 3. 监控上传错误
                    uploader.on('fail', (err) => {
                      console.log('上传错误--->', JSON.stringify(err))
                    })
                    //   4. 获取服务器返回来的数据
                    uploader.on('headerReceive',(res)=>{
                      let uploadInfo = JSON.parse(res['body']) as uploadResult
                      that.userInfo.idImgFront = uploadInfo.fileName as string
                    })
                  })
              }.layoutWeight(1).margin({left: 20})
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('证件反面')
              }.width(90)
              Row(){
                Image(this.userInfo.idImgBack !== '' ? baseUrl + this.userInfo.idImgBack : $r('app.media.unIdCard')).width(120)
                  .onClick(async () => {
                    let that = this
                    let uploader = await uploadFile() as request.UploadTask
                    // 3. 监控上传错误
                    uploader.on('fail', (err) => {
                      console.log('上传错误--->', JSON.stringify(err))
                    })
                    //   4. 获取服务器返回来的数据
                    uploader.on('headerReceive',(res)=>{
                      let uploadInfo = JSON.parse(res['body']) as uploadResult
                      that.userInfo.idImgBack = uploadInfo.fileName as string
                    })
                  })
              }.layoutWeight(1).margin({left: 20})
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('地址')
              }.width(70)
              Text(this.pickerValue.join(' ')).layoutWeight(1).padding({top: 8, bottom: 8, left: 16, right: 16})
                .backgroundColor('#fff').fontColor('#999').textOverflow({overflow: TextOverflow.Ellipsis}).maxLines(2)
                .onClick(() => {
                  this.areaController?.open()
                })
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
          }.backgroundColor('#fff').width('100%').padding({left: 5, right: 5}).borderRadius(10)
        }.padding(10).margin({bottom: 20, top: 10})
      }.layoutWeight(1).scrollBar(BarState.Off)
      Row({ space: 10}){
        Text('提交').borderRadius(5).layoutWeight(1).height(30).fontColor('#fff')
          .backgroundColor('#1B65FD').fontSize(14).textAlign(TextAlign.Center)
          .onClick(async () => {
            if(this.confirmPassword !== this.userInfo.password) {
              return promptAction.showToast({message: '两次密码输入不一致'})
            }
            if(this.userInfo?.personName == '') {
              return promptAction.showToast({message: '姓名不能为空'})
            } else if(this.userInfo?.email == '') {
              return promptAction.showToast({message: '邮箱不能为空'})
            } else if(this.userInfo?.idNo == '') {
              return promptAction.showToast({message: '身份证不能为空'})
            } else if(this.userInfo?.phone == '') {
              return promptAction.showToast({message: '手机号不能为空'})
            } else if(this.userInfo.idImgFront == '') {
              return promptAction.showToast({message: '身份证件不能为空'})
            } else if(this.userInfo.idImgBack == '') {
              return promptAction.showToast({message: '身份证件不能为空'})
            } else if(this.userInfo?.personalImg == '') {
              return promptAction.showToast({message: '请上传头像'})
            }
            await userRegister(this.userInfo)
            promptAction.showToast({
              message: '注册成功',
              duration: 2000
            })
            router.back()
          })
      }.width('100%').height(40).backgroundColor('#fff').padding({left: 10, right: 10})
    }.width('100%').height('100%').backgroundColor('#f2f3f7')
  }
}