<template>
  <div class="h5_login">
    <el-card class="box-card">
      <div class="login_box">
        <div class="login_box_title">
          宿四季酒店管理系统
        </div>
        <el-form
          :model="dataForm"
          :rules="dataRule"
          ref="dataForm"
          @keyup.enter.native="dataFormSubmit()"
          status-icon
          size="mini"
        >
          <el-form-item prop="userName">
            <el-input
              size="medium"
              v-model="dataForm.userName"
              placeholder="帐号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              size="medium"
              v-model="dataForm.password"
              type="password"
              placeholder="密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="captcha">
            <el-row :gutter="5">
              <el-col :span="14">
                <el-input
                  size="medium"
                  v-model="dataForm.captcha"
                  placeholder="验证码"
                >
                </el-input>
              </el-col>
              <el-col :span="10">
                <img
                  :src="captchaPath"
                  @click="getCaptcha()"
                  style="height: 36px;width: 100%;"
                  alt=""
                />
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-button
              class="login-btn-submit"
              style="width:100%;background: #ff6702;color:#fff"
              size="medium"
              @click="dataFormSubmit()"
              >登 录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getUUID } from "@/utils";
export default {
  data() {
    return {
      dataForm: {
        userName: "",
        password: "",
        uuid: "",
        captcha: ""
      },
      dataRule: {
        userName: [
          { required: true, message: "帐号不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" }
        ],
        captcha: [
          { required: true, message: "验证码不能为空", trigger: "blur" }
        ]
      },
      captchaPath: ""
    };
  },
  created() {
    this.getCaptcha();
  },
  methods: {
    // 提交表单
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl("/sys/login"),
            method: "post",
            data: this.$http.adornData({
              username: this.dataForm.userName,
              password: this.dataForm.password,
              uuid: this.dataForm.uuid,
              captcha: this.dataForm.captcha
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$cookie.set("token", data.token);
              this.$router.replace({ name: "h5Home" });
            } else {
              this.getCaptcha();
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    // 获取验证码
    getCaptcha() {
      this.dataForm.uuid = getUUID();
      this.captchaPath = this.$http.adornUrl(
        `/captcha.jpg?uuid=${this.dataForm.uuid}`
      );
    }
  }
};
</script>

<style lang="scss">
.h5_login {
  height: 100vh;
  display: flex;
  align-items: center;
  .box-card {
    .login_box {
      width: 350px;
      height: 320px;
      background: rgba(255, 255, 255, 0.6);
      padding: 10px 50px;
      border-radius: 10px;
      margin-left: auto;
      margin-right: 10vw;
      .login_box_title {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        padding: 10px 0;
      }
    }
  }
}
</style>
