<template>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px">
    <el-form-item label="新密码" prop="password">
      <el-input v-model="ruleForm.password" type="password" autocomplete="new-password" show-password placeholder="请输入新密码" />
    </el-form-item>

    <el-form-item class="footr">
      <el-button type="primary" @click="submitForm(ruleFormRef)"> 保存 </el-button>
      <el-button @click="emit('close')">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import type { FormInstance } from "element-plus";

const ruleFormRef = ref<FormInstance>();

const { api } = defineProps({
  api: {
    type: Function,
  },
});
const emit = defineEmits(["close"]);

const ruleForm = reactive({
  password: "",
});

onMounted(() => {});
const rules = reactive({
  password: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 6, message: "密码长度不能小于6位", trigger: "blur" },
  ],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      api(ruleForm);
    }
  });
};
</script>
<style scoped lang="less">
.footr {
  margin-top: 20px;
}
.footr :deep(.el-form-item__content) {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: 20px;
}
</style>
