<template>
  <div class="login">
    <div class="content">
      <img class="loginImg" src="../assets/images/login.png" alt="" srcset="" />
      <div class="login-form">
        <el-tabs v-model="loginForm.mode" v-if="isLogin == 1">
          <el-tab-pane label="账号密码登录" name="102"></el-tab-pane>
          <el-tab-pane label="手机快捷登录" name="101"></el-tab-pane>
        </el-tabs>
        <div v-if="isLogin == 1">
          <el-form ref="loginRef" :model="loginForm" :rules="loginRules">
            <el-form-item prop="username">
              <el-input
                v-model="loginForm.username"
                type="text"
                auto-complete="off"
                placeholder="手机号"
              >
                <template #prefix>
                  <svg-icon
                    icon-class="user"
                    class="el-input__icon input-icon"
                  />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password" v-if="loginForm.mode == 102">
              <el-input
                v-model="loginForm.password"
                type="password"
                auto-complete="off"
                placeholder="密码"
                @keyup.enter="handleLogin"
              >
                <template #prefix>
                  <svg-icon
                    icon-class="password"
                    class="el-input__icon input-icon"
                  />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="captcha" v-if="loginForm.mode == 101">
              <el-input
                v-model="loginForm.captcha"
                auto-complete="off"
                placeholder="验证码"
                style="width: 65%"
                @keyup.enter="handleLogin"
              >
                <template #prefix>
                  <svg-icon
                    icon-class="validCode"
                    class="el-input__icon input-icon"
                  />
                </template>
              </el-input>
              <WebGetCode v-model:mobile="loginForm.username" />
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="loginForm.rememberMe">记住账号</el-checkbox>
            </el-form-item>
            <el-form-item style="width: 100%">
              <el-button
                class="x_btns"
                :loading="loading"
                size="medium"
                type="primary"
                style="width: 100%"
                @click.prevent="handleLogin"
              >
                <span v-if="!loading">登 录</span>
                <span v-else>登 录 中...</span>
              </el-button>
            </el-form-item>
          </el-form>
          <div style="overflow: hidden">
            <div style="float: left" v-if="isLogin == 1">
              <span class="text_col pointer" :to="'/login'" @click="isLogin = 3"
                >忘记密码</span
              >
            </div>
            <div style="float: right" v-if="register">
              <span @click="isLogin = 2" style="color: #0054ff" class="pointer"
                >注册</span
              >
            </div>
          </div>

          <el-form
            v-if="isLogin == 1"
            :model="registerForm"
            status-icon
            :rules="isCheckRules"
            ref="isCheck"
          >
            <el-form-item prop="isCheck">
              <div style="margin-top: 43px">
                <div class="text_col">
                  <div>其他登录方式</div>
                  <img
                    class="pointer"
                    src="@/assets/images/weixin.png"
                    alt=""
                  />
                </div>
                <el-checkbox
                  v-model="registerForm.isCheck"
                  style="margin-top: 43px"
                >
                  <span class="text_col">登录即同意</span
                  ><span style="color: #0054ff">《协议》</span>
                </el-checkbox>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <Register v-model:isLogin="isLogin" v-else-if="isLogin == 2" />
        <Retrieve v-model:isLogin="isLogin" v-else-if="isLogin == 3" />
      </div>
    </div>

    <!--  底部  -->
    <div class="foot">Copyright © 2007-2021 中科云 版权所有</div>
  </div>
</template>

<script setup>
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import Register from "./register.vue";
import Retrieve from "./retrieve.vue";
import WebGetCode from "@/components/webGetCode";

const store = useStore();
const router = useRouter();
const { proxy } = getCurrentInstance();

const isLogin = ref(1);

const loginForm = ref({
  username: "",
  password: "",
  rememberMe: false,
  mode: "102",
  captcha: "",
});

const registerForm = ref({
  isCheck: false,
});

const disabled = ref(true);
const buttonName = ref("获取验证码");
const isDisabled = ref(false);
const time = ref(10);

const loginRules = {
  username: [{ required: true, trigger: "blur", message: "请输入您的手机号" }],
  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
  captcha: [{ required: true, trigger: "change", message: "请输入验证码" }],
};

const isCheck = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请阅读并勾选"));
  } else {
    callback();
  }
};
const isCheckRules = {
  isCheck: [{ required: true, validator: isCheck, trigger: "change" }],
};

const codeUrl = ref("");
const loading = ref(false);
// 注册开关
const register = ref(true);
const redirect = ref(undefined);

function handleLogin() {
  proxy.$refs.loginRef.validate((valid) => {
    proxy.$refs.isCheck.validate((valid2) => {
      if (valid && valid2) {
        loading.value = true;
        if (loginForm.value.rememberMe) {
          Cookies.set("username", loginForm.value.username, { expires: 30 });
          Cookies.set("password", loginForm.value.password, {
            expires: 30,
          });
          Cookies.set("rememberMe", loginForm.value.rememberMe, {
            expires: 30,
          });
        } else {
          // 否则移除
          Cookies.remove("username");
          Cookies.remove("password");
          Cookies.remove("rememberMe");
        }
        // 调用action的登录方法
        let formData = Object.assign({}, loginForm.value);
        formData.password = proxy.md5(formData.password);
        formData.mode = formData.mode - 0;
        store
          .dispatch("Login", formData)
          .then(() => {
            router.push({ path: redirect.value || "/" });
          })
          .catch(() => {
            loading.value = false;
          });
      }
    });
  });
}

function getCookie() {
  const username = Cookies.get("username");
  const password = Cookies.get("password");
  const rememberMe = Cookies.get("rememberMe");
  loginForm.value = {
    username: username === undefined ? loginForm.value.username : username,
    password: password === undefined ? loginForm.value.password : password,
    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
    mode: loginForm.value.mode,
  };
}
getCookie();
</script>

<style lang='scss' scoped>
.login {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .content {
    padding: 0 250px;
    flex: 1;
    background: #b1ccff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .loginImg {
      width: 705px;
      height: 458px;
    }
  }
  .foot {
    text-align: center;
    padding: 20px;
    background: #fff;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #666666;
  }
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  width: 516px;
  // height: 517px;
  background: #ffffff;
  box-sizing: border-box;
  padding: 30px 33px;
  .tit {
    padding: 30px 0;
    text-align: center;
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #333333;
  }
  .el-tab-pane {
    padding-top: 10px;
  }
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: #0054ff;
  }
  ::v-deep .el-tabs__item {
    color: #666666;
    font-size: 16px;
    &.is-active {
      font-weight: 500;
      color: #0054ff;
      font-size: 20px;
    }
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 30%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.login-code-img {
  height: 36px;
}
.text_col {
  color: #999999;
  img {
    width: 30px;
    margin: 10px 0 0 10px;
  }
}
</style>