<template>
  <div class="Login">
    <div class="loginmain">
      <div class="title">
        <span>疫情防控平台</span>
      </div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button
            @click="getLogin"
            round
            block
            type="info"
            native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { getUserApi, getLogin } from "../../network/login";
import { Toast, Notify } from "vant";

export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    onSubmit(values) {
      // 打印提交的登录
      // console.log("submit", values);
    },
    getLogin() {
      getLogin(this.username, this.password).then((res) => {
        if (res.ret && res.data) {
          // 改变vue-x中登录状态
          // 100 状态码为登录成功
          this.$store.commit("changelogin", "100");
          // 提示登录成功
          Notify({ type: "success", message: "登录成功" });
          // 登录成功默认跳转首页
          this.$router.push("/");

          // if (this.$route.path.indexOf("articles") !== 1) {
          //   this.$router.push("/articles/" + this.CardItemList.fileID);
          //   console.log("跳转");
          //   console.log(this.CardItemList.fileID);
          // } else {
          //   return false;
          // }
        } else {
          Toast(res.msg);
        }
      });
    },
  },
  computed: {},
  created() {},
  mounted() {},
};
</script>

<style scoped>
/deep/.van-button--normal {
  width: 60vw !important;
  margin: 0 auto;
}
.van-cell {
  font-size: 16px;
}
.title {
  display: flex;
  justify-content: center;
  font-size: 22px;
  line-height: 20vw;
  height: 20vw;
}
.Login span {
  text-align: center;
}
.loginmain {
  width: 80%;
  margin: 0 auto;
}
.van-button--normal {
  width: 25vw;
  height: 12vw;
  font-size: 16px;
}
.loginButton {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  margin-top: 2vw;
}
</style>