import React, { useEffect, useState } from 'react';
import { Table, Tabs, message } from 'antd';
import { useIntl } from 'umi';
import { getAccessCategoryList, getCategoryLibraryList } from '../services';
const { TabPane } = Tabs;

const AccessCategoryTable = ({id}:{id:any}) => {
  const intl = useIntl();
  const columns = [
    {
      title: intl.formatMessage({id: 'component.globalModal.CategoryLibraryName'}),
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: intl.formatMessage({id: 'component.globalModal.periodOfValidity'}),
      dataIndex: 'termOfValidity',
      key: 'termOfValidity',
    },
    {
      title: intl.formatMessage({id: 'component.globalModal.ResponsibleDepartmentID'}),
      dataIndex: 'deptId',
      key: 'deptId',
    },
    {
      title: intl.formatMessage({id: 'component.globalModal.RegionalSelection'}),
      dataIndex: 'area',
      key: 'area',
    },
  ]

  //Tabs切换key
  const [activeKey, setActiveKey] = useState<'access' | 'category'>('access');
  //准入品类
  const [accessData, setAccessData] = useState<any[]>([]);
  //分页
  const [accessPagination, setAccessPagination] = useState({ current: 1, pageSize: 10, total: 0 });
  //加载
  const [accessLoading, setAccessLoading] = useState(false);
  //品类库
  const [categoryData, setCategoryData] = useState<any[]>([]);
   //分页
  const [categoryPagination, setCategoryPagination] = useState({ current: 1, pageSize: 10, total: 0 });
   //加载
  const [categoryLoading, setCategoryLoading] = useState(false);
  // 准入品类
  const fetchAccessData = async (current: number, pageSize: number) => {
    setAccessLoading(true);
    try {
      const { code, data, total } = await getAccessCategoryList({ pageNum: current, pageSize });
      if (code === 200) {
        setAccessData(data);
        setAccessPagination({ current, pageSize, total });
      }
    } catch {
      message.error(intl.formatMessage({id:'component.globalModal.FailedToObtainAdmissionCategory'}));

    } finally {
      setAccessLoading(false);
    }
  };
  //品类库
  const fetchCategoryData = async (current: number, pageSize: number) => {
    setCategoryLoading(true);
    try {
      const { code, data, total }  = await getCategoryLibraryList({ pageNum: current, pageSize });
      if (code === 200) {
        setCategoryData(data);
        setCategoryPagination({ current, pageSize, total });
      }
    } catch {
      message.error(intl.formatMessage({id:'component.globalModal.FailedToObtainCategoryLibrary'}));
    } finally {
      setCategoryLoading(false);
    }
  };
  //初始化
  useEffect(() => {
    if (activeKey === 'access') {
      fetchAccessData(accessPagination.current, accessPagination.pageSize);
    } else {
      fetchCategoryData(categoryPagination.current, categoryPagination.pageSize);
    }
  }, [activeKey, id])
  return (
    <Tabs  activeKey={activeKey} onChange={(key) => setActiveKey(key as 'access' | 'category')} >
      <TabPane tab={intl.formatMessage({id: 'component.globalModal.AdmissionCategory'})} key="access">
        <Table
          dataSource={accessData}
          columns={columns}
          rowKey="code"
          loading={accessLoading}
          pagination={{
            current: accessPagination.current,
            pageSize: accessPagination.pageSize,
            total: accessPagination.total,
            showSizeChanger: true,
            onChange: (page, pageSize = 10) => fetchAccessData(page, pageSize),
          }}
        />
      </TabPane>

      <TabPane tab={intl.formatMessage({id: 'component.globalModal.CategoryLibrary'})} key="category">
        <Table
          dataSource={categoryData}
          columns={columns}
          rowKey="code"
          loading={categoryLoading}
          pagination={{
            current: categoryPagination.current,
            pageSize: categoryPagination.pageSize,
            total: categoryPagination.total,
            showSizeChanger: true,
            onChange: (page, pageSize = 10) => fetchCategoryData(page, pageSize),
          }}
        />
      </TabPane>
    </Tabs>
  );
};

export default AccessCategoryTable;
