<template>
    <div class="main">
        <div class="container">
            <div class="left">
                <div class="left-logo-box"></div>
            </div>
            <!-- 登录 -->
            <div class="right" v-if="dataStore.type === 1">
                <div class="right-logo-box">
                    <div>
                        <div class="right-logo-font">登录</div>
                        <div class="sign-in">Sign in</div>
                    </div>
                </div>

                <div style="margin-left: 100px">
                    <el-form
                        ref="ruleFormRef"
                        style="width: 300px"
                        :model="dataStore.ruleForm"
                        :rules="dataStore.rules"
                        label-width="auto"
                        label-position="top"
                        class="demo-ruleForm"
                        hide-required-asterisk
                    >
                        <el-form-item label="账号" prop="username">
                            <el-input v-model="dataStore.ruleForm.username" :prefix-icon="Iphone" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input
                                v-model="dataStore.ruleForm.password"
                                type="password"
                                show-password
                                :prefix-icon="Lock"
                                autocomplete="off"
                            />
                            <!-- <div
                              style="
                                  width: 350px;
                                  font-size: 12px;
                                  line-height: 1;
                                  color: #4178d5;
                                  text-align: right;
                                  cursor: pointer;
                              "
                              @click="handleTabClick(2)"
                          >
                              忘记密码?
                          </div> -->
                        </el-form-item>
                        <!-- <el-form-item prop="captcha">
                          <span style="margin-right: 10px; color: #606266">验证码</span>
                          <el-input v-model="dataStore.ruleForm.captcha" style="width: 80px" autocomplete="off" />
                          <img :src="dataStore.base64" style="width: 150px; height: 60px; margin: 0 6px" />
                          <el-button type="primary" v-debounce="getLoginCodeImg">刷新</el-button>
                      </el-form-item> -->
                        <el-form-item>
                            <el-button
                                size="large"
                                type="primary"
                                style="width: 100px; height: 36px; border-radius: 2px; box-shadow: 2px 5px 16px #4178d5"
                                v-debounce="submitForm"
                                >登录</el-button
                            >
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <!--忘记密码 -->
            <div class="right" v-if="dataStore.type === 2">
                <div style="margin-left: 100px">
                    <el-button
                        type="primary"
                        :icon="ArrowLeftBold"
                        circle
                        style="margin: 60px 0 20px"
                        @click="handleTabClick(1)"
                    />
                    <el-form
                        ref="resetRuleFormRef"
                        :model="dataStore.resetRuleForm"
                        :rules="dataStore.resetRules"
                        label-width="auto"
                        label-position="top"
                        class="demo-ruleForm"
                        hide-required-asterisk
                    >
                        <el-form-item label="手机号" prop="iphone">
                            <el-input v-model="dataStore.resetRuleForm.iphone" :prefix-icon="Iphone" autocomplete="off" />
                        </el-form-item>
                        <el-form-item prop="code" label="验证码">
                            <el-input v-model="dataStore.resetRuleForm.code" autocomplete="off">
                                <template #append>
                                    <div style="font-size: 14px; color: #4178d5; cursor: pointer" v-debounce="handleGetCode">
                                        {{ dataStore.codeFont }}
                                    </div>
                                    <div v-if="dataStore.isShowTime" style="margin: 0 5px; font-size: 14px; color: #4178d5">
                                        {{ dataStore.timeCount }}s
                                    </div>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="新密码" prop="newPassword">
                            <el-input
                                v-model="dataStore.resetRuleForm.newPassword"
                                type="password"
                                show-password
                                :prefix-icon="Lock"
                                autocomplete="off"
                            />
                        </el-form-item>
                        <el-form-item label="确认密码" prop="confirmPassword">
                            <el-input
                                v-model="dataStore.resetRuleForm.confirmPassword"
                                type="password"
                                show-password
                                :prefix-icon="Lock"
                                autocomplete="off"
                            />
                        </el-form-item>
                        <el-form-item>
                            <el-button
                                size="large"
                                type="primary"
                                style="width: 100px; height: 36px; border-radius: 2px; box-shadow: 2px 5px 16px #4178d5"
                                v-debounce="resetConfirmForm"
                                >提交</el-button
                            >
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import CryptoJS from "crypto-js";
//loginCodeImgApi
import { loginApi } from "@/api/modules/login";
import { Iphone, Lock, ArrowLeftBold } from "@element-plus/icons-vue";
import { RULES, RULE_FORM, RESET_RULES, RESET_RULE_FORM } from "./constant/index";
import { cloneDeep } from "lodash-es";
//用户信息存储
import { useUserStore } from "@/stores/modules/user";
const userStore = useUserStore();
const $router = useRouter();
//登录表单Ref
const ruleFormRef: any = ref(null);
//修改密码表单Ref
const resetRuleFormRef: any = ref(null);
//数据源
const dataStore = reactive<any>({
    timeCount: 120, //修改密码里验证码倒计时
    isShowTime: false,

    base64: "", //验证码图片
    type: 1, //1:登录,2:修改密码
    codeFont: "获取验证码", //修改密码里的验证码按钮文字
    ruleForm: cloneDeep(RULE_FORM), //登录表单数据
    rules: cloneDeep(RULES), //登录表单验证
    resetRuleForm: cloneDeep(RESET_RULE_FORM), //修改密码表单数据
    resetRules: cloneDeep(RESET_RULES) //修改密码表单验证
});
//计时器
let intervalId: any = null;

//登录
const submitForm = () => {
    console.log(ruleFormRef);
    if (!ruleFormRef) return;
    ruleFormRef?.value?.validate((valid: any) => {
        if (valid) {
            login();
        } else {
            console.log("error submit!");
        }
    });
};
//忘记密码提交事件
const resetConfirmForm = () => {
    if (!resetRuleFormRef) return;
    resetRuleFormRef?.value?.validate((valid: any) => {
        if (valid) {
            let password = CryptoJS.MD5(dataStore.ruleForm.password)?.toString();
            console.log(password, "==== dataStore.ruleForm.password====");
            console.log("submit!");
        } else {
            console.log("error submit!");
        }
    });
};
//登录接口
const login = async () => {
    const result: any = await loginApi({
        ...dataStore.ruleForm,
        password: CryptoJS?.MD5(dataStore.ruleForm.password)?.toString()
    });

    if (result?.code === 0) {
        const { data } = result;
        setUserData(data);
    }
    // else {
    //     getLoginCodeImg();
    // }
};
//获取验证码图片接口
// const getLoginCodeImg = async () => {
//     const result: any = await loginCodeImgApi();
//     if (result?.code === 0) {
//         const { data } = result;
//         const { captcha, token } = data;
//         dataStore.base64 = captcha;
//         dataStore.ruleForm.token = token;
//     }
// };
// getLoginCodeImg();
//登录和密码重置切换
const handleTabClick = (type: any) => {
    dataStore.type = type;
    for (let key in dataStore.ruleForm) {
        dataStore.ruleForm[key] = "";
    }
    for (let key in dataStore.resetRuleForm) {
        dataStore.resetRuleForm[key] = "";
    }
    if (intervalId) {
        handleClearInterval();
        dataStore.timeCount = 120;
        dataStore.isShowTime = false;
    }
};
//120秒验证时间
const updateCountdown = () => {
    intervalId = setInterval(() => {
        if (dataStore.timeCount > 0) {
            dataStore.isShowTime = true;
            dataStore.timeCount--;
        } else {
            handleClearInterval();
            dataStore.timeCount = 120;
            dataStore.isShowTime = false;
        }
    }, 1000);
};
//获取验证码
const handleGetCode = () => {
    //如果计时器已经启动了,就不要再去触发了
    if (intervalId) {
        return;
    }
    resetRuleFormRef.value.validateField("iphone", (valid: any) => {
        if (valid) {
            updateCountdown();
        } else {
        }
    });
};
//清理定时器
const handleClearInterval = () => {
    clearInterval(intervalId);
    intervalId = null;
};

// 设置用户数据
const setUserData = (data: any) => {
    const { username, uid, token, avatar } = data;
    console.log();
    // 设置token
    userStore.setToken("Bearer" + " " + token);
    userStore.setUid(uid);
    userStore.setNickname(username);
    userStore.setAvatar(avatar);
    // await userStore.getAuthMenuList();
    //跳转到首页
    setTimeout(() => {
        $router.push("/admin/index");
    }, 500);
};

onUnmounted(() => {
    //页面卸载的时候清空定时器
    if (intervalId) {
        handleClearInterval();
    }
});
</script>
<style lang="scss">
@import "./index.scss";
</style>
