import { type ActionType, ProCard } from '@ant-design/pro-components';
import { Button, Input, Space, Statistic } from 'antd';
import React, { useCallback, useEffect, useRef, useState } from 'react';

import EnhancedProTable from '@/components/EnhancedProTable';
import { baseOrderColumns } from './config';

const { Search } = Input;

import { DownOutlined, UpOutlined, UserOutlined } from '@ant-design/icons';

import {
  getTradeOrderPage,
  getTradeSummary,
  type TradeOrderPageRespVO,
  type TradeReq,
  type TradeSummaryRespVO,
} from '@/services/trade/order';

const OrderListItem: React.FC<{ orderStatus: number }> = (props) => {
  const { orderStatus } = props;
  const tableRef = useRef<ActionType>(null);
  const [isShowTotal, setIsShowTotal] = useState<boolean>(false);
  const [summary, setSummary] = useState<TradeSummaryRespVO>();
  const fetchSummary = async () => {
    const res = await getTradeSummary();
    setSummary(res);
  };
  useEffect(() => {
    fetchSummary();
  }, []);

  const handleIsTotal = useCallback(() => {
    setIsShowTotal(!isShowTotal);
  }, [isShowTotal]);

  const handleSearch = useCallback((value: string) => {
    console.log('搜索', value);
    tableRef.current?.reload();
  }, []);
  return (
    <>
      <Space
        style={{
          padding: '18px',
          background: '#fff',
          marginBottom: 16,
        }}
      >
        <Search
          placeholder="输入售后单号/关联订单号搜索"
          enterButton
          onSearch={handleSearch}
          style={{ width: 300 }}
        />
        <Button
          icon={isShowTotal ? <DownOutlined /> : <UpOutlined />}
          onClick={handleIsTotal}
        >
          统计
        </Button>
      </Space>
      {isShowTotal && (
        <ProCard.Group direction="row" style={{ marginBottom: 18 }}>
          <ProCard layout="center" style={{ background: '#f5f5f5' }}>
            <Statistic
              title="售后单数量"
              value={summary?.orderCount}
              precision={2}
            />
          </ProCard>
          <ProCard layout="center" style={{ background: '#f5f5f5' }}>
            <Statistic
              title="待退款金额"
              value={summary?.payPrice}
              precision={2}
            />
          </ProCard>
          <ProCard layout="center" style={{ background: '#f5f5f5' }}>
            <Statistic
              title="累计退款金额"
              value={summary?.livePrice}
              precision={2}
            />
          </ProCard>
        </ProCard.Group>
      )}
      <SalesTable orderStatus={orderStatus} search={true} />
    </>
  );
};

export const SalesTable = (props: {
  orderStatus?: number;
  search?: boolean;
}) => {
  const tableRef = useRef<ActionType>(null);
  const onFetch = async (
    params: TradeReq & {
      pageSize: number;
      current: number;
    },
  ) => {
    const data = await getTradeOrderPage({
      ...params,
      orderStatus: props?.orderStatus ? props?.orderStatus : undefined,
      pageNo: params.current,
      pageSize: params.pageSize,
    });

    return {
      data: data.list,
      success: true,
      total: data.total,
    };
  };

  const tabelConfig = {};

  return (
    <EnhancedProTable<TradeOrderPageRespVO>
      ref={tableRef}
      columns={baseOrderColumns}
      request={onFetch}
      headerTitle="售后列表"
      showIndex={false}
      showSelection={false}
      search={props.search ? { defaultCollapsed: true } : false}
    />
  );
};

export default React.memo(OrderListItem);
