<template xmlns="">
  <div class="login">
    <div class="login-in-box">
      <div class="login-left">
        <img src="@/assets/images/demo.png" alt="" />
      </div>
      <div class="login-right">
        <div class="login-form">
          <el-form
            ref="loginForm"
            :model="loginForm"
            :rules="loginRules"
            class="login-form"
          >
            <el-form-item>
              <div class="login-title">链友融财务数字一体化信息系统</div>
            </el-form-item>
            <el-form-item prop="tenantName" v-if="tenantEnable">
              <el-input
                v-model="loginForm.tenantName"
                type="text"
                size="small"
                auto-complete="off"
                placeholder="单位"
              >
                <svg-icon
                  slot="prefix"
                  icon-class="tree"
                  class="el-input__icon input-icon"
                />
              </el-input>
            </el-form-item>
            <el-form-item prop="username">
              <el-input
                v-model="loginForm.username"
                type="text"
                size="small"
                auto-complete="off"
                placeholder="账号"
              >
                <svg-icon
                  slot="prefix"
                  icon-class="user"
                  class="el-input__icon input-icon"
                />
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                size="small"
                auto-complete="off"
                placeholder="密码"
              >
                <svg-icon
                  slot="prefix"
                  icon-class="password"
                  class="el-input__icon input-icon"
                />
              </el-input>
            </el-form-item>
            <el-form-item>
              <div class="login-btn">
                <div class="btn-lf">
                  <el-checkbox
                    v-model="loginForm.rememberMe"
                    style="margin: 0px 0px 25px 0px"
                    >记住密码</el-checkbox
                  >
                </div>
                <div class="btn-rt">
                  <el-button
                    type="primary"
                    @click.native.prevent="getCode"
                    size="small"
                    :loading="loading"
                    >登陆</el-button
                  >
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="forget-box">
                <el-button type="text" @click="handleToRepass"
                  >忘记密码？</el-button
                >
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 图形验证码 -->
    <Verify
      ref="verify"
      :captcha-type="'blockPuzzle'"
      :img-size="{ width: '400px', height: '200px' }"
      @success="handleLogin"
    />
  </div>
</template>

<script>
import { sendSmsCode, socialAuthRedirect } from "@/api/login";
import { getTenantIdByName } from "@/api/system/tenant";
import { SystemUserSocialTypeEnum } from "@/utils/constants";
import { getCaptchaEnable, getTenantEnable } from "@/utils/ruoyi";
import {
  getPassword,
  getRememberMe,
  getTenantName,
  getUsername,
  removePassword,
  removeRememberMe,
  removeTenantName,
  removeUsername,
  setPassword,
  setRememberMe,
  setTenantId,
  setTenantName,
  setUsername,
} from "@/utils/auth";

import Verify from "@/components/Verifition/Verify";
import { resetUserPwd } from "@/api/system/user";

export default {
  name: "Login",
  components: {
    Verify,
  },
  data() {
    return {
      codeUrl: "",
      captchaEnable: false,
      tenantEnable: true,
      mobileCodeTimer: 0,
      loginForm: {
        loginType: "uname",
        username: "admin",
        password: "admin123",
        captchaVerification: "",
        mobile: "",
        mobileCode: "",
        rememberMe: false,
        tenantName: "芋道源码",
      },
      scene: 21,
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" },
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
        tenantName: [
          { required: true, trigger: "blur", message: "单位不能为空" },
          {
            validator: (rule, value, callback) => {
              // debugger
              getTenantIdByName(value).then((res) => {
                const tenantId = res.data.id;
                if (tenantId && tenantId >= 0) {
                  // 设置租户
                  setTenantId(tenantId);
                  callback();
                } else {
                  callback("单位不存在");
                }
              });
            },
            trigger: "blur",
          },
        ],
      },
      loading: false,
      redirect: undefined,
      // 枚举
      SysUserSocialTypeEnum: SystemUserSocialTypeEnum,
    };
  },
  created() {
    // 租户开关
    this.tenantEnable = getTenantEnable();
    if (this.tenantEnable) {
      getTenantIdByName(this.loginForm.tenantName).then((res) => {
        // 设置租户
        const tenantId = res.data.id;
        window.localStorage.setItem("cn", res.data.name);
        if (tenantId && tenantId >= 0) {
          setTenantId(tenantId);
        }
      });
    }
    // 验证码开关
    this.captchaEnable = getCaptchaEnable();
    // 重定向地址
    this.redirect = this.$route.query.redirect
      ? decodeURIComponent(this.$route.query.redirect)
      : undefined;
    console.log("this.redirect", this.redirect);
    this.getCookie();
  },
  methods: {
    handleToRepass() {
      this.$router.push("/rePassword");
    },
    getCode() {
      // 情况一，未开启：则直接登录
      if (!this.captchaEnable) {
        this.handleLogin({});
        return;
      }

      // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
      // 弹出验证码
      this.$refs.verify.show();
    },
    getCookie() {
      const username = getUsername();
      const password = getPassword();
      const rememberMe = getRememberMe();
      const tenantName = getTenantName();
      this.loginForm = {
        ...this.loginForm,
        username: username ? username : this.loginForm.username,
        password: password ? password : this.loginForm.password,
        rememberMe: rememberMe ? getRememberMe() : false,
        tenantName: tenantName ? tenantName : this.loginForm.tenantName,
      };
    },
    handleLogin(captchaParams) {
      // console.log("151131", captchaParams);
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          // 设置 Cookie
          if (this.loginForm.rememberMe) {
            setUsername(this.loginForm.username);
            setPassword(this.loginForm.password);
            setRememberMe(this.loginForm.rememberMe);
            setTenantName(this.loginForm.tenantName);
          } else {
            removeUsername();
            removePassword();
            removeRememberMe();
            removeTenantName();
          }
          this.loginForm.captchaVerification =
            captchaParams.captchaVerification;
          // 发起登陆
          // console.log("发起登录", this.loginForm);
          this.$store
            .dispatch(
              this.loginForm.loginType === "sms" ? "SmsLogin" : "Login",
              this.loginForm
            )
            .then(() => {
              this.$router.push({ path: this.redirect || "/" }).catch(() => {});
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
    async doSocialLogin(socialTypeEnum) {
      // 设置登录中
      this.loading = true;
      let tenant = false;
      if (this.tenantEnable) {
        await this.$prompt("请输入租户名称", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
          .then(async ({ value }) => {
            await getTenantIdByName(value).then((res) => {
              const tenantId = res.data.id;
              window.localStorage.setItem("cn", res.data.name);
              tenant = true;
              if (tenantId && tenantId >= 0) {
                setTenantId(tenantId);
              }
            });
          })
          .catch(() => {
            // 取消登录按钮 loading状态
            this.loading = false;

            return false;
          });
      } else {
        tenant = true;
      }
      if (tenant) {
        // 计算 redirectUri
        const redirectUri =
          location.origin +
          "/social-login?" +
          encodeURIComponent(
            "type=" +
              socialTypeEnum.type +
              "&redirect=" +
              (this.redirect || "/")
          ); // 重定向不能丢
        // const redirectUri = 'http://127.0.0.1:48080/api/gitee/callback';
        // const redirectUri = 'http://127.0.0.1:48080/api/dingtalk/callback';
        // 进行跳转
        socialAuthRedirect(
          socialTypeEnum.type,
          encodeURIComponent(redirectUri)
        ).then((res) => {
          // console.log(res.url);
          window.location.href = res.data;
        });
      }
    },
    /** ========== 以下为升级短信登录 ========== */
    getSmsCode() {
      if (this.mobileCodeTimer > 0) return;
      this.$refs.loginForm.validate((valid) => {
        if (!valid) return;
        sendSmsCode(
          this.loginForm.mobile,
          this.scene,
          this.loginForm.uuid,
          this.loginForm.code
        ).then((res) => {
          this.$modal.msgSuccess("获取验证码成功");
          this.mobileCodeTimer = 60;
          let msgTimer = setInterval(() => {
            this.mobileCodeTimer = this.mobileCodeTimer - 1;
            if (this.mobileCodeTimer <= 0) {
              clearInterval(msgTimer);
            }
          }, 1000);
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/login.scss";
</style>
