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

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

import AuthConsumer from '@/components/Authority';

import services from '@/services/admin';

const { shopLevelItems, shopLevelCreate, shopLevelDelete, shopLevelUpdate } = services.ShopLevelController;

export default () => {

  const actionRef = useRef();

  const initRow = {
    id: '',
    name: '',
    level: '',
    num: '',
    note: '',
    fee: '',
    team_prize: ''
  };

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

  const handleDelete = async (fields) => {

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

  };

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

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

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

  const handleUpdate = async (fields) => {

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

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

  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      search: false,
    },
    {
      title: '等级',
      dataIndex: 'level',
      search: false,
    },
    {
      title: '单数',
      dataIndex: 'num',
      search: false,
    },
    // {
    //   title: '团队奖',
    //   dataIndex: 'team_prize',
    //   search: false,
    // },
    {
      title: '服务费',
      dataIndex: 'fee',
      search: false,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (text, record, _, action) => [
        <AuthConsumer action={'admin/shop_level/update'} key="admin/shop_level/update">
          <Button
            key="editable"
            type="link"
            onClick={() => {
              setRow(record);
              action?.startEditable?.(record.id);
            }}
          >
            编辑
          </Button>
        </AuthConsumer>,
        <AuthConsumer action={'admin/shop_level/delete'} key="admin/shop_level/delete">
          <Popconfirm
            title="确认删除？"
            onConfirm={() => {
              handleDelete({ id: [record.id] });
            }}
          >
            <Button
              key="delete"
              type="link"
              danger
            >
              删除
            </Button>
          </Popconfirm>
        </AuthConsumer>
      ],
    },
  ];

  return (
    <PageContainer
      ghost
    >
      <>
        <EditableProTable
          actionRef={actionRef}
          rowKey="id"
          search={false}
          request={async (params, sorter, filter) => {
            const { data, success } = await shopLevelItems({
              ...params,
              sorter,
              filter,
            });
            return {
              data: data || [],
              total: 0,
              success,
            };
          }}
          recordCreatorProps={
            {
              position: 'bottom',
              record: () => ({ id: 0 }),
            }
          }
          editable={{
            type: 'multiple',
            editableKeys,
            onSave: async (rowKey, data, row) => {
              if (rowKey) {
                handleUpdate(data)
              } else {
                handleCreate(data)
              }

            },
            onChange: setEditableRowKeys,
          }}
          columns={columns}
          pagination={false}
        />
      </>
    </PageContainer>
  );
};
