<template>
<div class="main bg-white-grey pl-25px pt-30px pr-35px h-640px rounded-10px relative">
  <div class="flex items-center justify-between">
    <h3 class="nav-title">修改密码</h3>
    <div class="btnDiv">
      <el-button size="large" @click="routerBack" class="w-100px">返回
      </el-button>
    </div>
  </div>
  <div class="form-box">
    <el-form :model="form" label-position="top" ref="formRef" :rules="rules">
      <el-form-item label="原密码" prop="old_pwd">
        <el-input type="password" v-model="form.old_pwd" placeholder="请输入原密码" />
      </el-form-item>
      <el-form-item label="新密码" prop="new_pwd">
        <el-input type="password" v-model="form.new_pwd" placeholder="请输入新密码" />
      </el-form-item>
    </el-form>
    <div class="mt-70px btnDiv text-center">
      <el-button size="large" @click="submitForm"  v-loading.fullscreen.lock="loading" class="w-160px">确定</el-button>
    </div>
  </div>


</div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const routerBack = () => {
  router.back();
};
let loading = $ref(false)
let formRef = $ref();
let form = $ref({
  old_pwd:'',
  new_pwd:''
})
const rules = {
  old_pwd:[{ required: true, message: "请输入原密码", trigger: "submit" }],
  new_pwd:[{ required: true, message: "请输入新密码", trigger: "submit" }]
}
function submitForm() {
  formRef.validate().then(res=>{
    if(res === true) {
      if(form.old_pwd === form.new_pwd) {
        ElMessage.warning("新旧密码不能相同！");
      } else {
        loading = true
        const submitData = {
          user_password_old:form.old_pwd,
          user_password_new:form.new_pwd
        }
        request({
          url:'/user/main/reset_my_password',
          data:{
            user_main:submitData
          }
        }).then(res=>{
          loading = false;
          if(res.code === '1') {
            ElMessage.success("密码修改成功！");

          }
        })
      }
    }
  })
}
</script>

<style lang="scss" scoped>
$color: #1259a1;
.main {
  box-shadow: 0 10px 24px rgba(161, 153, 168, 0.18);
}
.bg-white-grey{
  background: #fcfeff;
}
.nav-title{
  font-size: 18px;
  color: $color;
}
.btnDiv {
  .el-button {
    background: $color;
    border-color: $color;
    color: #fff;
  }
}
</style>
<style lang="scss">
.form-box{
  width: 520px;
  margin: 25px auto;
  .el-form {
    .el-form-item {
      &.is-required {
        .el-form-item__label {
          &::before {
            display: none;
          }

          &::after {
            content: "*";
            color: #f35421;
            margin-left: 4px;
          }
        }
      }

      .el-form-item__label {
        color: #949494;
        font-size: 14px;
        position: relative;
      }

      .el-form-item__content {
        .el-select {
          width: 100%;
        }

        .el-input {
          width: 100%;

          .el-input__wrapper {
            width: 100%;
            box-shadow: none;
            background: #f9f9f9;
            border-radius: 6px;
          }
        }

        .el-textarea {
          .el-textarea__inner {
            box-shadow: none;
            background: #f9f9f9;
            border-radius: 6px;
            // color: #d0d0d0;
          }
        }

        .el-date-editor {
          box-shadow: none;
          background: #f9f9f9;
          border-radius: 6px;
        }

        .el-checkbox.read {
          .el-checkbox__inner {
            border-radius: 50%;
          }
        }

        .el-input__inner {
          // color: #d0d0d0;
        }
      }
    }

  }
}
</style>