import React, { useRef, useEffect, useState } from 'react';
import { history } from '@umijs/max';
import { UploadOutlined } from '@ant-design/icons';
import { getToken, setAuthority } from '@/utils/auth';
import { Button, Space, Popconfirm, Tag, Image, Select, Upload, message } from 'antd';
import {
  PageContainer,
  ProTable,
  ProFormSelect,
} from '@ant-design/pro-components';

import AuthConsumer from '@/components/Authority';

import services from '@/services/admin';

import dayjs from 'dayjs';

const { device_profit, deviceSetinfo, deviceCreate } = services.DeviceController;
const { shopItems } = services.ShopController;

export default () => {

  const actionRef = useRef();

  const initRow = {
    id: '',
    shop_id: '',
    store_id: '',
    num: 1,
  };

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


  const handleSetinfo = async (value) => {
    const { success } = await deviceSetinfo(value);
    if (success) {
      setSetinfoFormModal(false);
      actionRef.current?.reload();
    }
  };

  const searchShop = (value) => {
    shopItems({
      username: value
    }).then(({ data }) => {
      const arr = [];
      data?.data?.map((item) => {
        item.label = `${item.username}   ${item.mobile}`;
        arr.push(item);
      });
      setShopOption(arr);
    });
  }

  const props = {
    name: 'file',
    action: process.env.API_URL + '/admin/device_profit/import1',
    headers: {
      Authorization: `Bearer ` + getToken(),
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 导入成功`);
        actionRef.current?.reload();
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
  };


  const columns = [
    {
      title: '设备ID',
      dataIndex: 'device_id',
      search: false,
    },
    {
      title: '设备号',
      dataIndex: 'device_no',
      search: false,
    },
    {
      title: '收益',
      dataIndex: 'money',
      search: false,
    },
    {
      title: '收益时间',
      dataIndex: 'todate',
      search: false,
    },
    {
      title: '状态',
      dataIndex: 'status',
      search: false,
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      search: false,
    },
  ];

  return (
    <PageContainer
      ghost
    >
      <>
        <ProTable
          actionRef={actionRef}
          rowKey="id"
          search={{
            defaultCollapsed: false,
          }}
          toolBarRender={() => [
            <AuthConsumer action={'admin/device_profit/import1'} key="admin/device_profit/import1">
              <Upload {...props}>
                <Button icon={<UploadOutlined />}>导入数据</Button>
              </Upload>
            </AuthConsumer>,
          ]}
          request={async (params, sorter, filter) => {
            const { data, success } = await device_profit({
              ...params,
              sorter,
              filter,
              // page: params.current
            });
            //setDeviceRedis(data.redis);
            return {
              data: data?.data || [],
              total: data?.total,
              success,
            };
          }}
          columns={columns}
          rowSelection={{
            onChange: (selectedRowKeys, selectedRows) => {
              setSelectedRows(selectedRowKeys)
            },
          }}
          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}>

              </Space>
            );
          }}
          pagination={{
            showSizeChanger: true,
          }}
        />
      </>
    </PageContainer>
  );
};
