<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="24">
        <a-descriptions 
          :title="'差异类型：渠道多帐'+(vdata.detailData.localOrder ? '【需对比账单进行补单】' : '【本地无此订单】')"
        />
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="差异处理状态">
            {{ vdata.detailData.handleState === 0 ? '未处理': vdata.detailData.handleState === 1 ? '挂账': vdata.detailData.handleState === 2 ? '已处理': vdata.detailData.handleState === 3 ? '已忽略': '其他' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <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.orderId }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="账单类型">
            {{ vdata.detailData.billType === 'pay' ? '支付': '退款' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>

    <a-divider v-if="vdata.detailData.diffType == 'channel' || vdata.detailData.diffType == 'order'" orientation="left"><a-tag color="purple">渠道订单信息</a-tag></a-divider>

    <a-row v-if="vdata.detailData.diffType == 'channel' || vdata.detailData.diffType == 'order'" justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="渠道订单状态">
            {{ vdata.detailData.channelState === 2 ? '支付成功' : vdata.detailData.channelState === 5 ? '退款成功' : '未知' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="渠道订单号">
            {{ vdata.detailData.channelOrderNo }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="渠道交易金额">
            {{ (vdata.detailData.channelAmount/100).toFixed(2) }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="渠道手续费">
            {{ (vdata.detailData.channelFeeAmount/100).toFixed(2) }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="渠道交易成功时间">
            {{ vdata.detailData.channelSuccessAt }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col v-if="vdata.detailData.channelUser" :sm="12">
        <a-descriptions>
          <a-descriptions-item label="渠道用户标识">
            {{ vdata.detailData.channelUser }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col v-if="vdata.detailData.orgPayOrderId" :sm="12">
        <a-descriptions>
          <a-descriptions-item label="退款原支付订单号">
            {{ vdata.detailData.orgPayOrderId }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>

    <a-divider v-if="vdata.detailData.localOrder" orientation="left"><a-tag color="purple">本地订单信息</a-tag></a-divider>

    <a-row v-if="vdata.detailData.localOrder" justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item v-if="vdata.detailData.billType === 'pay'" label="订单状态">
            {{ vdata.detailData.localOrder.state === 0?'订单生成':vdata.detailData.localOrder.state === 1?'支付中':vdata.detailData.localOrder.state === 2?'支付成功'
              :vdata.detailData.localOrder.state === 3?'支付失败':vdata.detailData.localOrder.state === 4?'已撤销':vdata.detailData.localOrder.state === 5?'已退款'
                :vdata.detailData.localOrder.state === 6?'订单关闭':'未知' }}
          </a-descriptions-item>
          <a-descriptions-item v-if="vdata.detailData.billType === 'refund'" label="订单状态">
            {{ vdata.detailData.localOrder.state === 0?'订单生成':vdata.detailData.localOrder.state === 1?'退款中':vdata.detailData.localOrder.state === 2?'退款成功'
              :vdata.detailData.localOrder.state === 3?'退款失败':vdata.detailData.localOrder.state === 6?'退款订单关闭':'未知' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="交易金额">
            {{ (vdata.detailData.amount/100).toFixed(2) }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="手续费">
            {{ (vdata.detailData.feeAmount/100).toFixed(2) }}
          </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-row>
    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" style="margin-right:8px" @click="onClose">
        <close-outlined />
        取消
      </a-button>
      <a-button type="primary" :loading="vdata.btnLoading" @click="reissueFunc">
        <check-outlined />
        同步订单状态
      </a-button>
    </div>
  </a-drawer>
</template>

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

const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

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

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

function show (recordId) { // 弹层打开事件
  
  vdata.recordId = recordId
  req.getById(API_URL_CHECK_DIFF_LIST, recordId, { isQueryOrderInfo: 1 }).then(res => {
    vdata.detailData = res

    if(res.localOrder) {
      vdata.localOrder = res.localOrder
    }
  })
  vdata.visible = true
}

function reissueFunc() {
  $infoBox.confirmDanger('确认执行？', '该操作将修改本地订单状态为支付成功', () => {
    req.updateById(API_URL_CHECK_DIFF_LIST + '/reissue', vdata.recordId, null).then(res => {
      $infoBox.message.success('操作成功')
      vdata.visible = false
      props.callbackFunc() // 刷新列表
    })
  })
}

function onClose () {
  vdata.visible = false
}

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