<template>
  <div>
    <div class="overlay" v-if="alertShow">
      <div class="alert-box">{{ alertMessage }}</div>
    </div>
    <div class="content" v-if="!alertShow">
      <div class="title">上海建科签到填写表</div>
      <div class="form">
        <mt-field
          class="userName"
          label="姓名"
          placeholder="请输入姓名"
          v-model="userName"
        ></mt-field>
        <mt-field
          class="department"
          label="单位"
          placeholder="请输入单位"
          v-model="department"
        ></mt-field>
        <mt-field
          class="phone"
          label="手机号"
          placeholder="请输入手机号"
          type="tel"
          v-model="phone"
        ></mt-field>

        <button ref="submit" class="submit" @click="submit">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import { MessageBox } from "mint-ui";
import axios from "axios";
import VConsole from "vconsole";
let VConsoles = new VConsole();

export default {
  name: "signin",
  data() {
    return {
      alertMessage: "请重新扫描二维码进入",
      alertShow: true,
      userName: "",
      department: "",
      phone: "",
      openid: "",
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      var ua = window.navigator.userAgent.toLowerCase();
      if (flag) {
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
          this.checkQRCodeExpiration();
        } else {
          this.alertMessage = "请使用手机微信扫码进入！";
        }
      } else {
        this.alertMessage = "请使用手机微信扫码进入！";
      }
    });
  },
  methods: {
    //判断二维码是否过期
    checkQRCodeExpiration() {
      var _this = this;
      var query = window.location.search;
      var params = new URLSearchParams(query);
      //扫描二维码传入的时间
      var paramValue = params.get("nowTime");
      axios.get("https://adminssl.jiangtang360.com/api/Card/getTime").then(
        (res) => {
          if (
            Number(paramValue) + 1000 * 60 * 5 > res.data &&
            Number(paramValue) != null
          ) {
            _this.alertShow = false;
            this.getOpenid(params.get("code"));
          } else {
            //二维码过期了
            this.alertMessage = "二维码已过期，请重新扫描二维码进入！";
          }
        },
        (error) => {
          Toast("获取当前时间失败，请重新扫码签到");
        }
      );
    },
    //根据微信code获取微信用户openid
    getOpenid(code) {
      let formData = new FormData();
      formData.append("code", code);
      axios.post("https://adminssl.jiangtang360.com/api/Signin/getOpenId", formData).then(
        (res) => {
          if (res.data.code == 200) {
            this.openid = res.data.data;
            if (this.openid != "" && this.openid != null) {
              //根据openid，获取用户上次登录的数据
              this.isTodaySignedIn(this.openid);
            }
          }else {
            this.alertShow = true;
            this.alertMessage = res.data.msg;
          }
        },
        (error) => {}
      );
    },
    //判断用户今天是否已签到
    isTodaySignedIn(openid) {
      let formData = new FormData();
      formData.append("openid", openid);
      axios
        .post("https://adminssl.jiangtang360.com/api/Signin/isTodaySignedIn", formData)
        .then(
          (res) => {
            if (res.status == 200) {
              if (res.data.msg == "今日未签到") {
                this.getUserInfo();
              } else {
                this.alertShow = true;
                this.alertMessage = res.data.msg;
              }
            }
          },
          (error) => {}
        );
    },
    //获取用户对应的信息
    getUserInfo() {
      let formData = new FormData();
      formData.append("openid", this.openid);
      axios
        .post(
          "https://adminssl.jiangtang360.com/api/Signin/getLastSubmissionByOpenid",
          formData
        )
        .then(
          (res) => {
            if (res.data.data != null) {
              this.userName = res.data.data.name;
              this.department = res.data.data.department;
              this.phone = res.data.data.phone;
            }
          },
          (error) => {}
        );
    },

    //提交
    submit() {
      if (this.userName != "") {
        if (this.department != "") {
          if (this.checkPhone(this.phone)) {
            this.$refs.submit.disabled = true;
            let formData = new FormData();
            formData.append("name", this.userName);
            formData.append("department", this.department);
            formData.append("phone", this.phone);
            formData.append("openid", this.openid);
            axios
              .post(
                "https://adminssl.jiangtang360.com/api/Signin/saveUserCheckinInfo",
                formData
              )
              .then(
                (res) => {
                  if (res.status == 200) {
                    MessageBox({
                      title: "提示",
                      message: "签到成功",
                      showConfirmButton: false,
                      closeOnClickModal: false,
                    });
                  }
                },
                (error) => {
                  this.$refs.submit.disabled = false;
                }
              );
          } else {
            Toast("手机号格式不正确");
          }
        } else {
          Toast("请输入单位");
        }
      } else {
        Toast("请输入姓名");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  .alert-box {
    width: 75%;
    height: 150px;
    background-color: white;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    padding: 0 20px 0 20px;
  }
}
.content {
  display: flex;
  // justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: gray;
  flex-direction: column;
  background-image: url(../../../static/img/qunshan.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  .title {
    // background-color: blue;
    font-size: 28px;
    margin-top: 25%;
  }
  .form {
    // background-color: yellow;
    margin: 10%;
    height: 100vh;
    .userName,
    .department,
    .phone {
      margin: 10% 5px 10% 5px;
      border-radius: 5px;
    }
    .submit {
      width: 60%;
      height: 40px;
      border-radius: 5px;
      background-color: #049b6e;
      margin-top: 20%;
    }
    .submit:active {
      background-color: #046070;
    }
  }
}
</style>
