<template>
  <a-drawer
      v-model:visible="vdata.visible"
      width="50%"
      placement="right"
      :closable="true"
      :title="vdata.visible === true? '订单详情':''"
      @close="onClose"
  >

      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">订单信息</a-divider>
    <a-row justify="space-between" type="flex">
      <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.channelOrderNo??"--" }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>

      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="渠道订单号">
            {{ vdata.detailData.platformOrderNo??"--" }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="商户订单号">
            {{ vdata.detailData.mchOrderNo??"--" }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="落单订单号">
            {{ vdata.detailData.platformMchOrderNo??"--" }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">基础信息</a-divider>
    <a-row justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="商户简称">
            {{ vdata.detailData.mchName }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>

      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="商户号">
            {{ vdata.detailData.mchExtNo }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>

      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="门店名称">
            {{ vdata.detailData.storeName }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>

      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="门店编号">
            {{ vdata.detailData.storeId }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>

      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="应用名称">
            {{ vdata.detailData.appName }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="应用ID">
            {{ vdata.detailData.appId }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="服务商名称">
            {{ vdata.detailData.agentName }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="服务商号">
            {{ vdata.detailData.agentNo }} [ {{vdata.detailData.agentContactTel}}  ]
          </a-descriptions-item>
        </a-descriptions>
      </a-col>

      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="支付金额（元）">
            <a-tag color="green">
              {{ vdata.detailData.amount/100 }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="订单状态">
             <span v-if="vdata.detailData.state !== 5 ">
               <a-tag
                   :key="vdata.detailData.state"
                   :color="vdata.detailData.state === 0?'blue':vdata.detailData.state === 1?'orange':vdata.detailData.state === 2?'green':vdata.detailData.state === 6?'':'volcano'"
               >
                {{ vdata.detailData.state === 0?'订单生成':vdata.detailData.state === 1?'支付中':vdata.detailData.state === 2?'支付成功':vdata.detailData.state === 3?'支付失败':vdata.detailData.state === 4?'已撤销':vdata.detailData.state === 6?'订单关闭':'未知' }}

              </a-tag>
            </span>
            <span v-else-if="vdata.detailData.state === 5 ">
               <a-tag
                   :key="vdata.detailData.refundState"
                   :color="vdata.detailData.refundState === 0?'red':vdata.detailData.refundState === 1?'orange':vdata.detailData.refundState === 2?'red':'red'"
               >
                {{ vdata.detailData.refundState === 0?'':vdata.detailData.refundState === 1?'部分退款':vdata.detailData.refundState === 2?'全额退款':'未知' }}
              </a-tag>
            </span>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
<!--      <a-col :sm="12">-->
<!--        <a-descriptions><a-descriptions-item label="实际手续费"><a-tag color="pink">{{ vdata.detailData.mchFeeAmount/100 }}</a-tag></a-descriptions-item></a-descriptions>-->
<!--      </a-col>-->

<!--      <a-col :sm="12">-->
<!--        <a-descriptions><a-descriptions-item label="收单手续费"><a-tag color="pink">{{ vdata.detailData.mchOrderFeeAmount/100 }}</a-tag></a-descriptions-item></a-descriptions>-->
<!--      </a-col>-->


<!--      <a-col :sm="12">-->
<!--        <a-descriptions><a-descriptions-item label="商家费率">{{ vdata.detailData.mchFeeRate }}</a-descriptions-item></a-descriptions>-->
<!--      </a-col>-->
      <a-col :sm="12">
        <a-descriptions><a-descriptions-item label="收单费率">{{ vdata.detailData.mchFeeRateNum }}%</a-descriptions-item></a-descriptions>
      </a-col>
      <a-col :sm="12">
<!--        <a-descriptions><a-descriptions-item label="收单手续费（元）">{{ (vdata.detailData.findAmt / 100).toFixed(2) }} * {{ vdata.detailData.mchFeeRateNum }} = {{ (vdata.detailData.mchOrderFeeAmount / 100).toFixed(2) }}</a-descriptions-item></a-descriptions>-->

        收单手续费（元）
        <a-popover placement="top">
          <template #content>
            <p>收单手续费 = 实付金额 - *  收单费率</p>
          </template>
          <question-circle-outlined/>：
        </a-popover>
        {{ (vdata.detailData.findAmt / 100).toFixed(2) }} * {{ vdata.detailData.mchFeeRateNum }} = {{ (vdata.detailData.mchOrderFeeAmount / 100).toFixed(2) }}
      </a-col>
      <a-col :sm="12">
        <a-descriptions><a-descriptions-item label="垫资费率">{{ vdata.detailData.cashRate }}%</a-descriptions-item></a-descriptions>
      </a-col>
      <a-col :sm="12">
        垫资手续费（元）
        <a-popover placement="top">
          <template #content>
            <p>垫资手续费 = 实付金额 - *  垫资费率</p>
          </template>
          <question-circle-outlined/>：
        </a-popover>
        {{ (vdata.detailData.findAmt / 100).toFixed(2) }} * {{ vdata.detailData.cashRate }} = {{ (vdata.detailData.cashFee / 100).toFixed(2) }}

      </a-col>


      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="退款次数">
            {{ vdata.detailData.refundTimes }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="退款总额">
            <a-tag v-if="vdata.detailData.refundAmount" color="cyan">
              {{ (vdata.detailData.refundAmount / 100).toFixed(2)}}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>

      <a-col :sm="12">
        <a-descriptions><a-descriptions-item label="优惠金额">￥{{ (vdata.detailData.discountAmt / 100).toFixed(2) }}</a-descriptions-item></a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions><a-descriptions-item label="补贴金额">
          ￥{{ (vdata.detailData.marketAmt / 100).toFixed(2) }}</a-descriptions-item></a-descriptions>
      </a-col>
      <a-col :sm="12" style="margin-bottom: 12px">
        预计入账金额
<!--        <a-tooltip  title="入账金额 = 实付金额 - 收单手续费 - 垫资手续费 - 退款总额"  >-->
<!--          <question-circle-outlined style="padding-right: 10px"/>：-->
<!--        </a-tooltip>-->
        <a-popover placement="top">
          <template #content>
            <p>入账金额 = 实付金额 - 收单手续费 - 垫资手续费 - 退款总额</p>
          </template>
          <question-circle-outlined/>：
        </a-popover>
        {{vdata.detailData.findAmt / 100}} -  {{vdata.detailData.mchOrderFeeAmount / 100}}  - {{vdata.detailData.cashFee / 100}}  - {{vdata.detailData.refundAmount / 100}} =      {{ ((vdata.detailData.findAmt  - vdata.detailData.mchOrderFeeAmount - vdata.detailData.cashFee - vdata.detailData.refundAmount  + vdata.detailData.marketAmt) / 100).toFixed(2) }}
      </a-col>

      <a-col :sm="12"></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="12">
        <a-descriptions>
          <a-descriptions-item label="买家备注">
            {{ vdata.detailData.buyerRemark }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="卖家备注">
            {{ vdata.detailData.sellerRemark }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>

      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="订单失效时间">
            {{ vdata.detailData.expiredTime }}
          </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.updatedAt }}
          </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>
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">其他信息</a-divider>
    <a-row justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="商品标题">
            {{ vdata.detailData.subject }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="商品描述">
            {{ vdata.detailData.body }}
          </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.currency }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="支付方式">
            {{ vdata.detailData.wayCode }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="客户端IP">
            {{ vdata.detailData.clientIp }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="用户标识">
            {{ vdata.detailData.channelUser }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">

      </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.returnUrl }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>

   <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">分账信息</a-divider>
    <a-row justify="start" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="订单分账模式">
            <span v-if="vdata.detailData.divisionMode == 0">该笔订单不允许分账</span>
            <span v-else-if="vdata.detailData.divisionMode == 1">支付成功按配置自动完成分账</span>
            <span v-else-if="vdata.detailData.divisionMode == 2">商户手动分账(解冻商户金额)</span>
            <span v-else>未知</span>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="分账状态">
            <a-tag v-if="vdata.detailData.divisionState == 0" color="blue">未发生分账</a-tag>
            <a-tag v-else-if="vdata.detailData.divisionState == 1" color="orange">待分账</a-tag>
            <a-tag v-else-if="vdata.detailData.divisionState == 2" color="red">分账处理中</a-tag>
            <a-tag v-else-if="vdata.detailData.divisionState == 3" color="green">任务已结束</a-tag>
            <a-tag v-else color="#f50">未知</a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions><a-descriptions-item label="最新分账发起时间">{{ vdata.detailData.divisionLastTime }}</a-descriptions-item></a-descriptions>
      </a-col>
    </a-row>
<!--    <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">扩展信息</a-divider>-->
<!--    <a-row justify="start" type="flex">-->
<!--      <a-col :sm="24">-->
<!--        <span style="color: black;">扩展参数:</span>-->
<!--        <a-form-item>-->
<!--          <a-input-->
<!--              v-model:value="vdata.detailData.extParam"-->
<!--              type="textarea"-->
<!--              disabled="disabled"-->
<!--              style="height: 100px;color: black;margin-top: 10px;"-->
<!--          />-->
<!--        </a-form-item>-->
<!--      </a-col>-->
<!--    </a-row>-->
  </a-drawer>
</template>
<script lang="ts" setup>
import { API_URL_MCH_APPLYMENT_LIST, req } from '@/api/manage'
import {defineProps,reactive, getCurrentInstance} from 'vue'
const { $hasAgentEnt, $SYS_NAME_MAP } = getCurrentInstance()!.appContext.config.globalProperties
const props = defineProps({
  callbackFunc: { type: Function,default:null }
})

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

function show (data) { // 弹层打开事件
  vdata.detailData = data // 数据清空

  vdata.visible = true
}
function onClose () {
  vdata.visible = false
}
defineExpose({
  show //抛出show函数给父组件
})
</script>