import { getRoleList } from "@/api/system";
import { type PaginationProps } from "@pureadmin/table";
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, ref, computed, onMounted } from "vue";
// 获取URLLIST
import { getGroupUrl } from "@/utils/getUrl/getUrl";
import { http } from "@/utils/http";
// 获取当前板块接口列表
const UserUrl = await getGroupUrl(["User"]);
export function useUser() {
  // 搜索表单参数
  const form = reactive({
    Name: ""
  });
  // 级联选择器参数
  const optionList = ref([
    {
      value: "resource",
      label: "Resource",
      children: [
        {
          value: "axure",
          label: "Axure Components"
        },
        {
          value: "sketch",
          label: "Sketch Templates"
        },
        {
          value: "docs",
          label: "Design Documentation"
        }
      ]
    }
  ]);
  const dataList = ref([]);
  const loading = ref(false);
  const dialogAddVisible = ref(false);
  const pagination = reactive<PaginationProps>({
    total: 0,
    pageSize: 10,
    currentPage: 1,
    background: true
  });
  const columns: TableColumnList = [
    {
      type: "selection",
      width: 55,
      align: "left",
      hide: ({ checkList }) => !checkList.includes("勾选列")
    },
    {
      label: "序号",
      type: "index",
      width: 70,
      hide: ({ checkList }) => !checkList.includes("序号列")
    },
    {
      label: "角色ID",
      prop: "Id",
      minWidth: 130
    },
    {
      label: "操作",
      fixed: "right",
      width: 200,
      slot: "operation"
    }
  ];
  // 当前页数量切换
  function handleSizeChange(val: number) {
    console.log(`${val} items per page`);
    onSearch();
  }
  // 当前页码切换
  function handleCurrentChange(val: number) {
    console.log(`current page: ${val}`);
    onSearch();
  }
  // 选择表格项
  function handleSelectionChange(val) {
    console.log("handleSelectionChange", val);
    onSearch();
  }
  // 搜索列表
  async function onSearch(type = "search") {
    if (type == "search" && !Object.values(form).some(item => !!item)) {
      return ElMessage({
        message: "请输入查询条件",
        type: "error"
      });
    }
    loading.value = true;
    const { data, other }: any = http.request(
      UserUrl.User.userSearch.method,
      UserUrl.User.userSearch.url,
      {
        ...form,
        page_size: pagination.pageSize,
        page_num: pagination.currentPage
      }
    );
    dataList.value = data;
    pagination.total = other.Count;
    setTimeout(() => {
      loading.value = false;
    }, 500);
  }
  onMounted(() => {
    // onSearch();
  });

  // 删除
  function handleDelete(row) {
    ElMessageBox.confirm(
      `是否删除该用户?  用户名称为:${row.AdminName}`,
      "提示",
      {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning"
      }
    ).then(async () => {
      const { status, info }: any = await http.request(
        UserUrl.User.userDelete.method,
        UserUrl.User.userDelete.url,
        { SysAdminId: row.Id }
      );
      if (status === "1") {
        ElMessage({
          message: "删除成功",
          type: "success"
        });
        onSearch();
      } else {
        ElMessageBox.alert(info, "提示", {
          confirmButtonText: "关闭",
          type: "warning"
        });
      }
    });
  }
  // 新增
  const addVisible = ref(false);
  function handleAdd() {
    addVisible.value = true;
  }
  // 修改
  const editVisible = ref(false);
  const editFormData = ref({});
  function handleUpdate(row) {
    editVisible.value = true;
    // 表格数据赋值
    editFormData.value = row;
  }
  return {
    form,
    loading,
    columns,
    dataList,
    pagination,
    onSearch,
    handleSizeChange,
    handleCurrentChange,
    handleSelectionChange,
    handleAdd,
    handleUpdate,
    handleDelete,
    addVisible,
    editVisible,
    editFormData,
    optionList
  };
}
