import AreaPickerDialog from '../dialog/AreaPickerDialog'
import { companyTest, companyData } from '../api/userType'
import preferencesUtil from '../utils/preferences'
import baseUrl from '../utils/baseUrl'
import { ValidateInputHandle, ValidateHandle } from '../utils/validateInputHandle'
import { updateCompanyInfo, getEmailCode, getCompanyInfo, emailType } from '../api/user'
import { promptAction } from '@kit.ArkUI';
import { AxiosResponse } from '@ohos/axios'
import PhotoBrowser from '../dialog/PhotoBrowserDialog'
import { uploadFile, uploadResult } from '../utils/uploadFile'
import { request } from '@kit.BasicServicesKit'
import NavHeader from '../components/NavHeader'
import LoadingDialog from '../dialog/LoadingDialog'
@Entry
@Component
struct EditUser {
  @Builder indicatorBuilder(icon: ResourceStr) {
    Image(icon)
  }
  @State isShowCode: boolean = false
  @State companyInfo: companyData = JSON.parse(preferencesUtil.get('XF_COMPANY_INFO', '') as string)
  @State pickerValue:string[] = [this.companyInfo.province, this.companyInfo.city, this.companyInfo.county] //省市区选中值
  @State photoList: string[] = [baseUrl + this.companyInfo.businessLicensePic]
  @State initEmail: string = this.companyInfo.email
  @State codeStr: string = '' // 存储验证码对比
  @State timerCount: number = 300
  formKey: string[] = ['companyName', 'email', 'postCode', 'linkMan', 'lmTel', 'businessLicenseNo', 'businessLicensePic', 'address']
  // 区域选择
  areaController: CustomDialogController = new CustomDialogController({
    builder: AreaPickerDialog({
      value: this.pickerValue,//首次默认选中值
      onChange: (value:string[]) => {//选择改变回调
        this.pickerValue = value
        this.companyInfo.address = this.pickerValue.join(' ')
        this.companyInfo.province = this.pickerValue[0]
        this.companyInfo.city = this.pickerValue[1]
        this.companyInfo.county = this.pickerValue[2]
      }
    }),
    customStyle: true,
    autoCancel: false
  })
  // 加载弹窗
  loadingController: CustomDialogController = new CustomDialogController({
    builder: LoadingDialog(),
    customStyle: true,
    offset: { dx: 0, dy: 0 },
    alignment: DialogAlignment.Center,
    autoCancel: false
  })
  // 图片预览
  photoBrowserController: CustomDialogController = new CustomDialogController({
    builder: PhotoBrowser({ imagesList: this.photoList}),
    customStyle: true,
    offset: { dx: 0, dy: 0 },
    alignment: DialogAlignment.Top,
  })

  // 校验函数
  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
  }
  // 获取验证码
  getCode = async () => {
    if(this.codeStr == '') {
      this.loadingController.open()
      let emailRes: AxiosResponse<emailType> = await getEmailCode(this.companyInfo.email)
      this.codeStr = emailRes.data.data
      this.loadingController.close()
      let timer = setInterval(() => {
        this.timerCount--
        if(this.timerCount === 0){
          clearInterval(timer)
          this.codeStr = ''
          this.timerCount = 300
        }
      }, 1000)
      promptAction.showToast({
        message: '已发送至邮箱，请查收'
      })
    } else {
      promptAction.showToast({
        message: '验证码已发送，300s内不在发送'
      })
    }
  }

  // 提交修改
  submitForm = async () => {
    if(!this.ValidateHandle(this.formKey, this.companyInfo)) return promptAction.showToast({message: '带星号的为必填项'})
    if(!ValidateInputHandle(this.companyInfo.lmTel, 'phone')) return promptAction.showToast({message: '手机号输入有误'})
    if(!ValidateInputHandle(this.companyInfo.email, 'email')) return promptAction.showToast({message: '邮箱输入有误'})
    if(!ValidateInputHandle(this.companyInfo.businessLicenseNo, 'businessLicenseNo')) return promptAction.showToast({message: '请正确填写社会信用代码'})
    if(this.isShowCode && (this.companyInfo.code == '' || this.companyInfo.code == undefined)) return promptAction.showToast({message: '请输入验证码'})
    if(this.isShowCode && this.companyInfo.code !== this.codeStr) return promptAction.showToast({message: '验证码输入有误'})

    await updateCompanyInfo(this.companyInfo)
    const info: AxiosResponse<companyTest> = await getCompanyInfo()
    preferencesUtil.set('XF_COMPANY_INFO', JSON.stringify(info.data.data))
    this.companyInfo = JSON.parse(preferencesUtil.get('XF_COMPANY_INFO', '') as string)
    promptAction.showToast({ message: '修改成功', duration: 2000 })
  }

  async aboutToAppear() {
    const info: AxiosResponse<companyTest> = await getCompanyInfo()
    preferencesUtil.set('XF_COMPANY_INFO', JSON.stringify(info.data.data))
    this.companyInfo = JSON.parse(preferencesUtil.get('XF_COMPANY_INFO', '') as string)
    this.companyInfo.address = this.pickerValue.join(' ')
  }
  build() {
    Column(){
      NavHeader({title: '修改企业信息'})
      Column(){
        Column(){
          Row(){
            Row(){
              Image($r('app.media.require')).width(20)
              Text('公司名称')
            }.width(90)
            Text(this.companyInfo.companyName).layoutWeight(1).padding({top: 10, bottom: 10})
          }.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(ValidateInputHandle(this.companyInfo.email, 'email') ? '' : '请正确输入邮箱')
              .onChange((value) => { this.isShowCode = this.initEmail !== value })
          }.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.postCode})
                .backgroundColor('#fff').layoutWeight(1).type(InputType.Email)
              Text(this.codeStr == '' ? '获取验证码' : `${this.timerCount}s后重新获取`).fontSize(12).backgroundColor('#1890ff').borderRadius(5)
                .padding({top: 4, bottom: 4, left: 10, right: 10}).fontColor('#fff')
                .onClick(() => { this.getCode() })
            }.layoutWeight(1)
          }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
          .visibility(this.isShowCode ? Visibility.Visible : Visibility.None)
          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('联系人手机')
            }
            TextInput({placeholder: '请输入手机号', text: $$this.companyInfo.lmTel})
              .backgroundColor('#fff').layoutWeight(1).type(InputType.PhoneNumber)
              .showError(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('统一社会信用代码')
            }
            TextInput({placeholder: '统一社会信用代码', text: $$this.companyInfo.businessLicenseNo})
              .backgroundColor('#fff').layoutWeight(1)
              .showError(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(90)
            Column({space: 5}){
              Image(baseUrl + this.companyInfo.businessLicensePic || $r('app.media.certificateCard')).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
                    that.companyInfo.businessLicensePic = uploadInfo.fileName as string
                  })
                })
              Text('请上传营业执照副本才是扫描件').fontSize(12).fontColor('#999')
              Text('图片大小： 1M以内，文件最大尺寸(px): 3508*2480').fontSize(12).fontColor('#666')
            }.layoutWeight(1).margin({left: 20}).alignItems(HorizontalAlign.Start)
          }.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}).width('100%').layoutWeight(1)
      Row({ space: 10}){
        Text('提交').borderRadius(5).layoutWeight(1).height(30).fontColor('#fff')
          .backgroundColor('#1B65FD').fontSize(14).textAlign(TextAlign.Center)
          .onClick(async () => { this.submitForm() })
        Text('图片预览').borderRadius(5).layoutWeight(1).height(30).fontColor('#fff')
          .backgroundColor('#1B65FD').fontSize(14).textAlign(TextAlign.Center)
          .onClick(async () => {
            this.photoBrowserController.open()
          })
      }.width('100%').height(40).backgroundColor('#fff').padding({left: 10, right: 10})
    }.width('100%').height('100%').backgroundColor('#f2f3f7')
  }
}