<template>
  <div class="account-login-wrapper register-wrapper">
    <div class="account-input-list">
      <div class="account-input-item">
        <div class="phoneWrapper">
          <!--          <p-->
          <!--            class="inputText"-->
          <!--            :class="[!!forgetPwd.mobile ? 'inputTextFocus' : '']"-->
          <!--          >-->
          <!--            手机号/帐号-->
          <!--          </p>-->
          <div class="inputBox" :class="[forgetPwd_mobile ? 'alert' : '']">
            <input
              v-model="forgetPwd.mobile"
              type="text"
              maxlength="50"
              placeholder="手机号/帐号"
              @blur="inputBlur($event, 'mobile')"
              @focus="inputFocus($event, 'mobile')"
            />
            <p class="inputAlert hasTitle">请输入正确的帐号</p>
          </div>
        </div>
      </div>
      <div class="account-input-item">
        <div class="phoneWrapper invalidPhoneWrapper">
          <!--          <p-->
          <!--            class="inputText"-->
          <!--            :class="[!!forgetPwd.smsCode ? 'inputTextFocus' : '']"-->
          <!--          >-->
          <!--            验证码-->
          <!--          </p>-->
          <div
            class="inputBox"
            style="width: 200px; height: 40px"
            :class="[forgetPwd_smsCode ? 'alert' : '']"
          >
            <input
              v-model="forgetPwd.smsCode"
              placeholder="请输入验证码"
              type="text"
              maxlength="50"
              @blur="inputBlur($event, 'smsCode')"
              @focus="inputFocus($event, 'smsCode')"
            />
            <p class="inputAlert hasTitle">请输入短信验证码</p>
            <div
              v-if="!is_disF_yzm"
              class="verify-code-box float_right"
              @click="getYzm(forgetPwd.mobile, '2')"
            >
              <span class="blueBtn verify-btn">获取验证码</span>
            </div>
            <div v-else class="verify-code-box float_right">
              <span class="blueBtn verify-btn grey">获取验证码</span>
            </div>
          </div>
        </div>
      </div>
      <div class="account-input-item">
        <div class="passwordWrapper">
          <!--          <p-->
          <!--            class="inputText"-->
          <!--            :class="[!!forgetPwd.password ? 'inputTextFocus' : '']"-->
          <!--          >-->
          <!--            密码-->
          <!--          </p>-->
          <div class="inputBox" :class="[forgetPwd_password ? 'alert' : '']">
            <input
              v-model="forgetPwd.password"
              placeholder="设置6-20个字符的密码"
              :type="forgetPwd_look ? 'text' : 'password'"
              maxlength="50"
              @blur="inputBlur($event, 'password')"
              @focus="inputFocus($event, 'password')"
            />
            <i
              :class="[
                forgetPwd_look ? 'icon-xianshimima' : 'icon-yincangmima',
              ]"
              class="iconfont eyes"
              @click="lookPwd"
            ></i>
            <p class="inputAlert hasTitle">请输入正确的密码</p>
          </div>
        </div>
      </div>
    </div>
    <el-button
      :loading="btn_loading"
      type="primary"
      class="register-btn big-button"
      @click="forgetPwdSub"
    >
      确定
    </el-button>
    <p class="find-pass-des float_left" @click="loginTab">
      已有账号？
      <a href="javascript:">马上登录</a>
    </p>
  </div>
</template>

<script>
  import { forgetPassword } from "@/api/user";
  import { sendMobileCode } from "@/api/common";
  export default {
    name: "ForgetPwd",
    data() {
      return {
        btn_loading: false,
        forgetPwd_mobile: false,
        forgetPwd_password: false,
        forgetPwd_smsCode: false,
        forgetPwd_enterpriseId: false,
        forgetPwd_look: false,
        forgetPwd: {
          mobile: "",
          smsCode: "",
          password: "",
          // enterpriseId: ''
        },
        is_disF_yzm: false,
        secondF_num: 60,
        domain: "",
      };
    },
    created() {
      if (window.location.hostname === "localhost") {
        this.domain = "dev.qianniao.vip";
      } else {
        this.domain = window.location.hostname;
      }
    },
    methods: {
      lookPwd() {
        this.forgetPwd_look = !this.forgetPwd_look;
      },
      inputBlur(e, prop) {
        this["forgetPwd_" + prop] = !this.forgetPwd[prop];
      },
      inputFocus(e, prop) {
        this["forgetPwd_" + prop] = false;
      },
      loginTab() {
        this.btn_loading = false;
        this.$emit("loginTab");
      },
      //, 忘记密码
      async forgetPwdSub() {
        if (!this.forgetPwd.mobile) {
          this.forgetPwd_mobile = true;
        }
        if (!this.forgetPwd.smsCode) {
          this.forgetPwd_smsCode = true;
        }
        /* if (!this.forgetPwd.enterpriseId) {
          this.forgetPwd_enterpriseId = true
        } */
        if (!this.forgetPwd.password) {
          this.forgetPwd_password = true;
        }
        const isSub = Object.values(this.forgetPwd).every((item) => !!item);
        if (!isSub) {
          return;
        }
        try {
          this.btn_loading = true;
          const data = await forgetPassword({
            mobile: this.forgetPwd.mobile,
            password: this.forgetPwd.password,
            repeatPassword: this.forgetPwd.password,
            smsCode: this.forgetPwd.smsCode,
            // 'enterpriseId': this.forgetPwd.enterpriseId
          });
          this.btn_loading = false;
          this.$message({
            type: "success",
            message: "密码修改成功",
          });
          this.tab_on = "login_form";
        } finally {
          this.btn_loading = false;
        }
      },
      // 发送验证码
      async getYzm(mobile, source) {
        if (!mobile) {
          this.$message({
            type: "error",
            message: "请输入手机号",
          });
          return;
        }

        const data = await sendMobileCode({
          domain: this.domain,
          mobile: mobile,
          source: source,
        });

        this.$message({
          type: "success",
          message: "发送成功",
        });
        this.timeToTime("is_disF_yzm", "secondF_num");
      },
      // 验证码倒计时
      timeToTime(is, num) {
        this[is] = true;
        this[num] = 60;
        const secondNumIn = setInterval(() => {
          this[num]--;
          if (this[num] === 0) {
            clearInterval(secondNumIn);
            this[is] = false;
          }
        }, 1000);
      },
    },
  };
</script>

<style scoped lang="scss">
  .account-login-wrapper {
    .find-pass-des {
      text-align: center;
      color: #879bba;
      font-size: 14px;
      a {
        color: #2153d4;
        font-size: 14px;
      }
    }
    .register-btn {
      margin-bottom: 16px;
      width: 320px;
      height: 42px;
      text-align: center;
      font-size: 16px;
      /*line-height: 56px;*/
      border: none;
      cursor: pointer;
      background-color: #105cfb;
      outline: none;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: 500;
      color: #ffffff;
      //letter-spacing: 2px;
    }
    .big-button {
      border-radius: 2px;
      &.grey {
        color: #b2b2b2;
        border-color: #b2b2b2;
        cursor: auto;
        &:hover {
          background-color: transparent;
          color: #b2b2b2;
        }
      }
    }
    .account-input-item {
      margin-bottom: 24px;
      .inputText {
        color: #999;
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        font-size: 16px;
        margin: 0;
        line-height: 35px;
        transform: translate3d(0, 28px, 0) scale(1);
        transform-origin: left top;
        position: absolute;
        bottom: 30px;
      }
      .inputAlert {
        display: block;
        color: #ff3366;
        font-size: 12px;
        margin: 0;
        line-height: 12px;
        position: absolute;
        right: 0;
        bottom: -18px;
      }
      .inputBox {
        position: relative;
        width: 100%;
        height: 40px;
        .inputAlert {
          display: none;
          &.hasTitle {
            margin-left: 66px;
          }
        }
        input {
          padding-left: 16px;
          font-size: 16px;
          outline: none;
          box-shadow: none;
          width: 100%;
          line-height: 40px;
          height: 40px;
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          border: solid 1px #cad0d7;
          background: transparent;
          color: #333;
          transition: all 0.2s linear;
          border-radius: 3px;
          &:focus {
            border: 1px solid #2a75ed;
            border-radius: 3px;
          }
        }
        &.alert {
          input {
            border-color: #cad0d7;
          }
        }
      }
      .inputTextFocus {
        transform: translateZ(0) scale(0.75);
      }
      .phoneWrapper {
        color: #353535;
        position: relative;
      }
      .passwordWrapper {
        color: #353535;
        position: relative;
        .eyes {
          position: absolute;
          bottom: 5px;
          right: 17px;
          color: #2d405e;
          cursor: pointer;
          font-size: 24px;
        }
      }
      .invalidPhoneWrapper {
        .verify-code-box {
          position: relative;
          top: -10px;
          z-index: 1;
          .verify-btn {
            background-color: transparent;
            color: #105cfb;
          }
          .verify-btn:hover {
            color: #ffffff;
            background: #3f7cfb;
          }

          .blueBtn {
            position: absolute;
            top: 10px;
            left: 12px;
            width: 108px;
            height: 40px;
            border-radius: 2px;
            border: 1px solid #2153d4;
            line-height: 40px;
            display: inline-block;
            text-align: center;
            background: #fff;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            color: #2153d4;
          }
        }
      }
    }
  }
</style>
