import React, { useState, useEffect } from 'react';
import { useSearchParams } from '@umijs/max';
import { Tabs, Card } from 'antd';
import { PageContainer } from '@ant-design/pro-components';
import { getGuaranteeTask } from '@/services/api/guaranteeTask';
import BasicForm from './BasicForm';
import DishList from './DishList';

export default (props) => {
  const [activeTabKey, setActiveTabKey] = useState('item-1');
  const [loading, setLoading] = useState(false);
  const [dataSource, setDataSource] = useState();
  const [searchParams] = useSearchParams();
  const id = searchParams.get('id');

  const tabList = [
    { tab: '基本情况', key: 'item-1', }, // 务必填写 key
    { tab: '军供菜单', key: 'item-2', },
  ];

  useEffect(() => {
    if (id) {
      setLoading(true);
      getGuaranteeTask(id).then(res => {
        setLoading(false);
        setDataSource(res);
      }).catch(() => {
        setLoading(false);
      });
    }
  }, [id]);

  return (
    <PageContainer>
      <Card
        style={{ width: '100%' }}
        loading={loading}
        tabList={tabList}
        activeTabKey={activeTabKey}
        onTabChange={setActiveTabKey}>

        {
          activeTabKey === 'item-1' && <BasicForm dataSource={dataSource} setDataSource={setDataSource} />
        }

        {
          activeTabKey === 'item-2' && <DishList dataSource={dataSource} setDataSource={setDataSource} />
        }
      </Card>
    </PageContainer>
  )
}