<template>
  <div class="login">
    <div class="bg">
      <img :src="loginBG" alt="" />
    </div>
    <div class="login-main">
      <div class="logo-header">
        <p class="logo-header-title">登录</p>
      </div>
      <van-form validate-first class="login-form">
        <ul class="clear">
          <li class="label">
            <img :src="user" alt="" />
          </li>
          <li class="van-field-input">
            <van-field
              size="large"
              v-model="form.mobile"
              name="mobile"
              placeholder="请输入账号"
              type="text"
              :rules="[{ validator: asyncmobileValidator }]"
            >
            </van-field>
          </li>
        </ul>
        <ul class="clear">
          <li class="label">
            <img :src="pwod" alt="" />
          </li>
          <li class="van-field-input">
            <van-field
              size="large"
              v-model="form.code"
              name="code"
              placeholder="请输入密码"
              :rules="[{ validator: asyncpwodValidator }]"
              type="password"
            >
            </van-field>
          </li>
        </ul>

        <van-button
          class="login-form-button"
          block
          type="info"
          :disabled="loadding"
          :loadding="loadding"
          loadding-text="加载中..."
          native-type="submit"
          @click="onSubmit()"
        >
          确认登录
        </van-button>
      </van-form>
    </div>
  </div>
</template>

<script>
import { isnumber, validAlphabets } from "@/utils/validate";
import resToken from "@/mixins/resToken";
export default {
  mixins: [resToken],
  data() {
    return {
      loginBG: require("@/assets/images/login/bg.png"),
      user: require("@/assets/images/login/user.png"),
      pwod: require("@/assets/images/login/pwod.png"),
      loadding: false,
      show: false,
      codeTitle: "发送密码",
      num: 60,
      form: {
        mobile: "",
        code: "",
      },
    };
  },

  methods: {
    async onSubmit() {
      if (!this.loadding) {
        this.loadding = true;
        await this.asyncmobileValidator(this.form.mobile)
          .then(async (res) => {
            if (res === "ok") {
              await this.asyncpwodValidator(this.form.code)
                .then(async (res) => {
                  if (res === "ok") {
                    this.$store
                      .dispatch("user/login", this.form)
                      .then((res) => {
                        this.loadding = false;
                        if (res.code === 0) {
                          this.loginSuccess();
                        } else {
                          console.log();
                          this.show_title(res.msg);
                        }
                      })
                      .catch((err) => {
                        console.log(err);
                        this.loadding = false;
                      });
                  } else {
                    this.loadding = false;
                  }
                })
                .catch(() => {
                  this.loadding = false;
                });
            } else {
              this.loadding = false;
            }
            console.log(res);
          })
          .catch(() => {
            this.loadding = false;
          });
      }
    },
    async loginSuccess(data) {
      window.vm.$router.push({
        path: "/home/product",
      });
    },

    async asyncmobileValidator(val) {
      return new Promise((resolve) => {
        let type = true;
        if (val === "") {
          this.show_title("请输入账号！");
          type = false;
        } else {
          if (val.length !== 10) {
            this.show_title("账号不正确！");
            type = false;
          }
          let o = val.substr(0, 4);
          if (o !== "1745") {
            this.show_title("账号不正确！");
            type = false;
          }
          let t = val.substr(val.length - 6);
          if (!isnumber(t)) {
            this.show_title("账号不正确！");
            type = false;
          }
        }
        resolve(type ? "ok" : "error");
      });
    },
    async asyncpwodValidator(val) {
      return new Promise((resolve) => {
        let type = true;
        if (val === "") {
          this.show_title("请输入密码！");
          type = false;
        } else {
          if (val.length !== 6) {
            this.show_title("密码为2位字母+4位数字！");
            type = false;
          } else {
            let a = val.slice(0, 2);
            let b = val.slice(2, 4);
            if (!isnumber(b)) {
              this.show_title("密码为2位字母+4位数字！");
              type = false;
            }
            if (!validAlphabets(a)) {
              this.show_title("密码为2位字母+4位数字！");
              type = false;
            }
          }
        }
        resolve(type ? "ok" : "error");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  background: #f7f6f5;
  position: relative;
  width: 100%;
  height: 100%;
  .bg {
    position: relative;
    width: 100%;
    height: 100%;
    img {
      display: inline-block;
      width: 100%;
      height: 100%;
    }
  }
  .login-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .logo-header {
      // padding: 50% 0 10% 0;
      .logo-header-title {
        // height: 28vh;
        // line-height: 33vh;
        text-align: center;
        font-size: 30px;
        color: #000000;
        // font-weight: bold;
        padding: 20vh 0 28px 0;
      }
    }
    .login-form.van-form {
      padding: 0 18%;
      ul {
        border-radius: 20px;
        overflow: hidden;
        background: #ffffff;
        margin: 0 0 28px 0;
        li {
          float: left;
          &.label {
            width: 54px;
            text-align: center;
            line-height: 50px;
            vertical-align: top;
            height: 42px;
            padding-left: 11px;
            box-sizing: border-box;
            img {
              width: 15px;
              box-sizing: border-box;
              display: inline-block;
            }
          }
          &.van-field-input {
            box-sizing: border-box;

            width: calc(100% - 55px);
            .van-cell {
              height: 42px;
              line-height: 42px;
            }
          }
        }
      }
      .van-cell--large {
        padding: 0;
        input {
          height: 42px;
          line-height: 42px;
          font-size: 15px;
        }
        .van-field__label {
          line-height: 42px;
          text-align: center;
          font-size: 15px;
        }
      }
    }
    .van-button--small.van-button--plain {
      border: 0;
    }
    .login-form-button.van-button,
    .login-form-button.van-button--disabled {
      border: 0;
      margin: 18vh 0 0 0;
      background: linear-gradient(0deg, #ff6600 0%, #ffd490 100%);
      border-radius: 34px;
    }
  }
}
</style>
