<template>
	<div class="login-container">
		<div class="login-wrapper">
			<!-- 左侧品牌区域 -->
			<div class="login-brand-section">
				<div class="brand-content">
					<div class="brand-logo">
						<img :src="logoMini" alt="logo" />
					</div>
					<h1 class="brand-title">{{ getThemeConfig.globalTitle }}</h1>
					<p class="brand-subtitle">{{ getThemeConfig.globalViceTitle }}</p>
					<div class="brand-decoration"></div>
				</div>
			</div>

			<!-- 右侧表单区域 -->
			<div class="login-form-section">
				<div class="form-wrapper">
					<!-- 扫码/账号切换按钮 -->
					<div class="scan-toggle" @click="state.isScan = !state.isScan">
						<!-- 电脑图标 (切换回账号登录) -->
						<svg v-if="state.isScan" viewBox="0 0 1024 1024" width="24" height="24" fill="currentColor">
							<path d="M128 192h768v448H128V192z m0-64c-35.3 0-64 28.7-64 64v448c0 35.3 28.7 64 64 64h768c35.3 0 64-28.7 64-64V192c0-35.3-28.7-64-64-64H128z m256 640h256v64H384v-64z"></path>
						</svg>
						<!-- 二维码图标 (切换到扫码登录) -->
						<svg v-else viewBox="0 0 1024 1024" width="24" height="24" fill="currentColor">
							<path d="M64 64h384v384H64V64z m64 64v256h256V128H128zM576 64h384v384H576V64z m64 64v256h256V128H640zM64 576h384v384H64V576z m64 64v256h256V640H128zM576 576h128v128H576V576z m128 128h128v128H704V704z m-128 128h128v128H576V832z m256 0h128v128H832V832z m0-128h128v128H832V704z"></path>
						</svg>
					</div>

					<!-- 正常登录表单 -->
					<div v-if="!state.isScan">
						<div class="form-header">
							<h2>欢迎登录</h2>
							<p>请输入您的账户信息</p>
						</div>

						<div class="form-content">
							<el-tabs v-model="state.tabsActiveName" class="login-tabs">
								<el-tab-pane label="账号登录" name="account">
									<Account />
								</el-tab-pane>
								<el-tab-pane label="手机号登录" name="mobile">
									<Mobile />
								</el-tab-pane>
							</el-tabs>
						</div>
					</div>

					<!-- 扫码登录 -->
					<div v-else class="scan-container">
						<Scan />
					</div>
				</div>
			</div>
		</div>

		<!-- 页脚 -->
		<div class="login-footer">
			<p>© 2024 红动未来服务商平台</p>
		</div>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, computed, defineComponent, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import logoMini from '/@/assets/logo-mini.svg';
import loginIconTwo from '/@/assets/login-icon-two.svg';
import { NextLoading } from '/@/utils/loading';
import Account from './component/account.vue';
import Mobile from './component/mobile.vue';
import Scan from './component/scan.vue';

// 定义接口来定义对象的类型
interface LoginState {
	tabsActiveName: string;
	isScan: boolean;
}

export default defineComponent({
	name: 'loginIndex',
	components: { Account, Mobile, Scan },
	setup() {
		const storesThemeConfig = useThemeConfig();
		const { themeConfig } = storeToRefs(storesThemeConfig);
		const state = reactive<LoginState>({
			tabsActiveName: 'account',
			isScan: false,
		});
		// 获取布局配置信息
		const getThemeConfig = computed(() => {
			return themeConfig.value;
		});
		// 页面加载时
		onMounted(() => {
			NextLoading.done();
		});
		return {
			logoMini,
			loginIconTwo,
			getThemeConfig,
			state,
		};
	},
});
</script>

<style scoped lang="scss">
.login-container {
	width: 100%;
	height: 100%;
	position: relative;
	/* 替换原有图片背景，使用 CSS 品牌色融合背景 */
	/* 基础深色背景 (抖音风格) */
	background-color: #0f1014;
	background-image: 
		/* 右上：抖音青 */
		radial-gradient(circle at 80% 20%, rgba(36, 246, 250, 0.25) 0%, transparent 35%),
		/* 左上：小红书/抖音红 */
		radial-gradient(circle at 20% 20%, rgba(254, 44, 85, 0.25) 0%, transparent 35%),
		/* 左下：快手橙 */
		radial-gradient(circle at 20% 80%, rgba(255, 80, 0, 0.25) 0%, transparent 35%),
		/* 右下：小红书红 */
		radial-gradient(circle at 80% 80%, rgba(255, 36, 66, 0.25) 0%, transparent 35%);
	background-attachment: fixed;
	display: flex;
	flex-direction: column;
	overflow: hidden;

	.login-wrapper {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40px 20px;
	}

	/* 左侧品牌区域 */
	.login-brand-section {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-right: 60px;

		.brand-content {
			color: white;
			text-align: left;

			.brand-logo {
				margin-bottom: 40px;
				animation: slideInLeft 0.8s ease;

				img {
					width: 100px;
					height: 90px;
					filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
				}
			}

			.brand-title {
				font-size: 42px;
				font-weight: 700;
				margin: 0 0 20px 0;
				letter-spacing: 1px;
				animation: slideInLeft 0.8s ease 0.2s both;
			}

			.brand-subtitle {
				font-size: 18px;
				opacity: 0.9;
				margin: 0;
				animation: slideInLeft 0.8s ease 0.4s both;
				font-weight: 300;
			}

			.brand-decoration {
				width: 60px;
				height: 4px;
				background: rgba(255, 255, 255, 0.5);
				margin-top: 30px;
				border-radius: 2px;
				animation: slideInLeft 0.8s ease 0.6s both;
			}
		}
	}

	/* 右侧表单区域 */
	.login-form-section {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 60px;

		.form-wrapper {
			width: 100%;
			max-width: 420px;
			background: white;
			border-radius: 12px;
			padding: 50px 40px;
			box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
			position: relative;
			animation: slideInRight 0.8s ease;

			.form-header {
				margin-bottom: 40px;
				text-align: center;

				h2 {
					font-size: 28px;
					color: #303133;
					margin: 0 0 10px 0;
					font-weight: 600;
				}

				p {
					font-size: 14px;
					color: #909399;
					margin: 0;
				}
			}

			.form-content {
				margin-bottom: 20px;
			}

			.login-tabs {
				:deep(.el-tabs__header) {
					margin-bottom: 30px;
					border-bottom: none;

					.el-tabs__nav {
						width: 100%;
						display: flex;
						justify-content: space-around;

						.el-tabs__item {
							flex: 1;
							text-align: center;
							font-weight: 500;
							padding: 0;
							color: #909399;
							border-bottom: 2px solid transparent;
							transition: all 0.3s;

							&.is-active {
								color: var(--el-color-primary);
								border-bottom-color: var(--el-color-primary);
							}

							&:hover {
								color: var(--el-color-primary);
							}
						}
					}
				}
			}

			.scan-toggle {
				position: absolute;
				top: 15px;
				right: 15px;
				width: 44px;
				height: 44px;
				border-radius: 50%;
				background: #f5f7fa;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				transition: all 0.3s ease;
				color: #909399;
				font-size: 20px;

				&:hover {
					background: var(--el-color-primary-light-9);
					color: var(--el-color-primary);
					transform: scale(1.1);
				}
			}
		}
	}

	/* 页脚 */
	.login-footer {
		text-align: center;
		padding: 20px;
		color: rgba(255, 255, 255, 0.6);
		font-size: 12px;
		border-top: 1px solid rgba(255, 255, 255, 0.1);

		p {
			margin: 0;
		}
	}
}

/* 响应式设计 */
@media (max-width: 1200px) {
	.login-container {
		.login-brand-section {
			padding-right: 40px;

			.brand-content {
				.brand-title {
					font-size: 32px;
				}

				.brand-subtitle {
					font-size: 16px;
				}
			}
		}

		.login-form-section {
			padding-left: 40px;

			.form-wrapper {
				max-width: 380px;
				padding: 40px 30px;
			}
		}
	}
}

@media (max-width: 768px) {
	.login-container {
		.login-wrapper {
			flex-direction: column;
			padding: 20px;
		}

		.login-brand-section {
			padding-right: 0;
			padding-bottom: 30px;
			text-align: center;

			.brand-content {
				text-align: center;

				.brand-logo {
					img {
						width: 80px;
						height: 70px;
					}
				}

				.brand-title {
					font-size: 24px;
				}

				.brand-subtitle {
					font-size: 14px;
				}

				.brand-decoration {
					margin-left: auto;
					margin-right: auto;
				}
			}
		}

		.login-form-section {
			padding-left: 0;

			.form-wrapper {
				max-width: 100%;
				padding: 30px 20px;
			}
		}
	}
}

/* 动画定义 */
@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
</style>
