<template>
	<AppLayout title="" :use-scroll-view="false">
		<view class="login-container">
			<!-- 顶部装饰 -->
			<view class="header-decoration">
				<view class="decoration-circle circle-1"></view>
				<view class="decoration-circle circle-2"></view>
			</view>

			<!-- Logo区域 -->
			<view class="logo-section">
				<view class="logo-wrapper">
					<text class="logo-icon">✦</text>
				</view>
				<text class="logo-title">欢迎回来</text>
				<text class="logo-subtitle">请登录您的账号</text>
			</view>

			<!-- 登录表单 -->
			<view class="form-section">
				<view class="form-item">
					<view class="form-label">账号</view>
					<view class="input-wrapper">
						<text class="input-icon">👤</text>
						<input class="form-input" placeholder="请输入账号" placeholder-class="inputplace" v-model="form.username" />
					</view>
				</view>

				<view class="form-item">
					<view class="form-label">密码</view>
					<view class="input-wrapper">
						<text class="input-icon">🔒</text>
						<input class="form-input" type="password" placeholder="请输入密码" placeholder-class="inputplace" v-model="form.password" />
					</view>
				</view>

				<view class="form-item">
					<view class="form-label">验证码</view>
					<view class="input-wrapper verify-wrapper">
						<text class="input-icon">✧</text>
						<input class="form-input verify-input" placeholder="请输入验证码" placeholder-class="inputplace" v-model="form.code" />
						<image class="verify-code" :src="codeUrl" @click="getCodeImg"></image>
					</view>
				</view>
			</view>

			<!-- 登录按钮 -->
			<view class="button-section">
				<button class="login-btn" @click="register">
					<text class="btn-text">登 录</text>
					<text class="btn-arrow">→</text>
				</button>
			</view>

			<!-- 底部装饰 -->
			<view class="footer-decoration">
				<view class="decoration-dots">
					<view class="dot"></view>
					<view class="dot dot-active"></view>
					<view class="dot"></view>
				</view>
			</view>
		</view>
	</AppLayout>
</template>

<script setup>
	import {
		reactive,
		inject,
		watch,
		ref,
		onMounted,
		onUnmounted
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	const {
		$api,
		navTo,
		vacanciesTo,
		navBack
	} = inject("globalFunction");
	const placeholderStyle = 'font-size:30rpx'
	const checked = ref(true)
	const codeUrl = ref('')
	const flag=ref('nw')

	const form = reactive({
		username: '',
		password: '',
		rememberMe: false,
		code: '',
		uuid: ''
	})

	onLoad((option) => {
		console.log("111")
		if(option.flag){
			flag.value=option.flag
		}
	})

	onMounted(() => {
		getCodeImg()
		// let form={}
		// if (uni.getStorageSync('userInfo').isCompanyUser=='1') {
		// 	form={
		// 		usertype: '1',
		// 		idno: uni.getStorageSync('userInfo').idCard,
		// 		name: uni.getStorageSync('userInfo').name,
		// 		enterprisecode:"",
		// 		enterprisename: "",
		// 		contactperson: "",
		// 		contactphone: "",
		// 	}
		// }else if (uni.getStorageSync('userInfo').isCompanyUser=='0') {
		// 	form={
		// 		usertype: "2",
		// 		enterprisecode: uni.getStorageSync('userInfo').idCard,
		// 		enterprisename: uni.getStorageSync('userInfo').name,
		// 		contactperson: "",
		// 		contactphone: "",
		// 		idno: "",
		// 		name: ""
		// 	}
		// }
		// $api.myRequest('/auth/login2/ks',form,'post',10100).then((res) => {
		// 	if (res.code=='200') {
		// 		uni.setStorageSync('Padmin-Token', res.data.access_token)
		// 		uni.navigateBack({
		// 			delta:2
		// 		})
		// 	}
		// }).catch(() => {
		// 	uni.hideLoading()
		// 	uni.showToast({
		// 		icon: 'none',
		// 		title: '登录失败，请重试'
		// 	})
		// })
	})

	function register() {
		if (!form.username) {
			uni.showToast({
				icon: 'none',
				title: '请输入用户名'
			})
			return
		}
		if (!form.password) {
			uni.showToast({
				icon: 'none',
				title: '请输入密码'
			})
			return
		}
		if (!form.uuid) {
			uni.showToast({
				icon: 'none',
				title: '请输入验证码'
			})
			return
		}
		uni.showLoading({
			title: '登录中...',
			mask: true
		})
		if(flag.value=='hlw'){
			$api.myRequest('/auth/login',form,'post',10100).then((res) => {
				uni.setStorageSync('Padmin-Token', res.data.access_token)
				uni.reLaunch({
					url: '/pages/index/index'
				})
				codeUrl.value = 'data:image/gif;base64,' + res.img
			}).catch(() => {
				uni.hideLoading()
				uni.showToast({
					icon: 'none',
					title: '登录失败，请重试'
				})
			})
		}else if(flag.value=='nw'){
			$api.myRequest('/auth/login',form,'post',9100).then((res) => {
				uni.setStorageSync('inspur-admin-Token', res.data.access_token)
				uni.setStorageSync('fourLevelLinkage-token', res.data.access_token)
				
				uni.reLaunch({
					url: '/packageB/priority/helpFilter'
				})
				codeUrl.value = 'data:image/gif;base64,' + res.img
			}).catch(() => {
				uni.hideLoading()
				uni.showToast({
					icon: 'none',
					title: '登录失败，请重试'
				})
			})
		}
		
	}

	function getCodeImg() {
		if(flag.value=='hlw'){
			$api.myRequest('/code',{},'get',10100).then((resData) => {
				codeUrl.value = 'data:image/gif;base64,' + resData.img
				form.uuid = resData.uuid
			});
		}else if(flag.value=='nw'){
			$api.myRequest('/code',{},'get',9100).then((resData) => {
				codeUrl.value = 'data:image/gif;base64,' + resData.img
				form.uuid = resData.uuid
			});
		}
		
	}
</script>

<style scoped lang="stylus">
	/* 主题色变量 */
	$primary-color = #46ca98
	$primary-light = #e8f8f0
	$primary-dark = #3ab882
	$text-primary = #1a1a1a
	$text-secondary = #666666
	$text-placeholder = #b5b5b5
	$bg-light = #f8faf9
	$border-color = #e8e8e8

	.login-container
		background: linear-gradient(180deg, #f8faf9 0%, #ffffff 100%)
		min-height: 100vh
		display: flex
		flex-direction: column
		align-items: center
		position: relative
		overflow: hidden

	/* 顶部装饰 */
	.header-decoration
		position: absolute
		top: 0
		left: 0
		right: 0
		height: 400rpx
		pointer-events: none

		.decoration-circle
			position: absolute
			border-radius: 50%
			background: linear-gradient(135deg, rgba(70, 202, 152, 0.1) 0%, rgba(70, 202, 152, 0.05) 100%)

		.circle-1
			width: 300rpx
			height: 300rpx
			top: -100rpx
			right: -80rpx

		.circle-2
			width: 200rpx
			height: 200rpx
			top: 60rpx
			left: -60rpx
			background: linear-gradient(135deg, rgba(70, 202, 152, 0.08) 0%, rgba(70, 202, 152, 0.02) 100%)

	/* Logo区域 */
	.logo-section
		margin-top: 160rpx
		display: flex
		flex-direction: column
		align-items: center
		animation: fadeInUp 0.6s ease-out

		.logo-wrapper
			width: 140rpx
			height: 140rpx
			background: linear-gradient(145deg, $primary-color 0%, $primary-dark 100%)
			border-radius: 36rpx
			display: flex
			align-items: center
			justify-content: center
			box-shadow: 0 16rpx 40rpx rgba(70, 202, 152, 0.3)
			margin-bottom: 40rpx

		.logo-icon
			font-size: 60rpx
			color: #ffffff

		.logo-title
			font-size: 48rpx
			font-weight: 600
			color: $text-primary
			letter-spacing: 2rpx
			margin-bottom: 12rpx

		.logo-subtitle
			font-size: 28rpx
			color: $text-secondary
			letter-spacing: 1rpx

	/* 表单区域 */
	.form-section
		width: 600rpx
		margin-top: 80rpx
		animation: fadeInUp 0.6s ease-out 0.15s backwards

		.form-item
			margin-bottom: 40rpx

		.form-label
			font-size: 26rpx
			color: $text-secondary
			margin-bottom: 16rpx
			padding-left: 8rpx
			letter-spacing: 1rpx

		.input-wrapper
			display: flex
			align-items: center
			background: #ffffff
			border-radius: 24rpx
			padding: 0 32rpx
			height: 100rpx
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04)
			border: 2rpx solid transparent
			transition: all 0.3s ease

			&:focus-within
				border-color: $primary-color
				box-shadow: 0 4rpx 24rpx rgba(70, 202, 152, 0.15)

		.input-icon
			font-size: 36rpx
			margin-right: 20rpx
			opacity: 0.7

		.form-input
			flex: 1
			height: 100%
			font-size: 30rpx
			color: $text-primary

		.verify-wrapper
			padding-right: 16rpx

		.verify-input
			flex: 1

		.verify-code
			width: 180rpx
			height: 72rpx
			border-radius: 16rpx
			margin-left: 16rpx
			cursor: pointer
			transition: transform 0.2s ease

			&:active
				transform: scale(0.95)

	/* 输入框占位符 */
	.inputplace
		font-weight: 400
		font-size: 28rpx
		color: $text-placeholder

	/* 按钮区域 */
	.button-section
		width: 600rpx
		margin-top: 60rpx
		animation: fadeInUp 0.6s ease-out 0.3s backwards

		.login-btn
			width: 100%
			height: 108rpx
			background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%)
			border-radius: 54rpx
			display: flex
			align-items: center
			justify-content: center
			box-shadow: 0 12rpx 32rpx rgba(70, 202, 152, 0.35)
			transition: all 0.3s ease
			border: none

			&:active
				transform: translateY(2rpx)
				box-shadow: 0 8rpx 24rpx rgba(70, 202, 152, 0.3)

		.btn-text
			font-size: 34rpx
			font-weight: 500
			color: #ffffff
			letter-spacing: 8rpx

		.btn-arrow
			font-size: 32rpx
			color: #ffffff
			margin-left: 16rpx
			transition: transform 0.3s ease

		.login-btn:active .btn-arrow
			transform: translateX(8rpx)

	/* 底部装饰 */
	.footer-decoration
		position: absolute
		bottom: 60rpx
		display: flex
		flex-direction: column
		align-items: center
		animation: fadeInUp 0.6s ease-out 0.45s backwards

		.decoration-dots
			display: flex
			align-items: center
			gap: 16rpx

		.dot
			width: 12rpx
			height: 12rpx
			border-radius: 50%
			background: rgba(70, 202, 152, 0.3)

		.dot-active
			width: 36rpx
			border-radius: 6rpx
			background: $primary-color

	/* 动画 */
	@keyframes fadeInUp
		from
			opacity: 0
			transform: translateY(30rpx)
		to
			opacity: 1
			transform: translateY(0)
</style>