<template>
	<el-dialog :close-on-click-modal="false" :title="$t('order.withdrawOrder.detail')" draggable v-model="visible" width="900px">
		<el-descriptions :column="2" border v-loading="loading">
			<el-descriptions-item :label="$t('order.payOrder.orderId')">{{ orderData.id }}</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.appId')">{{ orderData.appId }}</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.mchOrderNo')" :span="2">{{ orderData.mchOrderNo }}</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.transactionId')" :span="2">{{ orderData.transactionId || '-' }}</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.orderStatus')">
				<el-tag v-if="orderData.orderStatus === 'CREATE_ORDER'" type="info">{{ $t('order.payOrder.createOrder') }}</el-tag>
				<el-tag v-else-if="orderData.orderStatus === 'WITHDRAW_SUCCESS'" type="success">{{ $t('order.withdrawOrder.withdrawSuccess') }}</el-tag>
				<el-tag v-else-if="orderData.orderStatus === 'WITHDRAW_FAIL'" type="danger">{{ $t('order.withdrawOrder.withdrawFail') }}</el-tag>
				<el-tag v-else>{{ orderData.orderStatus }}</el-tag>
			</el-descriptions-item>
			<el-descriptions-item :label="$t('order.withdrawOrder.currencyType')">{{ orderData.currencyType }}</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.orderAmount')">
				<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="$t('order.payOrder.paidAmount')">
				<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="$t('order.payOrder.paymentChannelId')">{{ orderData.paymentChannelId }}</el-descriptions-item>
			<el-descriptions-item :label="$t('order.withdrawOrder.paymentTypeId')">{{ orderData.paymentTypeId }}</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.merchantId')">{{ orderData.merchantUserId }}</el-descriptions-item>
			<el-descriptions-item :label="$t('order.withdrawOrder.feeStatus')">
				<el-tag v-if="orderData.feeStatus" type="success">{{ $t('order.withdrawOrder.feeStatusSuccess') }}</el-tag>
				<el-tag v-else type="danger">{{ $t('order.withdrawOrder.feeStatusFail') }}</el-tag>
			</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.merchantFeeType')">
				<el-tag v-if="orderData.mFeeType === 'PERCENTAGE'" type="info">{{ $t('order.payOrder.feeTypePercentage') }}</el-tag>
				<el-tag v-else-if="orderData.mFeeType === 'FIXED'" type="warning">{{ $t('order.payOrder.feeTypeFixed') }}</el-tag>
				<el-tag v-else-if="orderData.mFeeType === 'MIXED'" type="success">{{ $t('order.payOrder.feeTypeMixed') }}</el-tag>
				<span v-else>-</span>
			</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.merchantFee')">
				{{ orderData.mFee ? `¥${orderData.mFee.toFixed(2)}` : '-' }}
			</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.merchantFeeRate')">
				{{ orderData.mFeeRate ? `${orderData.mFeeRate}%` : '-' }}
			</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.merchantFeeFixed')">
				{{ orderData.mFeeEvery ? `¥${orderData.mFeeEvery.toFixed(2)}` : '-' }}
			</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.agentFeeType')">
				<el-tag v-if="orderData.aFeeType === 'PERCENTAGE'" type="info">{{ $t('order.payOrder.feeTypePercentage') }}</el-tag>
				<el-tag v-else-if="orderData.aFeeType === 'FIXED'" type="warning">{{ $t('order.payOrder.feeTypeFixed') }}</el-tag>
				<el-tag v-else-if="orderData.aFeeType === 'MIXED'" type="success">{{ $t('order.payOrder.feeTypeMixed') }}</el-tag>
				<span v-else>-</span>
			</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.agentFee')">
				{{ orderData.aFee ? `¥${orderData.aFee.toFixed(2)}` : '-' }}
			</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.agentFeeRate')">
				{{ orderData.aFeeRate ? `${orderData.aFeeRate}%` : '-' }}
			</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.agentFeeFixed')">
				{{ orderData.aFeeEvery ? `¥${orderData.aFeeEvery.toFixed(2)}` : '-' }}
			</el-descriptions-item>

			<el-descriptions-item :label="$t('order.withdrawOrder.payeeName')">{{ orderData.payUsername || '-' }}</el-descriptions-item>
			<el-descriptions-item :label="$t('order.withdrawOrder.payeePhone')">{{ orderData.payMobile || '-' }}</el-descriptions-item>

			<el-descriptions-item :label="$t('order.withdrawOrder.bankAccount')" :span="2">{{ orderData.payBankNumber || '-' }}</el-descriptions-item>
			<el-descriptions-item :label="$t('order.withdrawOrder.bankName')" :span="2">{{ orderData.payBankName || '-' }}</el-descriptions-item>

			<el-descriptions-item :label="$t('order.withdrawOrder.payeeEmail')" :span="2">{{ orderData.payEmail || '-' }}</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.subject')" :span="2">{{ orderData.subject || '-' }}</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.notifyUrl')" :span="2">{{ orderData.notifyUrl || '-' }}</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.extraParams')" :span="2">{{ orderData.payAttach || '-' }}</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.reqTime')">{{ orderData.reqTime || '-' }}</el-descriptions-item>
			<el-descriptions-item :label="$t('order.withdrawOrder.completeTime')">{{ orderData.noticeDatetime || '-' }}</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.createTime')">{{ orderData.createTime }}</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.updateTime')">{{ orderData.updateTime }}</el-descriptions-item>
		</el-descriptions>

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false">{{ $t('order.payOrder.close') }}</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>
