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

import { history } from 'umi';
import AuthConsumer from '@/components/Authority';
import CreateFormModal from './components/CreateFormModal';
import UpdateFormModal from './components/UpdateFormModal';

import services from '@/services/admin';


const { shopWalletConfigItems, adminitem, shopWalletConfigCreate, shopWalletConfigDelete, shopWalletConfigUpdate } = services.ShopWalletController;
const { permissionTree } = services.PermissionController;

export default () => {
  const [createFormModal, setCreateFormModal] = useState(false);
  const [updateFormModal, setUpdateFormModal] = useState(false);
  const [permissionTreeData, setPermissionTreeData] = useState([]);

  const actionRef = useRef();

  const initRow = {
    id: '',
    fee: "",
    end_hour: "",
    arrive_day: "",
    apply_max: "",
    apply_min: ""
  };

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

  const [selectedRowsState, setSelectedRows] = useState([]);

  useEffect(() => {
    permissionTree().then(({ data }) => {
      setPermissionTreeData(data);
    });
  }, []);

  const handleDelete = async (fields) => {

    const { success } = await shopWalletConfigDelete(fields);
    if (success) {
      actionRef.current.clearSelected();
      actionRef.current?.reload();
    }
  };

  const handleCreate = async (fields) => {
    setRow(fields);
    const { success } = await shopWalletConfigCreate({ ...fields });

    if (success) {
      setRow(initRow);
      actionRef.current?.reload();
      setCreateFormModal(false);
    }
  };

  const handleUpdate = async (fields) => {

    const { success } = await shopWalletConfigUpdate({ ...fields });

    if (success) {
      actionRef.current?.reload();

      setUpdateFormModal(false);
    }
  };

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      search: false
    },
    {
      title: '最小提现时间',
      dataIndex: 'apply_min',
      search: false
    },
    {
      title: '最大提现时间',
      dataIndex: 'apply_max',
      search: false
    },
    {
      title: '计划到账时间',
      dataIndex: 'arrive_day',
      search: false
    },
    {
      title: '最晚到账时间',
      dataIndex: 'end_hour',
      search: false
    },
    {
      title: '提现-手续费',
      dataIndex: 'fee',
      search: false
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      search: false,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <Space>
          <AuthConsumer action={'admin/withdraw_config/update'} key="admin/withdraw_config/update">
            <Button
              type="link"
              onClick={() => {
                setRow(record);
                setUpdateFormModal(true)
              }}
            >
              编辑
            </Button>
          </AuthConsumer>
          <AuthConsumer action={'admin/withdraw_config/delete'} key="admin/withdraw_config/delete">
            <Popconfirm
              title="确认删除？"
              onConfirm={() => {
                handleDelete({ id: record.id });
              }}
            >
              <Button
                type="link"
                danger
              >
                删除
              </Button>
            </Popconfirm>
          </AuthConsumer>
        </Space>
      ),
    },
  ];

  return (
    <PageContainer
      ghost
    >
      <>
        <UpdateFormModal
          values={row}
          modalOpenState={updateFormModal}
          onModalOpenState={setUpdateFormModal}
          onSubmit={handleUpdate}
          permissionTreeData={permissionTreeData}
        />
        <CreateFormModal
          values={row}
          modalOpenState={createFormModal}
          onModalOpenState={setCreateFormModal}
          onSubmit={handleCreate}
          permissionTreeData={permissionTreeData}
        />
        <ProTable
          actionRef={actionRef}
          rowKey="id"
          search={false}
          toolBarRender={() => [
            <AuthConsumer action={'admin/withdraw_config/create'} key="admin/withdraw_config/create">
              <Button
                type="primary"
                onClick={() => {
                  // history.push('admin/0/create');
                  setCreateFormModal(true)
                }}
              >
                添加
              </Button>
            </AuthConsumer>
          ]}
          request={async (params, sorter, filter) => {
            const { data, success } = await shopWalletConfigItems({
              ...params,
              sorter,
              filter,
            });
            return {
              data: data || [],
              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>
            );
          }}
          pagination={{
            showSizeChanger: false,
          }}
        />
      </>
    </PageContainer>
  );
};
