<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :mask-closable="false"
    title="商户信息变更"
    :body-style="{ paddingBottom: '80px' }"
    width="80%"
    class="drawer-width"
    @close="vdata.visible = false"
  >
    <div style="background: #fff">
 
      <a-form-item has-feedback label="变更类型" name="name">
          <a-select class="select_div"   ref="select"  v-model:value="vdata.groupKey" @change="selectTabs" placeholder="请选择需要变更的类型" >
            <a-select-option value="applymentConfig">基本信息变更</a-select-option>
            <a-select-option value="settlementConfig">结算信息变更</a-select-option>
         </a-select>
     </a-form-item>
     <div class="div-type"></div>
  
          <div v-if="vdata.groupKey == 'applymentConfig'" class="account-settings-info-view" style="margin-left: 40px">
            <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
              <a-row :gutter="8">
                <a-col :span="12">
                  <a-form-item has-feedback label="商户简称" name="name">
                    <a-input v-model:value="vdata.mchInfo.name" placeholder="请输入商户简称" />
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="12">
                    <a-form-item has-feedback label="营业执照地址" name="address">
                      <a-input v-model:value="vdata.mchInfo.address" disabled/>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item has-feedback label="商户类别(MCC)" name="mcc">
                      <a-input v-model:value="vdata.mchInfo.mcc" disabled />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item has-feedback label="联系人姓名" name="contactsName">
                      <a-input v-model:value="vdata.mchInfo.contactsName" disabled />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item has-feedback label="联系人电话" name="contactsPhone">
                    <a-input v-model:value="vdata.mchInfo.contactsPhone" disabled />
                  </a-form-item>
                </a-col>  
                <a-col :span="12">
                
                </a-col>  
                <a-col :span="12">
                    <a-form-item has-feedback label="营业执照" name="contactsPhone">
                      <JeepayUpload v-model:src="vdata.settlement.personal.set_phone" :imgSize="1" bizType="applyment" />
                    </a-form-item>
                </a-col>  
                <a-col :span="12">
                  <a-form-item has-feedback label="门头照" name="contactsPhone">
                    <JeepayUpload v-model:src="vdata.settlement.personal.set_phone" :imgSize="1" bizType="applyment"  />
                  </a-form-item>
                </a-col>  
                <a-col :span="12">
                  <a-form-item has-feedback label="收银台照" name="contactsPhone">
                    <JeepayUpload src="https://syb-open.oss-cn-hangzhou.aliyuncs.com/images/93238913-4639-4f8b-94e4-5840d58becb8.png" :imgSize="1" bizType="applyment"  />
                  </a-form-item>
                </a-col>  
                <a-col :span="12">
                  <a-form-item has-feedback label="内景照" name="contactsPhone">
                    <JeepayUpload v-model:src="vdata.settlement.personal.set_phone" :imgSize="1" bizType="applyment"   />

                  </a-form-item>
                </a-col>                             -->
              </a-row>
              

              
            </a-form>
          </div>
      
          <div v-if="vdata.groupKey == 'settlementConfig'"   class="account-settings-info-view" style="margin-left: 40px">
            <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
               
                <a-col :span="12">
                    <a-form-item has-feedback label="账户类型" name="name">
                          <a-select class="select_div"   ref="select"  v-model:value="vdata.settlement.type" @change="selectTypes" placeholder="请选择需要变更的类型" >
                            <a-select-option value="personal">对私</a-select-option>
                            <a-select-option value="public">对公</a-select-option>
                        </a-select>
                    </a-form-item>
                  </a-col> 
              <a-row :gutter="8" v-if="vdata.settlement.type =='personal'">                        
                      <a-col :span="12">
                          <a-form-item has-feedback label="开户名" name="name">
                            <a-input v-model:value="vdata.settlement.personal.bank_name" placeholder="请输入开户名" />
                          </a-form-item>
                        </a-col>
                        <a-col :span="12">
                        <a-form-item has-feedback label="银行卡号" name="address">
                          <a-input v-model:value="vdata.settlement.personal.bank_number" placeholder="请输入银行卡号" />
                        </a-form-item>
                        </a-col>
                        <a-col :span="12">
                        <a-form-item has-feedback label="结算人名称" name="mcc">
                          <a-input v-model:value="vdata.settlement.personal.bank"  placeholder="请输入结算人名称"/>
                        </a-form-item>
                        </a-col>
                        <a-col :span="12">
                        <a-form-item has-feedback label="银行预留手机号" name="contactsName">
                          <a-input v-model:value="vdata.settlement.personal.bank"  placeholder="请输入银行预留手机号"/>
                        </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item has-feedback label="结算卡身份证" name="contactsPhone">
                              <a-input v-model:value="vdata.mchInfo.contactsPhone"  placeholder="请输入结算卡身份证"/>
                            </a-form-item>
                        </a-col>   
                        <a-col :span="12">
                            <a-form-item has-feedback label="开户支行" name="contactsPhone">
                              <a-input v-model:value="vdata.mchInfo.contactsPhone"  placeholder="请输入开户支行"/>
                            </a-form-item>
                        </a-col> 
                        <a-col :span="12">
                            <a-form-item has-feedback label="身份证开始时间" name="contactsPhone">
                              <a-input v-model:value="vdata.mchInfo.contactsPhone"  />
                            </a-form-item>
                        </a-col>  
                        <a-col :span="12">
                            <a-form-item has-feedback label="身份证截止时间" name="contactsPhone" placeholder="请输入身份证截止时间">
                              <a-input v-model:value="vdata.mchInfo.contactsPhone"  />
                            </a-form-item>
                        </a-col>    
                        <a-col :span="12">
                            <a-form-item has-feedback label="身份证类型" name="contactsPhone">
                                  <a-checkbox v-model:checked="vdata.mchInfo.contactsPhone">长期</a-checkbox>
                            </a-form-item>
                        </a-col>   
                        <a-col :span="12">
                            
                        </a-col>  
                              
                        <a-col :span="12" >
                          <a-form-item has-feedback label="结算卡图片" name="set_phone">                       
                            <JeepayUpload v-model:src="vdata.settlement.personal.set_phone" :imgSize="1" bizType="applyment" crType="license" @ocrScan="ocrScanFunc" />
                          </a-form-item>         
                        </a-col>   
                        <a-col :span="12" >
                          <a-form-item has-feedback label="非法人结算授权函" name="set_phone">
                            <JeepayUpload v-model:src="vdata.settlement.personal.set_phone" :imgSize="1" bizType="applyment" crType="license2" @ocrScan="ocrScanFunc" />
                            
                          </a-form-item>     
                        </a-col>   
                          
                        <a-col :span="12" >
                          <a-form-item has-feedback label="变更表" name="set_phone"> 
                            <JeepayUpload v-model:src="vdata.settlement.personal.set_phone" :imgSize="1" bizType="applyment" crType="license2" @ocrScan="ocrScanFunc" />
                          
                          </a-form-item>            
                        </a-col>   
                          
                        <a-col :span="12" >
                          <a-form-item has-feedback label="结算身份证正面" name="set_phone">
                            <JeepayUpload v-model:src="vdata.settlement.personal.set_phone" :imgSize="1" bizType="applyment" crType="license3" @ocrScan="ocrScanFunc" />
                          </a-form-item>
                                
                        </a-col>   
                        <a-col :span="12" >
                          <a-form-item has-feedback label="结算身份证反面" name="set_phone">
                              
                            <JeepayUpload v-model:src="vdata.settlement.personal.set_phone" :imgSize="1" bizType="applyment" crType="license4" @ocrScan="ocrScanFunc" />
                          </a-form-item>                 
                        </a-col>  
                
                
              </a-row>

              <a-row :gutter="8" v-if="vdata.settlement.type =='public'">                        
                       <a-col :span="12">
                          <a-form-item has-feedback label="开户名" name="name">
                            <a-input v-model:value="vdata.settlement.personal.bank_name" placeholder="请输入开户名" />
                          </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item has-feedback label="银行卡号" name="address">
                              <a-input v-model:value="vdata.settlement.personal.bank_number" placeholder="请输入银行卡号" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item has-feedback label="开户行" name="contactsPhone">
                              <a-input v-model:value="vdata.mchInfo.contactsPhone"  placeholder="请输入开户行"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                        <a-form-item has-feedback label="银行预留手机号" name="contactsName">
                          <a-input v-model:value="vdata.settlement.personal.bank"  placeholder="请输入银行预留手机号"/>
                        </a-form-item>
                        </a-col>                              
                        <a-col :span="12" >
                          <a-form-item has-feedback label="开户许可证" name="set_phone">                       
                            <JeepayUpload v-model:src="vdata.settlement.personal.set_phone" :imgSize="1" bizType="applyment" crType="license" @ocrScan="ocrScanFunc" />
                          </a-form-item>         
                        </a-col>    
                          
                        <a-col :span="12" >
                          <a-form-item has-feedback label="变更表" name="set_phone"> 
                            <JeepayUpload v-model:src="vdata.settlement.personal.set_phone" :imgSize="1" bizType="applyment" crType="license2" @ocrScan="ocrScanFunc" />
                          
                          </a-form-item>            
                        </a-col>     
                
              </a-row>

            </a-form>
          </div>
            <div style="margin-left: 20%; margin-top: 60px" @click="getOperator()">
                <a-button type="primary" :loading="vdata.btnLoading" style="margin-right:8px" >
                  <check-circle-outlined v-if="!vdata.btnLoading" />
                  提交至三方支付修改
                </a-button>
                <a-button type="primary" :loading="vdata.btnLoading" style="margin-right:8px" >
                  <check-circle-outlined v-if="!vdata.btnLoading" />
                  保存信息
                </a-button>
              </div>
    </div>
  </a-drawer>
</template>
<script setup lang="ts">
import {  LoadingOutlined,SmileOutlined } from '@ant-design/icons-vue';
import moment, { Moment } from 'moment';
import { useRouter, useRoute } from 'vue-router'

import { ref, reactive, getCurrentInstance } from 'vue'
import dayjs, {Dayjs} from 'dayjs'

const router = useRouter() //这是全部路由
// 定义父组件的传值
const props = defineProps({
  value: { type: String, default: '' },
  customDateRangeType: { type: String, default: 'dateTime' }, // date 和 dateTime
  allTimeIsShow: { type: Boolean, default: true }, // 首页饼图，不显示全部时间
  // 首页交易统计折线图独有的时间选择项
  statisticalTimeIsShow: { type: Boolean, default: false } 
})


  const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

  const payTestBarCode = ref()
  const cashOutFormModel = ref()
  const vdata : any = reactive ({
    uploadUrl:"https:/baidu.com",
    recordId: null, // 更新对象ID
    visible: true, // 是否显示弹层/抽屉
    btnLoading: false,
    groupKey: 'applymentConfig',
    agentApplyConfigData: [] as any, // 代理商进件配置保存对象
    applymentAuditMode: 'DEF', // DEF-平台全局默认配置 ,  CUSTOM-自定义
    agentApplymentPreAuditConfig: '0', // 当前代理商进件是否需要运营平台预审核 1-需要 0不需要
    agentApplyTimeLimit: '', // 代理商进件时间限制(回显)
    agentApplyTimeLimitSave: '', // 代理商进件时间限制（保存到后端）
    castOutFeeRule: { feeType: 'FIX', fixFee: 0, feeRate: 0, freeLimit: 0, applyLimit: 0 },// 手续费配置信息
    saveObject: {}, // 数据对象
    mchInfo:{
      name:"",
      address:"",
      mcc:"",
      contactsName:"",
      contactsPhone:"",
      license:"",
      doorPhone:"",
      cashierPhoto:"",
      shotsPhone:"",
    },
    settlement:{
      type:'personal',
      personal:{
          set_phone:"",
          set_auto:"",
          set_change:"",
          set_card_due:"",
          set_chanset_back:"",
          bank_name:"",
          bank_number:"",
          bank:"",
          bank_card:"",
          bank_mobile:"",
          bank_address:"",
          card_start:"",
          card_end:"",
          card_long:0,
      },
      public:{
          set_phone:"",
          set_auto:"",
          set_change:"",
          set_card_due:"",
          set_chanset_back:"",
          bank_name:"",
          bank_number:"",
          bank:"",
          bank_mobile:"",
          bank_card:"",
          bank_address:"",
          card_start:"",
          card_end:"",
          card_long:0,
      },
    }
    

  })
  const loading = ref<boolean>(false);

  function selectTabs(key){
     console.log(key,'keykeykey')
     vdata.groupKey = key
     console.log(1111)
  }
  function selectTypes(){

  }

  function handleChange(){

  }

  function getOperator(){
    router.push({
        path:'/applymentsOne'
      })
  }
  
  function show (recordId) { // 弹层打开事件
      vdata.recordId = recordId
      vdata.agentApplyTimeLimit = ''
      vdata.visible = true
  }

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

	// 结算人身份证  图片识别的回调函数
	function ocrScanSettFunc(orcObject : any) {
		if (orcObject?.idcardName) {
			// applymentDetailInfo.settAccountName = orcObject.idcardName
			// applymentDetailInfo.settAccountIdcardNo = orcObject.idcardNo
			// applymentDetailInfo.settleAuthAddress = orcObject.idcardAddress
		}
		if (orcObject?.idcardEffectBegin) {
			// applymentDetailInfo.settAccountIdcardEffectBegin = orcObject.idcardEffectBegin
			// applymentDetailInfo.settAccountIdcardEffectEnd = orcObject.idcardEffectEnd
		}
	}

	// 备用结算银行卡  图片识别的回调函数
	function ocrStandByStlAccCardImgFunc(orcObject : any) {
		if (orcObject) {
			// applymentDetailInfo.standByStlAccNo = orcObject.settAccountNo
		}
	}

	// 图片识别的回调函数
	function ocrScanFuncByCompanyBeneficiary(orcObject, i) {
		if (orcObject) {
			// Object.assign(applymentDetailInfo.companyBeneficiaryList[i], orcObject)
		}
	}


defineExpose({
  show
})
</script>
<style lang="less" scoped>
  .bottom-btn{
    /deep/ div{
      display: flex;
      justify-content: center;
    }
  }
  .typePopover {
  position: absolute;
  top: -30px;
  left: 93px;
}
.image_box{
  width: 160px;
  height: 160px;
}
.img_div{
  display: flex;
}
.img_div .ant-form-item{
  display: block !important;
  margin: 20px;
}
.account-settings-info-view>.ant-form-item-label{
  overflow: inherit !important;
}
// .ant-form-item>.ant-form-item-label{
//   overflow: inherit !important;
// }
#form_item_name{
  // width: 800px;
  // width: 200%;
}
.ant-input-disabled{
  // width: 180%;
}
.ant-input-disabled{
  margin-left: 10px !important;
}
.select_div{
  width: 500px;
}
.ant-tabs-nav-wrap{
  display: none !important;
}
.ant-tabs-nav-list{
  display: none !important;
}

.ant-tabs>.ant-tabs-nav .ant-tabs-nav-wrap, .ant-tabs>div>.ant-tabs-nav .ant-tabs-nav-wrap{
  display: none !important;
}
.jeepay-tip-text {
		font-size: 10px;
		color: rebeccapurple
	}

	.option-left {
		width: 50%;
		word-wrap: break-word;
		white-space: normal;
		word-break: break-all;
	}

	.option-right {
		color: rgb(153, 153, 153);
	}

	.option-bottom {
		word-wrap: break-word;
		white-space: normal;
		word-break: break-all;
		color: rgb(153, 153, 153);
	}

	.jeepay-btn-box {
		margin: 15px -12px !important;
	}

	.jeepay-btn-box .ant-btn {
		margin: 0 10px;
	}
  .moban_box{
    color: #1965FF;
    margin: 10px 0;
  }
  .moban_box_span{
     padding: 5px 10px;
  }
  .div-type{
    border: 1px solid #ebeff2;
    margin-bottom: 33px;
  }
</style>
