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'


@Entry
@Component
struct UserRegister {
  @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 = ''
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CompanyCommit(),
    autoCancel: false,
    customStyle: true
  })
  @State pickerValue:string[] = ['广西壮族自治区','南宁市','青秀区']//省市区选中值
  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
  })
  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(){
      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
                      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
                      })
                    })
                  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 () => {
            console.log(JSON.stringify(this.companyInfo))
            if(this.confirmPassword !== this.companyInfo.password) {
              return promptAction.showToast({message: '两次密码输入不一致'})
            }
            if(this.companyInfo?.businessLicenseNo == '') {
              return promptAction.showToast({message: '社会统一代码不能为空'})
            } else if(this.companyInfo?.email == '') {
              return promptAction.showToast({message: '邮箱不能为空'})
            } else if(this.companyInfo?.linkMan == '') {
              return promptAction.showToast({message: '联系人不能为空'})
            } else if(this.companyInfo?.lmTel == '') {
              return promptAction.showToast({message: '手机号不能为空'})
            } else if(this.companyInfo?.username == '') {
              return promptAction.showToast({message: '用户名不能为空'})
            }
            await companyRegister(this.companyInfo)
            promptAction.showToast({
              message: '注册成功',
              duration: 2000
            })
            router.back()
          })
      }.width('100%').height(40).backgroundColor('#fff').padding({left: 10, right: 10})
    }.width('100%').height('100%').backgroundColor('#f2f3f7')
  }
}