<script setup lang="ts">
import YlActionDiv from "@/components/yl-action-div.vue";
import { useRequest } from "vue-request";
import { myRequest } from "@/requests/request.ts";
import { userinfo } from "@/store/store.ts";
import YlUserinfo from "@/components/yl-layout/yl-userinfo.vue";
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { formatError } from "@/utils/utils.ts";
import _ from "lodash";

const show = ref(false); // 修改用户信息弹窗状态
const tmpUserinfo = ref<userinfo>({}); // 临时保存用户信息

// 获取用户列表
const {
  data: userList,
  run: updateUserList,
  loading,
} = useRequest(() => myRequest(`/admin/user`, userinfo.token));
//更新用户信息
const { runAsync: updateUserinfo } = useRequest(
  (data: userinfo) => myRequest(`/admin/user`, userinfo.token, data, "put"),
  { manual: true },
);
//删除用户
const { runAsync: deleteUserinfo } = useRequest(
  (data: string) =>
    myRequest(`/admin/user?username=${data}`, userinfo.token, {}, "delete"),
  { manual: true },
);
//更新用户信息方法
const toUpdateUserinfo = (data: userinfo) => {
  updateUserinfo(data)
    .then(() => {
      show.value = false;
      ElMessage.success("更新成功");
      updateUserList();
    })
    .catch((err) => ElMessage.error(formatError(err)));
};
//删除用户信息方法
const toDeleteUserinfo = (data: string) => {
  deleteUserinfo(data)
    .then(() => {
      ElMessage.success("删除成功");
      updateUserList();
    })
    .catch((err) => ElMessage.error(formatError(err)));
};
</script>

<template>
  <yl-action-div class-name="flex between">
    <el-button @click="updateUserList">刷新</el-button>
  </yl-action-div>
  <el-table :data="userList?.data" v-loading="loading">
    <el-table-column prop="avatar" label="头像" width="100" align="center">
      <template #default="scope">
        <el-avatar
          :size="50"
          :src="scope.row.avatar || '/static/image/avatar.png'"
        />
      </template>
    </el-table-column>
    <el-table-column
      prop="username"
      label="用户名"
      min-width="200"
      align="center"
    />
    <el-table-column
      prop="nickname"
      label="昵称"
      width="200"
      align="center"
      show-overflow-tooltip
    />
    <el-table-column
      prop="mobile"
      label="手机号"
      min-width="200"
      align="center"
    />
    <el-table-column prop="email" label="邮箱" min-width="200" align="center" />
    <el-table-column prop="location" label="地址" width="200" align="center" />
    <el-table-column prop="type" label="用户类型" width="200" align="center" />
    <el-table-column label="操作" width="200" align="center" fixed="right">
      <template #default="scope">
        <el-button
          link
          @click="
            () => {
              show = true;
              tmpUserinfo = _.cloneDeep(scope.row);
            }
          "
          >编辑</el-button
        >
        <el-popconfirm
          :title="`确认删除用户 ${scope.row.username} ？`"
          @confirm="() => toDeleteUserinfo(scope.row.username)"
        >
          <template #reference
            ><el-button type="danger" size="small">删除</el-button></template
          >
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog title="修改信息" v-model="show" width="40rem">
    <YlUserinfo @update="toUpdateUserinfo" :userinfo="tmpUserinfo" admin />
  </el-dialog>
</template>

<style scoped></style>
