<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>
    <syBusinessForm :form-list="formList" class="formlayout1"></syBusinessForm>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { filterPhone, syBusinessForm } from "cqk-sy-ui";
import { editPassword } from "@/service/Api.service";
import { globalState } from "@/store/state";
import { ElMessage, ElBreadcrumb, ElBreadcrumbItem } from "element-plus";
import { generateFormList } from "./config";
import md5 from "js-md5";
export default defineComponent({
  components: {
    ElBreadcrumb,
    ElBreadcrumbItem,
    syBusinessForm,
  },
  data() {
    return {
      passwordForm: {
        phone: globalState.userInfos.phone,
        email: globalState.userInfos.email,
        pwd: "",
        code: "",
      },
      formList: generateFormList(
        {
          phone: globalState.userInfos.phone,
          email: globalState.userInfos.email,
        },
        this.confirm
      ),
    };
  },
  created() {
    if (!globalState.userInfos.phone && !globalState.userInfos.email) {
      this.$router.push("/userCenter");
    }
  },
  methods: {
    filterPhone,
    // 验证码发送成功的回调
    async sendCode() {
      ElMessage({
        message: "发送成功",
        type: "success",
      });
    },
    async confirm(
      data: any,
      setError: (fieldName: string, errorMsg: string) => void
    ) {
      // 密码格式校验
      let info = {};
      if (globalState.userInfos.phone !== "") {
        info = {
          phone: data.phone,
          code_type: 0,
          pwd: md5(String(data.pwd) + md5(String(data.pwd.length))),
          code: data.code,
        };
      } else if (globalState.userInfos.email !== "") {
        info = {
          email: data.email,
          pwd: md5(String(data.pwd) + md5(String(data.pwd.length))),
          code: data.code,
          code_type: 1,
        };
      }

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

        this.$router.push("/userCenter");
      } else {
        res?.msg && setError("验证码", res?.msg);
      }
    },
  },
});
</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>
