<template>
  <div class="first_step">
    <div class="step_title">修改密码</div>
    <div class="form_part">
      <!-- <div class="form_item">
        <div class="form_title">原密码</div>
        <CommonInput v-model="form_value.old_pwd" inputType="password" />
      </div> -->
      <div class="form_item">
        <div class="form_title">新密码</div>
        <CommonInput v-model="form_value.new_pwd" inputType="password"></CommonInput>
      </div>
      <div class="form_item">
        <div class="form_title">确认密码</div>
        <CommonInput v-model="form_value.check_pwd" inputType="password"></CommonInput>
      </div>
    </div>
    <div class="footer_btn">
      <CommonButton
        msg="返回"
        size="default"
        paddingLeft="45"
        paddingRight="45"
        type="info"
        @click="router.push('/home')"
      ></CommonButton>
      <CommonButton
        msg="保存"
        size="default"
        paddingLeft="45"
        paddingRight="45"
        type="danger"
        @click="save"
      ></CommonButton>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { isEmpty } from "@/utils/index";
import { notify } from "@/utils/message";
import { resetPwd } from "@/api/user";
const router = useRouter();
const form_value = ref({
  old_pwd: "",
  new_pwd: "",
  check_pwd: "",
});
const save = async () => {
  // if (form_value.value.old_pwd === '') {
  //   return notify('请输入原密码', 'danger');
  // }
  if (form_value.value.new_pwd === "") {
    return notify("请输入新密码", "danger");
  }
  if (form_value.value.check_pwd === "") {
    return notify("确认密码不能为空", "danger");
  }
  if (form_value.value.new_pwd !== form_value.value.check_pwd) {
    return notify("新密码与确认密码不一致", "danger");
  }
  let useInfo = JSON.parse(sessionStorage.getItem("userInfo"));

  let { userId } = useInfo;
  console.log(userId, "1111111");
  let params = {
    userId: userId,
    userPwd: form_value.value.new_pwd,
  };
  let res = await resetPwd(params);
  let { code, desc } = res.data;
  if (code == 200) {
    notify(desc, "success");
    router.push("/home");
  } else {
    return notify(desc, "danger");
  }
};
</script>
<style lang="less" scoped>
@COOMSIZE: 16px;
.first_step {
  padding: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #ececec 100%);
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.26);
  border-radius: 2px 2px 2px 2px;
  width: 100%;
  .step_title {
    font-size: @COOMSIZE;
    font-weight: bold;
    color: #3a3a3a;
  }
  .suffix {
    position: absolute;
    right: 6px;
    color: #b8b8b8;
  }
  .form_part {
    margin-top: 48px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    .form_item {
      font-size: @COOMSIZE;
      display: flex;
      align-items: center;
      color: #666666;
      margin-bottom: 12px;
      .form_title {
        margin-right: 8px;
        min-width: 64px;
      }
    }
  }
  .footer_btn {
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
