<template>
	<view class="container">
		<image class="bkg" mode="aspectFill" src="../static/login-bg.png"></image>
		<view class="login">
			<view class="login-title">
				<view>Hello</view>
				<view>欢迎登录护工端</view>
			</view>
			<view class="login-form">
				<view>
					<u-input v-model="form.username" border-color="#f5f5f5" placeholder="请输入用户名"></u-input>
				</view>
				<view>
					<u-input v-model="form.password" border-color="#f5f5f5" type="password"
						placeholder="请输入密码"></u-input>
				</view>
			</view>
			<view class="role-select">
				<view class="role-title">请选择登录角色：</view>
				<view class="role-options">
					<view class="role-item" v-for="(item, index) in roleList" :key="index" @click="form.role = item.value">
						<view class="radio-box" :class="{'active': form.role === item.value}">
							<view class="radio-inner" v-if="form.role === item.value"></view>
						</view>
						<text class="role-label">{{item.label}}</text>
					</view>
				</view>
			</view>
			<view class="login-btn">
				<view @click="login">立即登录</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					password: '',
					role: uni.getStorageSync('login_role') || 'nurse' // 从缓存获取角色，默认护工
				},
				roleList: [
					{
						value: 'nurse',
						label: '护工'
					},
					{
						value: 'staff',
						label: '工作人员'
					},
					{
						value: 'operator',
						label: '运营人员'
					}
				],
				site_name: ''
			};
		},
		onReady() {},
		onShareAppMessage() {
			return {
				title: '医康养服务', // 分享标题
				path: '/pages/index/index', // 分享路径，通常指向首页
			}
		},
		methods: {
			login() {
				if (!this.form.username || !this.form.password) {
					uni.showToast({
						title: '请输入用户名和密码',
						icon: 'none'
					})
					return
				}
				if (!this.form.role) {
					uni.showToast({
						title: '请选择登录角色',
						icon: 'none'
					})
					return
				}
				let that = this
				// 根据角色选择不同的登录接口
				let loginApi = null
				switch(this.form.role) {
					case 'nurse':
						loginApi = this.$u.api.login  // 护工登录
						break
					case 'staff':
						loginApi = this.$u.api.staffLogin  // 工作人员登录
						break
					case 'operator':
						loginApi = this.$u.api.operatorLogin  // 运营人员登录
						break
					default:
						uni.showToast({
							title: '无效的角色选择',
							icon: 'none'
						})
						return
				}
				
				loginApi({
					username: this.form.username,
					password: this.form.password,
				}).then(res=>{
					console.log("res1",res)
					if(res.errcode === 40002) {
						that.base.toast("账号密码不正确")
						return
					}
					// 缓存登录角色
					uni.setStorageSync('login_role', this.form.role)
					const loginRole = uni.getStorageSync('login_role');
					if (loginRole === 'staff') {
						that.$u.vuex('vuex_token', res.token)
					}else if(loginRole === 'operator'){
						that.$u.vuex('vuex_token', res.access_token)
					}else {
						that.$u.vuex('vuex_token', res.token)
					}
					that.base.toast("登录成功",1500,function(){
						uni.login({
							provider: 'weixin',
							success: (loginRes) => {
								const code = loginRes.code;
								// 调用静默登录接口
								
								setTimeout(function(){
									const loginRole = uni.getStorageSync('login_role');
									if (loginRole === 'staff') {
										// that.$u.vuex('vuex_token', res.token)
										that.$u.api.appletLogin({ code }).then(silentRes => {
												uni.reLaunch({
												url: '/pages/index/staffIndex'
												});
											}).catch(err => {
												console.error('静默登录失败', err);
												// 可以给用户提示
										});
									}else if(loginRole === 'operator'){
										// that.$u.vuex('vuex_token', res.access_token)
											uni.reLaunch({
											url: '/pages/index/operatorIndex'
											});
									}else {
										// that.$u.vuex('vuex_token', res.token)
										that.$u.api.nurseAppletLogin({ code }).then(silentRes => {
											uni.switchTab({
											url: '/pages/index/index'
											});
										}).catch(err => {
											console.error('静默登录失败', err);
											// 可以给用户提示
										});
									}
								}, 1500)
								
							},
							fail: (err) => {
								console.error('获取微信code失败', err);
								// 可以给用户提示
							}
						});
						
						
					})
				}).catch(err => {
					console.error("登录失败", err)
					that.base.toast("登录失败，请稍后重试")
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		background-color: #fff;
		font-size: 32rpx;
		.bkg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
		}

		.login {
			position: absolute;
			top: 0;
			left: 0;
			padding-top: 150rpx;
			// text-align: center;
			width: 100%;

			&-title {
				font-size: 50rpx;
				color: #fff;
				text-align: left;

				&>view {
					width: 50%;
					margin: 0 auto;
				}
			}

			&-form {
				padding: 400rpx 65rpx 100rpx 65rpx;
				margin-bottom: 10rpx;
				&>view {
					background-color: #f5f5f5;
					border-radius: 60rpx;
					padding: 10rpx 30rpx;
					margin-bottom: 35rpx;
				}

			}
			&-btn{
				padding: 0 65rpx;
				&>view{
					font-size: 33rpx;
					border-radius: 60rpx;
					margin-bottom: 35rpx;
					height:90rpx;
					line-height: 90rpx;
					text-align: center;
					color: #fff;
					background: linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%);
					box-shadow: 1rpx 1rpx 10rpx #c10d12;
				}
			}
		}

		.role-select {
			padding: 0 30rpx;
			margin-bottom: 50rpx;
			margin-top: -60rpx;
			
			.role-title {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 16rpx;
				text-align: center;
			}
			
			.role-options {
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				
				.role-item {
					display: flex;
					align-items: center;
					margin: 0 20rpx;
					margin-bottom: 10rpx;
					
					.radio-box {
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
						border: 2rpx solid #dcdfe6;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 12rpx;
						
						&.active {
							border-color: #1479ff;
							
							.radio-inner {
								width: 24rpx;
								height: 24rpx;
								border-radius: 50%;
								background-color: #1479ff;
							}
						}
					}
					
					.role-label {
						font-size: 28rpx;
						color: #333;
					}
				}
			}
		}
	}
</style>