<template>
  <div class="account">
    <div class="form">
      <div class="title">
        <h1>讲堂360</h1>
        <h2>企业安全生产教育平台</h2>
      </div>
      <mt-field
        class="xingming"
        label="手机号"
        placeholder="请输入手机号"
        ref="mobile"
        type="tel"
        v-model="loginInfo.mobile"
      ></mt-field>
      <mt-field
        class="pwd"
        label="密码"
        placeholder="请输入密码"
        type="password"
        v-model="loginInfo.password"
      ></mt-field>
      <div class="other" @click="goOther()">证件号登陆</div>
      <mt-button
        class="denglu"
        type="primary"
        size="large"
        @click.native="login(loginInfo)"
        >登录</mt-button
      >
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import store from "@/vuex/store";
import { mapState, mapMutations } from "vuex";
import { getStore, setStore } from "@/utils/storage";
export default {
  name: "login",
  data() {
    return {};
  },
  mounted() {
    // var ua = window.navigator.userAgent.toLowerCase();
    // if (ua.match(/MicroMessenger/i) != "micromessenger") {
    //   this.$router.push({ path: "/wxerror" });
    // }
  },
  methods: {
    login(data) {
      if (data.mobile != "") {
        if (this.checkPhone(data.mobile)) {
          if (data.password != "") {
            if (this.checkPwd(data.password)) {
              this.getData("/Member/login", {
                member_mobile: data.mobile,
                member_pwd: data.password,
              }).then(
                (res) => {
                  if (res.code == 1) {
                    if (res.data.is_need_check_face == 1) {
                      //需要人脸识别，只能微信客户端登录
                      var ua = window.navigator.userAgent.toLowerCase();
                      if (!/MicroMessenger/i.test(ua) || /wxwork/i.test(ua)) {
                        this.$router.push({ path: "/wxerror" });
                      } else {
                        Toast(res.msg);
                        setStore("token", res.data.token);
                        this.$router.push({ path: "/" });
                      }
                    } else {
                      Toast(res.msg);
                      setStore("token", res.data.token);
                      this.$router.push({ path: "/" });
                    }
                  } else {
                    Toast(res.msg);
                  }
                },
                (err) => {}
              );
            } else {
              Toast("密码格式不正确");
            }
          } else {
            Toast("请输入密码");
          }
        } else {
          Toast("手机号格式不正确");
        }
      } else {
        Toast("请输入手机号");
      }
    },
    goOther() {
      this.$router.push({ path: "/login2" });
    },
    ...mapMutations(["addInfo"]),
  },
  computed: {
    ...mapState(["loginInfo", "token"]),
  },
};
</script>

<style lang="scss" scoped>
.account {
  height: 100vh;
  background: url("../../../static/img/bg.png");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;

  .form {
    margin: 0 4.166667rem;
    .title {
      margin-bottom: 4rem;
      h1 {
        font-size: 2.6rem;
        font-weight: bold;
      }
      h2 {
        font-size: 2rem;
        margin: 0.3rem;
        font-weight: normal;
      }
    }
    .xingming {
      border-radius: 1rem;
      color: #0083ff;
    }
    .pwd {
      margin: 2rem 0;
      border-radius: 1rem;
      color: #0083ff;
    }
    .denglu {
      border-radius: 1rem;
      margin: 4rem 0;
    }
    .other {
      width: 100%;
      text-align: right;
      color: #0083ff;
      font-size: 1.5rem;
      color: white;
    }
  }
}
</style>
