<template>
  <a-drawer
    :visible="vdata.visible"
    title="充值详情"
    width="40%"
    @close="onClose"
  >
    <a-row justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="记录ID">
            {{ vdata.detailData['rechargeRecordId'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="关联订单号">
            {{ vdata.detailData['payOrderId'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="会员名称">
            {{ vdata.detailData['mbrName'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="会员手机号">
            {{ vdata.detailData['mbrTel'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="会员ID">
            {{ vdata.detailData['mbrId'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="充值状态">
            <a-tag
              :key="vdata.detailData['state']"
              :color="vdata.detailData['state'] === 0?'blue':vdata.detailData['state'] === 1?'orange':vdata.detailData['state'] === 2?'green':'volcano'"
            >
              {{ vdata.detailData['state'] === 0?'初始化':vdata.detailData['state'] === 1?'充值中':vdata.detailData['state'] === 2?'充值成功':'充值失败' }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="支付金额">
            <b>￥{{ vdata.detailData['payAmount'] / 100 }}</b>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="入账金额">
            <b>￥{{ vdata.detailData['entryAmount'] / 100 }}</b>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="赠送金额">
            <b>￥{{ vdata.detailData['giveAmount'] / 100 }}</b>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="异步通知地址">
            {{ vdata.detailData['notifyUrl'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="创建时间">
            {{ vdata.detailData['createdAt'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="支付成功时间">
            {{ vdata.detailData['successTime'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="支付错误码">{{ vdata.detailData['errCode'] }}</a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="支付错误描述">{{ vdata.detailData['errMsg'] }}</a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="充值备注">{{ vdata.detailData['remark'] }}</a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
  </a-drawer>
</template>

<script setup lang="ts">
import { API_URL_MEMBER_RECHARGE_RECORD_LIST, req } from '@/api/manage'
import {ref, reactive} from 'vue'

const props = defineProps({
  callbackFunc: { type: Function, default: () => () => ({}) }
})
  
const vdata : any =  reactive({
  isAdd: true, // 新增 or 修改
  visible: false, // 抽屉开关
  mbrId: '', // 会员ID
  detailData: {}, // 数据对象
  btnLoading:false,
})

// 表单组件
const infoFormModel = ref()

// 抽屉显示
const show = (recordId) => {
  vdata.visible = true
  // 数据清空
  vdata.saveObject = { state:1 }
  
  if (infoFormModel.value !== undefined) {
    infoFormModel.value.resetFields()
  }

  // 拉取详情
  req.getById(API_URL_MEMBER_RECHARGE_RECORD_LIST, recordId).then(res => {
    vdata.detailData = res
  })
}

const onClose = () => {
  vdata.visible = false
}

defineExpose({ show })
</script>

