import { postServiceOrderQueryReportFormsInformation } from '@/services';
import { enumToSelect } from '@/utils';
import { getUserInfo } from '@/utils/user';
import { EllipsisOutlined } from '@ant-design/icons';
import {
  PageContainer,
  ProCard,
  ProFormDigit,
  ProFormSelect,
  QueryFilter,
} from '@ant-design/pro-components';
import { history } from '@umijs/max';
import {
  Avatar,
  Button,
  Dropdown,
  Flex,
  Form,
  Space,
  Spin,
  Tabs,
  TabsProps,
  Tag,
} from 'antd';
import { useEffect, useState } from 'react';
import {
  PRODUCT_BELONG_DEPARTMENT_OPTIONS,
  SALES_CODE_OPTIONS,
} from '../Order/constant';
import OrderDualAxes from './components/OrderDualAxes';
import OrderStatisticCard from './components/OrderStatisticCard';
import './index.less';
const userInfo = getUserInfo();

const OrderReportPage = () => {
  const [form] = Form.useForm<{
    salesCode: '';
    productBelongBusiness: '';
    dateRange: '';
  }>();
  const [statisticData, setStatisticData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [statisticsMethod, setStatisticsMethod] = useState('MONTH_STATISTICS');
  const onChange = (key: string) => {
    setStatisticsMethod(key);
  };

  /**
   * 加载页面数据
   */
  const loadData = async () => {
    setLoading(true);
    let body = {
      statisticsMethod: '',
      salesCode: form.getFieldValue('salesCode'),
      productBelongBusiness: form.getFieldValue('productBelongBusiness'),
      maxAccount: form.getFieldValue('maxAccount'),
      // beginTime:"",
      // endTime:""
    };

    // if(form.getFieldValue("dateRange")!==undefined){
    //   body.beginTime=formatDate(form.getFieldValue("dateRange")[0]),
    //   body.endTime=formatDate(form.getFieldValue("dateRange")[1])
    // }
    body.statisticsMethod = statisticsMethod;
    const { data } = await postServiceOrderQueryReportFormsInformation({
      data: body,
    });
    if (data !== undefined) {
      setStatisticData(data);
    }

    setLoading(false);
  };

  useEffect(() => {
    loadData();
  }, [statisticsMethod]);

  useEffect(() => {
    loadData();
  }, []);

  const items: TabsProps['items'] = [
    {
      key: 'MONTH_STATISTICS',
      label: '本月统计',
      children: '',
    },
    {
      key: 'YEAR_STATISTICS',
      label: '本年统计',
      children: '',
    },
  ];
  return (
    <PageContainer
      header={{
        title: '订单汇总',
        extra: [
          <Avatar key="0" style={{ verticalAlign: 'middle' }} size="large">
            {userInfo?.username}
          </Avatar>,
          <Tag key="nickName">{userInfo?.nickName}</Tag>,
          <Dropdown
            key="dropdown"
            trigger={['click']}
            menu={{
              items: [
                {
                  label: '退出登录',
                  key: '1',
                  onClick: () => {
                    localStorage.removeItem('token');
                    history.push('/login');
                  },
                },
                // {
                //   label: '修改密码',
                //   key: '2',
                // },
              ],
            }}
          >
            <Button key="4" style={{ padding: '0 8px' }}>
              <EllipsisOutlined />
            </Button>
          </Dropdown>,
        ],
      }}
    >
      <Space direction="vertical" size="middle" className="flex">
        <Spin spinning={loading}>
          <OrderStatisticCard
            data={statisticData}
            statisticsMethod={statisticsMethod}
            reFreshData={loadData}
          />
        </Spin>

        <ProCard tooltip="这是提示" bordered>
          <QueryFilter
            split
            className="!p-0 order-statistic-search"
            labelWidth="auto"
            defaultCollapsed={false}
            form={form}
            onFinish={async () => {
              loadData();
              return true;
            }}
          >
            <ProFormSelect
              name="salesCode"
              key="salesCode"
              showSearch
              label="销售代表"
              placeholder="请输入销售代表"
              options={SALES_CODE_OPTIONS}
            />
            <ProFormSelect
              key="productBelongBusiness"
              placeholder="请输入所属事业部"
              name="productBelongBusiness"
              label="所属事业部"
              options={enumToSelect(PRODUCT_BELONG_DEPARTMENT_OPTIONS)}
            />
            <ProFormDigit label="排除大订单金额" name="maxAccount" min={0} />

            {/* <ProFormDateRangePicker
              key="dateRange"
              name="dateRange"
              label="时间"
            /> */}
          </QueryFilter>
        </ProCard>

        <ProCard
          id="order-dual-axes-card"
          title="统计图表"
          extra={
            <Flex>
              <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
            </Flex>
          }
          bordered
        >
          <Spin spinning={loading}>
            <OrderDualAxes
              data={statisticData}
              statisticMethod={statisticsMethod}
            />
          </Spin>
        </ProCard>
      </Space>
    </PageContainer>
  );
};

export default OrderReportPage;