<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['infoName'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="流水号">
            {{ vdata.detailData['hid'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="账户类型">
            {{ vdata.detailData['opAccountType'] === 1 ? '钱包账户' : '在途账户' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="关联订单类型">
            <template v-if="vdata.detailData['relaBizOrderType'] === 1">支付订单</template>
            <template v-if="vdata.detailData['relaBizOrderType'] === 2">退款订单</template>
            <template v-if="vdata.detailData['relaBizOrderType'] === 3">提现订单</template>
            <template v-if="vdata.detailData['relaBizOrderType'] === 4">转账订单</template>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item v-if="vdata.detailData['relaBizOrderType'] === 1" label="支付订单号">
            {{ vdata.detailData['relaBizOrderId'] }}
          </a-descriptions-item>
          <a-descriptions-item v-if="vdata.detailData['relaBizOrderType'] === 2" label="退款订单号">
            {{ vdata.detailData['relaBizOrderId'] }}
          </a-descriptions-item>
          <a-descriptions-item v-if="vdata.detailData['relaBizOrderType'] === 3" label="提现订单号">
            {{ vdata.detailData['relaBizOrderId'] }}
          </a-descriptions-item>
          <a-descriptions-item v-if="vdata.detailData['relaBizOrderType'] === 4" label="转账订单">
            {{ vdata.detailData['relaBizOrderId'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="时间">
            {{ vdata.detailData['updatedAt'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="变动前账户余额">
            {{ vdata.detailData['opBeforeAmount'] / 100 }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="变动金额">
            {{ vdata.detailData['opAmount'] / 100 }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="变动后账户余额">
            {{ vdata.detailData['opAfterAmount'] / 100 }}
          </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 lang="ts" setup>
  import { API_URL_WALLET_HISTORY_LIST, req } from '@/api/manage'
  import {defineProps,reactive} from 'vue'

    const props = defineProps({
      callbackFunc: { type: Function,default:null }
  })

    const vdata = reactive({
        btnLoading: false,
        detailData: {}, // 数据对象
        recordId: null, // 更新对象ID
        visible: false, // 是否显示弹层/抽屉
        isvList: [], // 服务商下拉列表
        isvName: '' // 服务商名称
    })

    function show (recordId) { // 弹层打开事件
        vdata.recordId = recordId
        req.getById(API_URL_WALLET_HISTORY_LIST, recordId).then(res => {
          vdata.detailData = res
        })
        vdata.visible = true
      }
      function onClose () {
        vdata.visible = false
      }
defineExpose({
  show //抛出show函数给父组件
})
</script>
