import { useRef, useState, useEffect } from 'react';
import { Button, message, Space } from 'antd';
import { PageContainer, ProTable } from '@ant-design/pro-components';

import AuthConsumer from '@/components/Authority';



import services from '@/services/admin';

const { envItems, envitem, envCreate, envDelete, envUpdate } = services.EnvController;

import CreateFormModal from './components/CreateFormModal';
import UpdateFormModal from './components/UpdateFormModal';

const User = () => {

  const [createFormModal, setCreateFormModal] = useState(false);
  const [updateFormModal, setUpdateFormModal] = useState(false);

  const initRow = {
    key: '',
    value: '',
    comment: '',
  };

  const [row, setRow] = useState(initRow);

  const actionRef = useRef();

  const handleCreate = async (value) => {
    const ress = await envCreate(value);
    actionRef.current?.reload();
    setCreateFormModal(false);
    return true;
  };
  const handleUpdate = async (value) => {
    const ress = await envUpdate(value);
    actionRef.current?.reload();
    setUpdateFormModal(false);
    return true;
  };

  const columns = [
    {
      title: '名称',
      dataIndex: 'key',
      search: false,
    },
    {
      title: '值',
      dataIndex: 'value',
      search: false,
    },
    {
      title: '注释',
      dataIndex: 'comment',
      search: false,
    },
    {
      title: '操作',
      dataIndex: 'action',
      search: false,
      render: (value, row) => {
        return (
          <Space>
            <AuthConsumer action={'admin/env/update'}>
              <a
                onClick={() => {
                  if (row.pid == 0) {
                    row.pid = undefined;
                  }
                  setRow(row);
                  setUpdateFormModal(true);
                }}
              >
                编辑
              </a>
            </AuthConsumer>
            <AuthConsumer action={'admin/env/delete'}>
              <a>删除</a>
            </AuthConsumer>
          </Space>
        );
      },
    },
  ];
  return (
    <PageContainer>
      <>
        <UpdateFormModal
          values={row}
          modalOpenState={updateFormModal}
          onModalOpenState={setUpdateFormModal}
          onSubmit={handleUpdate}
        />
        <CreateFormModal
          values={row}
          modalOpenState={createFormModal}
          onModalOpenState={setCreateFormModal}
          onSubmit={handleCreate}
        />
        <ProTable
          headerTitle="非开发者，不要修改"
          actionRef={actionRef}
          rowKey="key"
          request={async (params, sort, filter) => {
            const { data, success } = await envItems(params, sort, filter);
            // 这里需要返回一个 Promise,在返回之前你可以进行数据转化
            // 如果需要转化参数可以在这里进行修改
            return {
              data: data.items,
              success: success,
              total: data.total,
            };
          }}
          columns={columns}
          // search={{
          //   collapsed: false,
          // }}
          search={false}
          pagination={false}
          defaultExpandAllRows={true}
          toolBarRender={() => [
            <AuthConsumer
              name={'system/env/create'}
              key="system/env/create"
            >
              <Button
                type="primary"
                onClick={() => {
                  setRow(initRow);
                  setCreateFormVisible(true);
                }}
              >
                新建
              </Button>
            </AuthConsumer>,
          ]}
        />

      </>
    </PageContainer>
  );
};
export default User;
