<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['hid'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="关联订单号">
            {{ vdata.detailData['relaBizOrderId'] }}
          </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="会员ID">
            {{ vdata.detailData['mbrId'] }}
          </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="业务类型">
            {{ vdata.detailData['bizType'] == 1 ? '支付充值':vdata.detailData['bizType'] == 2 ? '现金充值':vdata.detailData['bizType'] == 3 ? '会员消费':vdata.detailData['bizType'] == 4 ? '消费退款':vdata.detailData['bizType'] == 5 ? '人工调账':'其他' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="变动前余额">
            <b>￥{{ vdata.detailData['beforeAmount'] / 100 }}</b>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="变动金额">
            <b>￥{{ vdata.detailData['changeAmount'] / 100 }}</b>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="变动后余额">
            <b>￥{{ vdata.detailData['afterAmount'] / 100 }}</b>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col v-if="vdata.detailData.remark" :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_ACCOUNT_HISTORY_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_ACCOUNT_HISTORY_LIST, recordId).then(res => {
    vdata.detailData = res
  })
}

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

defineExpose({ show })
</script>

