<template>
	<view class="content flex items-center justify-center px-4">

		<div class="flex items-center justify-center mb-2 fixed top-4 left-4">

			<wd-transition :duration="300" :show="true" name="fade-left">
				<view class="flex-1 overflow-hidden ">
					<wd-img :width="34" :height="34" :src="webInfo.logo" mode="aspectFill" />
				</view>
			</wd-transition>

			<wd-transition :duration="400" :show="true" name="fade-left">
				<text class="flex px-2 text-center justify-center">
					{{ webInfo.name }}
				</text>
			</wd-transition>

		</div>


		<wd-form class="mb-24" ref="form" :model="model">

			<view class="rounded-md overflow-hidden">
				<wd-cell-group border size="large">
					<wd-transition :duration="400" :show="true" name="fade-left">
						<wd-input size="large" label="用户名" label-width="100px" prop="username" clearable
							v-model="model.username" placeholder="请输入用户名"
							:rules="[{ required: true, message: '请填写用户名' }]" />
					</wd-transition>

					<wd-transition :duration="450" :show="true" name="fade-left">
						<wd-input size="large" label="密码" label-width="100px" prop="password" show-password clearable
							v-model="model.password" placeholder="请输入密码"
							:rules="[{ required: true, message: '请填写密码' }]" />
					</wd-transition>

					<wd-transition :duration="450" :show="true" name="fade-left">
						<wd-input size="large" label="验证码" label-width="100px" clearable v-model="model.captch"
							placeholder="请输入验证码" :rules="[{ required: true, message: '请填写验证码' }]" />
						<view style="display: flex;justify-content: flex-end;padding: 10rpx 0;">
							<image @click="getCaptch()" style="height: 60rpx;" :src="captch_img" mode="heightFix"></image>
						</view>
					</wd-transition>
				</wd-cell-group>
			</view>
			<view class="footer mt-4 px-6"
				style="text-align: right;font-size: 28rpx;color: #999;display: flex;align-items: center;justify-content: flex-end;">
				记住密码？
				<!-- <checkbox v-model="is_save_user_pwd" style="transform:scale(0.7)" /> -->
				<wd-checkbox v-model="is_save_user_pwd" shape="square"></wd-checkbox>
			</view>
			<view class="footer mt-4 px-6">
				<wd-transition :duration="500" :show="true" name="fade-left">
					<wd-button style="font-size: 20px;padding: 10px;" :loading="loading" type="primary" size="large"
						@click="handleSubmit" block>登录</wd-button>
				</wd-transition>
			</view>
		</wd-form>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import user from '@/api/modules/user.js'
	import systemApi from '@/api/modules/system.js'
	import utils from '@/utils/utils.js'
	import md5 from 'js-md5';
	// uni.clearStorage(); // 预防本地数据错误

	const webInfo = ref({})

	const getWebInfo = () => {
		systemApi.getSetting().then(res => {
			webInfo.value = res.data
		})
	}

	getWebInfo()
	console.log(uni.getStorageSync('user_pwd'), 'user_pwd')
	const model = ref({
		username: "",
		password: "",
		...(uni.getStorageSync('user_pwd') || {}),
		captch: ''
	})

	const loading = ref(false)
	const is_save_user_pwd = ref(true)
	const form = ref(null)
	const captch_img = ref(null)

	// if (token) {
	// 	const user_info = uni.getStorageSync("user_info");
	// 	if (user_info.type == 1) {
	// 		utils.toUrl("/store/index/index")
	// 	}
	// } else {
	// 	utils.toUrl("/pages/login/index")
	// }
	
	getCaptch()
	function getCaptch() {
		user.captch({
			
		}).then(res => {
			console.log(res, 'res')
			if (res.code == 0) {
				captch_img.value = res.data
			} else {
				
			}
		})
	}

	function handleSubmit() {
		loading.value = true
		form.value
			.validate()
			.then(({
				valid,
				errors
			}) => {
				if (valid) {
					if (is_save_user_pwd.value) {
						uni.setStorageSync("user_pwd", model.value);
					}
					user.login({
						...model.value,
						password: md5(model.value.password),
						captch: model.value.captch
					}).then(res => {

						if (res.code == 0) {
							uni.setStorageSync("token", res.data.access_token);
							uni.setStorageSync("user_info", res.data.user_info);

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

							if (res.data.user_info.type == 1) {
								utils.toUrl("/store/index/index", "redirectTo")
								uni.setStorageSync("store_info", res.data.user_info);
							} else if (res.data.user_info.type == 3) {
								uni.setStorageSync("mall_token", res.data.access_token);
								uni.setStorageSync("mall_info", res.data.user_info);
								utils.toUrl("/mall/index/index", "redirectTo")
							} else {
								uni.showToast({
									title: '登录平台开发中 ···',
									icon: 'none'
								})
							}
							loading.value = false
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
							getCaptch()
							loading.value = false
						}

						loading.value = false
					})
				} else {
					loading.value = false
				}
			})
			.catch((error) => {
				console.log(error, 'error')
				loading.value = false
			})
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 100vh;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>