<template>
  <a-drawer
    v-model:visible="vdata.visible"
    title="变更详情"
    :body-style="{ paddingBottom: '80px' }"
    width="50%"
    @close="onClose"
  >
    <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;" v-if="vdata.modifyApplyType == 1">基本信息详情</a-divider>
    <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;" v-if="vdata.modifyApplyType == 2">结算变更详情</a-divider>
    <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;" v-if="vdata.modifyApplyType == 6">结算类型详情</a-divider>
    <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;" v-if="vdata.modifyApplyType == 7">退款账户详情</a-divider>
    <a-row justify="space-between" type="flex" v-if="vdata.modifyApplyType == 1 || vdata.modifyApplyType == 6">
      <a-col :sm="12" v-if="vdata.modifyApplyType == 1">
        <a-descriptions>
          <a-descriptions-item label="商户简称">
            {{ vdata.detailData.mchShortName }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12" v-if="vdata.modifyApplyType == 6">
        <a-descriptions>
          <a-descriptions-item label="结算变更类型">
            {{ vdata.detailData.settlementType }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
    <a-row justify="space-between" type="flex" v-if="vdata.modifyApplyType == 2">
      <a-col :sm="12" >
        <a-descriptions>
          <a-descriptions-item label="结算账号类型">
            <span v-if="vdata.detailData.settAccountType == 'C'">对私</span>
            <span v-else-if="vdata.detailData.settAccountType == 'B'">对公</span>
            <span v-else>{{ vdata.detailData.settAccountType || '' }}</span>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12" v-if="vdata.detailData.settAccountType == 'C'">
        <a-descriptions>
          <a-descriptions-item label="是否法人结算">
            <a-radio-group v-model:value="vdata.detailData.illegal" :disabled="true">
              <a-radio value="N">法人</a-radio>
              <a-radio value="Y">非法人</a-radio>
            </a-radio-group>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>

      <a-form ref="stepForm3Ref" :label-col="{ span: 6 }" :model="vdata.detailData"
              :wrapper-col="{ span: 12 }" layout="vertical" >

     <a-divider/>

        <a-form ref="stepForm2Ref" v-if="vdata.detailData.settAccountType =='C'" :label-col="{ span: 14 }" :model="vdata.detailData"
                :wrapper-col="{ span: 14 }" layout="vertical" >

          <div v-if="vdata.detailData.illegal === 'Y'">
            <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">结算人信息</a-divider>
            <a-row justify="space-between" type="flex">
              <a-col :span="12">
                <a-descriptions>
                  <a-descriptions-item label="结算人身份证人像面照片">
                    <a-image v-if="vdata.detailData['settAccountIdcard1Img']" class="img" :src="vdata.detailData['settAccountIdcard1Img']" />
                  </a-descriptions-item>
                </a-descriptions>
              </a-col>

              <a-col :span="12">
                <a-descriptions>
                  <a-descriptions-item label="结算人身份证国徽面照片">
                    <a-image v-if="vdata.detailData['settAccountIdcard2Img']" class="img" :src="vdata.detailData['settAccountIdcard2Img']" />
                  </a-descriptions-item>
                </a-descriptions>
              </a-col>

              <a-col :span="12">
                <a-descriptions >
                  <a-descriptions-item label="结算人名称">
                    {{vdata.detailData.settAccountName}}
                  </a-descriptions-item>
                </a-descriptions>
              </a-col>

              <a-col :span="12">
                <a-descriptions >
                  <a-descriptions-item label="结算卡身份证号">
                    {{vdata.detailData.settAccountIdcardNo}}
                  </a-descriptions-item>
                </a-descriptions>
              </a-col>

              <a-col :span="12">
                <a-descriptions >
                  <a-descriptions-item label="身份证有效期开始时间">
                    {{vdata.detailData.settAccountIdcardEffectBegin}}
                  </a-descriptions-item>
                </a-descriptions>
              </a-col>

              <a-col :span="12">
                <a-descriptions >
                  <a-descriptions-item label="身份证有效期截止时间">
                    {{vdata.detailData.settAccountIdcardEffectEnd}}
                  </a-descriptions-item>
                </a-descriptions>
              </a-col>
            </a-row>
          </div>

          <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">结算账户信息</a-divider>
          <a-row justify="space-between" type="flex">
            <a-col :span="12">
              <a-descriptions>
                <a-descriptions-item label="结算卡图片">
                  <a-image v-if="vdata.detailData['settAccountLicenseImg']" class="img" :src="vdata.detailData['settAccountLicenseImg']" />
                </a-descriptions-item>
              </a-descriptions>
            </a-col>

            <a-col :span="12" v-if="vdata.detailData.illegal === 'Y'">
              <a-descriptions >
                <a-descriptions-item label="非法人结算授权函">
                  <a-image v-if="vdata.detailData['nonLegSettleAuthPic']" class="img" :src="vdata.detailData['nonLegSettleAuthPic']" />
                </a-descriptions-item>
              </a-descriptions>
            </a-col>

            <a-col :span="12" v-if="vdata.detailData.illegal === 'N'">
              <a-descriptions >
                <a-descriptions-item label="结算账户名">
                  <a-image v-if="vdata.detailData['settAccountName']" class="img" :src="vdata.detailData['settAccountName']" />
                </a-descriptions-item>
              </a-descriptions>
            </a-col>

            <a-col :span="12">
              <a-descriptions >
                <a-descriptions-item label="结算账号">
                  {{vdata.detailData.settAccountNo}}
                </a-descriptions-item>
              </a-descriptions>
            </a-col>

            <a-col :span="12">
              <a-descriptions >
                <a-descriptions-item label="银行预留手机号">
                  {{vdata.detailData.phone}}
                </a-descriptions-item>
              </a-descriptions>
            </a-col>

            <a-col :span="12">
              <a-descriptions >
                <a-descriptions-item label="开户银行名称">
                  {{vdata.detailData.settAccountBankName}}
                </a-descriptions-item>
              </a-descriptions>
            </a-col>

            <a-col :span="12">
              <a-descriptions >
                <a-descriptions-item label="开户银行名称">
                  {{vdata.detailData.settAccountBankBranchAreaName}}
                </a-descriptions-item>
              </a-descriptions>
            </a-col>

<!--            <a-col :span="12">-->
<!--              <a-descriptions >-->
<!--                <a-descriptions-item label="开户支行">-->
<!--                  {{vdata.detailData.bankSubCode}}-->
<!--                </a-descriptions-item>-->
<!--              </a-descriptions>-->
<!--            </a-col>-->
          </a-row>

        </a-form>

        <a-form ref="stepForm3Ref" v-if="vdata.detailData.settAccountType =='B'" :label-col="{ span: 12 }" :model="vdata.detailData"
                :wrapper-col="{ span: 12 }" layout="vertical" >

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

          <a-col :span="12">
            <a-descriptions >
              <a-descriptions-item label="开户许可证">
                <a-image v-if="vdata.detailData['settAccountLicenseImg']" class="img" :src="vdata.detailData['settAccountLicenseImg']" />
              </a-descriptions-item>
            </a-descriptions>
          </a-col>

          <a-row justify="space-between" type="flex">
            <a-col :span="12">
              <a-descriptions >
                <a-descriptions-item label="结算账户名">
                  {{vdata.detailData.settAccountName}}
                </a-descriptions-item>
              </a-descriptions>
            </a-col>
            <a-col :span="12">
              <a-descriptions >
                <a-descriptions-item label="结算账号">
                  {{vdata.detailData.settAccountNo}}
                </a-descriptions-item>
              </a-descriptions>
            </a-col>
            <a-col :span="12">
              <a-descriptions >
                <a-descriptions-item label="银行预留手机号">
                  {{vdata.detailData.phone}}
                </a-descriptions-item>
              </a-descriptions>
            </a-col>

            <a-col :span="12">
              <a-descriptions >
                <a-descriptions-item label="开户行省市县">
                  {{vdata.detailData.settAccountBankBranchAreaName}}
                </a-descriptions-item>
              </a-descriptions>
            </a-col>

            <a-col :span="12">
              <a-descriptions >
                <a-descriptions-item label="开户银行名称">
                  {{vdata.detailData.settAccountBankName}}
                </a-descriptions-item>
              </a-descriptions>
            </a-col>

            <a-col :span="12">
              <a-descriptions >
                <a-descriptions-item label="开户支行">
                  {{vdata.detailData.bankSubCode}}
                </a-descriptions-item>
              </a-descriptions>
            </a-col>

          </a-row>

        </a-form>

      </a-form>

    </a-row>

    <a-row justify="space-between" type="flex" v-if="vdata.modifyApplyType == 7">
      <a-col :sm="24" >
        <a-descriptions>
          <a-descriptions-item label="结算类型">
            {{ vdata.detailData.refundWay || '' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24" >
        <a-descriptions>
          <a-descriptions-item label="收单机构编号">
            {{ vdata.detailData.channelMchNo || '' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24" >
        <a-descriptions>
          <a-descriptions-item label="终端号">
            {{ vdata.detailData.termNo || '' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>

    </a-row>
  </a-drawer>
</template>

<script lang="ts" setup>
import {API_URL_MCH_APPLYMENT_LIST, req, $getMerchantChangeModifyApply, $getMerchantInformation} from '@/api/manage'
import {defineProps,reactive, getCurrentInstance} from 'vue'
const { $hasAgentEnt, $SYS_NAME_MAP } = getCurrentInstance()!.appContext.config.globalProperties
  const props = defineProps({
    callbackFunc: { type: Function,default:null }
  })

  const vdata:any = reactive({
      btnLoading: false,
      modifyApplyType:0,
      detailData: {}, // 数据对象
      recordId: null, // 更新对象ID
      visible: false, // 是否显示弹层/抽屉
  })

  function show (recordId) { // 弹层打开事件
    vdata.detailData = {  } // 数据清空
    // if (this.$refs.infoFormModel !== undefined) {
    //   this.$refs.infoFormModel.resetFields()
    // }
    
    vdata.recordId = recordId

    $getMerchantChangeModifyApply(recordId).then((res) => {
      console.log(res,'resresresresres')
      vdata.modifyApplyType =  res.modifyApplyType
      let  applyDetailInfo =''
      console.log(res.applyDetailInfo,'res.originDetailInfo')
      if(res.applyDetailInfo){
        applyDetailInfo = JSON.parse(res.applyDetailInfo)
      }
      vdata.detailData = applyDetailInfo
      console.log(vdata.detailData,'vdata.detailData')
    })

    vdata.visible = true
  }
  function onClose () {
    vdata.visible = false
  }
defineExpose({
  show //抛出show函数给父组件
})
</script>
<style>
.img {
  width: 50px;
  height: 50px;
}
</style>
