import React, { useState, useEffect } from 'react';
import { Tabs } from 'antd';
import MonthAudit from './MonthAudit';
import UrgentAudit from './UrgentAudit';

const { TabPane } = Tabs;

const Index = (props) => {
  const {tabList, auditCount, update} = props
  const [tab, setTab] = useState('month');

  const tabMove = (val) => {
    setTab(val);
    update?.()
  };

  useEffect(() => {
    if (tabList === 'month' || tabList === 'urgent') setTab(tabList)
  }, [tabList])

  return (
    <div>
      <div style={{marginTop:10, position: 'relative'}}>
        <Tabs activeKey={tab} onChange={tabMove} style={{marginBottom: 15}}>
          <TabPane tab={
            <div className="pos_aline">月度请购
              {auditCount?.purchaseSummaryNumber > 0 && (
                <span className="audit_count">{auditCount?.purchaseSummaryNumber}</span>
              )}
            </div>
          } key="month"/>
          <TabPane tab={(
            <div className="pos_aline">紧急请购
              {auditCount?.purchaseUrgentNumber > 0 && (
                <span className="audit_count">{auditCount?.purchaseUrgentNumber || 0}</span>
              )}
            </div>
          )} key="urgent"/>
        </Tabs>
      </div>
      {{
        "month": <MonthAudit/>,
        "urgent": <UrgentAudit/>
      }[tab]}
    </div>
  );
};

export default Index;