<template>
  <div class="border">
    <div class="leftLogin">
      <div class="loginImg">
        <img
          src="@/assets/logo.png"
          alt=""
        />
      </div>
      <h1>中能智能性能分析平台</h1>
      <div class="reminder">
        <h3>忘记密码了吗？</h3>
        <h4>请输入您的电子邮件继续</h4>
      </div>
      <div class="loginText">
        <el-form
          :model="loginForm"
          ref="ruleForm"
          label-width="0px"
          :rules="rules"
          class="demo-ruleForm"
        >
          <el-form-item prop="email">
            <el-input
              placeholder="请输入邮箱"
              v-model="loginForm.email"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              :type="buttonType"
              class="custom-button"
              @click="login('ruleForm')"
              :disabled="disabled"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <p
        class="getBack"
        @click="getBack"
      >
        返回登录
      </p>
    </div>
    <div class="rightImg">
      <img
        src="@/assets/login-img.png"
        alt=""
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var validateEmail = (rule, value, callback) => {
      console.log(rule, value)
      if (value === '') {
        callback(new Error('请输入邮箱地址'))
      } else {
        this.disabled = false
        this.buttonType = 'primary'
        callback()
      }
    }
    return {
      disabled: true,
      buttonType: 'info',
      loginForm: {
        email: ''
      },
      rules: {
        email: [
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur']
          },
          { required: true, validator: validateEmail, trigger: 'blur' }
        ]
      }
    }
  },
  created() {},
  methods: {
    login(formName) {
      // 自带校验
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push('/')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getBack() {
      {
        this.$router.push('/login')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.border {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1200px;
  height: 800px;
  border: 1px solid rgb(231, 231, 231);
  border-radius: 5px;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.4);
  margin: auto;
  display: flex;

  .leftLogin {
    // TODO：新增
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    width: 50%;
    height: 100%;

    h1 {
      text-align: center;
      line-height: 100px;
      font-size: 36px;
      font-weight: 600;
    }

    .reminder {
      color: rgb(143, 143, 143);

      h3 {
        font-size: 30px;
        line-height: 40px;
      }

      h4 {
        font-size: 20px;
        line-height: 40px;
      }
    }

    .getBack {
      font-size: 12px;
      color: rgb(143, 143, 143);
      margin-top: 20px;
    }

    .getBack:hover {
      font-size: 12px;
      color: rgb(0, 0, 0);
      margin-top: 20px;
    }

    .loginImg {
      width: 200px;
      height: 200px;
      margin: 50px auto;

      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }

    // TODO：新增
    .demo-ruleForm {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;

      .el-button {
        margin-top: 20px;
      }

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

  .rightImg {
    width: 50%;
    height: 100%;

    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      border-radius: 0 5px 5px 0;
      /* 可以根据需要调整圆角的大小 */
    }
  }
}

// ::v-deep .el-form-item__error {
//   left: 150;
// }
</style>
