<template>
  <el-dialog 
    title="用户信息"
    v-model="open"
    width="450px"
    append-to-body
    @close="handleClose"
    class="el-dialog-user-info"
  >
    <div class="dialog-body solid-top solid-bottom" v-loading="loading">
      <Index :userInfo="userInfo" />
    </div>
    <div class="flex justify-center"></div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import Index from "./index";
import { getUser } from "@/api/system/user";

const open = ref(false);
const loading = ref(true);
const userInfo = ref({});
const prop = defineProps({
  userId: {
    type: [Number, String],
    default: null,
  },
});

const { userId } = toRefs(prop);

// 显示弹框
function show() {
  open.value = true;
  getData(3);
}

// 关闭按钮
function handleClose() {
  //   proxy.$refs["canvasDrawRef"].reset();
  open.value = false;
}

function getData(userId) {
  loading.value = true;
  getUser(userId).then((response) => {
    userInfo.value = response.data;
    loading.value = false;
  });
}

defineExpose({
  show,
handleClose,
});
</script>

<style lang="scss">
.el-dialog-user-info {
  .el-dialog__body {
    padding: 0;
  }
}
</style>
