<template>
  <div class="login">
    <div class="login-title" v-if="!isSend">
      欢迎您
      <br />
      立即登录
    </div>
    <div class="login-title" v-else>
      <div class="text1">输入验证码</div>
      <div class="text2">验证码已发送到 {{ ruleForm.phone }}</div>
      <div class="text3">{{ num }}S后重新发送</div>
    </div>

    <van-field
      name="用户名"
      :left-icon="require('../assets/icon_login_iphone.svg')"
      placeholder="请输入手机号"
      v-model="ruleForm.phone"
      v-if="!isSend"
      clearable
      maxlength="11"
    />
    <div v-else class="code">
      <div class="code-mask" v-html="mask(ruleForm.code)"></div>
      <van-field v-model="ruleForm.code" type="digit" maxlength="6" />
    </div>

    <div class="submit">
      <van-button
        :disabled="ruleForm.code.length !== 4"
        v-if="isSend"
        block
        round
        :color="$colors.prim"
        @click="login"
      >
        确认
      </van-button>
      <van-button
        :disabled="!ruleForm.phone"
        v-else
        block
        round
        :color="$colors.prim"
        @click="sendSms"
      >
        发送验证码
      </van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  metaInfo() {
    return {
      title: "文旅局艺考监管平台"
    };
  },
  data() {
    return {
      ruleForm: {
        phone: "",
        code: ""
      },
      isSend: false,
      num: 60
    };
  },
  methods: {
    login() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true
      });
      this.$http
        .post("/performanceApply/getAuth", {
          phone: this.ruleForm.phone,
          id: this.$route.query.performanceApplyId
        })
        .then(res => {
          window.localStorage.setItem("loginPhone", res.phone);
          if (res.token) {
            window.localStorage.setItem("loginPhoneToken", res.token);
            localStorage.setItem("token", res.token);
            return this.$store.dispatch("getUserInfo");
          } else {
            return Promise.resolve();
          }
        })
        .then(() => {
          this.$toast.clear();
          this.$router.replace({ path: "/home", query: this.$route.query });
        })
        .catch(e => {
          if (e) {
            this.$toast(e.error);
            this.isSend = false;
            this.ruleForm = {
              phone: "",
              code: ""
            };
          }
        });
      // this.$http
      //   .get("/sms/verify", {
      //     phone: this.ruleForm.phone,
      //     code: this.ruleForm.code
      //   })
      //   .then(() => {
      //     return this.$http.post("/performanceApply/getAuth", {
      //       phone: this.ruleForm.phone,
      //       id: this.$route.query.performanceApplyId
      //     });
      //   })
      //   .catch(e => {
      //     this.$toast(e.error || "登录失败");
      //     return Promise.reject();
      //   })
      //   .then(res => {
      //     localStorage.setItem("token", res);
      //     return this.$store.dispatch("getUserInfo");
      //   })
      //   .then(() => {
      //     this.$toast.clear();
      //     this.$router.replace({ path: "/" });
      //   })
      //   .catch(e => {
      //     if (e) {
      //       this.$toast(e.error);
      //     }
      //   });
      // this.$http
      //   .post("/auth/phoneLogin", {
      //     phone: this.ruleForm.phone
      //   })
      //   .then(res => {
      //     localStorage.setItem("token", res);
      //     return this.$store.dispatch("getUserInfo");
      //   })
      //   .then(() => {
      //     this.$toast.clear();
      //     this.$router.replace({ path: "/" });
      //   })
      //   .catch(e => {
      //     this.$toast.clear();
      //     this.$toast(e.error || "登录失败");
      //   });
    },
    sendSms() {
      if (!this.ruleForm.phone || !/^1[3-9]\d{9}$/.test(this.ruleForm.phone)) {
        this.$toast("请正确输入手机号码");
        return;
      }

      // this.$http
      //   .get("/sms/sendVerify", {
      //     phone: this.ruleForm.phone
      //   })
      //   .then(res => {
      //     this.$toast.success("发送成功");
      this.isSend = true;
      this.changeTime(60);
      // })
      // .catch(e => {
      //   this.$toast(e.error);
      // });
    },
    changeTime(num) {
      this.num = num;
      num--;
      if (num >= 0) {
        setTimeout(() => {
          this.changeTime(num);
        }, 1000);
      } else {
        this.isSend = false;
      }
    },
    mask(code) {
      var list = code.split("");
      var _back = "";
      _back += list
        .map(item => {
          return `<span>${item}</span>`;
        })
        .join("");
      if (list.length < 4) {
        for (var i = 0; i < 4 - list.length; i++) {
          _back += "<span></span>";
        }
      }
      return _back;
    }
  }
};
</script>
<style lang="less" scoped>
.login {
  min-height: 100vh;
  background-color: #fff;

  .login-title {
    font-size: 30px;
    font-weight: bold;
    color: #292c33;
    line-height: 50px;
    padding: 50px 30px 40px;

    .text2 {
      font-size: 14px;
      color: #313233;
      line-height: 24px;
      margin-top: 11px;
      font-weight: normal;
    }

    .text3 {
      font-size: 14px;
      color: #c4c7cc;
      line-height: 24px;
      margin-top: 6px;
      font-weight: normal;
    }
  }

  .submit {
    padding: 40px 48px;
  }

  .code {
    position: relative;
    .van-field {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      opacity: 0;
    }
  }
}
</style>

<style lang="less">
.login {
  .van-cell {
    padding: 18px 25px;
  }

  .van-field {
    position: relative;
    &::after {
      content: "";
      position: absolute;
      bottom: 0px;
      background-color: #f5f7fa;
      left: 30px;
      right: 30px;
      height: 1px;
    }
  }

  .van-button {
    height: 48px;
  }

  .code {
    .code-mask {
      display: flex;
      justify-content: center;
      span {
        border-bottom: 1px solid #c4c7cc;
        line-height: 60px;
        font-size: 26px;
        color: #000000;
        letter-spacing: 1px;
        display: inline-block;
        width: 40px;
        text-align: center;
        height: 60px;
        &:not(:first-child) {
          margin-left: 15px;
        }
      }
    }
  }
}
</style>
