<!-- 选择商户以及进件渠道 -->
<template>
  <div class="gyq_container">
    <div class="gyq_content" ref="containerRef">
      <div class="row">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="250px" label-position="right">
          <el-form-item label="选择商户类型" prop="merchantBaseInfo.userType">
            <el-radio-group v-model="form.merchantBaseInfo.userType">
              <el-radio label="个体商户" value="0"></el-radio>
              <el-radio label="企业商户" value="1"></el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="title_row">
            <div class="t">
              <el-text size="large" type="primary">商户基础信息</el-text>
            </div>
          </div>
          <el-form-item label="企业类型" v-if="form.merchantBaseInfo.userType == '1'">
            <el-radio-group v-model="form.merchantBaseInfo.companyChildType">
              <el-radio label="普通企业" value="1"></el-radio>
              <el-radio label="事业单位" value="2"></el-radio>
              <el-radio label="政府机关" value="3"></el-radio>
              <el-radio label="社会组织" value="4"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="商户简称" prop="merchantBaseInfo.shortName">
            <el-input v-model.trim="form.merchantBaseInfo.shortName" placeholder="请输入商户简称"
              style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="行业类别码" prop="merchantBaseInfo.mccCode">
            <selectCategory v-model="form.merchantBaseInfo.mccCode" />
          </el-form-item>
          <el-form-item label="支付宝账号" prop="merchantBaseInfo.alipayAccount">
            <el-input v-model.trim="form.merchantBaseInfo.alipayAccount" placeholder="请输入支付宝账号"
              style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="联系人类型">
            <el-radio-group v-model="form.merchantBaseInfo.contactPersonType">
              <el-radio label="经营者/法定代表人" :value="'LEGAL'"></el-radio>
              <el-radio label="经办人" :value="'SUPER'"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="证件类型">
            <el-radio-group v-model="form.merchantBaseInfo.certType">
              <el-radio label="身份证" value="0"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="联系人身份证号" prop="merchantBaseInfo.contactPersonId">
            <el-input v-model.trim="form.merchantBaseInfo.contactPersonId" placeholder="请输入联系人身份证号"
              style="width: 300px;" v-loading="contactIdCardFrontPicUploadLoading"></el-input>
          </el-form-item>
          <el-form-item label="联系人证件有效期开始日期" prop="merchantBaseInfo.contactPersonIdStartDate"
            v-loading="contactIdCardBackPicUploadLoading">
            <el-date-picker v-model="form.merchantBaseInfo.contactPersonIdStartDate" type="date" placeholder="选择日期"
              value-format="YYYY-MM-DD" style="width: 300px;" />
          </el-form-item>
          <el-form-item label="联系人证件有效期结束日期" prop="merchantBaseInfo.contactPersonIdEndDate"
            v-loading="contactIdCardBackPicUploadLoading">
            <div class="center">
              <el-date-picker v-model="form.merchantBaseInfo.contactPersonIdEndDate" type="date" placeholder="选择日期"
                value-format="YYYY-MM-DD" style="width: 300px;" />
              <el-checkbox
                @change="e => e ? form.merchantBaseInfo.contactPersonIdEndDate = longTime : form.merchantBaseInfo.contactPersonIdEndDate = ''">长期有效</el-checkbox>
            </div>
          </el-form-item>
          <el-form-item label="联系人身份证正面照片" prop="merchantBaseInfo.contactIdCardFrontPic.url">
            <div class="column">
              <single-image-upload :maxFileSize="2" v-model="form.merchantBaseInfo.contactIdCardFrontPic.url"
                @on-success="contactIdCardFrontPicUpload" />
              <div class="tips">国徽面为正面 (上传图片自动识别 有效期)</div>
            </div>
          </el-form-item>
          <el-form-item label="联系人身份证反面照片" prop="merchantBaseInfo.contactIdCardBackPic.url">
            <div class="column">
              <single-image-upload :maxFileSize="2" v-model="form.merchantBaseInfo.contactIdCardBackPic.url"
                @on-success="contactIdCardBackPicUpload" />
              <div class="tips">人像面为反面 (上传图片自动识别 身份证名称 身份证号)</div>
            </div>
          </el-form-item>
          <el-form-item label="联系人手机号" prop="merchantBaseInfo.contactPhone">
            <el-input v-model.trim="form.merchantBaseInfo.contactPhone" placeholder="请输入联系人手机号"
              style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="联系人地址" prop="merchantBaseInfo.contactAddr">
            <el-input v-model.trim="form.merchantBaseInfo.contactAddr" placeholder="请输入联系人地址"
              style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="联系人电子邮箱" prop="merchantBaseInfo.contactEmail">
            <el-input v-model.trim="form.merchantBaseInfo.contactEmail" placeholder="请输入联系人电子邮箱"
              style="width: 300px;"></el-input>
          </el-form-item>
          <div class="title_row">
            <div class="t">
              <el-text size="large" type="primary">法人信息</el-text>
            </div>
          </div>
          <el-form-item label="身份证手持图片" prop="legalPersonInfo.idCardHandPic.url">
            <single-image-upload :maxFileSize="2" v-model="form.legalPersonInfo.idCardHandPic.url" />
          </el-form-item>
          <el-form-item label="身份证正面图片" prop="legalPersonInfo.idCardFrontPic.url">
            <div class="column">
              <single-image-upload :maxFileSize="2" v-model="form.legalPersonInfo.idCardFrontPic.url"
                @on-success="idCardFrontPicSuccess" />
              <div class="tips">国徽面为正面 (上传图片自动识别 有效期)</div>
            </div>
          </el-form-item>
          <el-form-item label="身份证反面图片" prop="legalPersonInfo.idCardBackPic.url">
            <div class="column">
              <single-image-upload :maxFileSize="2" v-model="form.legalPersonInfo.idCardBackPic.url"
                @on-success="idCardBackPicSuccess" />
              <div class="tips">人像面为反面 (上传图片自动识别 身份证名称 身份证号)</div>
            </div>
          </el-form-item>
          <el-form-item label="法定代表人姓名" prop="legalPersonInfo.legalPersonName" v-loading="idCardFrontPicSuccessLoading">
            <el-input v-model.trim="form.legalPersonInfo.legalPersonName" placeholder="请输入法定代表人姓名"
              style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="法定代表人身份证号" prop="legalPersonInfo.legalPersonId" v-loading="idCardFrontPicSuccessLoading">
            <el-input v-model.trim="form.legalPersonInfo.legalPersonId" placeholder="请输入法定代表人身份证号"
              style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="法定代表人身份证开始日期" prop="legalPersonInfo.legalIdPersonStartDate"
            v-loading="idCardBackPicSuccessLoading">
            <el-date-picker v-model="form.legalPersonInfo.legalIdPersonStartDate" type="date" placeholder="选择日期"
              value-format="YYYY-MM-DD" style="width: 300px;" />
          </el-form-item>
          <el-form-item label="法定代表人身份证结束日期" prop="legalPersonInfo.legalPersonIdEndDate"
            v-loading="idCardBackPicSuccessLoading">
            <div class="center">
              <el-date-picker v-model="form.legalPersonInfo.legalPersonIdEndDate" type="date" placeholder="选择日期"
                value-format="YYYY-MM-DD" style="width: 300px;" />
              <el-checkbox
                @change="e => e ? form.legalPersonInfo.legalPersonIdEndDate = longTime : form.legalPersonInfo.legalPersonIdEndDate = ''">长期有效</el-checkbox>
            </div>
          </el-form-item>
          <el-form-item label="法定代表人手机号" prop="legalPersonInfo.legalPersonPhone">
            <el-input v-model.trim="form.legalPersonInfo.legalPersonPhone" placeholder="请输入法定代表人手机号"
              style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="法定代表人电子邮箱" prop="legalPersonInfo.legalPersonEmail">
            <el-input v-model.trim="form.legalPersonInfo.legalPersonEmail" placeholder="请输入法定代表人电子邮箱"
              style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="法定代表人性别" prop="legalPersonInfo.legalGender">
            <el-radio-group v-model="form.legalPersonInfo.legalGender">
              <el-radio label="男" :value="'0'"></el-radio>
              <el-radio label="女" :value="'1'"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="法定代表人联系地址" prop="legalPersonInfo.legalAddress">
            <el-input v-model.trim="form.legalPersonInfo.legalAddress" placeholder="请输入法定代表人联系地址"
              style="width: 300px;"></el-input>
          </el-form-item>
          <div class="title_row">
            <div class="t">
              <el-text size="large" type="primary">营业执照信息</el-text>
            </div>
          </div>
          <el-form-item label="营业执照全称" prop="businessLicenceInfo.licenceName">
            <el-input v-model.trim="form.businessLicenceInfo.licenceName" placeholder="请输入营业执照全称"
              style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="营业执照注册号" prop="businessLicenceInfo.licenceNo" v-loading="licensePicSuccessLoading">
            <el-input v-model.trim="form.businessLicenceInfo.licenceNo" placeholder="请输入营业执照注册号"
              style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="营业执照有效期开始日期" prop="businessLicenceInfo.licenceStartDate">
            <el-date-picker v-model="form.businessLicenceInfo.licenceStartDate" type="date" placeholder="选择日期"
              value-format="YYYY-MM-DD" style="width: 300px;" />
          </el-form-item>
          <el-form-item label="营业执照有效期结束日期" prop="businessLicenceInfo.licenceEndDate">
            <div class="center">
              <el-date-picker v-model="form.businessLicenceInfo.licenceEndDate" type="date" placeholder="选择日期"
                value-format="YYYY-MM-DD" style="width: 300px;" />
              <el-checkbox
                @change="e => e ? form.businessLicenceInfo.licenceEndDate = longTime : form.businessLicenceInfo.licenceEndDate = ''">长期有效</el-checkbox>
            </div>
          </el-form-item>
          <el-form-item label="注册地址" prop="businessLicenceInfo.registeredAddress">
            <el-input v-model.trim="form.businessLicenceInfo.registeredAddress" placeholder="请输入注册地址"
              style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="营业执照照片" prop="businessLicenceInfo.licensePic.url">
            <div class="column">
              <single-image-upload :maxFileSize="2" v-model="form.businessLicenceInfo.licensePic.url"
                @on-success="licensePicSuccess" />
              <div class="tips">(上传图片自动识别 营业执照编号)</div>
            </div>
          </el-form-item>
          <div class="title_row">
            <div class="t">
              <el-text size="large" type="primary">门店信息</el-text>
            </div>
          </div>
          <el-form-item label="商户归属省市区" prop="storeInfo.mercProvCode">
            <selectAddress v-model:provCode="form.storeInfo.mercProvCode" v-model:cityCode="form.storeInfo.mercCityCode"
              v-model:areaCode="form.storeInfo.mercAreaCode" v-model:prov="form.storeInfo.mercProv"
              v-model:city="form.storeInfo.mercCity" v-model:area="form.storeInfo.mercArea" />
          </el-form-item>
          <el-form-item label="营业地址" prop="storeInfo.businessAddress">
            <el-input v-model.trim="form.storeInfo.businessAddress" placeholder="请输入营业地址"
              style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="经营场所内设照片" prop="storeInfo.insidePic.url">
            <single-image-upload :maxFileSize="2" v-model="form.storeInfo.insidePic.url" />
          </el-form-item>
          <el-form-item label="门头照" prop="storeInfo.doorPic.url">
            <single-image-upload :maxFileSize="2" v-model="form.storeInfo.doorPic.url" />
          </el-form-item>
          <el-form-item label="收银台照" prop="storeInfo.cashierDeskPic.url">
            <single-image-upload :maxFileSize="2" v-model="form.storeInfo.cashierDeskPic.url" />
          </el-form-item>
          <div class="title_row">
            <div class="t">
              <el-text size="large" type="primary">结算信息</el-text>
            </div>
          </div>
          <el-form-item label="结算类型" prop="settlementInfo.settlementType">
            <el-radio-group v-model="form.settlementInfo.settlementType">
              <el-radio label="非法人结算" value="0" disabled></el-radio>
              <el-radio label="法人结算" value="1"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="结算卡类型" prop="settlementInfo.settlementCardType">
            <el-radio-group v-model="form.settlementInfo.settlementCardType">
              <el-radio label="对私借记卡" :value="'11'"></el-radio>
              <el-radio label="对公借记卡" :value="'21'"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="结算卡号" prop="settlementInfo.settlementCardNo">
            <el-input v-model.trim="form.settlementInfo.settlementCardNo" placeholder="请输入结算卡号"
              style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="开户名称" prop="settlementInfo.settlementName" v-loading="bankCardFrontPicSuccessLoading">
            <el-input v-model.trim="form.settlementInfo.settlementName" placeholder="请输入开户名称"
              style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="结算银行预留手机号" prop="settlementInfo.bankMobile">
            <el-input v-model.trim="form.settlementInfo.bankMobile" placeholder="请输入结算银行预留手机号"
              style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="开户行省市区" prop="settlementInfo.openAccProvinceId">
            <selectAddress v-model:wxProvinceCode="wxProvinceCode"
              v-model:provCode="form.settlementInfo.openAccProvinceId"
              v-model:cityCode="form.settlementInfo.openAccCityId" v-model:areaCode="form.settlementInfo.openAccAreaId"
              v-model:prov="form.settlementInfo.openAccProvince" v-model:city="form.settlementInfo.openAccCity"
              v-model:area="form.settlementInfo.openAccArea" />
          </el-form-item>
          <el-form-item label="开户行" prop="settlementInfo.bankInstId">
            <selectBank :province="form.settlementInfo.openAccProvince" :city="form.settlementInfo.openAccCity"
              :city-code="wxProvinceCode" v-model:bankInstId="form.settlementInfo.bankInstId"
              v-model:bankName="form.settlementInfo.bankName"
              v-model:bank-branch-code="form.settlementInfo.bankBranchCode"
              v-model:bank-branch-name="form.settlementInfo.bankBranchName" />
          </el-form-item>
          <el-form-item label="银行卡正面" prop="settlementInfo.bankCardFrontPic.url">
            <div class="column">
              <SingleImageUpload :maxFileSize="2" v-model="form.settlementInfo.bankCardFrontPic.url"
                @on-success="bankCardFrontPicSuccess" />
              <div class="tips">(上传图片自动识别 银行卡号)</div>
            </div>
          </el-form-item>
          <el-form-item label="银行卡反面" prop="settlementInfo.bankCardBackPic.url">
            <SingleImageUpload :maxFileSize="2" v-model="form.settlementInfo.bankCardBackPic.url" />
          </el-form-item>
          <el-form-item label="开户许可证" prop="settlementInfo.openAccountLicencePic.url">
            <SingleImageUpload :maxFileSize="2" v-model="form.settlementInfo.openAccountLicencePic.url" />
          </el-form-item>
        </el-form>
      </div>
      <div class="btn_wrap" :style="{ width: `${containerDomInfo.width}px`, left: `${containerDomInfo.left}px` }"
        v-if="formType != 'check'">
        <div class="btn_content">
          <div class="btn">
            <el-button type="primary" size="large" style="width: 100%;" :loading="loading"
              @click="submitForm">提交</el-button>
          </div>
          <div class="btn">
            <el-button style="width: 100%;" size="large" @click="router.back()">取消</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from "vue";
import selectAddress from "./components/selectAddress.vue";
import selectBank from "./components/selectBank.vue";
import selectCategory from "./components/selectCategory.vue";
import SingleImageUpload from "@/components/Upload/SingleImageUpload.vue";
import { entryManagerPost, getInfoByImg, entryManagerDetail } from '@/api/common'
import _ from 'lodash'
import dayjs from "dayjs";
import { isValidMobile } from "@/utils";
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const containerRef = ref<any>(null)

const containerDomInfo = ref({
  left: 0,
  width: 0
})

const longTime = ref('2099-12-31')

const wxProvinceCode = ref('')

// 获取进件详情
async function getDetailAjax(shopId: string) {
  try {
    const res: any = await entryManagerDetail({
      shopId: shopId
    })
    if (res && res.shopId) {
      form.value = res
    }
  } catch (error) {
    console.log(error);
  }
}

// 获取containerDomInfo信息
function getContainerDomInfo() {
  containerDomInfo.value = containerRef.value?.getBoundingClientRect() ?? {}
}

const debouncedCheckWidth = _.debounce(getContainerDomInfo, 100)

onMounted(() => {
  getContainerDomInfo()
  window.addEventListener('resize', debouncedCheckWidth)

  const type = route.query.type
  const shopId: string = String(route.query.shopId ?? '')
  const licenceNo: string = String(route.query.licenceNo ?? '')

  if (shopId) {
    getDetailAjax(shopId)
  }

  if (licenceNo && type && type == 'editor') {
    formType.value = 'editor'
  }

  if (type && type == 'check') {
    formType.value = 'check'
  }
})

onUnmounted(() => {
  window.removeEventListener('resize', debouncedCheckWidth)
})

// 表单操作类型 add添加 editor编辑 check查看
const formType = ref('add')
const formRef = ref<any>(null);
const form = ref({
  shopId: route.query.shopId,
  merchantCode: '',
  // 【必填】商户基础信息
  merchantBaseInfo: {
    userType: '0', // 0: 个体商户;1: 企业商户;3: 小微商户 暂不支持
    shortName: '', // 商户简称--企业、个体必填
    mccCode: '', // 行业类别码--必填
    alipayAccount: '', // 【必填】支付宝账号
    contactPersonType: 'LEGAL', // 联系人类型 LEGAL: 经营者/法定代表人 SUPER: 经办人 默认LEGAL
    contactName: '', // 联系人姓名
    certType: '0', // 证件类型 目前只支持身份证 传值：0
    contactPersonId: '', // 联系人身份证号
    contactPersonIdStartDate: '', // 联系人证件有效期开始日期
    contactPersonIdEndDate: '', // 联系人证件有效期结束日期
    // 联系人身份证反面照片
    contactIdCardBackPic: {
      url: '',
      wechatId: '', // 微信图片ID
      alipayId: '', // 支付宝图片ID
    },
    // 联系人身份证正面照片
    contactIdCardFrontPic: {
      url: '',
      wechatId: '', // 微信图片ID
      alipayId: '', // 支付宝图片ID
    },
    contactPhone: '', // 联系人手机号
    contactAddr: '', // 联系人地址
    contactEmail: '', // 联系人电子邮箱
    companyChildType: '1', // 企业类型，1：普通企业，2：事业单位，3：政府机关，4：社会组织  默认值:1
  },
  // 【必填】法人信息
  legalPersonInfo: {
    legalPersonName: '', // 法定代表人姓名
    legalPersonId: '', // 法定代表人身份证号
    legalIdPersonStartDate: '', // 法定代表人证件有效期开始日期
    legalPersonIdEndDate: '', // 法定代表人证件有效期结束日期
    legalPersonPhone: '', // 法定代表人手机号
    legalPersonEmail: '', // 法定代表人电子邮箱
    legalGender: '', // 法人性别（0男 1女）
    legalAddress: '', // 法人联系地址
    // 身份证手持 图片
    idCardHandPic: {
      url: '',
      wechatId: '', // 微信图片ID
      alipayId: '', // 支付宝图片ID
    },
    // 身份证正面 图片
    idCardFrontPic: {
      url: '',
      wechatId: '', // 微信图片ID
      alipayId: '', // 支付宝图片ID
    },
    // 身份证反面 图片
    idCardBackPic: {
      url: '',
      wechatId: '', // 微信图片ID
      alipayId: '', // 支付宝图片ID
    },
  },
  // 【必填】营业执照信息
  businessLicenceInfo: {
    licenceName: '', // 营业执照全称--非小微必填
    licenceNo: '', // 营业执照注册号--非小微必填
    licenceStartDate: '', // 营业执照有效期开始日期--非小微必填
    licenceEndDate: '', // 营业执照有效期结束日期--非小微必填
    registeredAddress: '', // 注册地址--非小微必填
    licensePic: {
      url: '',
      wechatId: '', // 微信图片ID
      alipayId: '', // 支付宝图片ID
    },
  },
  // 【必填】门店信息
  storeInfo: {
    mercProvCode: '', // 【必填】商户归属省Code
    mercCityCode: '', // 【必填】商户归属市Code
    mercAreaCode: '', // 【必填】商户归属区Code
    mercProv: '', // 商户归属省
    mercCity: '', // 商户归属市
    mercArea: '', // 商户归属区
    businessAddress: '', // 【必填】 营业地址
    // 经营场所内设照片
    insidePic: {
      url: '',
      wechatId: '', // 微信图片ID
      alipayId: '', // 支付宝图片ID
    },
    // 门头照
    doorPic: {
      url: '',
      wechatId: '', // 微信图片ID
      alipayId: '', // 支付宝图片ID
    },
    // 收银台照
    cashierDeskPic: {
      url: '',
      wechatId: '', // 微信图片ID
      alipayId: '', // 支付宝图片ID
    },
  },
  // 【必填】结算信息
  settlementInfo: {
    settlementType: '1', // 结算类型 0:非法人结算, 1:法人结算
    noLegalName: '', // 非法人姓名
    noLegalId: '', // 非法人身份证号
    settlementCardType: '', // 结算卡类型 必填 11 对私借记卡（结算卡正面照、结算卡反面照图片必传） 21 对公借记卡（只须结算卡正面照片）
    settlementCardNo: '', // 结算卡号
    settlementName: '', // 开户名称
    bankMobile: '', // 结算银行预留手机号
    openAccProvinceId: '', // 开户行省ID
    openAccCityId: '', // 开户行市ID
    openAccAreaId: '', // 开户行区ID
    openAccProvince: '', // 开户行省
    openAccCity: '', // 开户行市
    openAccArea: '', // 开户行区
    bankName: '', // 开户行别名名称 bankAlias
    bankInstId: '', // 开户行缩写 bankCode
    bankType: '', // 开户行编号 bankAliasCode
    bankBranchName: '', // 支行开户行行别名称 branchName
    bankBranchCode: '', // 支行开户行编号 bankCode
    // 银行卡正面
    bankCardFrontPic: {
      url: '',
      wechatId: '', // 微信图片ID
      alipayId: '', // 支付宝图片ID
    },
    // 银行卡反面
    bankCardBackPic: {
      url: '',
      wechatId: '', // 微信图片ID
      alipayId: '', // 支付宝图片ID
    },
    // 开户许可证
    openAccountLicencePic: {
      url: '',
      wechatId: '', // 微信图片ID
      alipayId: '', // 支付宝图片ID
    },
    // 非法人手持结算授权书
    noLegalHandSettleAuthPic: {
      url: '',
      wechatId: '', // 微信图片ID
      alipayId: '', // 支付宝图片ID
    },
    // 非法人结算授权书
    noLegalSettleAuthPic: {
      url: '',
      wechatId: '', // 微信图片ID
      alipayId: '', // 支付宝图片ID
    },
    // 非法人身份证正面
    noLegalIdCardFrontPic: {
      url: '',
      wechatId: '', // 微信图片ID
      alipayId: '', // 支付宝图片ID
    },
    // 非法人身份证反面
    noLegalIdCardBackPic: {
      url: '',
      wechatId: '', // 微信图片ID
      alipayId: '', // 支付宝图片ID
    },
  }
});


const rules = reactive({
  'merchantBaseInfo.userType': [{ required: true, message: '请选择商户类型', trigger: 'change' }],
  'merchantBaseInfo.shortName': [{ required: true, message: '请输入商户简称', trigger: 'blur' }],
  'merchantBaseInfo.mccCode': [{ required: true, message: '请输入行业类别码', trigger: 'change' }],
  'merchantBaseInfo.alipayAccount': [{ required: true, message: '请输入支付宝账号', trigger: 'blur' }],
  'merchantBaseInfo.contactPersonId': [{ required: true, message: '请输入联系人身份证号', trigger: 'blur' }],
  'merchantBaseInfo.contactPersonIdStartDate': [{ required: true, message: '请选择联系人证件有效期开始日期', trigger: 'change' }],
  'merchantBaseInfo.contactPersonIdEndDate': [{ required: true, message: '请选择联系人证件有效期结束日期', trigger: 'change' }],
  'merchantBaseInfo.contactIdCardFrontPic.url': [{ required: true, message: '请上传联系人身份证正面照片', trigger: 'blur' }],
  'merchantBaseInfo.contactIdCardBackPic.url': [{ required: true, message: '请上传联系人身份证反面照片', trigger: 'blur' }],
  'merchantBaseInfo.contactPhone': [
    { required: true, message: '请输入联系人手机号', trigger: 'blur' },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (!isValidMobile(value)) {
          callback(new Error('请输入正确的手机号'))
        } else {
          callback()
        }
      }
    }
  ],
  'merchantBaseInfo.contactAddr': [{ required: true, message: '请输入联系人地址', trigger: 'blur' }],
  'merchantBaseInfo.contactEmail': [{ required: true, message: '请输入联系人电子邮箱', trigger: 'blur' }],
  'legalPersonInfo.idCardHandPic.url': [{ required: true, message: '请上传身份证手持图片', trigger: 'blur' }],
  'legalPersonInfo.idCardFrontPic.url': [{ required: true, message: '请上传身份证正面图片', trigger: 'blur' }],
  'legalPersonInfo.idCardBackPic.url': [{ required: true, message: '请上传身份证反面图片', trigger: 'blur' }],
  'legalPersonInfo.legalPersonName': [{ required: true, message: '请输入法定代表人姓名', trigger: 'blur' }],
  'legalPersonInfo.legalPersonId': [{ required: true, message: '请输入法定代表人身份证号', trigger: 'blur' }],
  'legalPersonInfo.legalIdPersonStartDate': [{ required: true, message: '请输入法定代表人身份证开始日期', trigger: 'blur' }],
  'legalPersonInfo.legalPersonIdEndDate': [{ required: true, message: '请输入法定代表人身份证结束日期', trigger: 'blur' }],
  'legalPersonInfo.legalPersonPhone': [
    { required: true, message: '请输入法定代表人手机号', trigger: 'blur' },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (!isValidMobile(value)) {
          callback(new Error('请输入正确的手机号'))
        } else {
          callback()
        }
      }
    }
  ],
  'legalPersonInfo.legalPersonEmail': [{ required: true, message: '请输入法定代表人电子邮箱', trigger: 'blur' }],
  'legalPersonInfo.legalGender': [{ required: true, message: '请选择法定代表人性别', trigger: 'change' }],
  'legalPersonInfo.legalAddress': [{ required: true, message: '请输入法定代表人联系地址', trigger: 'blur' }],
  // 营业执照信息
  'businessLicenceInfo.licenceName': [{ required: true, message: '请输入营业执照全称', trigger: 'blur' }],
  'businessLicenceInfo.licenceNo': [{ required: true, message: '请输入营业执照注册号', trigger: 'blur' }],
  'businessLicenceInfo.licenceStartDate': [{ required: true, message: '请输入营业执照有效期开始日期', trigger: 'blur' }],
  'businessLicenceInfo.licenceEndDate': [{ required: true, message: '请输入营业执照有效期结束日期', trigger: 'blur' }],
  'businessLicenceInfo.registeredAddress': [{ required: true, message: '请输入注册地址', trigger: 'blur' }],
  'businessLicenceInfo.licensePic.url': [{ required: true, message: '请上传营业执照照片', trigger: 'blur' }],
  // 门店信息
  'storeInfo.mercProvCode': [{ required: true, message: '请选择商户归属省市区', trigger: 'change' }],
  'storeInfo.mercCityCode': [{ required: true, message: '请选择商户归属市', trigger: 'change' }],
  'storeInfo.mercAreaCode': [{ required: true, message: '请选择商户归属区', trigger: 'change' }],
  'storeInfo.businessAddress': [{ required: true, message: '请输入营业地址', trigger: 'blur' }],
  'storeInfo.insidePic.url': [{ required: true, message: '请上传经营场所内设照片', trigger: 'blur' }],
  'storeInfo.doorPic.url': [{ required: true, message: '请上传门头照', trigger: 'blur' }],
  'storeInfo.cashierDeskPic.url': [{ required: true, message: '请上传收银台照', trigger: 'blur' }],
  // 结算信息
  'settlementInfo.settlementType': [{ required: true, message: '请选择结算类型', trigger: 'change' }],
  'settlementInfo.settlementCardType': [{ required: true, message: '请选择结算卡类型', trigger: 'change' }],
  'settlementInfo.settlementCardNo': [{ required: true, message: '请输入结算卡号', trigger: 'blur' }],
  'settlementInfo.settlementName': [{ required: true, message: '请输入开户名称', trigger: 'blur' }],
  'settlementInfo.bankMobile': [
    { required: true, message: '请输入结算银行预留手机号', trigger: 'blur' },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (!isValidMobile(value)) {
          callback(new Error('请输入正确的手机号'))
        } else {
          callback()
        }
      }
    }
  ],
  'settlementInfo.openAccProvinceId': [
    {
      required: true,
      validator: (rule: any, value: any, callback: any) => {
        if (form.value.settlementInfo.openAccProvinceId == '' || form.value.settlementInfo.openAccCityId == '' || form.value.settlementInfo.openAccAreaId == '') {
          callback(new Error('请选择开户行省市区'))
        } else {
          callback()
        }
      },
      trigger: 'change'
    }
  ],
  'settlementInfo.bankInstId': [
    {
      required: true,
      validator: (rule: any, value: any, callback: any) => {
        if (form.value.settlementInfo.bankInstId == '') {
          callback(new Error('请选择开户行以及支行'))
        } else {
          callback()
        }
      },
      trigger: 'change'
    }
  ],
  'settlementInfo.bankCardFrontPic.url': [
    {
      required: true,
      message: '请上传银行卡正面图片',
      trigger: 'blur'
    }
  ],
  'settlementInfo.bankCardBackPic.url': [
    {
      required: true,
      message: '请上传银行卡反面图片',
      trigger: 'blur'
    }
  ],
  'settlementInfo.openAccountLicencePic.url': [
    {
      required: true,
      message: '请上传开户许可证图片',
      trigger: 'blur'
    }
  ]
})

// 联系人身份证正面照片
const contactIdCardFrontPicUploadLoading = ref(false)
async function contactIdCardFrontPicUpload(url: string) {
  try {
    form.value.merchantBaseInfo.contactIdCardBackPic.alipayId = ''
    form.value.merchantBaseInfo.contactIdCardBackPic.wechatId = ''

    contactIdCardFrontPicUploadLoading.value = true
    const res: any = await getInfoByImg({
      url: url,
      type: 'IdCard'
    })

    let date = res.subImages[0].kvInfo.data.validPeriod.split('-')
    form.value.merchantBaseInfo.contactPersonIdStartDate = dayjs(date[0]).format('YYYY-MM-DD')
    form.value.merchantBaseInfo.contactPersonIdEndDate = dayjs(date[1]).format('YYYY-MM-DD')
  } catch (error) {
    console.log(error);
  }
  contactIdCardFrontPicUploadLoading.value = false
}

// 联系人身份证反面照片
const contactIdCardBackPicUploadLoading = ref(false)
async function contactIdCardBackPicUpload(url: any) {
  try {
    form.value.merchantBaseInfo.contactIdCardFrontPic.alipayId = ''
    form.value.merchantBaseInfo.contactIdCardFrontPic.wechatId = ''

    contactIdCardBackPicUploadLoading.value = true
    const res: any = await getInfoByImg({
      url: url,
      type: 'IdCard'
    })
    form.value.merchantBaseInfo.contactPersonId = res.subImages[0].kvInfo.data.idNumber
  } catch (error) {
    console.log(error);
  }
  contactIdCardBackPicUploadLoading.value = false
}

// 法人信息 身份证正面图片
const idCardFrontPicSuccessLoading = ref(false)
async function idCardFrontPicSuccess(url: string) {
  try {
    form.value.legalPersonInfo.idCardBackPic.alipayId = ''
    form.value.legalPersonInfo.idCardBackPic.wechatId = ''

    idCardFrontPicSuccessLoading.value = true
    const res: any = await getInfoByImg({
      url: url,
      type: 'IdCard'
    })

    let date = res.subImages[0].kvInfo.data.validPeriod.split('-')
    form.value.legalPersonInfo.legalIdPersonStartDate = dayjs(date[0]).format('YYYY-MM-DD')
    form.value.legalPersonInfo.legalPersonIdEndDate = dayjs(date[1]).format('YYYY-MM-DD')
  } catch (error) {
    console.log(error);
  }
  idCardFrontPicSuccessLoading.value = false
}

// 法人信息 身份证反图片
const idCardBackPicSuccessLoading = ref(false)
async function idCardBackPicSuccess(url: string) {
  try {
    form.value.legalPersonInfo.idCardFrontPic.alipayId = ''
    form.value.legalPersonInfo.idCardFrontPic.wechatId = ''

    idCardBackPicSuccessLoading.value = true
    const res: any = await getInfoByImg({
      url: url,
      type: 'IdCard'
    })

    form.value.legalPersonInfo.legalPersonName = res.subImages[0].kvInfo.data.name
    form.value.legalPersonInfo.legalPersonId = res.subImages[0].kvInfo.data.idNumber
  } catch (error) {
    console.log(error);
  }
  idCardBackPicSuccessLoading.value = false
}

// 营业执照信息 营业执照照片
const licensePicSuccessLoading = ref(false)
async function licensePicSuccess(url: string) {
  try {
    form.value.businessLicenceInfo.licensePic.alipayId = ''
    form.value.businessLicenceInfo.licensePic.wechatId = ''

    licensePicSuccessLoading.value = true
    const res: any = await getInfoByImg({
      url: url,
      type: 'BusinessLicense'
    })
    let data = res.subImages[0].kvInfo.data
    // console.log('营业执照照片', data);
    form.value.businessLicenceInfo.licenceName = data.companyName
    form.value.businessLicenceInfo.licenceNo = data.creditCode
    // form.value.businessLicenceInfo.licenceStartDate = data.companyName
    // form.value.businessLicenceInfo.licenceEndDate = data.companyName
    form.value.businessLicenceInfo.registeredAddress = data.businessAddress
  } catch (error) {
    console.log(error);
  }
  licensePicSuccessLoading.value = false
}

// 结算信息 银行卡正面
const bankCardFrontPicSuccessLoading = ref(false)
async function bankCardFrontPicSuccess(url: string) {
  try {
    form.value.settlementInfo.bankCardFrontPic.alipayId = ''
    form.value.settlementInfo.bankCardFrontPic.wechatId = ''

    bankCardFrontPicSuccessLoading.value = true
    const res: any = await getInfoByImg({
      url: url,
      type: 'BankCard'
    })
    let data = res.subImages[0].kvInfo.data
    // console.log('银行卡正面', data);
    form.value.settlementInfo.settlementCardNo = data.cardNumber
    form.value.settlementInfo.bankName = data.bankName
  } catch (error) {
    console.log(error);
  }
  bankCardFrontPicSuccessLoading.value = false
}

const loading = ref(false)
function submitForm() {
  console.log('提交的表单数据：', form.value);
  console.log('formRef', formRef.value);
  formRef.value.validate(async (valid: boolean) => {
    console.log('valid===', valid);
    if (valid) {
      console.log('表单验证通过，可以提交');
      try {
        loading.value = true
        await entryManagerPost(form.value)
        ElNotification({
          title: '注意',
          message: '提交成功',
          type: 'success'
        })
        router.back()
      } catch (error) {
        console.log(error);
      }
      loading.value = false
    } else {
      console.log('表单验证失败，请检查输入项');
      return false;
    }
  });
}
</script>

<style scoped lang="scss">
.gyq_container {
  padding: 14px;

  .gyq_content {
    padding: 14px;
    background-color: #fff;
    border-radius: 8px;
    padding-bottom: 100px;
  }
}

.row {
  &.mt14 {
    margin-top: 14px;
  }
}

.center {
  display: flex;
  align-items: center;
  gap: 10px;
}

.column {
  display: flex;
  flex-direction: column;
}

.tips {
  --bg: #ffeed8;
  font-size: 12px;
  background-color: var(--bg);
  color: #c57000;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 6px;
  margin-top: 15px;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: var(--bg);
    border: 1px solid var(--bg);
    border-radius: 4px;
    transform: rotate(-45deg);
    top: -7px;
    left: 40px;
    transform-origin: center;
    translate: -50% 0;
  }
}

.title_row {
  padding: 14px 50px;
  position: relative;
  display: flex;
  align-items: center;

  &::after {
    content: "";
    width: 100%;
    border-bottom: 1px solid #ececec;
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 1;
  }

  .t {
    position: relative;
    z-index: 2;
    background-color: #fff;
    padding: 0 14px;
  }
}

.btn_wrap {
  width: 100%;
  position: fixed;
  z-index: 10;
  bottom: 10px;
  padding-bottom: 24px;

  .btn_content {
    display: flex;
    justify-content: center;
    gap: 14px;

    .btn {
      width: 200px;
    }
  }
}
</style>