<template>
  <el-dialog v-model="dialogVisible" title="修改密码" width="500px" draggable>
    <div>
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" disabled placeholder="用户名：请输入用户名">
            <template #prefix>
              <el-icon class="el-input__icon">
                <user />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" placeholder="请输入修改密码">
            <template #prefix>
              <el-icon class="el-input__icon">
                <!-- <user /> -->
                <lock />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <!-- <el-form-item prop="newpassword">
          <el-input
            v-model="loginForm.newpassword"
            type="password"
            placeholder="请输入新密码"
            show-password
            autocomplete="new-password"
          >
            <template #prefix>
              <el-icon class="el-input__icon">
                <lock />
              </el-icon>
            </template>
          </el-input>
        </el-form-item> -->
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="determine(loginFormRef)">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { ElForm, ElNotification } from "element-plus";
import { Login } from "@/api/interface";
import { newloginApi } from "@/api/modules/login";
import { selectaccountNumber } from "@/api/home/Multisite";
import { LOGIN_URL } from "@/config";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/modules/user";

const router = useRouter();

type FormInstance = InstanceType<typeof ElForm>;
const loginFormRef = ref<FormInstance>();
const dialogVisible = ref(false);
const openDialog = () => {
  dialogVisible.value = true;
};
const loginRules = reactive({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入新密码", trigger: "blur" }]
});
// const loading = ref(false);
const loginForm = reactive<Login.ReqLoginForm>({
  username: "",
  password: "",
  tenantNo: "",
  rememberMe: true
});
const determine = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async valid => {
    if (!valid) return;
    dialogVisible.value = true;
    try {
      const { data } = await newloginApi({
        id: userdata.value.user.id,
        loginName: loginForm.username,
        password: loginForm.password
      });
      console.log(data);

      ElNotification({
        message: "重置密码成功",
        type: "success",
        duration: 3000
      });
      // document.cookie = "rememberMe=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/user/;";
      // 3.重定向到登陆页
      router.replace(LOGIN_URL);
    } finally {
      dialogVisible.value = false;
    }
  });
};
// 密码回显
const userdata = ref();
const userStore = useUserStore();

const getselectaccountNumber = async () => {
  const { data } = await selectaccountNumber({});
  console.log(data);
  userdata.value = data;
  loginForm.username = userdata.value.user.userName;
  userStore.setUserInfo({ name: loginForm.username });
  userStore.setUseravatar(userdata.value.user.avatar);
};
// dialogVisible = false

onMounted(() => {
  getselectaccountNumber();
});
defineExpose({ openDialog });
</script>
