<template>
  <div class="set-password">
    <el-breadcrumb separator="/" class="head-nav">
      <el-breadcrumb-item :to="{ path: '/userCenter' }"
        >用户中心</el-breadcrumb-item
      >
      <el-breadcrumb-item>设置密码</el-breadcrumb-item>
    </el-breadcrumb>
    <p class="title">设置登录密码：</p>
    <el-form
      label-position="right"
      label-width="120px"
      :model="passwordForm"
      class="form"
    >
      <el-form-item label="手机号" class="form-item" v-if="passwordForm.phone">
        <span>{{ passwordForm.phone | filterPhone }}</span>
      </el-form-item>
      <el-form-item label="邮箱" class="form-item" v-if="passwordForm.email">
        <span>{{ passwordForm.email }}</span>
      </el-form-item>
      <el-form-item label="输入密码" class="form-item">
        <el-input
          v-model="passwordForm.pwd"
          placeholder="请输入密码，8~20位包含数字、大小写字母"
          type="password"
        ></el-input>
      </el-form-item>
      <el-form-item label="验证码" class="form-item form-code">
        <el-input
          v-model="passwordForm.code"
          placeholder="请输入6位验证码"
        ></el-input>
        <code-btn @sendCode="sendCode"></code-btn>
      </el-form-item>
    </el-form>
    <el-button class="confirm-btn" type="primary" @click="confirm()"
      >设置密码</el-button
    >
  </div>
</template>
<script>
import Vue from "vue";
import { validPassword } from "@/utils/tool/validate";
import CodeBtn from "./VerCode.vue";
import { editPassword } from "./Api.service";
export default Vue.extend({
  components: {
    CodeBtn,
  },
  data() {
    return {
      passwordForm: {
        phone: this.$store.state.userInfos.phone,
        email: this.$store.state.userInfos.email,
        pwd: "",
        code: "",
      },
    };
  },
  created() {
    if (
      !this.$store.state.userInfos.phone &&
      !this.$store.state.userInfos.email
    ) {
      this.$router.push("/userCenter");
    }
  },
  methods: {
    // 验证码发送成功的回调
    async sendCode() {
      this.$message({
        message: "发送成功",
        type: "success",
      });
    },
    async confirm() {
      // 密码格式校验
      if (!validPassword(this.passwordForm.pwd)) {
        this.$message({
          message: "用户密码错误",
          type: "error",
        });
        return;
      }
      if (this.passwordForm.code.trim() === "") {
        this.$message("验证码不可为空");
        return;
      }
      let info = {};
      if (this.$store.state.userInfos.phone !== "") {
        info = {
          phone: this.passwordForm.phone,
          code_type: 0,
          pwd: this.$md5(
            String(this.passwordForm.pwd) +
              this.$md5(String(this.passwordForm.pwd.length))
          ),
          code: this.passwordForm.code,
        };
      } else if (this.$store.state.userInfos.email !== "") {
        info = {
          email: this.passwordForm.email,
          pwd: this.$md5(
            String(this.passwordForm.pwd) +
              this.$md5(String(this.passwordForm.pwd.length))
          ),
          code: this.passwordForm.code,
          code_type: 1,
        };
      }

      const res = await editPassword(info);
      if (res && res.code === 200) {
        this.$message({
          message: "密码设置成功",
          type: "success",
        });

        this.$router.push("/userCenter");
      }
    },
  },
});
</script>


<style scoped>
.set-password {
  padding: 16px;
  min-height: calc(100vh - 95px);
  min-width: 1200px;
  background: #f8fafb;
}
.head-nav {
  margin: 12px 0 40px 47px;
}
.title {
  margin-left: 47px;
  font-size: 20px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  color: rgba(53, 53, 53, 1);
  line-height: 40px;
}
.form {
  width: 900px;
}
.form .el-input {
  width: 610px;
}
.form-code .el-input {
  width: 480px;
}
.form-item {
  margin-bottom: 28px;
}
.confirm-btn {
  margin-top: 10px;
  margin-left: 50px;
}
</style>

<style>
.set-password .el-form-item__label {
  margin-right: 21px;
}
</style>
