<template>
  <div class="login-wrap">
    <div class="ms-login">
      <div class="ms-title">
        <span>智慧清洁SaaS云平台管理系统</span>
      </div>
      <el-form
        :model="param"
        :rules="rules"
        ref="login"
        label-width="0px"
        class="ms-content"
        size="large"
      >
        <div class="left">
          <div class="imgbox">
            <img src="/src/Assets/img/login/left.png" alt />
          </div>
        </div>
        <div class="right">
          <div class="login-caption">
            <span>用户登录</span>
          </div>
          <el-form-item prop="userName" class="username">
            <el-input
              v-model="param.userName"
              placeholder="请输入您的手机号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="verifycode" class="verifycode">
            <el-input
              placeholder="请输入您的验证码"
              v-model="param.verifycode"
              @keyup.enter="submitForm()"
              :maxlength="6"
              :minlength="6"
            >
              <template #suffix>
                <el-button
                  @click="sendSms"
                  :disabled="sendSmsIng"
                  class="send-msg"
                >
                  {{
                    sendSmsIng ? "倒计时" + countDownNum + "秒" : "发送验证码"
                  }}
                </el-button>
              </template>
            </el-input>
          </el-form-item>
          <div class="login-btn">
            <el-button type="primary" @click="submitForm">登录</el-button>
          </div>
        </div>
      </el-form>
    </div>
    <div class="foot">
      北京小趣智品科技有限公司
      <br />
      版本号：{{ appVersion }}({{ appVersionCode }})
    </div>
  </div>
</template>

<script setup>
import { memberService } from "@/ApiService/memberService.js";
import { onMounted, reactive, ref } from "vue";
import { ElMessage as $message } from "element-plus";
import $common from "@/Utils/commonUtils";
import router from "@/Router";
let param = reactive({
  userName: "",
  verifycode: "",
});
const rules = reactive({
  userName: [{ required: true, message: "请输入手机号", trigger: "blur" }],
  verifycode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
});

let countDownNum = ref(60);
let sendSmsIng = ref(false);
const login = ref();
const appVersion = $common.appVersion;
const appVersionCode = $common.appVersionCode;
onMounted(() => {});
const submitForm = () => {
  login.value.validate((valid) => {
    if (valid) {
      loginAction();
    } else {
      console.log(valid);
    }
  });
};
const loginAction = () => {
  if (!param.verifycode) return;
  memberService
    .login({ number: param.userName, randCode: param.verifycode })
    .then((res) => {
      if (res.code == 0) {
        $message.success("登录成功");
        // res.data.companyInfo.enterpriseType = 0
        sessionStorage.setItem(
          "loginInfo",
          window.btoa(unescape(encodeURIComponent(JSON.stringify(res.data))))
        );
        sessionStorage.setItem("phone", param.userName);
        setTimeout(() => {
          router.push("/main");
          // window.location.href = '/main.html';
        }, 300);
      } else {
        param.verifycode = "";
        $message.error(res.err);
      }
    });
};
const sendSms = () => {
  if (!param.userName) return;
  memberService.smsSend(param.userName).then((res) => {
    if (res.code == 0) {
      sendSmsIng.value = true;
      let countDown = setInterval(() => {
        countDownNum.value--;
        if (countDownNum.value == 0) {
          countDownNum.value = 60;
          clearInterval(countDown);
          sendSmsIng.value = false;
        }
      }, 1000);
    } else {
      $message.error(res.err);
      countDownNum.value = 60;
    }
  });
};
</script>

<style lang="scss" scoped>
@import "@/Assets/css/base.scss";

.login-wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  background: url("@/Assets/img/login/bg.jpg") center no-repeat;
  background-size: 100%;
  .foot {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 8rem;
    line-height: 1.5;
    position: absolute;
    text-align: center;
    color: #d7e0ff;
    font-size: 0.8rem;
  }
}
.ms-title {
  width: 100%;
  line-height: 1;
  text-align: center;
  font-size: 4.8rem;
  color: #fff;
  margin-bottom: 7rem;
  letter-spacing: 0.1rem;
  font-weight: 600;
  .version {
    font-size: 1.8rem;
    color: #87abfc;
    margin-left: 2rem;
  }
}
.ms-login {
  width: 120rem;
}
.ms-content {
  padding: 0;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  height: 50rem;
  overflow: hidden;
  border-radius: 1.6rem;
  .left,
  .right {
    width: 50%;
  }
  .left {
    .imgbox {
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .right {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    padding: 5rem 8rem;
    box-sizing: border-box;
  }
  .login-caption {
    font-size: 2.6rem;
    color: #333;
    line-height: 1;
    margin-bottom: 2.5rem;
    display: flex;
    align-content: center;
    display: flex;
    align-content: center;
    align-items: center;
    width: 100%;
    span.tag {
      color: #fff;
      font-size: 1.5rem;
      line-height: 2.6rem;
      margin-left: 1.2rem;
      display: inline-block;
      width: 6rem;
      height: 2.6rem;
      text-align: center;
    }
  }
  .el-form-item {
    width: 100%;
    padding: 2rem 0;
    box-sizing: border-box;
    border-bottom: 0.2rem solid #eee;
    margin-bottom: 0;
    .el-form-item__content {
      display: flex;
      align-content: center;
      align-items: center;
    }
    &.username,
    &.verifycode {
      padding-left: 5rem;
      box-sizing: border-box;
      background-repeat: no-repeat;
      background-size: auto 40%;
      background-position: center left;

      .el-form-item__error {
        padding: 0 15px;
      }
      :deep(.el-form-item__content) {
        .el-input .el-input__inner {
          background-color: transparent;
          border: 0;
          font-size: 1.8rem;
          height: 4rem;
          line-height: 4rem;
          letter-spacing: 0.2rem;
          box-shadow: none;
        }
      }
    }
    &.username {
      background-image: url(@/Assets/img/login/zhanghao.png);
    }
    &.verifycode {
      background-image: url(@/Assets/img/login/mima.png);
      .el-input-group__append {
        background-color: transparent;
        border: 0;
      }
      button {
        width: 10.9rem;
        height: 3.2rem;
        text-align: center;
        padding: 0;
        line-height: 3.2rem;
        color: $default-color;
        border: 0.1rem solid $default-color;
        border-radius: 3.2rem;
        font-size: 1.6rem;
      }
    }
  }
  .remberme {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    margin-top: 3rem;
    .rember {
      color: #a9a9a9;
      .el-checkbox__label {
        font-size: 1.8rem;
      }
    }
    .forget {
      a {
        color: var(--color-primary);
      }
    }
  }
}

.login-btn {
  width: 100%;
  margin-top: 4rem;
  text-align: center;
}
.login-btn button {
  width: 30rem;
  height: 6.4rem;
  margin-bottom: 1rem;
  border-radius: 6.4rem;
  padding: 0;
  font-size: 2.8rem;
}
.login-tips {
  font-size: 1.2rem;
  line-height: 3rem;
  color: #fff;
}
@media screen and (max-width: 1366px) {
  body {
    background-color: lightblue;
  }
}
</style>
