<style>
.login {
  background: url('../assets/img/login-bg.png');background-size: cover;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.login-box {
  width: 436px;
  padding: 30px 40px;
  margin: 100px auto;
  position: absolute;
  right: 360px;
  background-clip: padding-box;
  background: #ffffff;
  border-radius: 18px;
}

.login-box .tw_logo {
  margin: 0 auto 20px;
  display: block;
  height: 45px;
  width: auto;
}

.login-box .tip-text {
  font-size: 16px;
  margin-bottom: 15px;
  color: #999;
  text-align: center;
}

.login-box .tip-text a {
  color: #00afff;
}

.login_row {
  width: 100%;
}

.form-group {
  position: relative;
  margin-bottom: 15px;
}

.login_labelName {
  margin-top: 34px;
  font-size: 16px;
  margin-bottom: 16px;
}

.form-group i {
  position: absolute;
  right: 6px;
  bottom: 0;
  z-index: 2;
  width: 46px;
  height: 46px;
  text-align: center;
  line-height: 46px;
  color: #999;
  font-size: 28px;
  cursor: pointer;
}

.login-box .q-field__control {
  height: 46px;
}
.type-item {
  width: 50px;
  height: 50px;
  background: #f5f5f5;
  border-radius: 25px;
}
.type-item img {
  width: 28px;
  height: 28px;
}
</style>
<template>
  <div class="login">
    <div class="login-box">
          <div class="f34 bold">重置密码</div>
        <div class="login_row">
          <div class="form-group">
            <div class="login_labelName">輸入郵箱</div>
            <q-input outlined v-model="loginMsg.Mailbox" />
            <div class="primary q-mt-sm" v-show="tips">邮箱格式有误,请核实</div>
          </div>
          <div>
            <q-btn
              v-if="!isSend" class="q-mb-lg"
              unelevated
              color="grey-3"
              style="width: 100%; color: #8B8B8B !important; height: 50px; margin-top: 20px"
              filled
              label="发送验证码"
              @click="sendVerify"
            />
            <div v-else class="mt q-mb-sm">
              <q-input outlined v-model="loginMsg.MailCode" type="text" />
              <div class="q-mt-sm" :class="cutDown ? 'text-grey-6' : ''">
                {{ cutDown ? cutDown + "秒后可重新发送" : "重新發送驗證碼" }}
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="login_labelName flex justify-between items-center">
              密碼
            </div>
            <q-input
              v-if="flag == 1"
              outlined
              v-model="loginMsg.PassWord"
              type="text"
              ref="pwd"
            />
            <q-input
              v-if="flag == 2"
              outlined
              v-model="loginMsg.PassWord"
              type="PassWord"
              ref="pwd"
            />
            <i
              class="iconfont iconyanjing_xianshi"
              v-if="flag == 1"
              @click="flag = 2"
            ></i>
            <i
              class="iconfont iconbiyan"
              v-if="flag == 2"
              @click="flag = 1"
            ></i>
          </div>
          <div class="q-mb-xl">
            <q-btn
              color="primary"
              unelevated
              style="width: 100%; height: 50px; margin-top: 20px"
              filled
              :label="mylabel"
              @click="login"
            />
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import QrcodeVue from "qrcode.vue";
export default {
  name: "Login",
  components: {
    QrcodeVue,
  },
  data() {
    return {
      isSend: false,
      tips: false,
      cutDown: 0,
      isAgree: false,
      isLogin: true,
      loginMsg: {
        Mailbox: "",
        PassWord: "",
        MailCode: "",
      },
      // , 'google', 'facebook', 'apple'
      typeList: ["wechat"],
      logo: "",
      flag: 2,
      mylabel: "重置密码",
    };
  },
  created() {},
  mounted() {
  },
  methods: {
    sendVerify() {
      if(this.inSending) return
      this.inSending = true
      if (this.verifyEmail()) {
        this.apipost('directCustomer_post_SendMail', {Mailbox: this.loginMsg.Mailbox, SendType: 2}, (res) => {
          this.inSending = false
          if (res.data.resultCode == 1) {
            this.isSend = true;
        this.cutDown = 60;
        this.startCutDown();
          } else {
            this.$q.notify({
              type: "negative",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        }, null)
      } else {
        this.inSending = false
      }
    },
    startCutDown() {
      this.timer = setTimeout(() => {
        this.cutDown--;
        if (this.cutDown) {
          this.startCutDown();
        }
      }, 1000);
    },
    verifyEmail() {
      if (/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(this.loginMsg.Mailbox)) {
        this.tips = false;
        return true;
      } else {
        // 提示用户邮箱格式有误
        this.tips = true;
        return false;
      }
    },
    login() {
      if(this.mylabel === "提交中...") {
        return
      }
      
      if (this.loginMsg.Mailbox == "") {
        this.$q.notify({
          type: "negative",
          message: "请输入账号",
          position: "top",
          timeout: 2000, // 以毫秒为单位; 0意味着没有超时
        });
        return;
      }
      if (this.loginMsg.PassWord == "") {
        this.$q.notify({
          type: "negative",
          message: "请输入密码",
          position: "top",
          timeout: 2000, // 以毫秒为单位; 0意味着没有超时
        });
        return;
      }
      if (this.loginMsg.MailCode == "") {
        this.$q.notify({
          type: "negative",
          message: "请输入邮箱验证码",
          position: "top",
          timeout: 2000, // 以毫秒为单位; 0意味着没有超时
        });
        return;
      }
      this.mylabel = "提交中...";
      this.apipost(
        'ResettingPwd_post',
        this.loginMsg,
        (res) => {
          this.mylabel = "重置密码";
          if (res.data.resultCode == 1) {
            this.CommonJump("/login", {});
          } else {
            this.$q.notify({
              type: "negative",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        (err) => {}
      );
    },
  },
};
</script>
