<template>
	<el-dialog :close-on-click-modal="false" title="代付订单详情" draggable v-model="visible" width="900px">
		<el-descriptions :column="2" border v-loading="loading">
			<el-descriptions-item label="订单ID">{{ orderData.id }}</el-descriptions-item>
			<el-descriptions-item label="AppId">{{ orderData.appId }}</el-descriptions-item>
			<el-descriptions-item label="商户订单号" :span="2">{{ orderData.mchOrderNo }}</el-descriptions-item>
			<el-descriptions-item label="平台订单号" :span="2">{{ orderData.transactionId || '-' }}</el-descriptions-item>
			<el-descriptions-item label="订单状态">
				<el-tag v-if="orderData.orderStatus === 'CREATE_ORDER'" type="info">创建订单</el-tag>
				<el-tag v-else-if="orderData.orderStatus === 'WITHDRAW_SUCCESS'" type="success">提现成功</el-tag>
				<el-tag v-else-if="orderData.orderStatus === 'WITHDRAW_FAIL'" type="danger">提现失败</el-tag>
				<el-tag v-else>{{ orderData.orderStatus }}</el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="币种">{{ orderData.currencyType }}</el-descriptions-item>

			<el-descriptions-item label="订单金额">
				<span style="color: #f56c6c; font-weight: bold; font-size: 16px">¥{{ orderData.amount ? orderData.amount.toFixed(2) : '0.00' }}</span>
			</el-descriptions-item>
			<el-descriptions-item label="实付金额">
				<span v-if="orderData.noticeAmount" style="color: #67c23a; font-weight: bold; font-size: 16px"
					>¥{{ orderData.noticeAmount.toFixed(2) }}</span
				>
				<span v-else>-</span>
			</el-descriptions-item>

			<el-descriptions-item label="支付通道ID">{{ orderData.paymentChannelId }}</el-descriptions-item>
			<el-descriptions-item label="通道类型ID">{{ orderData.paymentTypeId }}</el-descriptions-item>

			<el-descriptions-item label="商户ID">{{ orderData.merchantUserId }}</el-descriptions-item>
			<el-descriptions-item label="费率状态">
				<el-tag v-if="orderData.feeStatus" type="success">成功</el-tag>
				<el-tag v-else type="danger">失败</el-tag>
			</el-descriptions-item>

			<el-descriptions-item label="商户手续费类型">
				<el-tag v-if="orderData.mFeeType === 'PERCENTAGE'" type="info">百分比</el-tag>
				<el-tag v-else-if="orderData.mFeeType === 'FIXED'" type="warning">固定</el-tag>
				<el-tag v-else-if="orderData.mFeeType === 'MIXED'" type="success">百分比+固定</el-tag>
				<span v-else>-</span>
			</el-descriptions-item>
			<el-descriptions-item label="商户手续费">
				{{ orderData.mFee ? `¥${orderData.mFee.toFixed(2)}` : '-' }}
			</el-descriptions-item>

			<el-descriptions-item label="商户手续费比例">
				{{ orderData.mFeeRate ? `${orderData.mFeeRate}%` : '-' }}
			</el-descriptions-item>
			<el-descriptions-item label="商户手续费固定金额">
				{{ orderData.mFeeEvery ? `¥${orderData.mFeeEvery.toFixed(2)}` : '-' }}
			</el-descriptions-item>

			<el-descriptions-item label="代理商手续费类型">
				<el-tag v-if="orderData.aFeeType === 'PERCENTAGE'" type="info">百分比</el-tag>
				<el-tag v-else-if="orderData.aFeeType === 'FIXED'" type="warning">固定</el-tag>
				<el-tag v-else-if="orderData.aFeeType === 'MIXED'" type="success">百分比+固定</el-tag>
				<span v-else>-</span>
			</el-descriptions-item>
			<el-descriptions-item label="代理商手续费">
				{{ orderData.aFee ? `¥${orderData.aFee.toFixed(2)}` : '-' }}
			</el-descriptions-item>

			<el-descriptions-item label="代理商手续费比例">
				{{ orderData.aFeeRate ? `${orderData.aFeeRate}%` : '-' }}
			</el-descriptions-item>
			<el-descriptions-item label="代理商手续费固定金额">
				{{ orderData.aFeeEvery ? `¥${orderData.aFeeEvery.toFixed(2)}` : '-' }}
			</el-descriptions-item>

			<el-descriptions-item label="收款人姓名">{{ orderData.payUsername || '-' }}</el-descriptions-item>
			<el-descriptions-item label="收款人电话">{{ orderData.payMobile || '-' }}</el-descriptions-item>

			<el-descriptions-item label="银行账号" :span="2">{{ orderData.payBankNumber || '-' }}</el-descriptions-item>
			<el-descriptions-item label="银行名称" :span="2">{{ orderData.payBankName || '-' }}</el-descriptions-item>

			<el-descriptions-item label="收款人邮箱" :span="2">{{ orderData.payEmail || '-' }}</el-descriptions-item>

			<el-descriptions-item label="主题" :span="2">{{ orderData.subject || '-' }}</el-descriptions-item>

			<el-descriptions-item label="后台回调URL" :span="2">{{ orderData.notifyUrl || '-' }}</el-descriptions-item>

			<el-descriptions-item label="扩展参数" :span="2">{{ orderData.payAttach || '-' }}</el-descriptions-item>

			<el-descriptions-item label="请求时间">{{ orderData.reqTime || '-' }}</el-descriptions-item>
			<el-descriptions-item label="完成时间">{{ orderData.noticeDatetime || '-' }}</el-descriptions-item>

			<el-descriptions-item label="创建时间">{{ orderData.createTime }}</el-descriptions-item>
			<el-descriptions-item label="更新时间">{{ orderData.updateTime }}</el-descriptions-item>
		</el-descriptions>

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false">关闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" name="WithdrawOrderDetailDialog" setup>
// 定义变量
const visible = ref(false);
const loading = ref(false);
const orderData = reactive<any>({});

// 打开弹窗
const openDialog = (row: any) => {
	visible.value = true;
	Object.assign(orderData, row);
};

// 暴露方法
defineExpose({
	openDialog,
});
</script>
