<template>
  <div class="login">
    <div class="bg">
      <!-- <img :src="loginBG" alt="" /> -->
    </div>
    <div class="login-main">
      <div class="logo-header">
        <div class="login-img">
          <img src="@/assets/img/login.png" alt="">
        </div>
        <p class="logo-header-title">登录</p>
        <p class="logo-header-tips">登录享受更多精彩</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="!passwordStatus ? 'password' : 'text'"
              :right-icon="!passwordStatus ? 'eye-o' : 'closed-eye'"
              @click-right-icon="showPassword"
            >
            </van-field>
          </li>
        </ul>

        <van-button
          class="login-form-button"
          block
          type="info"
          :disabled="loadding"
          :loadding="loadding"
          loadding-text="加载中..."
          native-type="submit"
          @click="onSubmit()"
        >
          登&nbsp;录
        </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 {
      passwordStatus:false,//默认隐藏密码
      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 {
                          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/live",
      });
    },

    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");
      });
    },
    showPassword(){//展示/隐藏密码
      console.log("显示/隐藏密码");
      console.log(this.passwordStatus);
      this.passwordStatus = !this.passwordStatus;
    }
  },
};
</script>

<style lang="scss" scoped>
.login {//最外层的登陆盒子
  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%;//继承最外层login的宽高
    height: 100%;
    background-color: #fff;
    .logo-header {//上半部分登陆盒子，用来展示一张图片
      // padding: 50% 0 10% 0;
      width: 100%;
      height: 309px;
      .login-img{
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        img{
          width: 100%;
          height: 209px;
        }
      }
      position: relative;
      top: -12px;
      .logo-header-title {//登陆字体的盒子
        margin: 0px;
        font-weight: bold;
        padding: 91px 256px 99px 37px;
        width: 81px;
        height: 37px;
        font-size: 20px;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 20px;
        position: absolute;
      }
      .logo-header-tips{//登陆文字下提示内容
        position: absolute;
        left: 0;
        top: 0;
        padding-top: 0;
        padding: 118px 242px 79px 37px;
        width: 97px;
        height: 12px;
        font-size: 12px;
        font-weight: 150;
        color: #FFFFFF;
        line-height: 3px;
      }
    }
    .login-form.van-form {//登陆框
      padding: 10% 18%;
      background-color: #fff;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      position: relative;
      top: -145px;
      left: 0;
      ul {
        // border-radius: 20px;
        overflow: hidden;
        background: #ffffff;
        margin: 0 0 28px 0;
        border-bottom: 1px solid #F0F0F0;
        li {
          float: left;
          &.label {
            width: 100%;
            color: #333333;
            font-size: 16px;;
            font-weight: bolder;
            // 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: 100%;

            // 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: 9vh 0 0 0;
      color: #333;
      
      background: #F4D022;
      border-radius: 34px;
    }
  }
}
</style>
