<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :title="true ? '提现详情' : ''"
    :body-style="{ paddingBottom: '80px' }"
    width="40%"
    @close="onClose"
  >
    <a-row justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="提现金额">{{ vdata.detailData['applyAmount'] / 100 }}</a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="提现手续费">{{ vdata.detailData['settFeeAmount'] / 100 }}</a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="结算账户类型">{{ vdata.detailData['settAccountType'] === "WX_CASH" ? '个人微信':vdata.detailData['settAccountType'] === "ALIPAY_CASH"? '个人支付宝':vdata.detailData['settAccountType'] === "BANK_PUBLIC"? '对公账户':vdata.detailData['settAccountType'] === "BANK_PRIVATE"? '对私账户':'银行卡' }}</a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="结算账号">{{ vdata.detailData['settAccountNo'] }}</a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="开户行名称">{{ vdata.detailData['settAccountBank'] }}</a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="结算账户姓名">{{ vdata.detailData['settAccountName'] }}</a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col v-if="vdata.detailData['auditRemark']" :sm="12">
        <a-descriptions>
          <a-descriptions-item label="失败原因">{{ vdata.detailData['auditRemark'] }}</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['settAccountTelphone'] }}</a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="提现备注">{{ vdata.detailData['applyRemark'] }}</a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="申请资料">
            <a-image v-if="vdata.detailData.settCertImg" class="withdraw-img" :src="vdata.detailData.settCertImg" />
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="打款凭证">
            <a-image v-if="vdata.detailData['transferCertImg'] && vdata.detailData['state'] == 4" class="withdraw-img" :src="vdata.detailData['transferCertImg']" />
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
  </a-drawer>
</template>

<script lang="ts" setup>
import { API_URL_WITHDRAWALS_RECORD_LIST, req } from '@/api/manage'
import { defineProps, reactive } from 'vue'
const props = defineProps({
  callbackFunc: { type: Function, default: null }
})

const vdata = reactive({
  btnLoading: false,
  detailData: {
    settCertImg: ''//提现凭证
  }, // 数据对象
  recordId: null, // 更新对象ID
  visible: false, // 是否显示弹层/抽屉
})

function show(recordId) { // 弹层打开事件
  vdata.recordId = recordId
  req.getById(API_URL_WITHDRAWALS_RECORD_LIST, recordId, {originData: 0}).then(res => {
    vdata.detailData = res
  })
  vdata.visible = true
}
function onClose() {
  vdata.visible = false
}
defineExpose({
  show //抛出show函数给父组件
})
</script>
<style>
.withdraw-img {
  width: 200px;
}
</style>
