import React, { useState, useRef } from 'react';
import Table, { ProColumns, ActionType } from '@/components/Table';
import {
  getAccountList,
  deleteUser,
  updateUser,
  changeUserStatus,
} from '@/services/system/accountManage';
import { fetchTableData } from '@/utils/table';
import DeleteButton from '@/components/Table/DeleteButton';
import { Popover, Switch } from 'antd';
import AddAccountModal from '../components/AddAccountModal';
import EditAccountModal from '../components/EditAccountModal';

const AccountManageList = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isEditModal, setIsEditModal] = useState(false);
  const [modalData, setModalData] = useState({});

  const handleEdit = (row: any) => {
    setModalData(row);
    setIsEditModal(true);
  };

  const handleDelete = async (name: any) => {
    await deleteUser({ name: name });
  };
  const tableRef = useRef<ActionType>();
  const columns: ProColumns<any>[] = [
    {
      title: '账号',
      dataIndex: 'name',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '角色',
      dataIndex: 'role',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '操作',
      valueType: 'option',
      width: 180,
      render: (_, row) => [
        <a
          key="edit"
          onClick={() => {
            handleEdit(row);
          }}
        >
          编辑
        </a>,
        <Popover
          content={
            <div>
              <p>账号启用/禁用</p>
            </div>
          }
        >
          <Switch
            key="switch"
            defaultChecked={row.status}
            size="small"
            onChange={async (checked) => {
              await changeUserStatus({ name: row.name, status: checked });
            }}
          />
        </Popover>,
        <DeleteButton
          key="delete"
          onDelete={() => {
            handleDelete(row.name);
            tableRef.current?.reload();
          }}
        />,
      ],
    },
  ];
  return (
    <div>
      <Table
        columns={columns}
        rowKey="name"
        search={false}
        toolBarActions={[
          {
            type: 'add',
            onConfirm: () => {
              setIsModalVisible(true);
            },
          },
        ]}
        actionRef={tableRef}
        request={async (params) => {
          const res = await fetchTableData(getAccountList, params);
          return res;
        }}
      />
      <AddAccountModal
        visible={isModalVisible}
        onCancel={function () {
          setIsModalVisible(false);
        }}
        onOk={async function (): Promise<void> {
          setIsModalVisible(false);
          tableRef.current?.reload();
        }}
      />
      <EditAccountModal
        visible={isEditModal}
        editModalData={modalData}
        onCancel={function () {
          setIsEditModal(false);
        }}
        onOk={async function (): Promise<void> {
          setIsEditModal(false);
          tableRef.current?.reload();
        }}
      />
    </div>
  );
};

export default AccountManageList;
