import React, { useRef, useEffect, useState } from 'react';
import { Select, Space, Image, Button } from 'antd';
import {
  PageContainer,
  ProTable,
  ActionType
} from '@ant-design/pro-components';
import { activity10s1UserList } from '@/services/activity/index';
import { usersPage,activity10s1UserAdd } from '@/services/user/user';
import CreateFormModal from './components/CreateFormModal';




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


  const initRow = {
    shop_id: '',
    todate: '',
  };

  const initRowCancellationModal = {
    username: "",
    mobile: "",
    code: ""
  }


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



  const [rowCancellationModal, setRowCancellationModal] = useState(initRowCancellationModal);


  const actionRef = useRef<ActionType>();

  const [searchParams, setSearchParams] = useState(null);

  const [shopOption, setShopOption] = useState([]);
  const searchShop = async (value) => {
    const { success, data } = await usersPage({
      userName: value
    });
    data.records.map((i) => {
      i.userName = i.userName + ' ' + i.phone
    })
    setShopOption(data.records)
  }

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      search: false,
    },
    {
      title: '活动名称',
      dataIndex: 'title',
      search: false,
    },
    {
      title: '用户信息',
      dataIndex: 'userId',
      render: (_, record) => {
        return <>
          <div>用户名：{record?.usersInfo?.userName}</div>
          <div>手机号：{record?.usersInfo?.phone}</div>
          <div>等级：{record?.usersInfo?.level}</div>
        </>
      },
      renderFormItem: (
        _,
        { type, defaultRender, formItemProps, fieldProps, ...rest },
        form,
      ) => {
        return <Select
          {...fieldProps}
          allowClear
          showSearch
          placeholder="请输入用户名或手机号"
          style={{ width: "100%" }}
          filterOption={false}
          onSearch={
            (e) => {
              if (!e) {
                return;
              }
              searchShop(e);
            }
          }
          fieldNames={{
            label: "userName",
            value: "id"
          }}
          options={shopOption}
        />
      },
    },
    {
      title: '认领时间',
      dataIndex: 'confirmDate',
      search: false,
    },
    // {
    //   title: '充电桩',
    //   dataIndex: 'device',
    //   search: false,
    //   render: (_, record) => {
    //     let ids = record?.device.map((item) => {
    //       return item.id
    //     })
    //     return ids.join(',')
    //   },
    // },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      search: false,
    }
  ];

  const handleCreate = async (fields) => {
    setRow(fields);
    const { success } = await activity10s1UserAdd(fields);

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


  return (
    <PageContainer
      ghost
    >
      <>
        <CreateFormModal
          values={row}
          modalOpenState={createFormModal}
          onModalOpenState={setCreateFormModal}
          onSubmit={handleCreate}
        />
        <ProTable
          actionRef={actionRef}
          rowKey="id"
          search={{
            defaultCollapsed: false,
          }}
          toolBarRender={() => [
            <Button
              type="primary"
              style={{ background: '#67c23a' }}
              onClick={() => {
                setCreateFormModal(true)
              }}
            >
              添加
            </Button>,
          ]}
          request={async (params, sorter, filter) => {
            setSearchParams({ token: '', ...params });
            const { data, success } = await activity10s1UserList({
              ...params,
              sorter,
              filter,
            });
            return {
              data: data?.records || [],
              total: data?.total,
              success,
            };
          }}
          columns={columns}
        />
      </>
    </PageContainer>
  );
};
