<template>
  <div id="login">
    <img class="login-logo" src="./images/logo-login.svg" />
    <div class="login-con">
      <div class="login-title">用户登录</div>
      <div class="login-user" :class="{'select-border':change.user}">
        <img class="user-icon" src="./images/user.svg" />
        <div class="line-mid"></div>
        <input
          type="text"
          class="user-input"
          placeholder="请输入您的账号"
          v-model="userInfo.username"
          @focus="reduceBorder('user')"
          @blur="addBorder('user')"
        />
        <span class="warning" v-show="warning.user">账号不能为空</span>
      </div>
      <div class="login-user user-mt" :class="{'select-border':change.pass}">
        <img class="user-icon" src="./images/password.svg" />
        <div class="line-mid"></div>
        <input
          type="password"
          class="user-input"
          placeholder="请输入您的密码"
          v-model="userInfo.password"
          v-show="!selectEye"
          @focus="reduceBorder('pass')"
          @blur="addBorder('pass')"
        />
        <input
          type="text"
          class="user-input"
          placeholder="请输入您的密码"
          v-model="userInfo.password"
          v-show="selectEye"
          @focus="reduceBorder('pass')"
          @blur="addBorder('pass')"
        />
        <img class="password-eye" src="./images/open.svg" @click="selectEyes" v-show="selectEye" />
        <img class="password-eye" src="./images/close.svg" @click="selectEyes" v-show="!selectEye" />
        <span class="warning" v-show="warning.pass">密码不能为空</span>
      </div>
      <div class="login-remake">
        <i class="icon iconfont iconfuxuan1 icon-style" v-show="!selectIcon" @click="selectRemeber"></i>
        <i
          class="icon iconfont iconfuxuan-xuanzhong icon-select"
          v-show="selectIcon"
          @click="selectRemeber"
        ></i>
        <span class="remake_txt" @click="selectRemeber">记住账号密码</span>
      </div>
      <div class="login-btn" @click="goHome">登录</div>
    </div>
    <div class="reserved-con">
      <div class="reserved-words">版权所有：2020©某某市自然资源和规划</div>
      <div class="reserved-words line-two">技术支持：西安市自然资源规划局信息中心</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectIcon: true,
      selectEye: false,
      userInfo: {
        username: "",
        password: "",
      },
      change: {
        //边框
        user: false,
        pass: false,
      },
      warning: {
        user: false,
        pass: false,
      },
      canDo: 1,
    };
  },
  mounted() {
    this.initPage();
  },
  methods: {
    initPage() {
      let userInfo =
        localStorage.getItem("userInfo") &&
        JSON.parse(localStorage.getItem("userInfo"));
      if (userInfo) {
        this.userInfo.username = userInfo.username;
        this.userInfo.password = userInfo.password;
      }
    },
    selectRemeber() {
      this.selectIcon = !this.selectIcon;
    },
    goHome() {
      if (this.canDo) {
        this.canDo = 0;
        if (
          this.userInfo.username == "admin" &&
          this.userInfo.password == "123456"
        ) {
          if (this.selectIcon) {
            localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
          } else {
            localStorage.removeItem("userInfo");
          }
          // this.$store.dispatch('user/login', this.userInfo).then(() => {
          //   this.$router.push('/home')
          // }).catch(() => {
          // })
          this.$store.dispatch("permission_routes/getMenus");
        } else if (!this.userInfo.username || !this.userInfo.password) {
          this.$message({
            duration: 2000,
            message: "账号或密码不能为空，请重新输入",
            type: "error",
          });
        } else {
          this.$message({
            duration: 2000,
            message: "账号或密码不正确，请重新输入",
            type: "error",
          });
        }
        setTimeout(() => {
          this.canDo = 1;
        }, 2000);
      }
    },
    selectEyes() {
      this.selectEye = !this.selectEye;
    },
    reduceBorder(type) {
      //获取焦点
      if (type == "user") {
        this.change.user = true;
      } else {
        this.change.pass = true;
      }
    },
    addBorder(type) {
      //失去焦点
      if (type == "user") {
        this.change.user = false;
        if (!this.userInfo.username) {
          this.warning.user = true;
        } else {
          this.warning.user = false;
        }
      } else {
        this.change.pass = false;
        if (!this.userInfo.password) {
          this.warning.pass = true;
        } else {
          this.warning.pass = false;
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
#login {
  width: 100vw;
  height: 100vh;
  background: url("./images/login-bg.png") center center no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  position: relative;
  .login-logo {
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 11.5%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 360px;
  }
  .login-con {
    position: absolute;
    top: 24%;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  .login-title {
    width: 320px;
    margin: 0 auto;
    font-size: 14px;
    font-weight: 500;
  }
  .login-user {
    width: 320px;
    height: 38px;
    border: 1px solid rgba(155, 155, 155, 1);
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 2px;
    position: relative;
    .user-icon {
      margin: 0 12px;
      float: left;
      width: 16px;
      height: 16px;
      margin-top: 11px;
    }
    .line-mid {
      width: 1px;
      height: 16px;
      background: #cbcbcb;
      float: left;
      margin-top: 11px;
      margin-right: 9px;
    }
    .user-input {
      width: 230px;
      float: left;
      font-size: 12px;
      margin-top: 11px;
      background: none;
      outline: 0;
      border: 0;
      color: #4a4a4a;
      box-shadow: inset 0 0 0 1000px #fff !important;
    }
    .password-eye {
      float: right;
      width: 16px;
      height: 16px;
      margin-right: 12px;
      margin-top: 11px;
      cursor: pointer;
    }
    .warning {
      font-size: 12px;
      color: red;
      position: absolute;
      left: 0;
      bottom: -18px;
    }
  }
  .user-mt {
    margin-top: 26px;
  }
  .select-border {
    border: 1px solid rgba(0, 113, 255, 1);
  }
  .login-remake {
    width: 320px;
    height: 14px;
    margin: 0 auto;
    margin-top: 26px;
    .icon-style {
      font-size: 12px;
      color: #5b5b5b;
      float: left;
      line-height: 14px;
      cursor: pointer;
    }
    .icon-select {
      font-size: 12px;
      color: rgba(0, 127, 255, 1);
      float: left;
      line-height: 14px;
      cursor: pointer;
    }
    .remake_txt {
      font-size: 12px;
      line-height: 14px;
      color: #5b5b5b;
      margin-left: 6px;
      float: left;
      cursor: pointer;
    }
  }
  .login-btn {
    width: 320px;
    height: 40px;
    background: rgba(0, 127, 255, 1);
    border-radius: 1px;
    margin: 0 auto;
    margin-top: 40px;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    cursor: pointer;
  }
  .reserved-con {
    position: absolute;
    bottom: 36%;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  .reserved-words {
    font-size: 12px;
    color: #b4b4b4;
    text-align: center;
  }
  .line-two {
    margin-top: 8px;
  }
}
</style>