<template>
  <div class="login-container">
    <div class="background">
      <img :src="imgSrc" width="100%" height="100%" alt="" />
    </div>
    <div class="content">
      <div class="login-box">
        <div class="form-box">
          <el-form ref="loginForm" :model="loginForm" :rules="dynamicRules">
            <div class="form_header">
              <div class="form_header_img">
                    <el-image
                        class="form_header_img_content"
                        fit="fill"
                        :src="imgSrc"
                    ></el-image>
              </div>
              <div class="form_header_title">
                <span>登 录</span>
              </div>
              <div class="form_header_tips">
                <span>欢迎登录铭和医院官网网站管理后台</span>
              </div>              
            </div>
            <div class="login-content">
              <div>
                <el-form-item prop="account">
                  <el-input
                    :placeholder="placeHolder[0]"
                    v-model="loginForm.account"
                    prefix-icon="el-icon-user"
                    clearable
                  >
                  </el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    :placeholder="placeHolder[1]"
                    v-model="loginForm.password"
                    prefix-icon="el-icon-lock"
                    show-password
                  >
                  </el-input>
                </el-form-item>
              </div>
            </div>
            <el-button
              :loading="loading"
              :disabled="loading"
              type="primary"
              style="width: 100%; margin-bottom: 30px"
              @click.native.prevent="handleLogin"
              >{{ loginButton }}
            </el-button>
          </el-form>
          <div>
            <div class="login-bottom">
              忘记密码请联系管理员
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import loginAPI from "@/api/login";

export default {
  name: "login",
  data() {
    return {
      placeHolder: [
        "请输入账号",
        "请输入密码",
      ],
      loginButton: "登录",
      loginForm: {
        account: "",
        password: "",
      },
      // 动态表单验证
      loading: false,
      imgSrc: require("../../assets/images/login/back.jpg"),
      passwordRules: {
        account: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 1, max: 20, message: "账号在20字以内", trigger: "blur" },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            transform: (value) => value,
            trigger: "blur",
          },
          {
            type: "string",
            message: "请输入不包含空格的字符",
            trigger: "blur",
            transform(value) {
              if (value && value.indexOf(" ") === -1) {
                return value;
              } else {
                return false;
              }
            },
          },
        ],
      },
    };
  },
  computed: {
    // 判断规则赋值
    dynamicRules() {
      return this.passwordRules;
    },
  },
  methods: {
    // 登录接口方法
    loginFun(obj) {
      // console.log('11111')
      loginAPI
        .login(obj)
        .then((res) => {
          // console.log('222222222222', res)
          if (res.code === 1000) {
            this.$message.success("登录成功！");
            // 获取到用户信息，转换成JSON字符串存储在sessionStorage中
            let userDetail = JSON.stringify(res.data);
            localStorage.setItem("mh_userInfo", userDetail);
            localStorage.setItem("mh_islogin", 1);
            this.loading = false;
            // 延迟跳转到主页
            setTimeout(() => {
              this.$router.push({
                path: "/admin/content",
              });
            }, 1000);
          } else {
            this.$message.error(res.msg);
            this.loading = false;
          }
        })
        .catch((err) => {
          console.log("err: ", err);
          this.$message.error("网络错误");
          this.loading = false;
        });
    },

    // 登录方法
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        // 验证通过
        if (valid) {
          this.loading = true;
          // console.log('444', this.loginForm)
          // 判断：用户使用账号密码登录
          let user = {
            account: this.loginForm.account,
            password: this.loginForm.password,
          };
          // 调用登录方法
          this.loginFun(user);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.background {
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
}

.content {
  z-index: 1;
  //   position: absolute;
}

.login-box {
  width: 450px;
  height: 410px;
  background: #ffffff;
  box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.09);
  opacity: 1;
  border-radius: 5px;
  position: absolute;
  right: 15%;
  top: 50%;
  transform: translate(0, -50%);
}

.form-box {
  margin: 30px 60px 60px 60px;
}

.form_header {
  margin: 10px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.form_header_img {
  width: 60px;
  height: 60px;
  background-color: pink;
  border-radius: 50%;
}

.form_header_title {
  font-size: $font-common-second-third;
  font-weight: 600;
  color: $color-text-primary;
  margin-top: 10px;
}

.form_header_tips {
  display: flex;
  justify-content: center;
  font-size: 12px;
  color: #999999;
  margin-top: 10px;
}

.form_header_img_content {
  width: 60px;
  height: 60px;
  border-radius: 50%;  
}


.el-form-item {
  margin-bottom: 20px;
}

.active {
  padding-bottom: 10px;
  border-bottom: 2px solid #61afff;
}

.login-bottom {
  display: flex;
  justify-content: center;
  font-size: 12px;
  color: #999999;
}
</style>
