<template>
	<view class="content">
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

		<view class="brand-section">
			<view class="brand-logo">
				<image class="brand-logo-image" src="/static/logo1.png" mode="aspectFit"></image>
			</view>
			<view class="brand-title">湘西州三个一安全管理平台</view>
			<view class="brand-subtitle">隐患早发现、风险早处置，守护安全生产</view>
		</view>

		<view class="role-card">
			<view class="role-card-title">选择角色</view>
			<view class="role-grid">
				<view
					v-for="item in roleList"
					:key="item.id"
					class="role-item"
					:class="{ 'role-item--active': selectedRole === item.id }"
					@click="selectRole(item.id)"
				>
					<view class="role-icon-wrap">
						<u-icon
							:name="item.icon"
							:size="22"
							:color="selectedRole === item.id ? '#ffffff' : '#b0b8c8'"
						></u-icon>
					</view>
					<text class="role-name">{{ item.name }}</text>
				</view>
			</view>
		</view>

		<view class="login-card">
			<view class="list">
				<view class="list-call">
					<image class="img" src="/static/index/phone.png"></image>
					<input class="sl-input" v-model="username" type="text" placeholder="请输入用户名" />
				</view>
				<view class="list-call">
					<image class="img" src="/static/index/lock.png"></image>
					<input class="sl-input" v-model="password" type="text" maxlength="32" placeholder="请输入密码" :password="showPassword"/>
					<image class="eye-img" :src="showPassword ? '/static/index/cl.png' : '/static/index/op.png'" @click="changePassword"></image>
				</view>
			</view>
		</view>
		
		<view class="padding-lr">
			<button class="button-login" hover-class="button-hover" @click="handleLogin">
				登录
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { login } from '@/request/api.js';

const statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0;

// 督导组跳转目标小程序配置
const SUPERVISION_MINI_PROGRAM = {
	appId: 'wxe3533791db8a8734',
	path: 'pages/index/index',
	// develop=开发版  trial=体验版  release=正式版
	envVersion: 'release'
};

const roleList = [
	{ id: 'enterprise', name: '企业', icon: 'home-fill' },
	{ id: 'personal', name: '个人', icon: 'account-fill' },
	{ id: 'supervision', name: '督导组', icon: 'man-add-fill' },
	{ id: 'government', name: '政务', icon: 'order' }
	// { id: 'family', name: '家庭', icon: 'home' }
];

const selectedRole = ref('enterprise');
const username = ref('');
const password = ref('');
const showPassword = ref(true);

const selectRole = (roleId) => {
	if (roleId === 'supervision') {
		navigateToSupervisionMiniProgram();
		return;
	}
	selectedRole.value = roleId;
};

const navigateToSupervisionMiniProgram = () => {
	// #ifdef MP-WEIXIN
	uni.navigateToMiniProgram({
		appId: SUPERVISION_MINI_PROGRAM.appId,
		path: SUPERVISION_MINI_PROGRAM.path,
		extraData: {
			from: 'threeonecheck',
			role: 'supervision'
		},
		envVersion: SUPERVISION_MINI_PROGRAM.envVersion,
		success() {
			console.log('跳转督导组小程序成功');
		},
		fail(err) {
			console.error('跳转督导组小程序失败:', err);
			uni.showModal({
				title: '跳转失败',
				content: '请确认两个小程序已关联，且目标小程序已添加您为开发者。开发阶段可在微信开发者工具中测试。',
				showCancel: false
			});
		}
	});
	// #endif

	// #ifndef MP-WEIXIN
	uni.showToast({
		title: '请在微信小程序中使用',
		icon: 'none'
	});
	// #endif
};

const changePassword = () => {
	showPassword.value = !showPassword.value;
};

const handleLogin = async () => {
	if (!username.value) {
		uni.showToast({
			icon: 'none',
			title: '请输入用户名'
		});
		return;
	}

	if (!password.value) {
		uni.showToast({
			icon: 'none',
			title: '请输入密码'
		});
		return;
	}

	try {
		const res = await login({
			username: username.value,
			password: password.value
		});

		if (res.code === 0) {
			if (res.data.token) {
				uni.setStorageSync('token', res.data.token);
			}

			const userInfo = {
				userId: res.data.userId,
				username: res.data.username,
				nickName: res.data.nickName,
				deptId: res.data.deptId,
				deptName: res.data.deptName,
				role: res.data.role,
				isDept: res.data.isDept
			};
			uni.setStorageSync('userInfo', JSON.stringify(userInfo));
			uni.setStorageSync('loginRole', selectedRole.value);

			uni.showToast({
				title: '登录成功',
				icon: 'success'
			});

			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}, 1500);
		} else {
			uni.showToast({
				title: res.msg || '登录失败',
				icon: 'none'
			});
		}
	} catch (error) {
		console.error('登录失败:', error);
		uni.showToast({
			title: '网络请求失败',
			icon: 'none'
		});
	}
};
</script>

<style lang="scss" scoped>
page {
	background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 45%, #ffffff 100%);
}

.content {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 45%, #ffffff 100%);
	padding-bottom: 60rpx;
	box-sizing: border-box;
}

.status-bar {
	width: 100%;
	flex-shrink: 0;
}

.brand-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 120rpx 48rpx 32rpx;
}

.brand-logo {
	margin-bottom: 28rpx;
}

.brand-logo-image {
	width: 130rpx;
	height: 130rpx;
	display: block;
}

.brand-title {
	font-size: 40rpx;
	font-weight: 700;
	color: #1a1a2e;
	text-align: center;
	line-height: 1.4;
}

.brand-subtitle {
	margin-top: 16rpx;
	font-size: 26rpx;
	color: #8a94a6;
	text-align: center;
	line-height: 1.5;
}

.role-card {
	margin: 0 40rpx 16rpx;
	padding: 32rpx 28rpx 28rpx;
	background: #ffffff;
	border-radius: 24rpx;
	box-shadow: 0 8rpx 32rpx rgba(47, 108, 242, 0.08);
}

.role-card-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #1a1a2e;
	margin-bottom: 24rpx;
}

.role-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.role-item {
	width: 22%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 8rpx;
}

.role-icon-wrap {
	width: 88rpx;
	height: 88rpx;
	border-radius: 20rpx;
	background: #f5f7fb;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.role-item--active .role-icon-wrap {
	background: linear-gradient(145deg, #4a8af7 0%, #2f6cf2 100%);
	box-shadow: 0 8rpx 20rpx rgba(47, 108, 242, 0.3);
}

.role-name {
	margin-top: 12rpx;
	font-size: 24rpx;
	color: #8a94a6;
	line-height: 1.2;
	text-align: center;
}

.role-item--active .role-name {
	color: #2f6cf2;
	font-weight: 600;
}

.login-card {
	margin: 16rpx 40rpx 0;
	padding: 32rpx 28rpx;
	background: #ffffff;
	border-radius: 24rpx;
	box-shadow: 0 8rpx 32rpx rgba(47, 108, 242, 0.08);
}

.list {
	display: flex;
	flex-direction: column;
	background-color: transparent;
	
	.list-call {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		color: #333333;
		background: #F5F7FB;
		border-radius: 16rpx;
		border: 2rpx solid #F5F7FB;
		margin-top: 24rpx;
		padding: 0 30rpx;

		&:first-child {
			margin-top: 0;
		}
		
		.img {
			width: 30rpx;
			height: 36rpx;
		}
		
		.sl-input {
			flex: 1;
			text-align: left;
			font-size: 32rpx;
			margin-left: 16rpx;
		}
		
		.eye-img {
			width: 40rpx;
			height: 40rpx;
		}
	}
}

.padding-lr {
	padding-left: 40rpx;
	padding-right: 40rpx;
}

.button-login {
	color: #FFFFFF;
	font-size: 34rpx;
	width: 100%;
	height: 100rpx;
	background: linear-gradient(90deg, #3E95F1 0%, #4269F5 100%);
	border-radius: 50rpx;
	line-height: 100rpx;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 48rpx;
	border: none;
	
	&::after {
		border: none;
	}
}

.button-hover {
	opacity: 0.8;
}
</style>
