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 services from '@/services/admin';

const { deviceStoreItems, deviceStoreDelete } = services.DeviceStoreController;

export default () => {

  const actionRef = useRef();


  const handleDelete = async (fields) => {

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

  };




  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      search: false,
    },
    {
      title: '门店',
      dataIndex: 'name',
      search: false,
      render: (_, record) => {
        return <>
          <div>{record.name}</div>
          <div>{record.addr}</div>
        </>;
      },
    },
    {
      title: '数量',
      dataIndex: 'device_num',
      search: false,
    },
    {
      title: '电费',
      dataIndex: 'dian_price',
      search: false,
    },
    {
      title: '服务费',
      dataIndex: 'fee',
      search: false,
    },
    {
      title: '停车费',
      dataIndex: 'p_price',
      search: false,
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      search: false,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <Space>
          <AuthConsumer action={'admin/device_store/update'} key="admin/device_store/update">
            <Button
              type="link"
              onClick={() => {
                history.push(`store/${record.id}/update`);
              }}
            >
              编辑
            </Button>
          </AuthConsumer>
          {/* <AuthConsumer action={'admin/device_store/delete'} key="admin/device_store/delete">
            <Popconfirm
              title="确认删除？"
              onConfirm={() => {
                handleDelete({ id: [record.id] });
              }}
            >
              <Button
                type="link"
                danger
              >
                删除
              </Button>
            </Popconfirm>
          </AuthConsumer> */}
        </Space>
      ),
    },
  ];

  return (
    <PageContainer
      ghost
    >
      <>
        <ProTable
          actionRef={actionRef}
          rowKey="id"
          search={{
            defaultCollapsed: false,
          }}
          toolBarRender={() => [
            <AuthConsumer action={'admin/device_store/create'} key="admin/device_store/create">
              <Button
                type="primary"
                onClick={() => {
                  history.push('store/0/create');
                }}
              >
                添加
              </Button>
            </AuthConsumer>
          ]}
          request={async (params, sorter, filter) => {
            const { data, success } = await deviceStoreItems({
              ...params,
              sorter,
              filter,
            });
            return {
              data: data?.data || [],
              total: data?.total,
              success,
            };
          }}
          columns={columns}
          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_store/delete'} key="admin/device_store/delete">
                  <Popconfirm
                    title="确认删除？"
                    onConfirm={() => {
                      handleDelete({ id: selectedRowKeys });
                    }}
                  >
                    <Button
                      type="link"
                      danger
                    >
                      批量删除
                    </Button>
                  </Popconfirm>
                </AuthConsumer>
              </Space>
            );
          }}
          pagination={{
            showSizeChanger: true,
          }}
        />
      </>
    </PageContainer>
  );
};
