<template>
  <div class="login-container">
    <el-form
      class="card-box login-form"
      autocomplete="on"
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-position="left"
    >
      <h3 class="title">UDI多码融合平台</h3>
      <el-form-item prop="username" class="item">
        <el-input placeholder="邮箱" name="userName" autocomplete="on" v-model="ruleForm.userName">
          <i slot="prefix" class="el-input__icon">
            <icon-svg icon-class="user" />
          </i>
        </el-input>
      </el-form-item>
      <el-form-item prop="password" class="item">
        <el-input
          placeholder="密码"
          name="pwd"
          :type="isShowPwd ? 'text' : 'password'"
          @keyup.enter.native="handleLogin"
          v-model="ruleForm.pwd"
          autocomplete="on"
        >
          <i slot="prefix" class="el-input__icon">
            <icon-svg icon-class="pwd" />
          </i>
          <i slot="suffix" class="el-input__icon" @click="isShowPwd = !isShowPwd">
            <icon-svg icon-class="eye" />
          </i>
        </el-input>
      </el-form-item>
      <div style="text-align:center">
        <el-button
          type="primary"

          style="width:60%;margin-bottom:30px"
          :loading="loading"
          @click.native="handleLogin()"
        >登录</el-button>
      </div>
      <h4 style="color:#2d3a4b">开发单位：厦门高立新鹏软件科技有限公司 技术支持：13459286066</h4>
    </el-form>
  </div>
</template>

<script>
export default {
    data() {
        let validatePwd = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                userName: "",
                pwd: "",
                checked: true
            },
            rules: {
                userName: [
                    { required: true, message: "请输入登录名", trigger: "blur" }
                ],
                pwd: [{ validator: validatePwd, trigger: "blur" }]
            },
            isShowPwd: false, // 是否显示密码
            loading: false, // 登录loading
            showDialog: false, // 显示dialog
            redirect: null // 回调地址
        };
    },
    methods: {
        handleLogin() {
            this.$refs["ruleForm"].validate(valid => {
                if (valid) {
                    this.loading = true;
                    this.$store
                        .dispatch("loginName", this.ruleForm)
                        .then(response => {
                            this.loading = false;

                            if (response.code != 20000) {
                                console.log("--code = " + response.code);
                                this.$message.error(response.message);
                                return;
                            }
                            let path = "/";
                            if (this.redirect) {
                                path = this.redirect;
                            }
                            console.log("path = " + path);
                            this.$router.push({
                                path: "../main"
                            });
                            // window.location.replace(path);
                            // this.showDialog = true
                        })
                        .catch(() => {
                            this.loading = false;
                        });
                } else {
                    return false;
                }
            });
        }
    },
    created() {
        // 将参数拷贝进查询对象
        let query = this.$route.query;
        if (query.redirect) {
            // URL Encode
            this.redirect = decodeURIComponent(query.redirect);
        }
    }
};
</script>

<style type="text/scss" lang="scss">
@import "../../styles/mixin";

$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
.login-container {
    @include relative;
    height: 100%;
    // background-image: url("../../assets/bg_body.jpg");

    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px #293444 inset !important;
        -webkit-text-fill-color: #fff !important;
    }
    .item {
        width: 22em;
        margin-left: 5em;
        .el-form-item__content {
            display: flex;
            flex-flow: row;
        }
    }
    input {
        background: transparent;
        border: 0;
        -webkit-appearance: none;
        border-radius: 0;
        padding: 0.46rem 0.0666rem 0.16rem 0.2rem;
        color: $dark_gray;
        height: 100%;
    }
    .el-input {
        display: inline-block;
    }
    .tips {
        font-size: 14px;
        color: #fff;
        margin-bottom: 0.13333rem;
    }
    .svg-container {
        padding: 0.08rem 0.0666rem 0.08rem 0.2rem;
        color: $dark_gray;
        vertical-align: middle;
        display: inline-block;
        &_login {
            font-size: 20px;
        }
    }
    .title {
        font-size: 26px;
        color: #2d3a4b;
        margin: 0 auto 0.5333rem auto;
        text-align: center;
        font-weight: bold;
        margin-bottom: 50px;
    }
    .login-form {
        @include fxied-center;
        width: 52em;

        background: #fff;
        padding: 10em 10em 10em 10em;
    }
    .el-form-item {
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(0, 0, 0, 0.1);
        border-radius: 0.0666rem;
        color: #454545;
    }
    .show-pwd {
        position: absolute;
        right: 0.1333rem;
        top: 0.09333rem;
        font-size: 16px;
        color: $dark_gray;
        cursor: pointer;
    }
    .thirdparty-button {
        /*position: absolute;*/
        /*right: .4666rem;*/
        /*bottom: .37333rem;*/
    }
}
</style>
