<template>
  <div class="login">
    <div class="login_left"></div>
    <div class="login_right">
      <div style="width: 100%">
        <div class="login_text">登录</div>
        <div class="login_ipt_box">
          <div class="login_ipt_text">账号</div>
          <el-input
            v-model="loginForm.phone"
            placeholder="请输入手机号"
            class="ipt"
          >
            <!-- <template slot="append">
              <span class="getcode" @click="getCode">{{ second }}</span>
            </template> -->
          </el-input>
          <div class="login_ipt_text" style="margin-top: 40px">密码</div>
          <el-input
            v-model="loginForm.smsCode"
            placeholder="请输入密码"
            class="ipt"
            show-password
          >
          </el-input>
        </div>
        <!-- <div class="login_type">
          <div>微信登录</div>
          <div>游客登录</div>
        </div> -->
        <button class="btn" @click="submit">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import { sendSms } from "@/api/user";
import Cookies from "js-cookie";
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        phone: "",
        smsCode: "",
        // createWay: 1,
      },
      second: "获取验证码",
      flag: true,
      timer: null, // 该变量是用来记录定时器的,防止点击的时候触发多个setInterval
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  created() {
    document.title = "登录";
  },
  mounted() {
    this.judgeCode();
  },
  methods: {
    getCode() {
      sendSms({
        phone: this.loginForm.phone,
      })
        .then((res) => {})
        .catch(() => {
          // this.shareLoading = false;
        });
      let that = this;
      if (that.flag) {
        that.flag = false;
        that.second = 60;
        let interval = window.setInterval(function () {
          that.setStorage(that.second);
          if (that.second-- <= 0) {
            that.second = "获取验证码";
            that.flag = true;
            window.clearInterval(interval);
          }
        }, 1000);
      }
    },
    setStorage(parm) {
      localStorage.setItem("dalay", parm);
      localStorage.setItem("_time", new Date().getTime());
    },
    judgeCode() {
      let that = this;
      let localDelay = that.getStorage();
      let secTime = parseInt((new Date().getTime() - localDelay.sec) / 1000);
      console.log(localDelay);
      if (secTime > localDelay.delay) {
        that.flag = true;
        console.log("已过期");
      } else {
        that.flag = false;
        let _delay = localDelay.delay - secTime;
        that.second = _delay;
        that.timer = setInterval(function () {
          if (_delay > 1) {
            _delay--;
            that.setStorage(_delay);
            that.second = _delay;
            that.flag = false;
          } else {
            // 此处赋值时为了让浏览器打开的时候,直接就显示剩余的时间
            that.flag = true;
            window.clearInterval(that.timer);
          }
          if (that.second-- <= 0) {
            that.second = "获取验证码";
            that.flag = true;
            window.clearInterval(interval);
          }
        }, 1000);
      }
    },
    getStorage() {
      let localDelay = {};
      localDelay.delay = localStorage.getItem("dalay");
      localDelay.sec = localStorage.getItem("_time");
      return localDelay;
    },
    submit() {
      if (this.loginForm.phone && this.loginForm.smsCode) {
        this.loading = true;
        Cookies.set("gupiao_phone", this.loginForm.phone);
        this.$store
          .dispatch("user/login", this.loginForm)
          .then(() => {
            console.log(1);
            this.$router.push({ name: "Home" });
            this.loading = false;
          })
          .catch((err) => {
            console.log(err);
            // this.$router.push({ path: "/" });
            this.loading = false;
          });
      } else {
        this.$message.error("请输入账号密码");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  display: flex;
}
.login_left {
  width: 65%;
  height: 100vh;
  background-image: url(../../static/login_bgc.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.login_right {
  flex: 1;
  padding: 0 62px;
  background-color: #fff;
  display: flex;
  align-items: center;
  .login {
    &_text {
      font-size: 40px;
      color: #333;
    }
  }
  .login_ipt_box {
    margin-top: 60px;
    .login_ipt_text {
      font-size: 18px;
      color: #999999;
      margin-bottom: 12px;
    }
    .ipt {
      width: 100%;
    }
  }
  .login_type {
    margin-top: 28px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .btn {
    margin-top: 70px;
    width: 100%;
    height: 50px;
    background-color: #ec7c00;
    border-radius: 8px;
    color: white;
    border: 0;
    cursor: pointer;
  }
}
::v-deep .el-input-group__append,
.el-input-group__prepend {
  color: #ec7c00;
}
.getcode {
  cursor: pointer;
}
</style>
