<template>
  <!-- 修改密码对话框 -->
  <el-dialog v-model="dialogVisible" title="修改密码"  width="700px" append-to-body>
    <el-form ref="formRef" :model="userForm" :rules="rules" label-width="120px">
      <el-form-item label="用户账号" >
        <el-input v-model="userForm.account" disabled placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="原密码" prop="oldPassword">
        <el-input v-model="userForm.oldPassword" type="password" placeholder="请输入" clearable show-password />
      </el-form-item>
      <el-form-item label="登录密码" prop="password">
        <el-input v-model="userForm.password" type="password" placeholder="请输入" clearable show-password />
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input v-model="userForm.confirmPassword" type="password" placeholder="请输入" clearable show-password />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";

const formRef = ref<any>();
const rules = ref<any>(
  {
    account: [{ required: true, message: "用户账号不能为空", trigger: "blur" }],
    oldPassword: [{ required: true, message: "原登录密码不能为空", trigger: "blur" }],
    password: [{ required: true, message: "登录密码不能为空", trigger: "blur" }],
    confirmPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" }],
    role: [{ required: true, message: "角色不能为空", trigger: "blur" }],
    stations: [{ required: true, message: "关联台站不能为空", trigger: "blur" }],
  }
);


const userForm = ref<any>({
  account: "Admin",
  password: "",
  confirmPassword: "",
  role: "",
  stations:[],
  name: "",
  post: "",
  affiliation: "",
  phone: "",
  oldPassword:''
});

const dialogVisible = ref(false);
const openDialog = () => {
  dialogVisible.value = true;
};

defineExpose({ openDialog });
</script>
