<template>
  <div
    class="forgotPassword-container animate__animated"
    :class="[animateClass]"
  >
    <div class="forgotPassword-body">
      <!-- 返回按钮 -->
      <div class="back-button" @click="backLogin()" v-if="stepIndex != 3">
        返回
      </div>
      <!-- 验证手机 -->
      <div class="verify-phone operate-content" v-if="stepIndex == 0">
        <a-form-model ref="phoneForm" :model="phoneForm" :rules="phoneRules">
          <a-form-model-item ref="phone" prop="phone">
            <a-input
              v-model="phoneForm.phone"
              placeholder="请输入手机号"
              size="large"
            />
          </a-form-model-item>
        </a-form-model>
        <a-button
          type="primary"
          size="large"
          class="primary-button"
          @click="stepIndex = 1"
        >
          下一步</a-button
        >
      </div>
      <!-- 发送验证码 -->
      <div class="send-code operate-content" v-if="stepIndex == 1">
        <div class="form-tip">152****6665手机</div>
        <a-form-model ref="codeForm" :model="codeForm" :rules="codeRules">
          <a-form-model-item ref="code" prop="code">
            <a-input
              v-model="codeForm.code"
              placeholder="请输入验证码"
              size="large"
            />
            <a-button size="large"> 获取验证码 </a-button>
          </a-form-model-item>
        </a-form-model>
        <a-button
          type="primary"
          size="large"
          class="primary-button"
          @click="stepIndex = 2"
        >
          确认</a-button
        >
      </div>
      <!-- 设置密码 -->
      <div class="set-pass operate-content" v-if="stepIndex == 2">
        <div class="form-tip">您正在找回的的账号是jhwsjsk</div>
        <a-form-model ref="passForm" :model="passForm" :rules="passRules">
          <a-form-model-item ref="password" prop="password">
            <a-input-password
              v-model="passForm.password"
              placeholder="新密码"
              size="large"
            />
          </a-form-model-item>
          <a-form-model-item ref="newPassword" prop="newPassword">
            <a-input-password
              v-model="passForm.newPassword"
              placeholder="确认密码"
              size="large"
            />
          </a-form-model-item>
        </a-form-model>
        <a-button
          type="primary"
          size="large"
          class="primary-button"
          @click="stepIndex = 3"
        >
          确认</a-button
        >
      </div>
      <!-- 修改成功 -->
      <div class="set-success operate-content" v-if="stepIndex == 3">
        <div class="success-tip">
          <span>密码重置成功！</span>
        </div>
        <a-button
          type="primary"
          size="large"
          class="primary-button"
          @click="backLogin()"
          >重新登陆
        </a-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ForgotPassword",
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    isShow: {
      handler(val) {
        if (this.initAin) {
          this.initAin = false;
        }
        this.$emit("update:isShow", val);
      },
    },
  },
  computed: {
    animateClass() {
      let { isShow, initAin } = this;
      if (initAin) {
        return "init-style";
      }
      switch (isShow) {
        case true:
          return "animate__faster animate__fadeInRightBig";

        case false:
          return "animate__faster animate__fadeOutRightBig";

        default:
          break;
      }
    },
  },
  data() {
    return {
      stepIndex: 0,
      initAin: true,
      //验证手机号
      phoneForm: {
        phone: "",
      },
      phoneRules: {
        phone: [
          {
            required: true,
            message: "您输入的手机不正确",
            trigger: ["change"],
          },
        ],
      },
      //  发验证验证码
      codeForm: {
        code: "",
      },
      codeRules: {
        code: [
          {
            required: true,
            message: "您输入的验证码不正确",
            trigger: ["change"],
          },
        ],
      },
      //设置密码
      passForm: {
        password: "",
        newPassword: "",
      },
      passRules: {
        password: [
          {
            required: true,
            message: "您输入的密码不正确",
            trigger: ["change"],
          },
        ],
        newPassword: [
          {
            required: true,
            message: "确认密码不正确",
            trigger: ["change"],
          },
        ],
      },
    };
  },
  methods: {
    //返回登录
    backLogin() {
      this.stepIndex = 0;
      this.$emit("update:isShow", false);
      this.$emit("backLogin");
    },
  },
};
</script>

<style lang="less" scoped>
.forgotPassword-container {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  &.init-style {
    top: 0;
    left: 100%;
  }

  .forgotPassword-body {
    width: 540px;
    height: 460px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    box-sizing: border-box;
    padding: 40px 40px 0 40px;
    position: relative;
    .back-button {
      position: absolute;
      cursor: pointer;
      width: 56px;
      height: 26px;
      line-height: 24px;
      border: 1px solid #a2a8ab;
      background: rgba(255, 255, 255, 0.39);
      border-radius: 5px;
      top: 16px;
      right: 16px;
      text-align: center;
    }
    .form-tip {
      padding-bottom: 5px;
      font-size: 14px;
    }
    .operate-content {
      padding-top: 100px;
    }
    .primary-button {
      display: block;
      width: 100%;
      margin-left: 0 !important;
    }
    .verify-phone {
      .primary-button {
        margin-top: 78px;
      }
    }
    .set-success {
      padding-top: 60px;
      .success-tip {
        font-size: 18px;
        color: #333;
        width: 100%;
        text-align: center;
        background: url("../../assets/success.png") no-repeat center top;
        background-size: 68px 68px;
        span {
          padding-top: 100px;
          padding-bottom: 50px;
          display: inline-block;
        }
      }
    }
    .send-code {
      .primary-button {
        margin-top: 66px;
      }
      .ant-input {
        width: 344px;
      }
      .ant-btn {
        font-size: 14px;
        margin-left: 14px;
        background: var(--primary-color);
        color: #fff;
      }
    }
    .set-pass {
      .primary-button {
        margin-top: 50px;
      }
    }
    &::before {
      content: "手机找回密码";
      font-size: 28px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 17px;
      color: var(--primary-color);
      text-align: center;
      display: block;
    }
  }
}
</style>
