import {
  getOrderErpOrderZoNingSelectAll,
  postOrderErpOrderZoNingSelectSaleUserByProvince,
  postServiceOrderQueryReportFormsInformation,
  postServiceOrderQuerySalesCode,
} from '@/services';
import { enumToSelect } from '@/utils';
import {
  ProCard,
  ProForm,
  ProFormCheckbox,
  ProFormDigit,
  ProFormSelect,
  QueryFilter,
} from '@ant-design/pro-components';
import { Form, Space, Spin } from 'antd';
import { useEffect, useState } from 'react';
import { PRODUCT_BELONG_DEPARTMENT_OPTIONS } from '../Order/constant';
import OrderDualAxes from './components/OrderDualAxes';
import OrderStatisticCard from './components/OrderStatisticCard';
import './index.less';
const OrderReportPage = () => {
  const [salesCodeOptions, setSalesCodeOptions] = useState([]);
  const getCurrentMonth = () => {
    const month = new Date().getMonth(); // Returns a 0-based month (0-11)
    return month + 1; // To make it 1-based (1-12)
  };
  const month = getCurrentMonth();
  const [selectedYear, setSelectedYear] = useState('2025');
  const [selectedMonth, setSelectedMonth] = useState(month);
  /**
   * 获取销售代码枚举，在复制和编辑的时候判断是否为旧的代码
   */
  const getSalesCodeOptions = async () => {
    const res = await postServiceOrderQuerySalesCode();
    let options = res.data?.map((item) => {
      return {
        label: item.userName,
        value: item.userName,
        number: item.number,
      };
    });
    setSalesCodeOptions(options);
  };

  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) => {
  //   if (key === '本月') {
  //     setStatisticsMethod('MONTH_STATISTICS');
  //   }

  //   if (key === '上月') {
  //     setStatisticsMethod('LAST_MONTH_STATISTICS');
  //   }

  //   if (key === '本年') {
  //     setStatisticsMethod('YEAR_STATISTICS');
  //   }
  // };
  const [yearOptions] = useState([
    { value: '2025', label: '2025' },
    { value: '2024', label: '2024' },
    { value: '2023', label: '2023' },
  ]);

  const [monthOptions] = useState([
    { value: '0', label: '全部' },
    { value: '1', label: '1' },
    { value: '2', label: '2' },
    { value: '3', label: '3' },
    { value: '4', label: '4' },
    { value: '5', label: '5' },
    { value: '6', label: '6' },
    { value: '7', label: '7' },
    { value: '8', label: '8' },
    { value: '9', label: '9' },
    { value: '10', label: '10' },
    { value: '11', label: '11' },
    { value: '12', label: '12' },
  ]);
  /**
   * 加载页面数据
   */
  const loadData = async () => {
    if (selectedMonth === '0') {
      setStatisticsMethod('YEAR_STATISTICS');
    } else {
      setStatisticsMethod('MONTH_STATISTICS');
    }
    setLoading(true);
    let body = {
      statisticsMethod: '',
      // salesCode: [null],
      productBelongBusiness: form.getFieldValue('productBelongBusiness'),
      maxAccount: form.getFieldValue('maxAccount'),
      includeExperimentalEquipment: form.getFieldValue(
        'includeExperimentalEquipment',
      ),
      // beginTime:"",
      // endTime:""
    };
    // console.log(form.getFieldValue('zoning').value);

    // let res = await getOrderErpOrderZoNingSelectUserAll();
    // if (res && res.data) {
    //   let safeUserList = [];
    //   res.data.forEach((element) => {
    //     safeUserList.push(element.userName);
    //   });
    //   body = { ...body, salesCode: safeUserList };
    // }
    if (form.getFieldValue('salesCode')) {
      body = { ...body, salesCode: [form.getFieldValue('salesCode')] };
    }
    if (form.getFieldValue('zoning')) {
      if (
        form.getFieldValue('zoning').value !== '' ||
        form.getFieldValue('zoning').value !== null ||
        form.getFieldValue('zoning').value !== undefined
      ) {
        let res = await postOrderErpOrderZoNingSelectSaleUserByProvince({
          data: form.getFieldValue('zoning').value,
        });
        if (res && res.data) {
          body = { ...body, salesCode: res.data };
        }
      }
    }

    if (form.getFieldValue('zoning')) {
    }

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

    setLoading(false);
  };
  const handleXValueClick = async (xValue, type) => {
    try {
      const [yearValue, monthValue] = xValue.split('-');
      if (type?.includes('年')) {
        const adjustedYearValue = (parseInt(yearValue, 10) - 1).toString();
        const adjustedMonthValue = monthValue.startsWith('0')
          ? monthValue.slice(1)
          : monthValue;
        // 更新年份和月份选项的选中值
        setSelectedYear(adjustedYearValue);
        setSelectedMonth(adjustedMonthValue);
      } else {
        // 更新年份和月份选项的选中值
        const adjustedMonthValue = monthValue.startsWith('0')
          ? monthValue.slice(1)
          : monthValue;
        setSelectedYear(yearValue);
        setSelectedMonth(adjustedMonthValue);
      }
    } catch (error) {
      console.error('Failed to fetch updated data:', error);
    }
  };

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

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

  // const items: TabsProps['items'] = [
  //   {
  //     key: 'MONTH_STATISTICS',
  //     label: '本月统计',
  //     children: '',
  //   },
  //   {
  //     key: 'YEAR_STATISTICS',
  //     label: '本年统计',
  //     children: '',
  //   },
  // ];
  return (
    <div>
      <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"
              width="lg"
              showSearch
              label="销售代表"
              placeholder="请选择销售代表"
              options={salesCodeOptions}
            />
            <ProFormSelect
              key="productBelongBusiness"
              placeholder="请输入所属事业部"
              name="productBelongBusiness"
              label="所属事业部"
              options={enumToSelect(PRODUCT_BELONG_DEPARTMENT_OPTIONS)}
              onChange={(val: any) => {
                if (val === 'EXPERIMENTAL_EQUIPMENT') {
                  //勾选上包含设备事业部
                  form.setFieldValue('includeExperimentalEquipment', true);
                }
              }}
            />
            <ProFormDigit label="排除大订单金额" name="maxAccount" min={0} />

            <ProFormCheckbox
              key="includeExperimentalEquipment"
              name="includeExperimentalEquipment"
              initialValue={false}
              label="包含实验设备事业部汇总统计"
            />

            <ProFormSelect
              key="zoning"
              name="zoning"
              width="md"
              label="所属地区"
              fieldProps={{
                labelInValue: true,
              }}
              placeholder="请选择"
              request={async () => {
                let zoningOptions = [];
                let res = await getOrderErpOrderZoNingSelectAll();
                if (res && res.data) {
                  console.log(res.data);

                  zoningOptions = res.data.map((item) => ({
                    value: item.zoning,
                    label: item.zoning,
                  }));
                }
                return zoningOptions;
              }}
            />
          </QueryFilter>
        </ProCard>

        <ProCard
          id="order-dual-axes-card"
          title="汇总统计"
          tooltip="下方汇总统计未统计实验设备事业部数据，如需要请勾选包含实验设备事业部汇总统计"
          extra={
            <div>
              <div>
                <ProForm.Group>
                  <ProFormSelect
                    name="selectedMonth"
                    key="selectedMonth"
                    width="100px"
                    // actionRef={mainTableRef}
                    // formRef={mainTableFormRef}
                    value={selectedMonth}
                    showSearch
                    placeholder="全部"
                    options={monthOptions}
                    onChange={(value) => {
                      const newValue = value === undefined ? '0' : value;
                      setSelectedMonth(newValue);
                    }}
                  />
                  <ProFormSelect
                    name="selectedYear"
                    key="selectedYear"
                    width="100px"
                    // actionRef={mainTableRef}
                    // formRef={mainTableFormRef}
                    value={selectedYear}
                    showSearch
                    placeholder="2025"
                    options={yearOptions}
                    onChange={(value) => {
                      const newValue = value === undefined ? '2025' : value;
                      setSelectedYear(newValue); // 更新选中值
                    }}
                  />
                </ProForm.Group>
              </div>
            </div>
          }
          bordered
        >
          <Spin spinning={loading}>
            <OrderDualAxes
              data={statisticData}
              statisticMethod={selectedMonth}
              onXValueClick={handleXValueClick}
            />
          </Spin>
        </ProCard>
      </Space>
    </div>
  );
};

export default OrderReportPage;