import React, { useRef, useEffect, useState } from 'react';
import { history } from '@umijs/max';

import { Button, Space, Image, Popconfirm } from 'antd';
import {
  PageContainer,
  ProTable,
} from '@ant-design/pro-components';

import AuthConsumer from '@/components/Authority';
import CreateFormModal from './components/CreateFormModal';
import UpdateFormModal from './components/UpdateFormModal';
import BonusGroupUserFormModal from './components/BonusGroupUserFormModal';

import services from '@/services/admin';



const { bonusGroupItems, bonusGroupCreate, bonusGroupDelete, bonusGroupUpdate } = services.BonusGroupController;

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

  const actionRef = useRef();

  const initRow = {
    id: '',

  };

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

  const handleDelete = async (fields) => {

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

  };

  const handleCreate = async (fields) => {
    setRow(fields);

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

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

  const handleUpdate = async (fields) => {

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

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

      setUpdateFormModal(false);
    }
  };

  const columns = [
    // {
    //   title: '分红等级',
    //   dataIndex: 'level_id',
    //   search: false,
    //   render: (_, record) => {
    //     if (record?.bonus_level) {
    //       return <>
    //         <div>等级：{record.bonus_level?.name}</div>
    //         <div>桩数：每人{record.bonus_level?.device_num}个</div>
    //       </>;
    //     }
    //   },
    // },
    {
      title: '组号',
      dataIndex: 'num',
      search: false,
    },
    {
      title: '人数上限',
      dataIndex: 'user_num',
      search: false,
      render: (_, record) => {
        return `${record?.user_num_use}/${record?.user_num}`
      }
    },
    {
      title: '桩数量',
      dataIndex: 'device_num',
      search: false,
      render: (_, record) => {
        return `${record?.device_num_use}/${record?.device_num}`
      }
    },
    {
      title: '桩数量（赠）',
      dataIndex: 'device_num_give',
      search: false,
      render: (_, record) => {
        return `${record?.device_num_give_use}/${record?.device_num_give}`
      }
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      search: false,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <Space>
          <AuthConsumer action={'admin/bonus_group/update'} key="admin/bonus_group/update">
            <Button
              type="link"
              onClick={() => {
                setRow(record);
                setUpdateFormModal(true)
              }}
            >
              编辑
            </Button>
          </AuthConsumer>

        </Space>
      ),
    },
  ];

  return (
    <PageContainer
      ghost
    >
      <>
        <BonusGroupUserFormModal
          values={row}
          modalOpenState={bonusGroupUserFormModal}
          onModalOpenState={setBonusGroupUserFormModal}
          onSubmit={handleUpdate}
        />
        <UpdateFormModal
          values={row}
          modalOpenState={updateFormModal}
          onModalOpenState={setUpdateFormModal}
          onSubmit={handleUpdate}
        />
        <CreateFormModal
          values={row}
          modalOpenState={createFormModal}
          onModalOpenState={setCreateFormModal}
          onSubmit={handleCreate}
        />
        <ProTable
          actionRef={actionRef}
          rowKey="id"
          search={{
            defaultCollapsed: false,
          }}
          toolBarRender={() => [
            <AuthConsumer action={'admin/bonus_group/create'} key="admin/bonus_group/create">
              <Button
                type="primary"
                onClick={() => {
                  setCreateFormModal(true)
                }}
              >
                添加
              </Button>
            </AuthConsumer>
          ]}
          request={async (params, sorter, filter) => {
            const { data, success } = await bonusGroupItems({
              ...params,
              sorter,
              filter,
            });
            return {
              data: data || [],
              total: 0,
              success,
            };
          }}
          columns={columns}
          pagination={false}
        />
      </>
    </PageContainer>
  );
};
