/*
 * @Note:
 * @Author: 2058827620@qq.com
 * @Date: 2022-04-03 17:02:15
 */
import { useEffect, useRef, useState } from 'react';

import { Space } from 'antd';

import { ProForm, ModalForm, ProTable, ProFormText, ProFormRadio } from '@ant-design/pro-components';

import services from '@/services/admin';

const { deviceItems } = services.DeviceController;
const { userItems } = services.UserController;

export default ({ values, modalOpenState, onModalOpenState, onSubmit }) => {
  const restFormRef = useRef();
  const actionRef = useRef();
  const [selectedRows, setSelectedRows] = useState(false);

  useEffect(() => {
    restFormRef.current?.setFieldsValue(values);
  }, [values]);

  const columns = [
    {
      title: '昵称',
      dataIndex: 'nickname',
      search: false,
    },
    {
      title: '手机号',
      dataIndex: 'mobile',
      search: false,
    },
  ]

  return (
    <>
      <ModalForm
        title="分组-绑定用户"
        formRef={restFormRef}
        submitter={{
          searchConfig: {
            resetText: '重置',
          },
          resetButtonProps: {
            onClick: () => {
              restFormRef.current?.resetFields();
            },
          },
        }}
        initialValues={values}
        onFinish={onSubmit}
        open={modalOpenState}
        onOpenChange={onModalOpenState}
      >
        <ProFormText hidden={true} width="md" name="id" />
        <ProTable
          actionRef={actionRef}
          rowKey="id"
          search={{
            defaultCollapsed: false,
          }}
          request={async (params, sorter, filter) => {
            const { data, success } = await userItems({
              ...params,
              sorter,
              filter,
            });
            return {
              data: data?.items || [],
              total: data?.total,
              success,
            };
          }}
          columns={columns}
          rowSelection={{
            onChange: (_, selectedRows) => {
              setSelectedRows(selectedRows)
            },
          }}
          tableAlertRender={({
            selectedRowKeys,
            selectedRows,
            onCleanSelected,
          }) => {
            return (
              <Space size={24}>
                <span>已选 {selectedRowKeys.length} 项</span>
                <span>
                  <a style={{ marginInlineStart: 8 }} onClick={onCleanSelected}>
                    取消选择
                  </a>
                </span>

              </Space>
            );
          }}
          tableAlertOptionRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => {
            return (
              <Space size={16}>
                {/* <AuthConsumer action={'admin/device/create'} key="admin/device/create">
                  <Popconfirm
                    title="确认删除？"
                    onConfirm={() => {
                      handleGroup({ id: selectedRowKeys });
                    }}
                  >
                    <Button
                      type="link"
                      danger
                    >
                      加入分组
                    </Button>
                  </Popconfirm>
                </AuthConsumer> */}
              </Space>
            );
          }}
          pagination={{
            showSizeChanger: true,
          }}
        />

      </ModalForm>
    </>
  );
};

