<template>
  <div class="jeepay-m-center" style="margin-top: 5px; margin-left: 20px;">
    <a-form
      ref="applyFormRef"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="applyRules"
    >
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">经营信息</a-divider>
      <a-form-item label="子商户类型" name="hmMerchantType">
        <a-radio-group v-model:value="applymentDetailInfo.hmMerchantType" @change="()=>{applymentDetailInfo.bankAccountType = ''}">
          <a-radio value="GENERAL_MERCHANT">普通商户</a-radio>
          <a-radio value="PERSONAL_MERCHANT">个人小微</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.hmMerchantType=='GENERAL_MERCHANT'" label="企业性质" name="enterpriseNature">
        <a-radio-group v-model:value="applymentDetailInfo.enterpriseNature">
          <a-radio value="STOCK_COMPANY">股份公司</a-radio>
          <a-radio value="LIMITED_COMPANY">有限公司</a-radio>
          <a-radio value="INDIVIDUAL_BUSINESS">个体工商户</a-radio>
          <a-radio value="GOVERNMENT_INSTITUTION">事业单位</a-radio>
          <a-radio value="OTHER">其他组织</a-radio>
        </a-radio-group>
      </a-form-item>
  
      <a-form-item v-if="applymentDetailInfo.hmMerchantType=='GENERAL_MERCHANT'" label="营业执照照片" name="licenseImg">
        <JeepayUpload v-model:src="applymentDetailInfo.licenseImg" bizType="applyment" ocrType="license" @ocrScan="ocrScanFunc" />
      </a-form-item>

      <a-form-item :label="applymentDetailInfo.hmMerchantType=='GENERAL_MERCHANT' ? '商户执照名称' : '子商户名称'" name="mchFullName">
        <a-input v-model:value.trim="applymentDetailInfo.mchFullName" />
      </a-form-item>
          
      <a-form-item v-if="applymentDetailInfo.hmMerchantType=='GENERAL_MERCHANT'" label="营业执照编号" name="licenseNo">
        <a-input v-model:value.trim="applymentDetailInfo.licenseNo" />
      </a-form-item>

      <a-form-item
        v-if="applymentDetailInfo.hmMerchantType=='GENERAL_MERCHANT' && 
          (applymentDetailInfo.enterpriseNature=='STOCK_COMPANY' || applymentDetailInfo.enterpriseNature=='LIMITED_COMPANY' || applymentDetailInfo.enterpriseNature=='INDIVIDUAL_BUSINESS')" 
        label="工商网截图"
        name="icNetScreenShot"
      >
        <JeepayUpload v-model:src="applymentDetailInfo.icNetScreenShot" bizType="applyment" />
      </a-form-item>
  
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">商户信息</a-divider>

      <a-form-item label="商户地理位置选择省市县" name="areaCode">
        <JeepayAreaSelect v-model:value="applymentDetailInfo.areaCode" />
      </a-form-item>

      <a-form-item label="商户详细地址" name="address">
        <a-input v-model:value.trim="applymentDetailInfo.address" />
      </a-form-item>

      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">法人信息</a-divider>

      <a-form-item label="法人身份证人像面照片" name="idcard1Img">
        <JeepayUpload v-model:src="applymentDetailInfo.idcard1Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanFunc" />
      </a-form-item>

      <a-form-item label="法人身份证国徽面照片" name="idcard2Img">
        <JeepayUpload v-model:src="applymentDetailInfo.idcard2Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanFunc" />
      </a-form-item>

      <a-form-item label="法人姓名" name="idcardName">
        <a-input v-model:value.trim="applymentDetailInfo.idcardName" />
      </a-form-item>
      
      <a-form-item label="法人证件号" name="idcardNo">
        <a-input v-model:value.trim="applymentDetailInfo.idcardNo" />
      </a-form-item>

      <a-form-item label="联系电话" name="contactPhone">
        <a-input v-model:value.trim="applymentDetailInfo.contactPhone" />
      </a-form-item>

      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">银行账户信息</a-divider>

      <a-form-item label="银行账户类型" name="bankAccountType">
        <a-radio-group v-model:value="applymentDetailInfo.bankAccountType">
          <a-radio value="PUBLIC_ACCOUNT" :disabled="applymentDetailInfo.hmMerchantType == 'PERSONAL_MERCHANT'">对公帐户</a-radio>
          <a-radio value="PRIVATE_DEBIT_ACCOUNT" :checked="true">对私借记卡</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="银行开户名" name="settAccountName">
        <a-input v-model:value.trim="applymentDetailInfo.settAccountName" />
      </a-form-item>

      <a-form-item label="银行卡卡号" name="settAccountNo">
        <a-input v-model:value.trim="applymentDetailInfo.settAccountNo" />
      </a-form-item>
      
      <a-form-item label="银行联行号" name="bankChannelNo">
        <a-input v-model:value.trim="applymentDetailInfo.bankChannelNo" />
        <span><a href="https://www.icvio.cn/" target="_blank">联行号查询</a></span>
      </a-form-item>

      <a-form-item label="银行预留手机号" name="bankAccountPhone">
        <a-input v-model:value.trim="applymentDetailInfo.bankAccountPhone" />
      </a-form-item>

      <a-form-item label="分账计费模式" name="feeType">
        <a-radio-group v-model:value="applymentDetailInfo.feeType">
          <a-radio value="1">主账户计费模式(默认)</a-radio>
          <a-radio value="2">子账户计费模式</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">其他补充材料</a-divider>
      <a-form-item label="补充材料1" name="otherPicUrl1">
        <JeepayUpload v-model:src="applymentDetailInfo.otherPicUrl1" bizType="applyment" />
      </a-form-item>
      <a-form-item label="补充材料2" name="otherPicUrl2">
        <JeepayUpload v-model:src="applymentDetailInfo.otherPicUrl2" bizType="applyment" />
      </a-form-item>
      <a-form-item label="补充材料3" name="otherPicUrl3">
        <JeepayUpload v-model:src="applymentDetailInfo.otherPicUrl3" bizType="applyment" />
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup lang="ts">

import {ref, reactive, defineEmits, defineExpose, inject, getCurrentInstance} from 'vue'
import ruleGenerator from '@/utils/ruleGenerator'


// 获取当前实例的代理对象
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

// 接收父组件的进件详细参数
let applymentDetailInfoInject : any = inject('applymentDetailInfo')
let applymentDetailInfo : any = applymentDetailInfoInject.value

if(!applymentDetailInfo.hmMerchantType) {
  applymentDetailInfo.hmMerchantType = 'GENERAL_MERCHANT'
}

if(!applymentDetailInfo.feeType) {
  applymentDetailInfo.feeType = '1'
}

const vdata : any = reactive({
  hideItem : []
})


// 表单实例
const applyFormRef = ref()
// 表单验证规则
const applyRules = {
                    hmMerchantType: [ ruleGenerator.requiredSelect('商户类型', 'string') ],
                    enterpriseNature: [ ruleGenerator.requiredSelect('企业性质', 'string') ],
                    licenseImg: [ ruleGenerator.requiredUpload('营业执照照片') ],
                    mchFullName: [ ruleGenerator.requiredInput('名称') ],
                    licenseNo: [ ruleGenerator.requiredInput('营业执照编号') ],
                    icNetScreenShot: [ ruleGenerator.requiredUpload('工商网截图') ],

                    areaCode: [ ruleGenerator.requiredInput('省市县', 'array') ],
                    address: [ ruleGenerator.requiredInput('详细地址') ],

                    idcard1Img: [ ruleGenerator.requiredUpload('法人身份证人像面照片') ],
                    idcard2Img: [ ruleGenerator.requiredUpload('法人身份证国徽面照片') ],
                    idcardName: [ ruleGenerator.requiredInput('法人姓名') ],
                    idcardNo: [ ruleGenerator.requiredInput('法人证件号') ],
                    contactPhone: [ ruleGenerator.requiredInput('联系电话'), ruleGenerator.mobile ],

                    bankAccountType: [ ruleGenerator.requiredSelect('银行账户类型', 'string') ],
                    settAccountName: [ ruleGenerator.requiredInput('银行开户名') ],
                    settAccountNo: [ ruleGenerator.requiredInput('银行卡卡号') ],
                    bankChannelNo: [ ruleGenerator.requiredInput('银行联行号') ],
                    bankAccountPhone: [ ruleGenerator.requiredInput('银行预留手机号') ],
                    feeType: [ ruleGenerator.requiredSelect('分账计费模式', 'string') ]
                  }
// emit： 向父组件进行通讯。 
const emit = defineEmits(['itemRender'])

// 验证所有的规则 & 提交进件资料
function saveDataPreCallback(isTempData){
    // 转换商户类型
    convertMerchentType()

    // 草稿状态直接提交 
    if(isTempData){
      return Promise.resolve()
    }

    // 验证所有表单
    return applyFormRef.value.validate().then(() => {
      return Promise.resolve()
    }).catch((params) => {
      $infoBox.message.error('数据填写不完整， 请检查后提交')
      return Promise.reject()
    })

}

// 图片识别的回调函数
function ocrScanFunc(orcObject){
  if(orcObject){
    Object.assign(applymentDetailInfo, orcObject)
    if(orcObject.idcardSex) {
      applymentDetailInfo.idcardSex = orcObject.idcardSex
    }
    if(orcObject.idcardAddress) {
      applymentDetailInfo.idcardAddress = orcObject.idcardAddress
    }
  }
}

// 转换商户类型
function convertMerchentType() {
  applymentDetailInfo.merchantType = 5
  if(!applymentDetailInfo.hmMerchantType){
    return
  }

  if (applymentDetailInfo.hmMerchantType == 'PERSONAL_MERCHANT') {
    // 个人小微 
    applymentDetailInfo.merchantType = 1
  } else {
    if (!applymentDetailInfo.enterpriseNature) {
      return
    }
    // 股份和有限公司
    if (applymentDetailInfo.enterpriseNature == 'STOCK_COMPANY' || applymentDetailInfo.enterpriseNature == 'LIMITED_COMPANY') {
      applymentDetailInfo.merchantType = 3
    // 个体工商户
    } else if (applymentDetailInfo.enterpriseNature == 'INDIVIDUAL_BUSINESS') {
      applymentDetailInfo.merchantType = 2
    // 事业单位
    } else if (applymentDetailInfo.enterpriseNature == 'GOVERNMENT_INSTITUTION') {
      applymentDetailInfo.merchantType = 4
    // 其他组织
    } else {
      applymentDetailInfo.merchantType = 5
    }
  }
}

defineExpose({ saveDataPreCallback })

</script>

