<template>
  <!-- 重置密码 -->
  <div class="main-content">
    <div class="top-content">
      <span>智慧工地云</span>
      <div @click="backRouter">返回</div>
    </div>
    <div class="center-title">
      <div>
        <span>重置密码</span>
      </div>
      <div>
        <el-steps :active="stepActive" align-center>
          <el-step
            title="验证账号"
            :status="stepActive == 1 ? 'process' : 'finish'"
          ></el-step>
          <el-step
            title="重置密码"
            :status="
              stepActive == 2 ? 'process' : stepActive == 3 ? 'finish' : 'wait'
            "
          ></el-step>
          <el-step
            title="完成"
            :status="
              stepActive == 2 ? 'wait' : stepActive == 3 ? 'finish' : 'wait'
            "
          ></el-step>
        </el-steps>
      </div>
    </div>
    <div class="center-form" v-if="stepActive != 3">
      <el-form
        v-if="[1, 2].includes(stepActive)"
        :model="resetForm"
        ref="resetForm"
        :rules="resetFormRules"
        label-width="100px"
        style="width: 30%;"
      >
        <el-form-item
          label="账号"
          prop="account"
          v-if="[1].includes(stepActive)"
        >
          <el-input v-model="resetForm.account" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item
          label="图形验证码"
          prop="imgCode"
          v-if="[1].includes(stepActive) && !firstNext"
        >
          <div class="imgCodeBox">
            <el-input
              v-model="resetForm.imgCode"
              placeholder="请输入图形验证码"
            ></el-input>
            <img :src="codeImgData.img" @click="getImgCode" alt="" />
          </div>
        </el-form-item>
        <!-- 找回方式 -->
        <el-form-item
          label="邮箱"
          prop="backEmail"
          v-if="[1].includes(stepActive) && firstNext"
        >
          <el-input
            disabled
            v-model="resetForm.backEmail"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="邮箱验证码"
          prop="emailCode"
          v-if="[1].includes(stepActive) && firstNext"
        >
          <div class="imgCodeBox">
            <el-input
              v-model="resetForm.emailCode"
              placeholder="请输入"
            ></el-input>
            <el-button
              type="primary"
              size="medium"
              :disabled="sendDisabled"
              @click="sendBtn"
              style="margin-left: 15px;"
              >{{ sendTimeTitle }}
              <span v-show="!showSendTime" class="count"
                >发送验证码({{ count }}s)</span
              ></el-button
            >
          </div>
        </el-form-item>
        <el-form-item
          label="新密码"
          prop="newPassword"
          v-if="[2].includes(stepActive)"
        >
          <el-input
            v-model="resetForm.newPassword"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="确认密码"
          prop="comfirmPassword"
          v-if="[2].includes(stepActive)"
        >
          <el-input
            v-model="resetForm.comfirmPassword"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="center-reset-finished" v-else>
      <span>用户账号{{ resetForm.account }}密码已重置,请返回登录</span>
    </div>
    <div class="center-footer" style="text-align: center">
      <el-button
        type="primary"
        @click="firstChange"
        style="width: 22%;"
        v-if="[1].includes(stepActive) && !firstNext"
        >继续
      </el-button>
      <el-button
        type="primary"
        @click="next"
        style="width: 22%;"
        v-if="[1, 2, 3].includes(stepActive) && firstNext"
        >继续
      </el-button>
    </div>
  </div>
</template>
<script>
import {
  getImgCodeApi,
  imgCodeCheckAccountApi,
  getEmailByAccountApi,
  sendEmailCodeApi,
  checkEmailCodeApi,
  resetPasswordApi
} from "@/assets/js/api/loginSign";
const TIME_COUNT = 60; // 邮箱验证码发送间隔时间
export default {
  data() {
    return {
      sendDisabled: false, // 默认倒计时的时候禁用发送
      sendTimeTitle: "发送验证码", // 验证码button的title名字
      showSendTime: true, // 启动倒计时
      count: "", // 初始化次数
      stepActive: 1,
      resetForm: {
        account: "",
        imgCode: "",
        backEmail: "",
        emailCode: "",
        newPassword: "",
        comfirmPassword: "",
      },
      resetFormRules: {
        account: [{ required: true, message: "请输入", trigger: "blur" }],
        imgCode: [{ required: true, message: "请输入", trigger: "blur" }],
        backEmail: [{ required: true, message: "请输入", trigger: "blur" }],
        emailCode: [{ required: true, message: "请输入", trigger: "blur" }],
        newPassword: [
          { required: true, message: "请输入", trigger: "blur" },
          {
            pattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&*()_+~`\-={}[\]:";'<>?,./])[a-zA-Z\d!@#$%^&*()_+~`\-={}[\]:";'<>?,./]{8,}$/,
            message:
              "密码必须包含至少一个字母、一个数字、一个特殊字符以及长度至少为8位数",
            trigger: "blur",
          },
        ],
        comfirmPassword: [
          { required: true, message: "请输入", trigger: "blur" },
          {
            pattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&*()_+~`\-={}[\]:";'<>?,./])[a-zA-Z\d!@#$%^&*()_+~`\-={}[\]:";'<>?,./]{8,}$/,
            message:
              "密码必须包含至少一个字母、一个数字、一个特殊字符以及长度至少为8位数",
            trigger: "blur",
          },
        ],
      },
      codeImgData: {
        img: "",
        graphValidateCodeUuid: "",
      },
      firstNext: false,
      emailCodeData: {
        uuid: ""
      }
    };
  },
  created() {
    this.getImgCode();
  },
  // 销毁前清除计时器
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    // 发送验证码函数
    sendCodeFn(){
      sendEmailCodeApi({account: this.resetForm.account, type: 1}).then(res => {
        if(res.code == 200){
          this.$message.success("发送成功");
        }
      })
    },
    // 发送验证码按钮点击
    sendBtn() {
      this.sumitDisabled = true;
      // 调用发送验证码接口
      this.sendCodeFn();
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.showSendTime = false;
        this.sendTimeTitle = "";
        this.sendDisabled = true;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.showSendTime = true;
            clearInterval(this.timer); // 清除定时器
            this.count = TIME_COUNT;
            this.timer = null;
            this.sendTimeTitle = "发送验证码";
            this.sendDisabled = false; // 可以重新发送验证码
          }
        }, 1000);
      }
    },
    // 根据账号获取邮箱
    getEmailByAccount() {
      getEmailByAccountApi({ account: this.resetForm.account }).then((res) => {
        console.log(res, "我的邮箱");
        this.resetForm.backEmail = res.result.email;
      });
    },
    backRouter() {
      this.$router.back();
    },
    getImgCode() {
      let requestData = {};
      getImgCodeApi(requestData).then((res) => {
        if (res.result) {
          // this.replyData = res.result;
          for (let i in this.codeImgData) {
            this.codeImgData[i] = res.result[i];
          }
        }
      });
    },
    // 第一步切换
    firstChange() {
      this.$refs.resetForm.validate((valid) => {
        if (valid) {
          let requestData = {
            account: this.resetForm.account,
            graphValidateCode: this.resetForm.imgCode,
            graphValidateCodeUuid: this.codeImgData.graphValidateCodeUuid,
          };
          imgCodeCheckAccountApi(requestData).then((res) => {
            if (res.code == 200) {
              this.firstNext = true;
              this.getEmailByAccount();
            }
          });
          this.getImgCode();
        }
      });
    },
    next() {
      if(this.stepActive == 3){
        this.$router.push("/login")
        return;
      }
      this.$refs.resetForm.validate((valid) => {
        if (valid) {
          if(this.stepActive == 1){
            let requestData = {
              account: this.resetForm.account,
              code: this.resetForm.emailCode
            };
            checkEmailCodeApi(requestData).then((res) => {
              if (res.code == 200) {
                this.emailCodeData.uuid = res.result.uuid;
                this.stepActive = this.stepActive + 1;
              }
            });
          } else if(this.stepActive == 2){
            if(this.resetForm.newPassword.trim() != this.resetForm.comfirmPassword.trim()){
              this.$message.error("两次输入的密码不一致");
              return;
            }
            let requestData = {
              account: this.resetForm.account,
              password: this.resetForm.comfirmPassword,
              uuid: this.emailCodeData.uuid
            };
            resetPasswordApi(requestData).then((res) => {
              if (res.code == 200) {
                this.$message.success("操作成功");
                this.stepActive = this.stepActive + 1;
              }
            });
          }
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.flex() {
  display: flex;
  align-items: center;
}
.main-content {
  .top-content {
    .flex();
    height: 60px;
    background: url("../../assets/images/login_bg.png") 100% 29% no-repeat;
    span {
      color: white;
      font-size: 20px;
      margin-left: 30px;
      margin-right: auto;
    }
    div {
      padding: 4px 8px;
      color: white;
      border: 1px solid white;
      border-radius: 4px;
      margin-right: 30px;
      cursor: pointer;
    }
  }
  .center-title {
    margin-top: 70px;
    > div {
      .flex();
      justify-content: center;
    }
    > div:nth-child(1) {
      margin-bottom: 40px;
      span {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 22px;
        color: #272d45;
      }
    }
    > div:nth-child(2) {
      /deep/.el-steps {
        width: 45%;
      }
    }
  }
  .center-form {
    .flex();
    justify-content: center;
    margin-top: 35px;
    // /deep/.el-input {
    //   width: 92%;
    // }
    .imgCodeBox {
      .flex();
      justify-content: space-between;
      // .sendDisabledStyle {
      //   background-color: #ddd;
      //   // color: #57a3f3;
      //   color: #909399;
      //   cursor: not-allowed; // 鼠标变化
      //   line-height: 0px;
      //   padding: 2px;
      // }
      // .verificationScanCode-closeBtn {
      //   background: #ffffff;
      //   border-radius: 4px 4px 4px 4px;
      //   opacity: 1;
      //   border: 1px solid #e6e9f0;
      //   line-height: 0px;
      // }
    }
  }
  .center-reset-finished{
    .flex();
    justify-content: center;
    margin-top: 35px;
  }
  .center-footer {
    margin-top: 30px;
  }
}
</style>
