<template>
	<el-dialog :close-on-click-modal="false" :title="$t('order.notifyLog.title')" draggable v-model="visible" width="1000px">
		<div v-loading="loading">
			<!-- 回调信息概览 -->
			<el-descriptions :column="2" border class="mb20" v-if="notifyData.id">
				<el-descriptions-item :label="$t('order.notifyLog.orderNo')">{{ notifyData.orderId || '-' }}</el-descriptions-item>
				<el-descriptions-item :label="$t('order.notifyLog.notifyStatus')">
					<el-tag :type="getStatusType(notifyData.status)" size="default">
						{{ getStatusLabel(notifyData.status) }}
					</el-tag>
				</el-descriptions-item>
				<el-descriptions-item :label="$t('order.notifyLog.currentNotifyTimes')">
					<el-tag type="info">{{ notifyData.notifyTimes || 0 }}</el-tag>
				</el-descriptions-item>
				<el-descriptions-item :label="$t('order.notifyLog.maxNotifyTimes')">
					<el-tag type="info">{{ notifyData.maxNotifyTimes || 0 }}</el-tag>
				</el-descriptions-item>
				<el-descriptions-item :label="$t('order.notifyLog.lastExecuteTime')" :span="2">{{ notifyData.lastExecuteTime || '-' }}</el-descriptions-item>
				<el-descriptions-item :label="$t('order.notifyLog.nextNotifyTime')" :span="2">{{ notifyData.nextNotifyTime || '-' }}</el-descriptions-item>
				<el-descriptions-item :label="$t('order.notifyLog.notifyUrl')" :span="2">
					<el-text class="notify-url" truncated>{{ notifyData.notifyUrl || '-' }}</el-text>
				</el-descriptions-item>
				<el-descriptions-item :label="$t('order.notifyLog.failReason')" :span="2">
					<span style="color: #f56c6c">{{ notifyData.errorMsg || '-' }}</span>
				</el-descriptions-item>
			</el-descriptions>

			<!-- 通知日志列表 -->
			<el-divider content-position="left">{{ $t('order.notifyLog.notifyLogList') }}</el-divider>
			<el-timeline v-if="notifyData.payNotifyLogs && notifyData.payNotifyLogs.length > 0">
				<el-timeline-item
					v-for="(log, index) in notifyData.payNotifyLogs"
					:key="index"
					:timestamp="log.createTime"
					placement="top"
					:type="getStatusType(log.status)"
				>
					<el-card shadow="hover">
						<div class="log-item">
							<div class="log-header">
								<span class="log-title">{{ $t('order.notifyLog.notifyTimes', { n: log.notifyTimes }) }}</span>
								<el-tag :type="getStatusType(log.status)" size="small">
									{{ getStatusLabel(log.status) }}
								</el-tag>
							</div>
							<div class="log-content">
								<div class="log-label">{{ $t('order.notifyLog.responseResult') }}</div>
								<pre class="log-response">{{ log.response || $t('order.notifyLog.noResponse') }}</pre>
							</div>
						</div>
					</el-card>
				</el-timeline-item>
			</el-timeline>
			<el-empty v-else :description="$t('order.notifyLog.noNotifyLog')" />
		</div>

		<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="NotifyLogDialog" setup>
import { fetchPayNotifyLog } from '/@/api/order';
import { useMessage } from '/@/hooks/message';

import { useI18n } from 'vue-i18n';

const { t } = useI18n();

// 通知状态映射
const statusMap = computed(() => ({
	0: { label: t('order.notifyLog.pending'), type: 'info' },
	10: { label: t('order.notifyLog.success'), type: 'success' },
	20: { label: t('order.notifyLog.fail'), type: 'danger' },
	30: { label: t('order.notifyLog.processing'), type: 'warning' },
}));

// 定义变量
const visible = ref(false);
const loading = ref(false);
const notifyData = reactive<any>({});

// 获取状态标签类型
const getStatusType = (status: number) => {
	return (statusMap.value as any)[status]?.type || 'info';
};

// 获取状态标签文本
const getStatusLabel = (status: number) => {
	return (statusMap.value as any)[status]?.label || status;
};

// 打开弹窗
const openDialog = async (appId: string, orderId: string) => {
	visible.value = true;
	loading.value = true;

	// 清空数据
	Object.keys(notifyData).forEach((key) => delete notifyData[key]);

	try {
		const res = await fetchPayNotifyLog(appId, orderId);
		Object.assign(notifyData, res.data);
	} catch (err: any) {
		useMessage().error(err.msg || t('order.notifyLog.fetchFailed'));
	} finally {
		loading.value = false;
	}
};

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

<style scoped>
.notify-url {
	max-width: 100%;
	word-break: break-all;
}

.log-item {
	padding: 10px 0;
}

.log-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.log-title {
	font-size: 16px;
	font-weight: bold;
	color: #303133;
}

.log-content {
	margin-top: 10px;
}

.log-label {
	font-size: 14px;
	color: #606266;
	margin-bottom: 5px;
	font-weight: 500;
}

.log-response {
	background: #f5f7fa;
	padding: 12px;
	border-radius: 4px;
	font-size: 13px;
	color: #303133;
	white-space: pre-wrap;
	word-wrap: break-word;
	max-height: 200px;
	overflow-y: auto;
	margin: 0;
	border: 1px solid #e4e7ed;
	font-family: 'Courier New', Courier, monospace;
}

.mb20 {
	margin-bottom: 20px;
}
</style>
