<template>
  <div class="login_page">
    <div class="login_top">
      <img
        src="~@/assets/img/top_logo.jpg"
        width="200px"
        height="57px"
        alt=""
      />
      <div class="nav_box">
        <div class="nav" @click="handleJump(0)">首页</div>
        <div class="nav" @click="handleJump(1)">登记系统</div>
        <div class="nav">管理系统</div>
      </div>
    </div>
    <div class="login_main">
      <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="mini"
              v-model="dataForm.userName"
              placeholder="帐号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              size="mini"
              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="mini"
                  v-model="dataForm.captcha"
                  placeholder="验证码"
                >
                </el-input>
              </el-col>
              <el-col :span="10">
                <img
                  :src="captchaPath"
                  @click="getCaptcha()"
                  style="height: 27px;margin-top: -3px;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="mini"
              @click="dataFormSubmit()"
              >登 录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="login_foot">
      <div class="left">
        <div class="text1">趣旅宿</div>
        <div class="text2">提供优质的旅宿运营服务</div>
      </div>
      <div class="right">
        <img src="~@/assets/img/QC.jpg" width="80px" alt="" />
        <div class="line"></div>
        <img src="~@/assets/img/logo20221029.png" width="200px" alt="" />
      </div>
    </div>
  </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: {
    handleJump(type) {
      switch (type) {
        case 0:
          window.location.href = "http://www.qulvsu.com";
          break;
        case 1:
          window.location.href = "http://dengji.qulvsu.com";
          break;
        default:
          break;
      }
    },
    // 提交表单
    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: "home" });
            } 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">
.login_page {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  .login_top {
    width: 1000px;
    height: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    .nav_box {
      margin-left: auto;
      display: flex;
      .nav {
        width: 107px;
        height: 80px;
        font-family: "Microsoft YaHei";
        font-size: 15px;
        color: #4a4a4a;
        font-weight: bold;
        font-style: normal;
        display: flex;
        justify-content: center;
        line-height: 80px;
        cursor: pointer;
        border-bottom: none;
        transition-duration: 0.1s;
        transition-delay: 0.1s;
      }
      .nav:hover {
        border-bottom: 4px solid #000;
        color: #ff6702;
      }
    }
  }
  .login_main {
    height: 65vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url(~@/assets/img/login_background_20221029.jpeg);
    background-size: cover;
    .login_box {
      width: 350px;
      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;
      }
    }
  }
  .login_foot {
    width: 100%;
    height: 25vh;
    display: flex;
    flex-direction: row;
    .left {
      display: flex;
      flex-direction: column;
      width: 30vw;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      .text1 {
        font-size: 24px;
      }
      .text2 {
        font-size: 14px;
        margin-top: 5px;
      }
    }
    .right {
      margin-left: auto;
      margin-right: 15vw;
      display: flex;
      flex-direction: row;
      align-items: center;
      .line {
        width: 1px;
        border: 1px solid #000;
        height: 80px;
        margin-left: 20px;
      }
    }
  }
}
</style>
