<template>
  <div class="h-full box-border bg-white m-4 p-4 rounded-6px">
    <div class="title">修改密码</div>
    <div class="modifyContent text-center">
      <div class="avatar"></div>
      <el-form ref="ruleFormRef" label-position="right" label-width="90px" :model="ruleForm">
        <el-form-item v-for="(item, index ) in formData" :key="index" :label="item.name+':'" :prop="item.key">
          <div v-if="item.disabled">{{ruleForm[item.key]}}</div>
          <el-input v-else v-model="ruleForm[item.key]" type="password" clearable size="small"></el-input>
        </el-form-item>
      </el-form>
      <div class="mt-15">
        <el-button type="primary" plain @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { user } from '~/store/index';
const user_id = user.value?.user_id;
if (user_id) {
  initDetailInfo();
}
const router = useRouter();
const formData = ref([
  {
    name: "ID",
    key: "user_id",
    disabled: true
  },
  {
    name: "姓名",
    key: "user_realname",
    disabled: true
  },
  {
    name: "账号",
    key: "user_name",
    disabled: true
  },
  {
    name: "旧密码",
    key: "user_password_old",
  },
  {
    name: "新密码",
    key: "user_password_new",
  },
  {
    name: "确认密码",
    key: "user_password_confirm",
  }
])
const ruleForm = ref({
  a: "123145667",
  b: "张大大",
  c: "18866569107",
  user_password_old: "",
  user_password_new: "",
  user_password_confirm: "",
});

async function initDetailInfo() {
  let { code, data } = await request({ url: "/user/main/user_info", data: { user_id: user_id } });
  if (code == 1) {
    ruleForm.value = data;
  }
}

const handleCancel = () => {
  router.back();
}

const submit = async () => {
  if (ruleForm.value.user_password_old == "" || ruleForm.value.user_password_new == "" || ruleForm.value.user_password_confirm == "") {
    ElMessage.error("输入框内容必填！");
  } else {
    if (ruleForm.value.user_password_new != ruleForm.value.user_password_confirm) {
      ElMessage.error("确认密码与新密码不一致！");
      return
    }
    let obj = {
      user_main: {
        user_password_old: ruleForm.value.user_password_old,
        user_password_new: ruleForm.value.user_password_new
      }
    }
    let { code, data } = await request({ url: "/user/main/reset_my_password", data: obj });
    if (code == 1) {
      ElMessage.success("修改成功！");
      handleCancel();
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 16px;
  font-weight: 400;
  color: var(--el-color-primary);
  line-height: 22px;
}
.modifyContent {
  width: 250px;
  margin: auto;
  .avatar {
    width: 82px;
    height: 82px;
    background: #c4c4c4;
    border-radius: 41px;
    margin: 50px auto;
  }
  .el-button--primary.is-plain {
    background: unset;
    &:hover {
      color: var(--el-color-primary);
    }
  }
  .el-button + .el-button {
    margin-left: 50px;
  }
}
</style>