import { MyPageContainer } from '@/common';
import { Apis } from '@/gen/Apis';
import { useNavigate, useSearchParams } from '@umijs/max';
import { Space, Tabs } from 'antd';
import { useEffect, useState } from 'react';
import MyDepositTable from '../components/Deposit';
import MyInfo from '../components/info';
import MyWorkerTable from '../components/WorkerTable';

export default function Index({ title = '装修申请详情' }) {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const id = searchParams.get('id') ?? 0;
  const [data, setData] = useState<any>({});
  const [loading, setLoading] = useState(true);

  const loadData = () => {
    setLoading(true);
    Apis.Renovation.RenovationApplies.Show({ id: Number(id) })
      .then((res) => {
        setData(res?.data || {});
      })
      .finally(() => {
        setLoading(false);
      });
  };

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

  const items = [
    {
      key: 'MyInfo',
      label: '装修申请详情',
      children: (
        <MyInfo
          item={{
            ...data,
            loading,
          }}
        />
      ),
    },
    {
      key: 'MyWorkerTable',
      label: '装修工人',
      children: (
        <MyWorkerTable
          item={{
            ...data,
            loading,
          }}
        />
      ),
    },
    {
      key: 'MyDepositTable',
      label: '装修押金',
      children: (
        <MyDepositTable
          item={{
            ...data,
            loading,
          }}
        />
      ),
    },
  ];

  return (
    <MyPageContainer
      title={
        <Space
          style={{ cursor: 'pointer' }}
          onClick={() => {
            navigate(-1);
          }}
        >
          {/* <LeftCircleOutlined size={34} /> */}
          {title}
        </Space>
      }
      enableTabs={false}
      tabKey="renovation-application-detail"
      tabLabel={title}
    >
      <Tabs type="card" items={items} />
    </MyPageContainer>
  );
}
