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

.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="$q.platform.is.desktop ? 'login': 'full-width'">
    <div class="login-box" :class="$q.platform.is.desktop ? 'login-box-pc': ''">
          <div class="f34 bold">重置密码</div>
        <div class="login_row">
          <q-input
            filled
            v-model="loginMsg.Mailbox"
            class="q-mt-xl"
            label="輸入郵箱"
            style="ime-mode: disabled"
            aria-autocomplete="off"
            :rules="[
              (val) =>
                /^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/.test(
                  val
                ) || '請輸入正確的郵箱地址',
            ]"
          >
            <template
              v-slot:after
            >
              <q-btn
                unelevated
                color="text-white bg-secondary"
                :disable="
                  !/^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/.test(
                    loginMsg.Mailbox
                  ) || cutDown > 0
                "
                style="height: 46px; margin-top: -10px"
                filled
                :loading="inSending"
                :label="
                  !isSend
                    ? '发送验证码'
                    : cutDown > 0
                    ? cutDown + '秒'
                    : '重新發送'
                "
                @click="sendVerify"
              />
            </template>
          </q-input>
          <div
            class="q-mt-md"
          >
            <verify-code
              :digit="6"
              hint="請輸入正確的驗證碼"
              ref="verify"
              v-model="loginMsg.MailCode"
            ></verify-code>
          </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";
import verifyCode from "src/components/auth/verifyCode.vue";
export default {
  name: "Login",
  components: {
    QrcodeVue,verifyCode
  },
  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: "重置密码",
      inSending: false,
    };
  },
  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>
