import { MyPageContainer } from '@/common';
import { MyModalPagination } from '@/common/components/MyModalPagination';
import { Apis } from '@/gen/Apis';
import { HomeFilled } from '@ant-design/icons';
import { ProCard } from '@ant-design/pro-components';
import { useNavigate } from '@umijs/max';
import { Empty, Space, Tabs, Tag } from 'antd';
import { useEffect, useState } from 'react';
import SearchInfo from './components/SearchInfo';

export default function Index({ title = '房屋账单' }) {
  const navigate = useNavigate();
  // const [selectedBuilding, setSelectedBuilding] =
  //   useState<SelectedBuilding | null>(null);
  const [items, setItems] = useState<any>([
    {
      key: '1',
      label: '全部房屋',
    },
  ]);
  const [params, setParams] = useState<any>({ page: 1 });
  const [getSummaryBillListData, setGetSummaryBillListData] = useState<any>({});

  const setPageStatistics = (res: any) => {
    setItems([
      {
        key: '1',
        label: '全部房屋',
      },
      {
        key: '2',
        label: `结清房屋数(${res?.['清欠房屋数']})`,
      },
      {
        key: '3',
        label: `欠费房屋数(${res?.['欠费房屋数']})`,
      },
    ]);
  };

  const getSummaryBillList = (data: any) => {
    Apis.Bill.HouseBills.SummaryBillList({ ...params, ...data }).then(
      (res: any) => {
        setParams({ ...params, ...data });
        setPageStatistics(res?.statistics || {});
        setGetSummaryBillListData(res);
      },
    );
  };

  useEffect(() => {
    getSummaryBillList({ page: 1 });
  }, []);

  return (
    <MyPageContainer
      title={title}
      enableTabs={true}
      tabKey="summary"
      tabLabel={title}
    >
      <div
        style={{
          display: 'flex',
          alignItems: 'start',
          justifyContent: 'space-between',
          gap: 15,
        }}
      >
        <Space direction="vertical" style={{ flex: 1 }}>
          <SearchInfo
            onChange={(values) => {
              setParams({
                asset_houses_id: values?.asset_houses_id || '',
                asset_projects_id: values?.asset_projects_id || '',
                asset_buildings_id: values?.asset_buildings_id || '',
                asset_units_id: values?.asset_units_id || '',
                page: 1,
              });
              getSummaryBillList({
                asset_houses_id: values?.asset_houses_id || '',
                asset_projects_id: values?.asset_projects_id || '',
                asset_buildings_id: values?.asset_buildings_id || '',
                asset_units_id: values?.asset_units_id || '',
                page: 1,
              });
            }}
          />
          <ProCard>
            <Tabs
              defaultActiveKey="1"
              items={items}
              onChange={(e) => {
                console.log(e);
                getSummaryBillList({
                  page: 1,
                  has_overdue: e === '3' ? true : e === '2' ? false : undefined,
                });
              }}
            />
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 15 }}>
              {getSummaryBillListData?.data?.length ? null : (
                <div
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    flex: 1,
                    justifyContent: 'center',
                    padding: '15px 0',
                  }}
                >
                  <Empty />
                </div>
              )}
              {getSummaryBillListData?.data?.map((res: any) => {
                return (
                  <div
                    key={`item_${res?.id}`}
                    style={{
                      width: '240px',
                      height: '120px',
                      backgroundColor: '#f8f8f8',
                      borderRadius: 5,
                      overflow: 'hidden',
                      cursor: 'pointer',
                    }}
                    onClick={() => {
                      navigate(`/bills/summary/show/${res?.asset_houses_id}`);
                    }}
                  >
                    <div
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        borderBottom: '1px solid #eee',
                        padding: '10px 14px 10px  15px',
                      }}
                    >
                      <HomeFilled />
                      <div>
                        {res.total_payable_sum - res.total_paid_sum > 0 ? (
                          <Tag color="red">欠费</Tag>
                        ) : (
                          <Tag color="green">清欠</Tag>
                        )}
                      </div>
                    </div>
                    <div style={{ padding: '0 15px' }}>
                      <div style={{ padding: '10px  0', fontWeight: 'bold' }}>
                        {res?.asset_house?.full_name}
                      </div>
                      {res.total_payable_sum - res.total_paid_sum ? (
                        <div style={{ color: '#f00' }}>
                          欠： ¥
                          {(res.total_payable_sum - res.total_paid_sum).toFixed(
                            2,
                          )}
                          元
                        </div>
                      ) : (
                        ''
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
            <div
              style={{
                display: 'flex',
                padding: '15px 0 0 0',
                justifyContent: 'flex-end',
              }}
            >
              <MyModalPagination
                {...{ setParams: getSummaryBillList }}
                meta={getSummaryBillListData?.meta}
              />
            </div>
          </ProCard>
        </Space>
      </div>
    </MyPageContainer>
  );
}
