<template>
  <section class="login">
    <div class="container">
      <div>
        <div class="page-account-top">
          <div class="page-account-top-logo" style="text-align: center;font-size: 20px;">
            基础数据登录
          </div>
        </div>
        <Form ref="form" :model="d" :rules="rule">
          <FormItem prop="username">
            <Input v-model="d.username" prefix="ios-contact-outline" size="large" placeholder="请输入用户名"></Input>
          </FormItem>
          <FormItem prop="userpassword">
            <Input v-model="d.userpassword" prefix="ios-lock-outline" size="large" type="password" placeholder="请输入密码" @on-enter="submit"></Input>
          </FormItem>
        </Form>
        <div class="submit" @click="submit">
          <Button :loading="loading" type="primary" width="100%" size="large">登录</Button>
        </div>
      </div>
    </div>
    <Footer class="inner-footer">
      <div class="footer-copyright">
        Copyright © 2019 基础数据
      </div>
    </Footer>
  </section>
</template>

<script>
  import CryptoJS from "crypto-js";
  export default {
    data() {
      let type = "web";
      return {
        loading: false,
        type: type,
        loginUrl: type == "admin" ? "admin/mams-rest/sys/login" : "/ems/mams-rest/sys/login",
        d: {
          username: "",
          userpassword: ""
        },
        rule: {
          username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
          userpassword: [{ required: true, message: "用户密码不能为空", trigger: "blur" }]
        }
      };
    },
    methods: {
      submit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            let postData = this.encrypt();
            this.login(postData);
          }
        });
      },
      login(postData) {
        this.$axios({
          url: this.loginUrl,
          method: "post",
          data: {params: postData}
        }).then((response) => {
          let data = response.data;
          if (data.statusCode !== "0") {
            this.$Message.error(data.msg || "登录失败！");
            return;
          }
          sessionStorage.crctoken = data.dataResult.crctoken;
          this.$axios.defaults.headers.crctoken = sessionStorage.crctoken;
          this.$router.push({ path: "/" });
        })
          .catch((error) => {
            this.$Message.error("服务异常，请稍候重试！");
        });

      },
      encrypt() {
        //账号密码加密
        let baseKey = "h1k2#3s4f5d6%7d8s9@0s1f2";
        let key = CryptoJS.enc.Latin1.parse(baseKey.substring(0, 16));
        let iv = CryptoJS.enc.Latin1.parse(baseKey.substring(0, 16));
        //这里不要用模板字符串
        let data = '{"userCode":"' + this.d.username + '","password":"' + this.d.userpassword + '","captcha":""}';
        return CryptoJS.AES.encrypt(data, key, {
          iv: iv,
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.ZeroPadding
        }).toString();
      },
    }
  };
</script>
<style lang="less" scoped>
.login {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 999;
  background-image: url("https://file.iviewui.com/admin-pro-dist/img/body.8aa7c4a6.svg");
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  background-color: #fff;
  .container {
    width: 384px;
    .page-account-top{
      padding: 0 0 32px;
      .page-account-top-logo img{
          height: 75px;
          margin: 0 auto;
      }
      .page-account-top-desc{
        text-align: center;
        font-size: 14px;
        color: #808695;
      }
    }

    .username,
    .password {
      position: relative;
      span.login-icon {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 32px;
        height: 32px;
        z-index: 1;
        i {
          line-height: 32px;
          padding: 0 10px;
        }
      }
      margin-bottom: 24px;
      .login-input {
        .ivu-input {
          padding-left: 12px;
        }
        height: 40px;
      }
      .error-msg {
        color: red;
      }
    }
  }
  .inner-footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    background-color: transparent;
  }
}
</style>
<style lang="less">
.login-input {
  .ivu-input {
    padding-left: 32px;
  }
  height: 40px;
}
.submit button {
  width: 100%;
  height: 40px;
}
</style>
