<script lang="ts" setup>
import { message } from 'ant-design-vue'
import type { Rule } from 'ant-design-vue/es/form'
import dayjs from 'dayjs'
import type { Dayjs } from 'dayjs'
import { getIndustryCategoryApi } from 'API/common'
import { submitCompanyApi, getCompanyInfoApi } from 'API/user'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const visible = defineModel('visible', { default: false })
const emit = defineEmits(['success'])
const postFormRef = ref()
const postForm = ref({
  type: '1', // 0代表个人，1代表公司
  account: '',
  firstName: '',
  lastName: '',
  areaCode: '+86',
  phone: '',
  country: undefined,
  companyName: '',
  position: '',
  dateOfIncorporation: '',
  companySize: undefined,
  businessType: '',
  applicationReason: '',
  promoteBusiness: '',
  payMethod: '0',
  paypalEmail: '',
  paypalBeneficiarysName: '',
  bankAccountName: '',
  bankAccountNumber: '',
  bankCardCode: '',
  bankName: '',
  bankAddress: '',
})
const postFormRules: Record<string, Rule[]> = {
  type: [{ required: true, message: 'Type is required', trigger: 'change' }],
  firstName: [{ required: true, message: 'First Name is required', trigger: 'change' }],
  lastName: [{ required: true, message: 'Last Name is required', trigger: 'change' }],
  areaCode: [{ required: true, message: 'Area code is required', trigger: 'change' }],
  phone: [{ required: true, message: 'Phone Number is required', trigger: 'change' }],
  country: [{ required: true, message: 'Country is required', trigger: 'change' }],
  companyName: [{ required: true, message: 'Company Name is required', trigger: 'change' }],
  companySize: [{ required: true, message: 'Company Size is required', trigger: 'change' }],
  position: [{ required: true, message: 'Position is required', trigger: 'change' }],
  dateOfIncorporation: [{ required: true, message: 'Date of Incorporation is required', trigger: 'change' }],
  payMethod: [{ required: true, message: 'Pay Method is required', trigger: 'change' }],
  businessType: [{ required: true, message: 'Business Type is required', trigger: 'change' }],
  applicationReason: [{ required: true, message: 'Application Reason is required', trigger: 'change' }],
  promoteBusiness: [{ required: true, message: 'How to promote EJET business is required', trigger: 'change' }],
  paypalEmail: [{ required: true, message: 'PayPal Email is required', trigger: 'change' }],
  paypalBeneficiarysName: [{ required: true, message: "Beneficiary's Name is required", trigger: 'change' }],
  bankAccountName: [{ required: true, message: 'Bank Account Name is required', trigger: 'change' }],
  bankAccountNumber: [{ required: true, message: 'Bank Account Number is required', trigger: 'change' }],
  bankCardCode: [{ required: true, message: 'Bank Card Code is required', trigger: 'change' }],
  bankName: [{ required: true, message: 'Bank Name is required', trigger: 'change' }],
  bankAddress: [{ required: true, message: 'Bank Address is required', trigger: 'change' }],
}
const infoType = computed(() => {
  return !!+postForm.value.type
})
const payType = computed(() => {
  return !!+postForm.value.payMethod
})
const disabledDate = (current: Dayjs) => {
  return current && current > dayjs().endOf('day')
}
const onSubmit = async () => {
  try {
    // postFormRef.value.validate().then(async () => {
    //   console.log('values', postForm.value)
    //   // const userStore = useUserStore()
    //   // userStore.register((postForm.value)).catch(() => {
    //   //   postForm.isUnlock = false
    //   // })
    // })
    emit('success')
  } catch (error) {
    console.log('error---', error)
  }
}
</script>

<template>
  <div class="p-20px">
    <div class="text-32px fw-700 text-#3d3d3d text-center">Improve Account Information</div>
    <div class="text-14px text-#999 text-center mt-10px">Improve information to ensure that commissions are received normally</div>
    <div class="mt-30px px-20px">
      <a-form ref="postFormRef" :model="postForm" :rules="postFormRules" :colon="false">
        <a-form-item class="custom-form-item" label="" name="type">
          <a-select class="w-full lh-48px" placeholder="*Type" v-model:value="postForm.type">
            <a-select-option value="0">Personal</a-select-option>
            <a-select-option value="1">Company</a-select-option>
          </a-select>
        </a-form-item>
        <div class="flex gap-20px">
          <a-form-item class="custom-form-item w-50%" label="" name="firstName">
            <a-input v-model:value="postForm.firstName" placeholder="*First Name" size="large" />
          </a-form-item>
          <a-form-item class="custom-form-item w-50%" label="" name="lastName">
            <a-input v-model:value="postForm.lastName" placeholder="*Last Name" size="large" />
          </a-form-item>
        </div>
        <a-form-item class="custom-form-item—b" label="" name="phone">
          <a-input-group compact>
            <a-select v-model:value="postForm.areaCode" class="w-30% h-48px" placeholder="*Area code">
              <a-select-option value="Zhejiang">Zhejiang</a-select-option>
              <a-select-option value="Jiangsu">Jiangsu</a-select-option>
            </a-select>
            <a-input v-model:value="postForm.phone" style="width: 70%" placeholder="*Phone Number" />
          </a-input-group>
        </a-form-item>
        <a-form-item class="custom-form-item" label="" name="country">
          <a-select class="w-full" placeholder="*Country" v-model:value="postForm.country">
            <a-select-option value="lucy">lucy</a-select-option>
          </a-select>
        </a-form-item>
        <!-- 公司 部分-->
        <a-form-item v-if="infoType" class="custom-form-item" label="" name="companyName">
          <a-input v-model:value="postForm.companyName" placeholder="*Corporate Name" size="large" />
        </a-form-item>
        <a-form-item v-if="infoType" class="custom-form-item" label="" name="position">
          <a-input v-model:value="postForm.position" placeholder="*Position" size="large" />
        </a-form-item>
        <a-form-item v-if="infoType" class="custom-form-item" label="" name="dateOfIncorporation">
          <a-date-picker v-model:value="postForm.dateOfIncorporation" :disabledDate="disabledDate" />
        </a-form-item>
        <a-form-item v-if="infoType" class="custom-form-item" label="" name="companySize">
          <a-select class="w-full" placeholder="*Company Size" v-model:value="postForm.companySize">
            <a-select-option value="lucy">公司规模</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="infoType" class="custom-form-item" label="" name="businessType">
          <a-textarea v-model:value="postForm.businessType" placeholder="*Business type" :rows="3" :showCount="true" :maxlength="100" />
        </a-form-item>
        <!-- 公司 部分-->

        <a-form-item class="custom-form-item" label="" name="applicationReason">
          <a-textarea v-model:value="postForm.applicationReason" placeholder="*Application Reason" :rows="3" :showCount="true" :maxlength="100" />
        </a-form-item>
        <a-form-item class="custom-form-item" label="" name="promoteBusiness">
          <a-textarea
            v-model:value="postForm.promoteBusiness"
            placeholder="*How to promote EJET business"
            :rows="3"
            :showCount="true"
            :maxlength="100"
          />
        </a-form-item>
        <a-form-item class="custom-form-item" label="" name="payMethod">
          <a-select class="w-full" placeholder="*Payment Method" v-model:value="postForm.payMethod">
            <a-select-option value="0">PayPal</a-select-option>
            <a-select-option value="1">Back Card</a-select-option>
          </a-select>
        </a-form-item>
        <!-- paypal ---start-->
        <a-form-item v-if="!payType" class="custom-form-item" label="" name="paypalEmail">
          <a-input v-model:value="postForm.paypalEmail" placeholder="*PayPal Email" size="large" />
        </a-form-item>
        <a-form-item v-if="!payType" class="custom-form-item !mb-10px" label="" name="paypalBeneficiarysName">
          <a-input v-model:value="postForm.paypalBeneficiarysName" placeholder="*Beneficiary's Name" size="large" />
        </a-form-item>
        <div v-if="!payType" class="flex justify-end text-12px text-#999 mb-20px">Consistent with PayPal account real name authentication</div>
        <!-- paypal --- end -->
        <!-- 银行卡 ----start-->
        <a-form-item v-if="payType" class="custom-form-item" label="" name="bankAccountName">
          <a-input v-model:value="postForm.bankAccountName" placeholder="*name of account" size="large" />
        </a-form-item>
        <a-form-item v-if="payType" class="custom-form-item" label="" name="bankAccountNumber">
          <a-input v-model:value="postForm.bankAccountNumber" placeholder="*Bank Account Number" size="large" />
        </a-form-item>
        <a-form-item v-if="payType" class="custom-form-item" label="" name="bankCardCode">
          <a-input v-model:value="postForm.bankCardCode" placeholder="*SWIFT/BIC Code" size="large" />
        </a-form-item>
        <a-form-item v-if="payType" class="custom-form-item" label="" name="bankName">
          <a-input v-model:value="postForm.bankName" placeholder="*Bank Name" size="large" />
        </a-form-item>
        <a-form-item v-if="payType" class="custom-form-item" label="" name="bankAddress">
          <a-input v-model:value="postForm.bankAddress" placeholder="*Bank Address" size="large" />
        </a-form-item>
        <!-- 银行卡 --- end -->
        <a-form-item label="">
          <a-button class="w-full !bg-#0068FF !b-rd-6px text-#fff !fw-700 !h-56px !hover:text-#fff" @click="onSubmit" size="large"
            >Submit
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<style lang="less" scoped>
::v-deep(.custom-form-item) {
  margin-bottom: 20px;
  .ant-row {
    .ant-form-item-control-input {
      input {
        border-radius: 6px;
        height: 48px;
      }
    }
    .ant-select {
      .ant-select-selector {
        border-radius: 6px;
        height: 48px;
        .ant-select-selection-placeholder {
          height: 48px;
          line-height: 48px;
        }
        .ant-select-selection-item {
          line-height: 48px;
        }
      }
    }
    textarea {
      border-radius: 6px;
    }
    .ant-picker {
      width: 100%;
      border-radius: 6px;
      height: 48px;
      .ant-picker-input {
        input {
          height: 48px;
        }
      }
    }
  }
}
::v-deep(.custom-form-item—b) {
  margin-bottom: 20px;
  .ant-row {
    .ant-form-item-control-input {
      input {
        border-radius: 0 6px 6px 0;
        height: 48px;
      }
    }
    .ant-select {
      .ant-select-selector {
        border-radius: 6px 0 0 6px;
        height: 48px;
        .ant-select-selection-placeholder {
          height: 48px;
          line-height: 48px;
        }
        .ant-select-selection-item {
          line-height: 48px;
        }
      }
    }
  }
}
</style>
