<template>
	<div class="dd-login-page">
		<div class="dd-login-bg dd-login-bg-left"></div>
		<div class="dd-login-bg dd-login-bg-right"></div>

		<div class="dd-login-panel">
			<div class="dd-login-brand">
				<div class="dd-login-logo">
					<img alt="logo" src="/img/logo.svg" />
				</div>
				<div class="dd-login-brand-text">
					<h1>{{ isRebackMode ? "审批处理结果" : "钉钉快捷登录" }}</h1>
					<p>{{ isRebackMode ? "当前审批流程已处理完成" : "正在进入系统，请稍候" }}</p>
				</div>
			</div>

			<div class="dd-login-card" :class="{ 'dd-login-card-success': isRebackMode }">
				<div class="dd-login-icon" :class="{ 'is-success': isRebackMode }">
					<div class="dd-login-icon-ring"></div>
					<div class="dd-login-icon-core">{{ isRebackMode ? "✓" : "钉" }}</div>
				</div>

				<div class="dd-login-title">{{ isRebackMode ? "审批已处理" : "企业身份校验中" }}</div>
				<div class="dd-login-subtitle">
					{{ isRebackMode ? "流程已完成审批处理，你可以返回钉钉继续后续操作。" : "检测到你正在钉钉中打开系统，这里可以作为免登录跳转中转页。" }}
				</div>

				<div class="dd-login-status">
					<div class="dd-login-status-row">
						<span class="label">{{ isRebackMode ? "审批结果" : "当前状态" }}</span>
						<span class="value" :class="{ loading: !isRebackMode }" :style="{
							color: isRebackMode || loginStatus.includes('成功') ? '#52c41a' : '#1890ff'
						}">{{ loginStatus }}</span>
					</div>
				</div>
			</div>

			<div class="dd-login-footer">
				安全登录 · 统一认证 · 钉钉快速进入
			</div>
		</div>
	</div>
</template>

<script>
import config from "@/config";
import loginService from "@/api/auth/loginService";
import userService from "@/api/sys/userService";
import tenantService from "@/api/sys/tenantService";
import financeInvoiceService from '@/api/cw/invoice/CwFinanceInvoiceService'
import FinanceInvoiceService from '@/api/finance/invoice/FinanceInvoiceService'
import taskService from '@/api/flowable/TaskService'
import pick from 'lodash.pick'
export default {
	name: "DdLogin",
	data() {
		return {
			loginStatus: "正在校验身份...",
			isRebackMode: false
		};
	},
	pgFinanceInvoiceService: null,
	mounted() {

		this.isRebackMode = this.$route.query.reback != false && this.$route.query.reback != "false";

		if (this.isRebackMode) {
			this.loginStatus = "审批已处理";
			return;
		}
		this.pgFinanceInvoiceService = new FinanceInvoiceService()
		console.log("DdLogin mounted, starting login process...");
		this.handleLogin()
	},
	methods: {
		handleLogin() {
			let nowToken = this.$TOOL.data.get(config.TOKEN);
			const type = this.$route.query.type;

			//从url的参数获取id，用route获取
			let ddId = this.$route.query.ddid
			const infoId = this.$route.query.infoId;
			if (ddId && infoId) {
				let params = {
					ddId: ddId
				}
				loginService.ddlogin(params).then(async (res) => {
					this.$TOOL.data.set(config.TOKEN, res.token);
					this.$cookies.set(config.TOKEN, res.token, -1);
					let { user } = await userService.info();
					this.$TOOL.data.set("USER_INFO", user);
					this.$store.commit("user/updateUser", user);
					let isPrimaryTenant = user.tenantDTO.id === "10000";
					this.$TOOL.data.set(
						"IS_PRIMARY_TENANT",
						isPrimaryTenant
					);
					if (isPrimaryTenant) {
						tenantService.list().then((data) => {
							this.$TOOL.data.set(
								"TENANT_LIST",
								data.records
							);
						});
					}
					let { menuList, permissions, dictList } =
						await userService.getMenus();
					if (menuList.length == 0) {
						this.loading = false;
						this.$alert(
							"当前用户无任何菜单权限，请联系系统管理员",
							"无权限访问",
							{
								type: "error",
								center: true,
							}
						);
						return false;
					}
					// 布局
					this.$store.commit("SET_layout", "left");
					this.$TOOL.data.set("APP_LAYOUT", "left");
					this.$TOOL.data.set("MENU", menuList);
					this.$TOOL.data.set("PERMISSIONS", permissions);
					this.$TOOL.data.set("DICT_LIST", dictList);
					this.$dictUtils.refreshDictList();

					this.loginStatus = "身份校验成功，正在跳转...";
					//从url的参数获取redirect
					if (type == "cw") {
						financeInvoiceService
							.queryById(infoId)
							.then((data) => {
								this.todo(data)
							})
					}
					if (type == "pg") {
						this.pgFinanceInvoiceService.queryById(infoId).then((data) => {
							this.todo(data)
						})
					}
				})
					.catch(err => {
						this.loginStatus = "登录请求失败，请检查网络或稍后再试";
					});
			} else {
				// 跳转登录
				this.loginStatus = "登录失败，请联系管理员";
			}
		},
		todo(row) {
			let cUser = false
			taskService.getTaskDefInfo({
				taskId: row.invoiceTaskId
			}).then((data) => {
				this.$router.push({
					path: '/flowable/task/TaskForm',
					query: {
						...pick(data, 'formType', 'formUrl', 'procDefKey', 'taskDefKey', 'procInsId', 'procDefId', 'taskId', 'status', 'title', 'businessId'),
						isShow: false,
						formReadOnly: true,
						formTitle: `${data.taskName}`,
						cUser: cUser,
						title: `审批【${data.taskName || ''}】`,
						routePath: '/ddLogin' // 数据处理后需要跳转的页面路径
					}
				})
			})

		},
	},
};
</script>

<style lang="less" scoped>
.dd-login-page {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: calc(env(safe-area-inset-top, 0px) + 20px) 14px calc(env(safe-area-inset-bottom, 0px) + 20px);
	overflow: hidden;
	background: linear-gradient(180deg, #f2f8ff 0%, #e8f3ff 48%, #f8fbff 100%);
}

.dd-login-bg {
	position: absolute;
	border-radius: 50%;
	filter: blur(2px);
	pointer-events: none;

	&.dd-login-bg-left {
		top: -140px;
		left: -150px;
		width: 300px;
		height: 300px;
		background: radial-gradient(circle, rgba(24, 144, 255, 0.2) 0%, rgba(24, 144, 255, 0) 70%);
	}

	&.dd-login-bg-right {
		right: -160px;
		bottom: -180px;
		width: 280px;
		height: 280px;
		background: radial-gradient(circle, rgba(64, 169, 255, 0.2) 0%, rgba(64, 169, 255, 0) 72%);
	}
}

.dd-login-panel {
	position: relative;
	width: 100%;
	max-width: 420px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: stretch;
	z-index: 1;
}

.dd-login-brand {
	padding: 4px 4px 0;
	text-align: center;

	.dd-login-logo {
		width: 56px;
		height: 56px;
		margin: 0 auto 14px;
		padding: 10px;
		border-radius: 16px;
		background: rgba(255, 255, 255, 0.72);
		box-shadow: 0 12px 28px rgba(24, 144, 255, 0.1);
		backdrop-filter: blur(10px);

		img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}

	.dd-login-brand-text {
		h1 {
			margin: 0 0 8px;
			color: #1f2d3d;
			font-size: 24px;
			font-weight: 700;
			line-height: 1.35;
		}

		p {
			margin: 0;
			max-width: 100%;
			color: #5f6b7a;
			font-size: 13px;
			line-height: 1.7;
		}
	}
}

.dd-login-card {
	position: relative;
	padding: 24px 18px 20px;
	border: 1px solid rgba(24, 144, 255, 0.12);
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.88);
	box-shadow: 0 16px 40px rgba(31, 45, 61, 0.1);
	backdrop-filter: blur(14px);
	margin-top: 10%;
}

.dd-login-card-success {
	border-color: rgba(82, 196, 26, 0.18);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 18px 42px rgba(63, 140, 40, 0.12);
}

.dd-login-icon {
	position: relative;
	width: 76px;
	height: 76px;
	margin: 0 auto 16px;

	&-ring {
		position: absolute;
		inset: 0;
		border-radius: 50%;
		background: linear-gradient(135deg, rgba(24, 144, 255, 0.14), rgba(24, 144, 255, 0.02));
		border: 1px solid rgba(24, 144, 255, 0.2);
	}

	&-core {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 48px;
		height: 48px;
		border-radius: 15px;
		background: linear-gradient(135deg, #1890ff 0%, #36c3ff 100%);
		color: #ffffff;
		font-size: 20px;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 14px 28px rgba(24, 144, 255, 0.3);
	}
}

.dd-login-icon.is-success {
	.dd-login-icon-ring {
		background: linear-gradient(135deg, rgba(82, 196, 26, 0.16), rgba(82, 196, 26, 0.02));
		border-color: rgba(82, 196, 26, 0.24);
	}

	.dd-login-icon-core {
		background: linear-gradient(135deg, #52c41a 0%, #95de64 100%);
		box-shadow: 0 14px 28px rgba(82, 196, 26, 0.28);
		font-size: 24px;
	}
}

.dd-login-title {
	margin-bottom: 8px;
	color: #1f2d3d;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
}

.dd-login-subtitle {
	margin: 0 auto 18px;
	max-width: 420px;
	color: #6b7785;
	font-size: 13px;
	line-height: 1.7;
	text-align: center;
}

.dd-login-status {
	padding: 12px 14px;
	border-radius: 16px;
	background: #f6fbff;
	border: 1px solid #e0f0ff;
}

.dd-login-status-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 12px;
	padding: 10px 0;
	font-size: 13px;

	&+.dd-login-status-row {
		border-top: 1px solid #eaf4ff;
	}

	.label {
		color: #7b8794;
	}

	.value {
		color: #1f2d3d;
		font-weight: 600;
		word-break: break-word;

		&.loading {
			color: #1890ff;
		}
	}
}

.dd-login-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 18px;

	button {
		width: 100%;
		height: 44px;
		border-radius: 14px;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.2s ease;
		-webkit-tap-highlight-color: transparent;
	}

	.primary-btn {
		border: none;
		background: linear-gradient(135deg, #1890ff 0%, #36c3ff 100%);
		color: #ffffff;
		box-shadow: 0 12px 24px rgba(24, 144, 255, 0.24);
	}

	.ghost-btn {
		border: 1px solid #cfe7ff;
		background: #ffffff;
		color: #1890ff;
	}
}

.dd-login-tips {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px dashed #d9ecff;
}

.tip-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: #73808f;
	font-size: 12px;
	line-height: 1.7;

	&+.tip-item {
		margin-top: 8px;
	}

	.dot {
		width: 6px;
		height: 6px;
		margin-top: 8px;
		border-radius: 50%;
		background: #36a3ff;
		flex-shrink: 0;
	}
}

.dd-login-footer {
	margin-top: 2px;
	color: #8d99a8;
	font-size: 12px;
	text-align: center;
	line-height: 1.6;
}

@media (min-width: 768px) {
	.dd-login-panel {
		max-width: 960px;
		grid-template-columns: 1.05fr 0.95fr;
		gap: 28px;
		align-items: center;
	}

	.dd-login-brand {
		padding: 20px 12px;
		text-align: left;

		.dd-login-logo {
			width: 72px;
			height: 72px;
			margin: 0 0 24px;
			padding: 14px;
			border-radius: 20px;
		}

		.dd-login-brand-text h1 {
			margin-bottom: 14px;
			font-size: 38px;
		}

		.dd-login-brand-text p {
			max-width: 460px;
			margin: 0;
			font-size: 16px;
		}
	}

	.dd-login-page {
		align-items: center;
		padding: 32px;
	}

	.dd-login-bg {
		&.dd-login-bg-left {
			top: -180px;
			left: -120px;
			width: 420px;
			height: 420px;
		}

		&.dd-login-bg-right {
			right: -160px;
			bottom: -220px;
			width: 460px;
			height: 460px;
		}
	}

	.dd-login-card {
		padding: 36px 32px 28px;
		border-radius: 28px;
	}

	.dd-login-icon {
		width: 92px;
		height: 92px;
		margin-bottom: 20px;
	}

	.dd-login-actions {
		flex-direction: row;
		margin-top: 24px;

		button {
			width: auto;
			flex: 1;
			height: 46px;
			font-size: 15px;
		}
	}

	.dd-login-status-row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
	}

	.dd-login-title {
		font-size: 24px;
	}

	.dd-login-subtitle {
		margin-bottom: 24px;
		font-size: 14px;
	}

	.dd-login-footer {
		margin-top: 18px;
		font-size: 13px;
	}
}

@media (max-width: 480px) {
	.dd-login-status-row {
		gap: 6px;
	}

	.dd-login-card {
		padding-left: 16px;
		padding-right: 16px;
	}

	.dd-login-brand .dd-login-brand-text h1 {
		font-size: 22px;
	}
}
</style>
