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

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


import AuthConsumer from '@/components/Authority';

import services from '@/services/admin';
import RechargeFormModal from './components/RechargeFormModal';

const { walletItems, walletRecharge } = services.ShopWalletController;
const { userItems } = services.UserController;

export default () => {

  const actionRef = useRef();

  const initRow = {

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


  const [userOption, setUserOption] = useState([]);
  const [rechargeFormModal, setRechargeFormModal] = useState(false);

  const searchUser = (value) => {
    userItems({
      keyword: value
    }).then(({ data }) => {
      const arr = [];
      data?.items?.map((item) => {
        item.label = `${item.nickname}   ${item.mobile}`;
        arr.push(item);
      });
      setUserOption(arr);
    });

  }
  const handleRecharge = async (value) => {
    const { success } = await walletRecharge({ ...value });

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

      setRechargeFormModal(false);
    }

  }

  const columns = [
    {
      title: '订单号',
      dataIndex: 'order_no',
      search: false,
    },
    {
      title: '用户',
      dataIndex: 'user_id',
      render: (_, record) => {
        return <>
          <Image
            width={50}
            src={record?.user?.avatar_url}
          />
          <div>{record?.user?.nickname}</div>
          <div>{record?.user?.mobile}</div>
        </>
      },
      renderFormItem: (
        _,
        { type, defaultRender, formItemProps, fieldProps, ...rest },
        form,
      ) => {
        return <Select
          {...fieldProps}
          showSearch
          style={{ width: "100%" }}
          filterOption={false}
          onSearch={
            (e) => {
              if (!e) {
                return;
              }
              searchUser(e);
            }
          }
          fieldNames={{
            label: "label",
            value: "id"
          }}
          options={userOption}
        />
      },
    },
    {
      title: '类型',
      dataIndex: 'type',
      search: false,
      render: (_, record) => {
        return config?.type[record.type];
      },
    },
    {
      title: '金额',
      dataIndex: 'money',
      search: false,
    },
    {
      title: '支付方式',
      dataIndex: 'pay_type',
      search: false,
      render: (_, record) => {
        return config?.pay_type[record?.pay_type];
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      search: false,
      render: (_, record) => {
        return config?.status[record?.status];
      },
    },
    {
      title: '支付凭证',
      dataIndex: 'proof',
      search: false,
      render: (_, record) => {
        return <>
          <Image
            width={50}
            src={record?.proof}
          />
        </>
      },
    },
    {
      title: '备注',
      dataIndex: 'note',
      search: false,
    },
    {
      title: '后台备注',
      dataIndex: 'admin_note',
      search: false,
    },
    {
      title: '付款时间',
      dataIndex: 'pay_time',
      search: false,
      render: (_, record) => {
        return record.pay_time ? moment(record.pay_time * 1000).format('YYYY-MM-DD HH:mm:ss') : '';
      },
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      search: false,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <Space>
          {
            record?.status == 1 ? <AuthConsumer action={'admin/wallet/recharge'} key="admin/wallet/recharge">
              <Button
                type="link"
                onClick={() => {
                  setRow({ ...row, ...record });
                  setRechargeFormModal(true)
                }}
              >
                审核
              </Button>
            </AuthConsumer> : ''
          }
        </Space>
      ),
    },
  ];

  return (
    <PageContainer
      ghost
    >
      <>
        <RechargeFormModal
          values={row}
          modalOpenState={rechargeFormModal}
          onModalOpenState={setRechargeFormModal}
          onSubmit={handleRecharge}
        />
        <ProTable
          actionRef={actionRef}
          rowKey="id"
          search={{
            defaultCollapsed: false,
          }}
          toolBarRender={() => [

          ]}
          request={async (params, sorter, filter) => {
            params.type = 11;
            params.pay_type = 4;
            const { data, success } = await walletItems({
              ...params,
              sorter,
              filter,
            });
            setConfig(data?.config);
            return {
              data: data.items || [],
              total: data.total,
              success,
            };
          }}
          columns={columns}
        />
      </>
    </PageContainer>
  );
};
