<template>
  <div class="wrap">
    <div class="logo">
      <img class="logo_img" src="../../assets/img/login/logo.png" />
      <span class="logo_title">星火云鸽管控平台</span>
    </div>
    <div class="loginInner">
      <div class="welcome">欢迎登录</div>
      <!--      <div class="login_type">-->
      <!--        <div @click="usertype = 1" :class="[usertype == 1 ? 'active' : '']">-->
      <!--          账号登录-->
      <!--        </div>-->
      <!--        <div @click="usertype = 2" :class="[usertype == 2 ? 'active' : '']">-->
      <!--          验证码登录-->
      <!--        </div>-->
      <!--      </div>-->
      <Form ref="loginForm" :model="loginForm" :rules="formRules">
        <FormItem prop="loginname">
          <img class="img" src="../../assets/img/login/user.png" alt="" />
          <Input
            v-model="loginForm.loginname"
            clearable
            @keyup.enter.native="login_by_username('loginForm')"
            placeholder="请输入账号"
          />
        </FormItem>
        <FormItem prop="loginpwd">
          <img class="img" src="../../assets/img/login/pw.png" alt="" />
          <Input
            type="password"
            class="show_input"
            oncopy="return false"
            onpaste="return false"
            oncut="return false"
            v-model="loginForm.loginpwd"
            @keyup.enter.native="login_by_username('loginForm')"
            placeholder="请输入密码"
          />
          <div class="pwd">
            <img
              v-if="show_pw"
              @click="togglePw"
              src="../../assets/img/login/open.svg"
              alt=""
            />
            <img
              v-else
              @click="togglePw"
              src="../../assets/img/login/close.svg"
              alt=""
            />
          </div>
        </FormItem>
        <FormItem prop="msgcode" class="changecode">
          <img class="img" src="../../assets/img/login/code.png" alt="" />
          <Input
            v-model="loginForm.msgcode"
            class="input"
            @keyup.enter.native="login_by_username('loginForm')"
            v-noFill
            readonly
            placeholder="请输入验证码"
          />
          <img
            v-if="code_info.base64Str"
            class="code_img"
            :src="code_info.base64Str"
            @click="getCodeImg()"
            title="点击刷新验证码"
          />
          <span class="emit_code" v-else @click="getCodeImg()">获取验证码</span>
        </FormItem>
        <FormItem class="btn_bottom">
          <Checkbox v-model="isaccount">记住密码</Checkbox>
        </FormItem>
      </Form>
      <Button
        :loading="wait_flag"
        type="primary"
        class="login_btn"
        @click.enter="login_by_username('loginForm')"
        >登&nbsp;录</Button
      >
    </div>
  </div>
</template>

<script>
import { login_img_code, login_login } from "@/api/login";
export default {
  data() {
    // 手机号验证
    const phoneCheck = async (rule, value, callback) => {
      var filter = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      this.isemit = false;
      if (!value) {
        return callback(new Error("手机号码不能为空"));
      }
      let blnTest = filter.test(value);
      if (!blnTest) {
        return callback(new Error("手机号码格式不正确"));
      } else {
        this.isemit = true;
      }
    };
    return {
      code_info: {
        base64Str: "",
        code: ""
      },
      usertype: 1,
      time1: null,
      isemit: false,
      userInfo: {},
      wait_flag: false,
      loginForm: {
        loginname: "",
        loginpwd: "",
        msgcode: ""
      },
      formRules: {
        loginname: [
          { required: true, message: "账号不能为空", trigger: "blur" },
          {
            min: 4,
            max: 18,
            message: "账号长度为4~18个字符"
          }
        ],
        loginpwd: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "密码长度为6~16个字符"
          }
        ],
        phone: [{ required: true, validator: phoneCheck, trigger: "blur" }],
        msgcode: [
          { required: true, message: "验证码不能为空", trigger: "blur" }
        ]
      },
      isaccount: false,
      show_pw: false,
      time: 0
    };
  },
  directives: {
    // 防止input输入框自动填充
    noFill: {
      inserted: (el) => {
        let inputEl = el.getElementsByTagName("input")[0];
        if (inputEl) {
          inputEl.addEventListener("focus", () => {
            inputEl.removeAttribute("readonly");
          });
          inputEl.addEventListener("blur", () => {
            inputEl.setAttribute("readonly", "readonly");
          });
        }
      }
    }
  },
  created() {
    //登录前清除信息
    localStorage.setItem("xh_control_userInfo", "");
    // 在页面加载时获取账号信息
    let userdata = localStorage.getItem("control_user");
    // 如果存在赋值给表单，并且将记住密码勾选
    if (userdata) {
      userdata = JSON.parse(userdata);
      this.loginForm.loginname = userdata.loginname;
      this.loginForm.loginpwd = userdata.loginpwd;
      this.isaccount = true;
    }
  },
  watch: {},
  mounted() {
    window.addEventListener("copy", this.inputHandle);
    window.addEventListener("paste", this.inputHandle);
    window.addEventListener("cut", this.inputHandle);
  },
  beforeDestroy() {
    window.removeEventListener("copy", this.inputHandle);
    window.removeEventListener("paste", this.inputHandle);
    window.removeEventListener("cut", this.inputHandle);
  },
  methods: {
    //获取验证码
    getCodeImg() {
      if (!this.loginForm.loginname) {
        this.$Message.error("请输入账号");
        return;
      }
      login_img_code({
        loginname: this.loginForm.loginname
      }).then((data) => {
        if (data.code === 0) {
          this.code_info = data.obj;
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    inputHandle() {
      let edit = document.querySelector(".show_input");
      edit.oncopy = function () {
        return false;
      };
      edit.onpaste = function () {
        return false;
      };
      edit.oncut = function () {
        return false;
      };
    },
    //切换眼睛
    togglePw() {
      this.show_pw = !this.show_pw;
      let input = document.querySelector(".show_input input");
      if (this.show_pw) {
        input.setAttribute("type", "text");
      } else {
        input.setAttribute("type", "password");
      }
    },
    //登录
    login_by_username(name) {
      let that = this;
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (
            that.loginForm.msgcode.toLowerCase() !==
            that.code_info.code.toLowerCase()
          ) {
            this.$Message.error("验证码不正确");
            return;
          }
          that.wait_flag = true;
          login_login(that.loginForm).then((res) => {
            that.wait_flag = false;
            if (res.code == 0) {
              that.$Message.success(res.msg);
              localStorage.setItem(
                "xh_control_userInfo",
                JSON.stringify({
                  content: res.obj,
                  datetime: new Date().getTime()
                })
              );
              let atype = res.obj.atype;
              let path = "";
              //1平台管理员2区域管理员3学校管理员
              if (atype === 1) {
                path = "platform";
              } else if (atype === 2) {
                path = "region";
              } else if (atype === 3) {
                path = "school";
              }
              this.$router.replace({ name: path });
              that.set_userInfo();
            } else {
              that.$Message.error(res.msg);
              that.wait_flag = false;
            }
          });
        }
      });
    },
    // 记住密码功能
    set_userInfo() {
      let info = "";
      if (this.isaccount) {
        info = JSON.stringify({
          loginname: this.loginForm.loginname,
          loginpwd: this.loginForm.loginpwd
        });
      }
      localStorage.setItem("control_user", info);
    }
  }
};
</script>

<style lang="less" scoped>
.wrap {
  height: 100%;
  background: url("../../assets/img/login/bj.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .logo {
    position: absolute;
    top: 70px;
    left: 60px;
    width: 300px;
    height: 50px;
    display: flex;
    align-items: center;
    .logo_img {
      width: 45px;
      height: 45px;
      margin-right: 10px;
    }
    .logo_title {
      color: #414354;
      font-size: 20px;
      font-weight: 700;
      font-family: "HarmonyOSSansSC";
    }
  }
  .loginInner {
    width: 400px;
    height: 440px;
    padding: 40px;
    border-radius: 20px;
    opacity: 0.88;
    background: #ffffff;
    box-shadow: 0 0 18px 0 #deeaffe0;
    position: absolute;
    right: 160px;
    bottom: 160px;
    .welcome {
      height: 30px;
      color: #000000;
      font-size: 24px;
      font-family: "AlibabaPuHuiTi";
      text-align: center;
    }
    .login_type {
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
      div {
        color: #7c8db5;
        font-size: 16px;
        font-family: "SourceHanSansCN";
        cursor: pointer;
        &:first-of-type {
          margin-right: 20px;
        }
      }
      .active {
        color: #253a70;
        position: relative;
        &::after {
          display: block;
          content: "";
          height: 2px;
          width: 30px;
          background-color: #339dff;
          position: absolute;
          top: 24px;
          left: 30%;
        }
      }
    }
    .login_btn {
      border-radius: 23px;
      background: linear-gradient(70.7deg, #09adf9 0%, #4650fb 100%);
      box-shadow: 0 0 10px 0 #12a0f9e0;
    }
    /deep/ .ivu-form {
      .ivu-form-item {
        .ivu-form-item-content {
          position: relative;
          .img {
            position: absolute;
            z-index: 33;
            width: 16px;
            height: 16px;
            top: 12px;
            left: 15px;
          }
          .ivu-input-wrapper {
            width: 100%;
            // height: 47px;
            input {
              &:-moz-placeholder {
                color: #999 !important;
              }
            }
            .ivu-input {
              height: 40px;
              padding-left: 40px;
            }
            .ivu-input-icon {
              line-height: 50px;
            }
            .ivu-input-icon-clear {
              line-height: 50px;
            }
            // padding-left: 20px;
          }
          .ivu-checkbox-wrapper {
            span {
              font-size: 15px;
              font-family: "Microsoft YaHei";
              font-weight: 400;
              color: rgba(136, 136, 136, 1);
              line-height: 17px;
            }
          }
          .pwd {
            position: absolute;
            z-index: 33;
            width: 16px;
            height: 16px;
            top: 12px;
            right: 15px;
          }
          .pwd img {
            width: 16px;
            height: 16px;
            vertical-align: top;
            cursor: pointer;
          }
        }
      }
      .btn_bottom {
        height: 32px;
        .ivu-form-item-content {
          display: flex;
          justify-content: space-between;
        }
      }
    }
    /deep/ .ivu-btn {
      width: 100%;
      height: 40px;
      span {
        font-size: 18px;
        font-family: "Microsoft YaHei";
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
      }
    }
    .changecode {
      display: flex;
      /deep/ .ivu-form-item-content {
        width: 100%;
        .input {
          width: calc(100% - 120px) !important;
          margin-right: 10px;
        }
        .emit_code {
          display: inline-block;
          width: 110px;
          line-height: 40px;
          height: 40px;
          text-align: center;
          border: 1px solid #339dff;
          border-radius: 6px;
          cursor: pointer;
          color: #339dff;
          vertical-align: bottom;
        }
        .code_img {
          width: 110px;
          height: 40px;
          cursor: pointer;
          vertical-align: bottom;
        }
      }
    }
  }
}
</style>
