<template>
  <div class="container">
    <!--    <div class="leftSvg">-->
    <!--      <img src="./svg/资源19.svg" alt="">-->
    <!--    </div>-->
    <!--    <div class="rightSvg">-->
    <!--      <img src="./svg/资源15.svg" alt="">-->
    <!--    </div>-->
    <div class="container_box">
      <div class="mainBg">
        <div>
          <div class="leftLogo">
            <div class="logo">
              <div class="logo_img">
                <img style="width:90px;height:50px;" v-if="photosUrl && photosUrl.orgname != '业主机构'" :src="logoImg" alt="" />
                <img style="width:90px;height:50px;" v-else src="../../assets/logo/colorLogo.png" alt="" />
              </div>
              <div class="logo_text">
                <img src="@/image/logos/logo_rgba/noWhite/kkyLogoNoWhiteText.png" alt="" v-if="photosUrl && photosUrl.orgname == '业主机构'" />
                <!-- <img src="@/image/logos/logo_rgba/noWhite/kkyLogoNoWhiteNoText.png" alt="" v-if="photosUrl && photosUrl.orgname == '业主机构'" /> -->
                <span v-else>{{ logoText }}</span>
              </div>
            </div>
            <div class="windowsLogo">
              <img src="./svgNew/login-box-bg.svg" alt="" />
            </div>
            <div style="width: 100%; height: 35px"></div>
            <span class="titleHeader">欢迎使用{{ logoText }}业务支撑系统！</span>
          </div>
        </div>
      </div>
      <el-row :span="24" class="loginFromStyle">
        <!--        <el-col :span="8">-->
        <!--          &lt;!&ndash; 这个div放背景图 &ndash;&gt;-->
        <!--          <div class="logBack">-->
        <!--            <img class="imgStyle" src="@/image/logos/logo_rgba/noWhite/kkyLogoNoWhite.png" alt="">-->
        <!--          </div>-->
        <!--        </el-col>-->
        <el-col :span="24" class="a24Style">
          <div class="login-container">
            <div class="title-container">
              <h1 class="title" style="color: black">登录</h1>
            </div>
            <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form" autocomplete="on" label-position="left">
              <el-form-item prop="username" style="background-color: white; border: 1px solid #d9d9d9">
                <span class="svg-container">
                  <svg-icon icon-class="user" />
                </span>
                <el-input ref="username" v-model="loginForm.username" placeholder="请输入用户名/手机号" name="username" type="text" class="userInput" style="background-color: white" />
              </el-form-item>
              <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
                <el-form-item prop="password" style="background-color: white; border: 1px solid #d9d9d9">
                  <span class="svg-container">
                    <svg-icon icon-class="password" />
                  </span>
                  <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="请输入密码" name="password" @keyup.native="checkCapslock" @blur="capsTooltip = false" @keyup.enter.native="handleLogin" />
                  <span class="show-pwd" @click="showPwd">
                    <svg-icon :icon-class="
                        passwordType === 'password' ? 'eye' : 'eye-open'
                      " />
                  </span>
                </el-form-item>
              </el-tooltip>
              <div style="display:flex;flex-direction-row" v-show="loginForm.username!=='admin'&&loginForm.password!=='admin'">
                <el-form-item prop="" class="invitecode">
                  <span class="svg-container">
                    <svg-icon icon-class="user" />
                  </span>
                  <el-input ref="vcode" v-model="loginForm.vcode" placeholder="请输入验证码" name="vcode" type="text" />
                </el-form-item>
                <el-button type="primary" :disabled="isDisabled" size="mini" style="height: 50px; margin-left: 10px" @click="getCode">{{SendCode_text}}</el-button>
              </div>

              <el-button type="text" @click="resetPassword()" style="margin-left: 80%;margin-top: -15px">忘记密码?</el-button>
              <el-button :loading="loading" type="primary" style="width: 100%; margin-bottom: 30px; margin-left: 0px" @click.native.prevent="handleLogin('loginForm')">登录
              </el-button>
              <el-button :loading="loading" type="primary" style="width: 100%; margin-bottom: 30px; margin-left: 0px" @click.native.prevent="handleRegister">注册
              </el-button>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog title="请重新设置密码" :visible.sync="dialogVisible" width="25%" class="myDialog">
      <el-form ref="form" :model="form" label-width="100px" :rules="forms">
        <el-form-item label="用户名:" prop="username">
          <el-input v-model="form.username" class="name-input" placeholder="请先输入用户名/手机号" style="background-color: white"></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input v-model="form.password" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="验证码:" prop="vcode">
          <div style="display: flex; flex-direction: row">
            <el-input ref="vcode" v-model="form.vcode" placeholder="请输入验证码" name="vcode" type="text" />
            <el-button type="primary" size="mini" style="height: 40px; margin-left: 10px" :disabled="isDisabled1" @click="getCode1">{{ SendCode_text1 }}
            </el-button>
          </div>
        </el-form-item>
        <div class="dialog-footer">
          <el-button size="small" @click="cancelReset">取 消</el-button>
          <el-button type="primary" size="small" @click="handleSubmit">确 定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import SocialSign from "./components/SocialSignin";
import { getCodeAPI, retrieveCodeAPI, getPasswordCodeAPI, logintypeAPI, getLogoAPI } from "@/api/login";

export default {
  name: "Login",
  components: { SocialSign },
  data() {
    return {
      dialogVisible: false,
      SendCode_text: "获取验证码",
      time_count: 60,
      timer: null,
      SendCode_text1: "获取验证码",
      time_count1: 60,
      timer1: null,
      form: {
        username: "",
        vcode: "",
        password: "",
        id: "",
        codeid: "",
      },
      loginForm: {
        username: "",
        password: "",
        vcode: "",
      },
      rules: {
        username: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      forms: {
        username: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        vcode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      passwordType: "password",
      capsTooltip: false,
      loading: false,
      redirect: undefined,
      otherQuery: {},
      isDisabled: false,
      isDisabled1: false,
      logoImg: require("../../assets/logo/colorLogo.png"),
      // logoImg: require(""@/image/logos/logo_rgba/noWhite/kkyLogoNoWhiteNoText.png"),
      logoText: "开元云",
      photosUrl: null,
      url: window.location.href
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
          this.otherQuery = this.getOtherQuery(query);
        }
      },
      immediate: true,
    },
  },
  created() {
    this.init();
  },
  mounted() {
    if (this.loginForm.username === "") {
      this.$refs.username.focus();
    } else if (this.loginForm.password === "") {
      this.$refs.password.focus();
    }
  },
  destroyed() {
    // window.removeEventListener('storage', this.afterQRScan)
  },
  methods: {
    init() {
      getLogoAPI({ url_link: this.url }).then((res) => {
        if (res.status == true && res.data && res.data.length) {
          this.photosUrl = res.data[0];
          this.loginForm.domain_name = this.photosUrl.domain_name;
          if (this.photosUrl.orgname != '业主机构') {
            this.logoImg = this.photosUrl.logo;
            this.logoText = this.photosUrl.orgname;
          }
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    checkCapslock(e) {
      const { key } = e;
      this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
    },
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    enter() {
      this.handleLogin();
    },
    GetQueryString(name) {
      if (this.url.indexOf("#") != -1) {
        const params = name.split("#")[0];
        return params;
      }
    },
    getCode() { //获取验证码
      getCodeAPI({ username: this.loginForm.username }).then((res) => {
        if (res.status == true) {
          // console.log(res);
          this.loginForm.codeid = res.codeid;
          let that = this;
          if (!that.timer) {
            that.timer = setInterval(() => {
              if (that.time_count > 0) {
                this.isDisabled = true;
                that.time_count--;
                that.SendCode_text = "重新发送" + that.time_count + "s";
              } else {
                that.SendCode_text = "获取验证码";
                clearInterval(that.timer);
                that.timer = null;
                this.isDisabled = false;
                that.time_count = 60;
              }
            }, 1000);
          }
          this.$message({
            message: "验证码获取成功",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
          console.log(res);
        }
      });
    },
    getCode1() {
      retrieveCodeAPI({ username: this.form.username }).then((res) => {
        // console.log(res);
        if (res.status == true) {
          this.form.id = res.userid;
          this.form.codeid = res.codeid;
          let that = this;
          if (!that.timer1) {
            that.timer1 = setInterval(() => {
              if (that.time_count1 > 0) {
                this.isDisabled1 = true;
                that.time_count1--;
                that.SendCode_text1 = "重新发送" + that.time_count1 + "s";
              } else {
                that.SendCode_text1 = "获取验证码";
                clearInterval(that.timer1);
                that.timer1 = null;
                this.isDisabled1 = false;
                that.time_count1 = 60;
              }
            }, 1000);
          }
          this.$message({
            message: "验证码获取成功",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    resetPassword() {
      this.dialogVisible = true;
      this.$refs.loginForm.resetFields();
    },
    handleSubmit() {//密码重置
      let parmas = {
        id: this.form.id,
        password: this.form.password,
        codeid: this.form.codeid,
        vcode: this.form.vcode,
      };
      getPasswordCodeAPI(parmas).then((res) => {
        // console.log(res);
        if (res.status == true) {
          this.$message({
            message: "密码重置成功",
            type: "success",
          });
          this.isDisabled1 = false;
          this.dialogVisible = false;
          that.SendCode_text1 = "获取验证码";
          clearInterval(that.timer1);
          that.timer1 = null;
          that.time_count1 = 60;
          this.$refs.form.resetFields();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    cancelReset() {
      this.dialogVisible = false;
      this.$refs.form.resetFields();
    },
    handleLogin(formName) {  //登录
      this.$refs[formName].validate((valid) => {
        if (valid) {
          logintypeAPI({ username: this.loginForm.username, password: this.loginForm.password, domain_name: this.photosUrl.domain_name }).then(res => {
            if (res.status == true) {
              // debugger
              this.loading = true;
              this.$store
                .dispatch("user/login", this.loginForm)
                .then((res) => {
                  if (res.admin != 1) {
                    sessionStorage.setItem("juese", res.roles[0]);
                  }

                  if (res.status == true) {
                    this.loading = false;
                    sessionStorage.setItem("userId", res.userId);
                    sessionStorage.setItem("org_type", res.org_type);
                    this.$router.push({ path: "/" });
                    if (
                      sessionStorage.getItem("org_type") == "2" ||
                      sessionStorage.getItem("org_type") == "3"
                    ) {
                      this.$router.push({ name: "index" });
                    }
                    this.$message({
                      message: "登录成功",
                      type: "success",
                    });
                  } else {
                    this.$message({
                      message: res.msg,
                      type: "error",
                    });
                  }
                })
                .catch((res) => {
                  this.$message({
                    message: res.msg,
                    type: "error",
                  });
                  this.loading = false;
                });
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          })

        } else {
          this.$message({
            message: "请查看登录信息格式",
            type: "error",
          });

          this.$refs.loginForm.resetFields();
          return false;
        }
      });
    },
    handleRegister() {//注册
      this.$router.push({ name: "registrationPage" });
    },
    getOtherQuery(query) {
      // console.log(111111111111);
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur];
        }
        return acc;
      }, {});
    },
    // afterQRScan() {
    //   if (e.key === 'x-admin-oauth-code') {
    //     const code = getQueryObject(e.newValue)
    //     const codeMap = {
    //       wechat: 'code',
    //       tencent: 'code'
    //     }
    //     const type = codeMap[this.auth_type]
    //     const codeName = code[type]
    //     if (codeName) {
    //       this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
    //         this.$router.push({ path: this.redirect || '/' })
    //       })
    //     } else {
    //       alert('第三方登录失败')
    //     }
    //   }
    // }
  },
};
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

// $bg: #283443;
//$bg: #1890ff;
$bg: #1890ff;
$bg: #1890ff;
// $bg: #99a9bf;
$light_gray: black;
$cursor: black;
// $cursor: #fff;

// @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
//   .login-container .el-input input {
//     color: $cursor;
//   }
// }
.container {
  //background: url("./svgNew/login-bg.svg");
  .container_box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
  }

  .logBack {
    position: relative;
    height: 100vh;
    width: 100%;
    //background-image: url("../../../src/image/logos/logo_rgba/noWhite/kkyLogoNoWhite.png");
    //background-image: url("./images/bg.png");
    // background-size: 85%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    //background-color: $bg;
    min-height: 100%;
    overflow: hidden;
    background-position: center;
  }

  .login-container {
    background-color: transparent;
    height: 100vh;
    margin-left: 20%;
    //padding-top: 70px;
    .el-input {
      display: inline-block;
      height: 47px;
      width: 85%;

      input {
        //background: transparent;

        //backdrop-filter: blur(15px); /* 应用模糊效果 */
        border: 0px;
        //-webkit-appearance: none;
        border-radius: 0px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 47px;
        caret-color: $cursor;

        &:-webkit-autofill {
          -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
          //box-shadow: 0 0 0px 1000px $bg inset !important;
          -webkit-text-fill-color: $cursor !important;
        }
      }
    }

    .el-form-item {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      color: #454545;
    }
  }
}

/* reset element-ui css */
</style>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  min-height: 100%;
  height: calc(100% - 1000px);
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      color: $dark_gray;
      margin: 60px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }

  .login-form {
    position: relative;
    width: 520px;
    // max-width: 100%;
    padding: 10px 35px 0;
    margin: 0 auto;
    overflow: hidden;

    .invitecode {
      display: flex;
      flex-direction: row;
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    // color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }

  .thirdparty-button {
    position: absolute;
    right: 0;
    bottom: 6px;
  }

  @media only screen and (max-width: 470px) {
    .thirdparty-button {
      display: none;
    }
  }
}

.name-input {
  width: 150px !important;
}

.imgStyle {
  width: 38%;
  height: 100%;
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%);
  z-index: 9999;
}

.leftSvg {
  position: absolute;
  top: 45%;
  min-width: 450px;
  left: 2%;
}

.rightSvg {
  position: absolute;
  top: 15%;
  min-width: 450px;
  right: 2%;
}

@media (max-width: 1200px) {
  .rightSvg,
  .leftSvg,
  .mainBg {
    display: none;
  }
  .login-container {
    //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    //border: 10px solid red;
    //margin-right: 10%;
    width: 100%;
    height: 100vh;
    //position: absolute;
    //top: 50%;
    //right: 50%;
    //transform: translate(-50%,-50%);
    //z-index: 99999999999999;
  }
  .loginFromStyle {
    width: 100%;
    margin-left: 15px;
    //border:5px solid black;
  }
  .container_box {
    //border: 10px solid blue;
  }
}

.mainBg {
  width: 100vw;
  height: 100vh;
  position: relative; /* 让容器成为相对定位的父元素 */
}

.mainBg::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-left: -48%;
  background-image: url("./svgNew/login-bg.svg");
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  content: "";
}

.svgImg {
  //width: 10%!important;
  //border: 100px solid red;
  //height: auto;

  //position: absolute; /* 设置绝对定位以脱离文档流 */
  //top: 0;
  //left: 0;
  //width: 50%;
  //height: 100%; /* 拉伸图片高度至容器高度 */
}

.loginFromStyle {
  position: absolute;
  right: 10%;
}

.leftLogo {
  //border: 1px solid red;
  width: 35vw;
  height: 80vh;
  position: absolute;
  top: 5%;
  left: 5%;
  z-index: 9999999;

  img {
    width: 30%;
    height: 30%;
  }
}

.logoStyleTwo {
  display: flex;
  justify-content: flex-start;
}
.logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  .logo_img {
    img {
    }
  }
  .logo_text {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    margin-left: 20px;
  }
}
.windowsLogo {
  img {
    width: 90%;
    height: 90%;
  }
}

.titleHeader {
  --un-text-opacity: 1;
  color: rgba(255, 255, 255, var(--un-text-opacity));
  font-size: 24px;
  margin-top: 100px !important;
}
// .a24Style {
//   //display: flex;
//   //justify-content: flex-end;
//   //align-items: center;
// }
.userInput .el-input__inner {
  background-color: white;
}
</style>
