<template>
  <a-drawer
      v-model:visible="vdata.visible"
      width="60%"
      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.refundOrderId }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="通道订单号">
            {{ vdata.detailData.channelPayOrderNo }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>

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


<!--      <a-col :sm="12">-->
<!--        <a-descriptions>-->
<!--          <a-descriptions-item label="渠道订单号">-->
<!--            &#45;&#45;-->
<!--          </a-descriptions-item>-->
<!--        </a-descriptions>-->
<!--      </a-col>-->
<!--      <a-col :sm="12">-->
<!--        <a-descriptions>-->
<!--          <a-descriptions-item label="落单订单号">-->
<!--            &#45;&#45;-->
<!--          </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.isvName }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="渠道号">
            {{ vdata.detailData.isvNo }}
          </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.mchUserName}}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="用户ID">
            {{ vdata.detailData.mchNo }} [ {{vdata.detailData.mchUserPhone}}  ]
          </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.payAmount/100 }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="退款金额">
            <a-tag color="red">
              {{ vdata.detailData.refundAmount/100 }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>


      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="手续费退还金额">
            <a-tag color="green">
              {{ vdata.detailData.refundFeeAmount/100 }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="退款状态">
            <a-tag :color="vdata.detailData.state === 0?'blue':vdata.detailData.state === 1?'orange':vdata.detailData.state === 2?'green':'volcano'">
              {{ vdata.detailData.state === 0?'订单生成':vdata.detailData.state === 1?'退款中':vdata.detailData.state === 2?'退款成功':vdata.detailData.state === 3?'退款失败':vdata.detailData.state === 4?'任务关闭':'未知' }}
            </a-tag>
            <a-tooltip  :title="vdata.detailData.errMsg" v-if="vdata.detailData.state == 3">
              <question-circle-outlined style="color: #FF0000;"/>
            </a-tooltip>

          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="退款类型">
            <a-tag
                :key="vdata.detailData.refundType"
                :color="vdata.detailData.refundType === 0?'blue':vdata.detailData.refundType === 1?'red':vdata.detailData.refundType === 2?'orange':'volcano'"
            >
              {{ vdata.detailData.refundType === 1?'全额退款':vdata.detailData.refundType === 2?'部分退款':'' }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>

      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="退款模式">
            <a-tag
                :key="vdata.detailData.extParam"
                :color="vdata.detailData.extParam === '1'?'blue':vdata.detailData.extParam === '2'?'orange':'volcano'"
            >
              {{ vdata.detailData.extParam === '1'?'收款商户号':vdata.detailData.extParam === '2'?'退款专用账户':'' }}
            </a-tag>
          </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.notifyUrl }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>

      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="退款成功时间">
            {{ vdata.detailData.successTime }}
          </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-row>


<!--      <a-divider />-->
<!--      <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="24">-->
<!--        <a-descriptions>-->
<!--          <a-descriptions-item label="异步通知地址">-->
<!--            {{ vdata.detailData.notifyUrl }}-->
<!--          </a-descriptions-item>-->
<!--        </a-descriptions>-->
<!--      </a-col>-->
<!--    </a-row>-->
<!--    <a-divider />-->
<!--    <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.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="24">-->
<!--      <span style="color: black;">渠道额外参数:</span>-->
<!--      <a-form-item>-->
<!--        <a-input-->
<!--            v-model:value="vdata.detailData.channelExtra"-->
<!--            type="textarea"-->
<!--            disabled="disabled"-->
<!--            style="height: 100px;color: black;margin-top: 10px;"-->
<!--        />-->
<!--      </a-form-item>-->
<!--    </a-col>-->
<!--    <a-divider />-->
<!--    <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-col :sm="24">
      <span style="color: black;">备注:</span>
      <a-form-item>
        <a-input
            v-model:value="vdata.detailData.remark"
            type="textarea"
            disabled="disabled"
            style="height: 100px;color: black;margin-top: 10px;"
        />
      </a-form-item>
    </a-col>
  </a-drawer>
</template>

<script lang="ts" setup>
import {  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>
