<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;">基本信息</a-divider>
    <a-row justify="space-between" type="flex">

      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="商户号">
            {{ vdata.detailData.applyId }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="收单机构编号">
            {{ vdata.detailData.channelMchNo??"暂未进件"}}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24" v-if="vdata.detailData.ifCode == 'lklspay'">
      <a-descriptions>
        <a-descriptions-item label="终端号">
          {{ vdata.termNo ??"暂未进件"}}
        </a-descriptions-item>
      </a-descriptions>
      </a-col>
      <a-col v-if="$hasAgentEnt()" :sm="24">
        <a-descriptions>
          <a-descriptions-item label="拓展服务商">
            {{ vdata.detailData.agentNoName }}    {{ vdata.detailData.agentPhone }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="进件来源">
            <span v-if="vdata.detailData.applyPageType == 'PLATFORM_WEB'">运营平台系统</span>
            <span v-else-if="vdata.detailData.applyPageType == 'AGENT_WEB'">代理商系统</span>
            <span v-else-if="vdata.detailData.applyPageType == 'AGENT_APP'">{{ $SYS_NAME_MAP.AGENT_APP }}APP</span>
            <span v-else-if="vdata.detailData.applyPageType == 'AGENT_LITE'">{{ $SYS_NAME_MAP.AGENT_APP }}小程序</span>
            <span v-else-if="vdata.detailData.applyPageType == 'MCH_WEB'">商户系统</span>
            <span v-else-if="vdata.detailData.applyPageType == 'MCH_APP'">{{ $SYS_NAME_MAP.MCH_APP }}APP</span>
            <span v-else-if="vdata.detailData.applyPageType == 'MCH_LITE'">{{ $SYS_NAME_MAP.MCH_APP }}小程序</span>
            <span v-else>{{ vdata.detailData.applyPageType || '' }}</span>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>

      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="支付通道">
            {{ vdata.detailData.ifName }}
<!--            [ {{ vdata.detailData.ifCode }} ]-->
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="所属渠道">
            {{ vdata.detailData.isvName }}  [ {{ vdata.detailData.isvNo }} ]
          </a-descriptions-item>
        </a-descriptions>
      </a-col>

<!--      <a-divider />-->
    </a-row>

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

    <a-row justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="商户全称">
            {{ vdata.detailData.mchFullName }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="商户简称">
            {{ vdata.detailData.mchShortName }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="商户类型">
            {{ vdata.detailData.merchantType == 1?'小微':vdata.detailData.merchantType == 2?'个体':vdata.detailData.merchantType == 1?'企业':'其他' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="结算状态">
            {{vdata.detailData.settlementType??"暂未进件"}}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="联系人姓名">
            {{ vdata.detailData.contactName }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="联系人手机号">
            {{ vdata.detailData.contactPhone }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>

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

<script lang="ts" setup>
import { API_URL_MCH_APPLYMENT_LIST, req } 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,
      detailData: {}, // 数据对象
      recordId: null, // 更新对象ID
      visible: false, // 是否显示弹层/抽屉
      termNo: false, // 是否显示弹层/抽屉
  })

  function show (recordId) { // 弹层打开事件
    vdata.detailData = { 'state': 1, 'type': 1 } // 数据清空
    // if (this.$refs.infoFormModel !== undefined) {
    //   this.$refs.infoFormModel.resetFields()
    // }
    
    vdata.recordId = recordId
    req.getById(API_URL_MCH_APPLYMENT_LIST, recordId).then(res => {
      if(res.succResParameter){
        const  succResParameter = JSON.parse(res.succResParameter)
        vdata.termNo = succResParameter.termNo
      }else{
        vdata.termNo = "暂未进件"
      }
      vdata.detailData = res
    })
    vdata.visible = true
  }
  function onClose () {
    vdata.visible = false
  }
defineExpose({
  show //抛出show函数给父组件
})
</script>
