import CompanyCommit from '../dialog/CompanyCommitDialog'
import AreaPickerDialog from '../dialog/AreaPickerDialog'
import { ValidateInputHandle } from '../utils/validateInputHandle'
import { companyData } from '../api/userType'
import baseUrl from '../utils/baseUrl'
import { companyRegister, 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 { uploadDocFile } from  '../utils/uploadDocmentFile'
import { request } from '@kit.BasicServicesKit'
import NavHeader from '../components/NavHeader'
import LoadingDialog from '../dialog/LoadingDialog'


@Entry
@Component
struct Register {
  @Builder indicatorBuilder(icon: ResourceStr) {
    Image(icon)
  }
  @State userErrorMsg: string = ''
  @State idErrorMsg: string = ''
  @State emailErrorMsg: string = ''
  @State phoneErrorMsg: string = ''
  @State companyInfo: companyData = {
    companyId:  0,
    companyName: '',
    province: '',
    city: '',
    county: '',
    address: '',
    linkMan: '',
    lmTel: '',
    companyTel: null,
    postCode: null,
    email: '',
    floorage: 0,
    siteVoucher: '',
    businessLicenseNo:  '',
    businessStartTime:  null,
    businessEndTime:    null,
    businessLicensePic: '',
    peopleNum: 0,
    compangyPic: '',
    companyType: '1',
    userId: 0,
    username: '',
    level: null,
    regionCode: null,
    levelModifyDate: null,
    endTime: '',
    password: ''
  }
  @State confirmPassword: string = ''
  @State pickerValue:string[] = ['广西壮族自治区','南宁市','青秀区']//省市区选中值
  formKey: string[] = ['username', 'password', 'companyName', 'peopleNum', 'floorage', 'linkMan', 'email', 'lmTel', 'siteVoucher', 'businessLicenseNo', 'businessLicensePic']
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CompanyCommit(),
    autoCancel: false,
    customStyle: true
  })
  areaController: CustomDialogController = new CustomDialogController({
    builder: AreaPickerDialog({
      value:this.pickerValue,//首次默认选中值
      onChange: (value:string[]) => {//选择改变回调
        this.pickerValue = value
        this.companyInfo.address = this.pickerValue.join(' ')
        this.companyInfo.province = value[0]
        this.companyInfo.city = value[1]
        this.companyInfo.county = value[2]
      }
    }),
    customStyle: true,
    autoCancel: false
  })

  // 查询用户名是否被占用
  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 ? '' : '身份证号码已存在，请重新输入'
  }

  // 校验函数
  ValidateHandle = (arr: string[], obj: companyData): boolean => {
    let keyArr: string[] = Object.keys(obj)
    let valueArr: (string | number | null)[] = Object.values(obj)
    for(let i = 0; i < keyArr.length; i++) {
      if(arr.includes(keyArr[i]) && valueArr[i] == '') return false
    }
    return true
  }
  // 加载弹窗
  loadingController: CustomDialogController = new CustomDialogController({
    builder: LoadingDialog(),
    customStyle: true,
    offset: { dx: 0, dy: 0 },
    alignment: DialogAlignment.Center,
    autoCancel: false
  })
  async aboutToAppear() {
    this.dialogController.open()
    this.companyInfo.address = this.pickerValue.join(' ')
    this.companyInfo.province = this.pickerValue[0]
    this.companyInfo.city = this.pickerValue[1]
    this.companyInfo.county = this.pickerValue[2]
  }
  build() {
    Column(){
      NavHeader({title: '注册'})
      Scroll(){
        Column(){
          Column(){
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('用户名')
              }.width(90)
              TextInput({placeholder: '4-20位，数字/字母组成', text: $$this.companyInfo.username})
                .backgroundColor('#fff').layoutWeight(1).showError(this.userErrorMsg).onBlur(() => {
                  this.queryName(this.companyInfo.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.companyInfo.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.companyInfo.companyName})
                .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.companyInfo.peopleNum})
                .backgroundColor('#fff').layoutWeight(1).type(InputType.Number)
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('建筑面积')
              }.width(90)
              Row(){
                TextInput({placeholder: '请输入建筑面积', text: $$this.companyInfo.floorage})
                  .backgroundColor('#fff').layoutWeight(1).type(InputType.Number)
                Text('㎡').fontSize(12).backgroundColor('#1890ff').borderRadius(5)
                  .padding({top: 4, bottom: 4, left: 10, right: 10}).fontColor('#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.companyInfo.linkMan})
                .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.companyInfo.email})
                .backgroundColor('#fff').layoutWeight(1).type(InputType.Email)
                .showError(this.emailErrorMsg).onChange(() => {
                this.emailErrorMsg = ValidateInputHandle(this.companyInfo.email, 'email') ? '' : '请正确输入邮箱'
              })
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('联系人手机')
              }
              TextInput({placeholder: '请输入联系人手机号', text: $$this.companyInfo.lmTel})
                .backgroundColor('#fff').layoutWeight(1).type(InputType.PhoneNumber)
                .showError(this.phoneErrorMsg).onChange(() => {
                this.phoneErrorMsg = ValidateInputHandle(this.companyInfo.lmTel, 'phone') ? '' : '请正确输入手机号'
              })
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('场地凭证')
              }
              Column({space: 5}){
                Row({space: 10}){
                  Button('选择文件').controlSize(ControlSize.SMALL).type(ButtonType.Normal)
                    .backgroundColor('#1890ff').fontColor('#fff').borderRadius(4)
                    .onClick(async () => {
                      let that = this
                      that.loadingController.open()
                      let uploader = await uploadDocFile() 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.companyInfo.siteVoucher = uploadInfo.fileName as string
                        that.loadingController.close()
                        promptAction.showToast({message: '上传成功'})
                      })
                    })
                  Button('查看文件').controlSize(ControlSize.SMALL).type(ButtonType.Normal)
                    .backgroundColor('#1890ff').fontColor('#fff').borderRadius(4)
                    .onClick(() => {
                      if(this.companyInfo.siteVoucher == '') {
                        return promptAction.showToast({message: '你还没有上传文件'})
                      }
                      router.pushUrl({
                        url: 'pages/ViewFile',
                        params: {
                          filePath: baseUrl + this.companyInfo.siteVoucher
                        }
                      })
                    })
                }
                Row(){
                  Text('请上传 大小不超过').fontSize(12)
                  Text('5MB').fontSize(12).fontColor('red')
                  Text('格式为').fontSize(12)
                }
                Row(){
                  Text('pdf/jpg/jpeg/png').fontSize(12).fontColor('red')
                  Text('的文件').fontSize(12)
                }
              }.layoutWeight(1).alignItems(HorizontalAlign.Start).margin({left: 10})
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('营业执照扫描件')
              }
              Row(){
                Image(this.companyInfo.businessLicensePic !== '' ? baseUrl + this.companyInfo.businessLicensePic : $r('app.media.certificateCard')).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.companyInfo.businessLicensePic = 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('统一社会信用代码')
              }
              TextInput({placeholder: '请输入统一社会信用代码', text: $$this.companyInfo.businessLicenseNo})
                .backgroundColor('#fff').layoutWeight(1)
                .showError(this.idErrorMsg).onChange(() => {
                this.idErrorMsg = ValidateInputHandle(this.companyInfo.businessLicenseNo, 'businessLicenseNo') ? '' : '请正确输入信用代码'
              })
            }.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.ValidateHandle(this.formKey, this.companyInfo)) return promptAction.showToast({message: '带星号的为必填项'})
            if(this.confirmPassword !== this.companyInfo.password) return promptAction.showToast({message: '两次密码输入不一致'})
            if(!ValidateInputHandle(this.companyInfo.lmTel, 'phone')) return promptAction.showToast({message: '手机号输入有误'})
            if(!ValidateInputHandle(this.companyInfo.email, 'email')) return promptAction.showToast({message: '邮箱输入有误'})
            await companyRegister(this.companyInfo)
            promptAction.showToast({ message: '注册成功' })
            router.back()
          })
      }.width('100%').height(40).backgroundColor('#fff').padding({left: 10, right: 10})
    }.width('100%').height('100%').backgroundColor('#f2f3f7')
  }
}