<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.batchNo }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="对账日期">
            {{ dateUtil.formatDate(vdata.detailData.billDate) }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="支付接口">
            {{ vdata.detailData.ifCode }}
          </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="12">
        <a-descriptions>
          <a-descriptions-item label="处理状态">
            {{ vdata.detailData.state === 1 ? '已处理': '未处理' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="解析状态">
            {{ vdata.detailData.releaseState === 1 ? '解析成功': '解析失败' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col v-if="vdata.detailData.releaseState === 1 && vdata.detailData.orgBillFilePath" :sm="24">
        <a-descriptions>
          <a-descriptions-item label="渠道对账文件存放地址">
            {{ vdata.detailData.orgBillFilePath }}
          </a-descriptions-item>
        </a-descriptions>
        <a-button type="primary" @click="downloadBillFunction">下载对账单</a-button>
      </a-col>
      <a-col v-else :sm="24">
        <a-form-item label="解析失败原因">
          <a-textarea
            v-model:value="vdata.detailData.releaseErrMsg"
            disabled="disabled"
            :rows="3"
          />
        </a-form-item>
      </a-col>
    </a-row>

    <a-divider orientation="left"><a-tag color="blue">批次数据</a-tag></a-divider>

    <a-row justify="start" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="差错总单数">
            {{ vdata.detailData.diffCount }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="待处理的差错总单数">
            {{ vdata.detailData.unHandleDiffCount }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="平台交易总单数">
            {{ vdata.detailData.totalCount }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="渠道交易总单数">
            {{ vdata.detailData.channelTotalCount }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="平台交易总金额">
            {{ (vdata.detailData.totalAmount/100).toFixed(2) }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="渠道交易总金额">
            {{ (vdata.detailData.channelTotalAmount/100).toFixed(2) }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="平台退款总单数">
            {{ vdata.detailData.totalRefundCount }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="渠道退款总单数">
            {{ vdata.detailData.channelTotalRefundCount }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="平台退款总金额">
            {{ (vdata.detailData.totalRefundAmount/100).toFixed(2) }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="渠道退款总金额">
            {{ (vdata.detailData.channelTotalRefundAmount/100).toFixed(2) }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="平台总手续费">
            {{ (vdata.detailData.totalFee/100).toFixed(2) }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="渠道总手续费">
            {{ (vdata.detailData.channelTotalFee/100).toFixed(2) }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
  </a-drawer>
</template>

<script lang="ts" setup>
import { API_URL_CHECK_BATCH_LIST, req } from '@/api/manage'
import {reactive} from 'vue'
import dateUtil from '@/utils/dateUtil.js'

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

function show (recordId) { // 弹层打开事件
  
  vdata.recordId = recordId
  req.getById(API_URL_CHECK_BATCH_LIST, recordId).then(res => {
    vdata.detailData = res
  })
  vdata.visible = true
}
function onClose () {
  vdata.visible = false
}
function downloadBillFunction() {
  window.open(vdata.detailData.orgBillFilePath)
}

defineExpose({
  show //抛出show函数给父组件
})
</script>
