import { usersPage, refundAmount } from '@/services/user/index';
import { merchantPage } from '@/services/merchant/index';

import React, { useRef, useEffect, useState } from 'react';
import { useIntl, useAccess } from '@umijs/max';
import { message, Tag, Select, Tooltip, Button } from 'antd';
import { ActionType, PageContainer, ProTable } from '@ant-design/pro-components';
import CardTable from './cardTable';
import UserAddCard from './userAddCard';
import Refund from './refund';

const LogTableList: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [modalVisit, setModalVisit] = useState<any>(false)
  const [row1, setRow1] = useState<any>()
  const [modalVisible, setModalVisible] = useState<boolean>(false);
  const [row4, setRow4] = useState<any>()
  const [modalVisits, setModalVisits] = useState<any>(false)

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

  useEffect(() => {
    actionRef.current.reload();
  }, [modalVisits]);


  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      valueType: 'text',
      search: false,
    },
    {
      title: '用户昵称',
      dataIndex: 'nickName',
      valueType: 'text',
      hideInTable: true
    },
    {
      title: '用户信息',
      dataIndex: '_',
      valueType: 'text',
      search: false,
      render: (_: any, record: any) => {
        return <div>
          <div>用户昵称：{record?.nickName}</div>
          <div>手机号：{record?.phone}</div>
        </div>
      },
    },
    {
      title: '余额',
      dataIndex: 'walletBalance',
      valueType: 'text',
      search: false,
    },
    // {
    //   title: '注册所属商户',
    //   dataIndex: 'merchantId',
    //   valueType: 'text',
    //   search: true,
    //   render: (_: any, record: any) => {
    //     return <div>
    //       <div>商户ID：{record?.merchantId}</div>
    //       <div>商户名称：{record?.merchantName}</div>
    //     </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: 'platform',
      valueType: 'text',
      // hideInTable: true,
      render: (_, data) => {
        return _ == 1 ? <Tag color="green">微信小程序</Tag> : _ == 2 ? <Tag color="blue">支付宝小程序</Tag> : data
      },
      renderFormItem: (
        _,
        { type, defaultRender, formItemProps, fieldProps, ...rest },
        form,
      ) => {
        return <Select
          {...fieldProps}
          allowClear
          placeholder="请选择注册平台"
          style={{ width: "100%" }}
          filterOption={false}
          fieldNames={{
            label: "name",
            value: "id"
          }}
          options={[
            {
              name: '微信',
              id: 1
            },
            {
              name: '支付宝',
              id: 2
            }
          ]}
        />
      },
    },
    {
      title: '首单时间',
      dataIndex: 'firstOrderTime',
      valueType: 'text',
      search: false,
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueType: 'text',
      search: true,
      render: (_: any, record: any) => {
        return record.statusName
      },
      renderFormItem: (
        _,
        { type, defaultRender, formItemProps, fieldProps, ...rest },
        form,
      ) => {
        return <Select
          {...fieldProps}
          allowClear
          placeholder="请选择状态"
          style={{ width: "100%" }}
          filterOption={false}
          fieldNames={{
            label: "name",
            value: "id"
          }}
          options={[
            {
              name: '正常',
              id: 1
            },
            {
              name: '禁用',
              id: 2
            }
          ]}
        />
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      valueType: 'text',
      search: false,
    },
    {
      title: '操作',
      dataIndex: 'option',
      width: 170,
      valueType: 'option',
      fixed: 'right',
      render: (_, record: any) => {
        return <div className='flex flex-wrap'>
          <Button
            size="small"
            type="primary"
            style={{ marginRight: 10, marginBottom: 10 }}
            onClick={() => {
              setRow1(record)
              setModalVisit(true)
            }}
          >
            余额记录
          </Button>
          <Button
            size="small"
            type="primary"
            danger
            onClick={async () => {
              setRow4(record.id)
              setModalVisits(true)
            }}
          >
            余额变更
          </Button>
        </div>
      },
    },
  ];

  return (
    <PageContainer>
      <div style={{ width: '100%', float: 'right' }}>
        <ProTable
          actionRef={actionRef}
          rowKey="id"
          key="logList"
          search={{
            labelWidth: 120,
            defaultCollapsed: false,
          }}
          toolBarRender={() => [
            <Button type="primary" danger onClick={async () => {
              setModalVisible(true)
            }}>退款</Button>,
          ]}
          request={async (params, sorter, filter) => {

            let { data } = await usersPage(params)
            return {
              data: data?.records || [],
              total: data?.total,
            };
          }}
          columns={columns}
        />
        <UserAddCard
          onSubmit={async (values) => {
            let success = false;
            success = await refundAmount({ ...values });
            if (success) {
              setModalVisible(false);
              message.success('退款成功');
              if (actionRef.current) {
                actionRef.current.reload();
              }
            }
          }}
          onCancel={() => {
            setModalVisible(false);
          }}
          open={modalVisible}
        />
        <Refund modalVisit={modalVisits} id={row4} setModalVisit={setModalVisits} />
        <CardTable modalVisit={modalVisit} values={row1} setModalVisit={setModalVisit} />
      </div>
    </PageContainer>
  );
};

export default LogTableList;
