import React from "react";
import { useNavigate } from "react-router-dom";
import { Button, Popconfirm, message } from "antd";
import { ProTable } from "@ant-design/pro-components";
import { queryTable, queryDict } from "@/utils/request";
import { getSysUser, updateUserStatus, deleteSysUser } from "@/service/sysuser";
import { getSysOrg } from "@/service/sysorg";
import Page from "@/components/Page";

const queryUserList = queryTable(getSysUser);
const queryOrg = queryDict(getSysOrg, { labelKey: "name", valueKey: "orgId" });
// const queryPosition = queryDict(getSysPosition, { labelKey: "name", valueKey: "positionId" });

export default (props) => {
  const actionRef = React.useRef();
  const [open, setOpen] = React.useState(false);
  const navigate = useNavigate();

  const updateStatus = (user) => {
    const status = user.status === 1 ? 0 : 1;
    const hide = message.loading("请稍候...", 0);
    updateUserStatus(user.userId, status)
      .then((res) => {
        hide();
        actionRef.current.reload();
      })
      .catch(() => {
        hide();
      });
  };

  const handleDelete = (id) => {
    if (id) {
      deleteSysUser(id).then((res) => {
        actionRef.current.reload();
      });
    }
  };

  const columns = [
    {
      title: "EHR",
      search: false,
      dataIndex: "hxId",
    },
    {
      title: "姓名",
      dataIndex: "name",
    },
    {
      title: "手机号",
      search: false,
      dataIndex: "phone",
    },
    {
      title: "网点/部门",
      dataIndex: "orgId",
      valueType: "select",
      request: queryOrg,
      fieldProps: {
        showSearch: true,
        filterOption: (x, opt) => opt.label?.includes(x),
      },
    },
    {
      title: "状态",
      dataIndex: "status",
      search: false,
      valueEnum: {
        1: {
          text: "正常",
          status: "Processing",
        },
        0: {
          text: "禁用",
          status: "Error",
        },
      },
    },
    {
      title: "操作",
      valueType: "option",
      width: 200,
      render: (_, record) => [
        <Button
          key={1}
          style={{ padding: 0 }}
          type="link"
          onClick={() => {
            updateStatus(record);
          }}
        >
          {record.status === 1 ? "禁用" : "启用"}
        </Button>,
        <Button
          key={2}
          style={{ padding: 0 }}
          type="link"
          onClick={() => navigate(`/system/user/edit?id=${record.userId}`)}
        >
          编辑
        </Button>,
        <Popconfirm
          key={4}
          title="您是否确认删除 ?"
          onConfirm={() => handleDelete(record.userId)}
          okText="确定"
          cancelText="取消"
        >
          {/* manualPush */}
          <Button style={{ padding: 0 }} danger type="link">
            删除
          </Button>
        </Popconfirm>,
      ],
    },
  ];

  return (
    <Page>
      <ProTable
        actionRef={actionRef}
        rowKey="userId"
        toolBarRender={() => [
          <Button
            key="1"
            type="primary"
            onClick={() => {
              navigate("/system/user/edit");
            }}
          >
            新增
          </Button>,
        ]}
        request={queryUserList}
        columns={columns}
      />
    </Page>
  );
};
