<template>
    <div id="login">
      <div class="login-logo"><img src="./images/logo-login.png" /></div>
      <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 id="loginBtn" 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>
  import {getUrlParam} from "@/utils/util";
  import axios from "axios";
  export default {
    data() {
      return {
        selectIcon: true,
        selectEye: false,
        userInfo:{
          username: 'admin',
          password: '123',
          redirectUrl: ''
        },
        change: {
          //边框
          user: false,
          pass: false,
        },
        warning: {
          user: false,
          pass: false,
        },
        canDo: 1,
      };
    },
    mounted() {
      this.initPage();
      this.userInfo.redirectUrl = localStorage.getItem('dj-location')
    },
    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() {
          axios.post(window._config.services.management + "/management/cas/login", this.userInfo).then(response => {
              if (response.data.status === 1) {
                  if (response.data.content.location) {
                      window.location.href = response.data.content.location
                  }
              } else {
                  this.$message.error(response.data.message)
              }
          }).catch(error => {
              console.log(error)
              this.$message.error(error.message)
          })
      },
      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="scss" scoped>
  #login {
    width: 100vw;
    height: 100vh;
    background: url("./images/login-bg.png") no-repeat bottom center;
    background-size: 100% 100%;
    overflow: hidden;
    .login-logo {
      margin-top: 8%;
      height: 38px;
      width: 100%;
      text-align: center;
    }
    .login-logo img {
      height: 100%;
    }
    .login-con {
      margin: 88px auto;
      width: 380px;
    }
    .login-user {
      width: 100%;
      height: 46px;
      border: 1px solid rgba(155, 155, 155, 1);
      box-sizing: border-box;
      margin: 38px auto auto auto;
      border-radius: 2px;
      position: relative;
      .user-icon {
        float: left;
        margin: 13px auto auto 10px;
        width: 28px;
        height: 18px;
      }
      .user-input {
        width: 80%;
        float: left;
        font-size: 16px;
        outline: 0;
        border: none;
        color: #4a4a4a;
        line-height: 260%;
        background-color: transparent;
      }
      .password-eye {
        float: right;
        width: 16px;
        height: 16px;
        margin-right: 12px;
        margin-top: 13px;
        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: 100%;
      height: 40px;
      background: rgba(0, 127, 255, 1);
      border-radius: 4px;
      margin: 0 auto;
      margin-top: 40px;
      font-size: 16px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      cursor: pointer;
    }
    .reserved-con {
      margin: 38px auto;
    }
    .reserved-words {
      font-size: 12px;
      color: #b4b4b4;
      text-align: center;
    }
    .line-two {
      margin-top: 8px;
    }
  }
  </style>