<template>
	<div class="login-container">
		<div class="centerbox">
			<!-- <div class="title g_c_3 g_fs_32">伯才供应链平台管理入口</div> -->
			<div class="contentleft"></div>
			<div class="contentright">
				<div class="contentbox">
					<div class="g_text_c g_mt_40">
						<img src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/ibocai/loginLogo.svg" style="width: 74px; text-align: center" alt />
					</div>
					<ul class="loginchange centerall g_flex_row_center g_mt_30 g_mb_24">
						<li class="g_pb_4 g_fs_14 g_fw_600 g_mr_52" :class="{ loginactive: loginType === 1 }" @click="loginType = 1">密码登录</li>
						<li class="g_pb_4 g_fs_14 g_fw_600" :class="{ loginactive: loginType === 2 }" @click="loginType = 2">验证码登录</li>
					</ul>
					<a-form :model="loginInfo" @finish="submitInfo" @validate="watchValidate" hideRequiredMark :colon="false" @finishFailed="onFinishFailed" :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }" autocomplete="off" ref="loginInfoForm" style>
						<div v-if="loginType == 1">
							<a-form-item class="" label=" " name="username" :rules="[{ required: true, message: '请输入手机号' }]">
								<!-- g_w_240 -->
								<a-input v-model:value="loginInfo.username" size="large" class="g_fs_14 g_h_36" :maxLength="11" placeholder="请输入手机号">
									<template #prefix>
										<i class="iconfont icon-yonghuming g_lh_1 g_fsi_22" />
									</template>
								</a-input>
							</a-form-item>
							<a-form-item class label=" " name="password" :rules="[{ required: true, message: '请输入密码' }]">
								<a-input v-model:value="loginInfo.password" type="password" size="large" class="g_fs_14 g_h_36" :maxLength="11" placeholder="请输入密码">
									<template #prefix>
										<i class="iconfont icon-mima g_lh_1 g_fsi_24" />
									</template>
								</a-input>
							</a-form-item>
							<div @click="showModal" class="g_fs_12 g_text_r g_pr_24 g_cursor_point" style="transform: translateY(-16px)">忘记密码</div>
						</div>
						<div class="g_mb_51" v-else>
							<a-form-item class label=" " name="tel" :rules="[{ required: true, message: '请输入手机号' }]">
								<!-- g_w_240 -->
								<a-input v-model:value="loginInfo.tel" size="large" class="g_fs_14 g_h_36" :maxLength="11" placeholder="请输入手机号">
									<template #prefix>
										<i class="iconfont icon-yonghuming g_lh_1 g_fsi_22" />
									</template>
								</a-input>
							</a-form-item>
							<a-form-item name="code" label=" " :rules="[{ required: true, message: '请输入验证码' }]">
								<a-input type="text" v-model:value="loginInfo.code" size="large" class="g_fs_14 g_h_36" placeholder="请输入验证码">
									<template #prefix>
										<i class="iconfont icon-duanxinyanzheng g_fsi_24" />
									</template>
									<template #suffix>
										<div class="getrulecode">
											<span @click="getPhoneCode" class="g_fs_12 g_pl_6 g_cursor_point" v-if="timedata.isfinish">获取验证码</span>
											<timmer :timedata="timedata" v-if="!timedata.isfinish" />
										</div>
									</template>
								</a-input>
							</a-form-item>
						</div>
						<div class="g_text_c g_mt_8">
							<a-button type="primary" html-type="submit" class="login-form-button g_h_36 g_br_20 g_w_240">登录</a-button>
						</div>
						<!-- <div class="g_mt_16 g_fs_12 g_text_c">
							<router-link to="/main" style="color: #576b95">返回首页</router-link>
						</div> -->
					</a-form>
				</div>
			</div>
		</div>
		<Mfooter class="footer" />
	</div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, onBeforeUnmount } from "vue";
import { message } from "ant-design-vue";
const commonJS = getCurrentInstance().appContext.app.config.globalProperties.G;
import { useRouter, useRoute } from "vue-router";
const router = useRouter(); // 应用路由
const route = useRoute();
import { useStore } from "@/stores/counter";
const storeJS = useStore();
import Mfooter from "../layout/m-footer.vue";
import timmer from "./components/timmer.vue";
import { getPhoneCodeApi, loginApi, infoApi } from "../api/login.js";
onBeforeUnmount(() => {
	console.log("进入登录页面");
});
// router.beforeEach((to, from) => {
// 	//不写条件会在登录页陷入死循环
// 	console.log(localStorage.getItem("DAOTIAN_token"));
// 	if (localStorage.getItem("DAOTIAN_token")) {
// 		to("/merchantManagement/homePage");
// 		// router.push("/merchantManagement/homePage");
// 	} else {
// 		to();
// 	}
// });
onMounted(() => {});
// 倒计时信息
const timedata = ref({
	isfinish: true,
	deadline: 60,
	timer: null,
});
// 登录类型
const loginType = ref(1);

// 登录要传输的信息
const loginInfo = ref({
	tel: "",
	password: "",
	code: "",
});
const loginInfoForm = ref();
const watchValidate = (e1) => {
	console.log(e1);
	setTimeout(() => {
		loginInfoForm.value.clearValidate();
	}, 3000);
};

const submitInfo = (e) => {
	console.log(e);
	let obj = e;
	// if (loginType.value == 2) {
	// 	obj.loginType = 1;
	// } else {
	// 	obj.loginType = 0;
	// }
	loginApi({
		password: "123456",
		username: "ldd",
	})
		.then((res) => {
			console.log(res);
			// localStorage.setItem("LOGIN_DATA", JSON.stringify(res.data));
			localStorage.setItem("DAOTIAN_token", res.data.token);
		})
		.then(() => {
			infoApi({}).then((res) => {
				console.log("infoApi", res);
				// localStorage.setItem("DAOTIAN_userinfo", JSON.stringify(res.data));
				localStorage.setItem("DAOTIAN_userinfo_name", res.data.name || res.data.name);
				localStorage.setItem("DAOTIAN_userinfo_avatar", res.data.avatar);
				// localStorage.setItem("DAOTIAN_userinfo_roleid", res.data.user.agencyRoleId);
				// localStorage.setItem("DAOTIAN_userinfo_agencyid", res.data.user.agencyId);
				router.push("/merchantManagement/homePage");
				message.success("登录成功");
			});
		});
};

const onFinishFailed = (e) => {
	console.log(e);
};
// 获取验证码
const getPhoneCode = () => {
	if (loginInfo.value.tel != "") {
		timedata.value.isfinish = false;
		getPhoneCodeApi({ tel: loginInfo.value.tel }).then((res) => {
			console.log(res);
			message.success("验证码发送成功");
		});
	} else {
		console.log(123);
	}
};
</script>

<style scoped lang="less">
.login-container {
	height: calc(100%);
	background: url("https://matripe-cms.oss-cn-beijing.aliyuncs.com/ibocai/loginBg.svg") no-repeat center;
	.centerbox {
		position: absolute;
		width: 640px;
		height: 400px;
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
		border-radius: 16px;
		// overflow: hidden;
		box-shadow: 0 0 30px 6px #eee;
		.title {
			position: absolute;
			width: 100%;
			top: -64px;
			left: 50%;
			transform: translateX(-50%);
			text-align: center;
		}
		.contentleft {
			width: 320px;
			height: 100%;
			border-radius: 16px 0 0 16px;
			float: left;
			background: url("../assets/image/loginBg.png") no-repeat;
		}
		.contentright {
			width: 320px;
			height: 100%;
			float: left;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 0 16px 16px 0;

			.contentbox {
				width: 290px;
				margin: 0 auto;
				.loginchange {
					width: 100%;
					font-weight: bold;
					.loginactive {
						color: #333;
						border-bottom: 1px solid #333;
					}
					> li {
						color: #cccccc;
						line-height: 22px;
						cursor: pointer;
					}
				}
				.getrulecode {
					width: 67px;
					text-align: center;
					border-left: 1px #cccccc solid;
					line-height: 12px;
				}
			}
			// .content;
		}
	}
	.footer {
		position: absolute;
		bottom: 0;
	}
}
</style>
