<template>
  <div>
    <div class="login_bg">
      <div class="logo">
        <a href="/">
          <span class="logo_text">
            <img src="../assets/logo.png" height="40px" />
          </span>
        </a>
      </div>
      <div class="banner_text">
        <h1>智能化订单处理</h1>
        <h1 style="margin-left: 60px">数字化供采平台</h1>
        <h1 style="margin-left: 120px">多维度数据分析</h1>
      </div>
      <div class="login_content">
        <h2 style="text-align: center">登录</h2>
        <el-form
          size="medium"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="login_form">
          <el-form-item prop="email">
            <el-input
              prefix-icon="el-icon-message"
              style="background: #fff"
              v-model="ruleForm.email"
              placeholder="Email"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              :type="showPwd ? 'text' : 'password'"
              prefix-icon="el-icon-lock"
              style="background: #fff"
              v-model="ruleForm.password"
              placeholder="Password"
              @keyup.enter.native="submitForm">
              <i
                @click="showPwd = !showPwd"
                slot="suffix"
                :class="{ eyes: true, open: !showPwd, close: showPwd }"></i>
            </el-input>
          </el-form-item>
          <div style="text-align: center">
            <button class="login-btn" @click="submitForm">登录</button>
          </div>
          <div style="margin-top: 20px; font-size: 14px; text-align: center">
            还没有账号？
            <router-link class="link" to="register">马上注册</router-link>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { post } from '../utils/axios'
import md5 from 'js-md5'
export default {
  name: 'login',
  components: {},
  data() {
    return {
      ruleForm: {
        password: '',
        email: '',
        checked: false,
      },
      rules: {
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change'],
          },
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
      showPwd: false,
    }
  },
  methods: {
    submitForm(e) {
      e.preventDefault()
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const hash = md5.create()
          hash.update(this.ruleForm.password)

          const passwordHash = hash.hex()
          let url = `business/user/login`
          post(url, {
            email: this.ruleForm.email,
            password: passwordHash,
          }).then((res) => {
            if (res.code === 200) {
              this.ruleForm = {}
              this.$router.push('/contact')
            }
          })
        }
      })
    },
  },
}
</script>
<style scoped>
.logo {
  position: absolute;
}
.logo_text {
  display: inline-block;
  line-height: 40px;
  margin: 60px 0 0 80px;
}
.banner_text {
  position: absolute;
  top: 30%;
  left: 10%;
  line-height: 80px;
  color: #fff;
}
.login_bg {
  width: 100%;
  height: 100vh;
  position: relative;
  image-rendering: -webkit-optimize-contrast;
  background: url(../assets/banner.jpg) center / cover no-repeat;
}
.login_content {
  padding: 18px;
  background: rgba(255, 255, 255, 0.4);
  position: absolute;
  top: 50%;
  left: 80%;
  border-radius: 6px;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  background-position: top right, center;
  background-repeat: no-repeat;
  background-size: 528px auto, contain;
}

.login_form {
  padding: 40px;
  width: 300px;
  border-radius: 6px;
}

.login-btn {
  width: 100%;
  height: 38px;
  display: block;
  margin: 0 auto;
  background: #006eff;
  box-shadow: 0 4px 8px 0 rgb(26 90 216 / 32%);
  border-radius: 4px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}

.eyes {
  display: inline-block;
  height: 14px;
  width: 18px;
  margin-top: 11px;
  margin-right: 5px;
  cursor: pointer;
}
.eyes.open {
  background: url('../assets/eyes-open.png') no-repeat center / cover;
}
.eyes.close {
  background: url('../assets/eyes-closed.png') no-repeat center / cover;
}
</style>
