/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable react/jsx-key */
import React, { useMemo } from 'react';
import { Card, Tabs } from 'antd';
import Mtable from './mtable';
import PremButton from '../PremButton'; //权限判断fn
import { ExportOutlined } from '@ant-design/icons';
import { useMatch } from '@umijs/max';

function isString(obj) {
  return obj.constructor === String ? true : false;
}

export default (props) => {
  const actionbtn = {
    add: <PremButton {...props?.addconfig}>新增</PremButton>,
    export: (
      <PremButton
        {...props?.exportconfig}
        btn={{
          ...props.exportconfig,
          icon: <ExportOutlined />,
        }}
      >
        导出
      </PremButton>
    ),
  };

  //右上角 pageextra 类型 1.reactDom 2.string 以逗号隔开 为none时不显示
  const renderextra = () => {
    if (props.pageextra && !isString(props.pageextra)) {
      if (typeof props?.pageextra == 'function') {
        return props.pageextra?.();
      } else {
        return props.pageextra;
      }
    } else if (props.pageextra === 'none') {
      return <div style={{ height: 28, width: 64 }} />;
    } else if (props.pageextra) {
      let strarr = props.pageextra ? props.pageextra.split(',') : ['add'];
      return strarr.map((it, i) => {
        return (
          <div key={i} style={{ marginRight: i == strarr.length - 1 ? 0 : 6 }}>
            {actionbtn[it]}
          </div>
        );
      });
    }
  };
  const match = useMatch({ path: '/welcome' });
  const items = useMemo(() => {
    if (props.nocardtab && props.tabList) {
      return props.tabList.map((it) => {
        return {
          label: it.tab,
          key: it.key,
          children: (
            <>
              <div style={{ display: 'flex', width: '100%' }}>
                {(props.childposition == 'left' || !props.childposition) && props.children}
                <div style={{ flex: 1, overflow: 'hidden', paddingLeft: `${props.childposition == 'left' ? '15px' : '0'}` }}>
                  {props.childposition == 'top' && props.children}
                  <Mtable {...props} activeTabKey={null} />
                </div>
                {(props.childposition == 'right' || !props.childposition) && props.children}
              </div>
              {props.childposition == 'bottom' && props.children}
            </>
          ),
        };
      });
    }
  }, [props.tabList]);
  return (
    <div className="diycard">
      {props.withCard === false ? (
        <>
          <div style={{ display: 'flex', width: '100%' }}>
            {(props.childposition == 'left' || !props.childposition) && props.children}
            <div style={{ flex: 1, width: '100%' }}>
              {props.childposition == 'top' && props.children}
              <Mtable {...props} />
            </div>
            {(props.childposition == 'right' || !props.childposition) && props.children}
          </div>
          {props.childposition == 'bottom' && props.children}
        </>
      ) : !props.nocardtab ? (
        <Card
          bordered={props.bordered === false ? false : true}
          style={{ height: '100%' }}
          title={props.pagetitle}
          extra={<div className="center">{renderextra()}</div>}
          activeTabKey={props.activeTabKey}
          tabList={props.tabList}
          onTabChange={props.onTabChange}
        >
          <div style={{ display: 'flex', width: '100%' }}>
            {(props.childposition == 'left' || !props.childposition) && props.children}
            <div style={{ flex: 1, overflow: 'hidden', paddingLeft: `${props.childposition == 'left' ? '15px' : '0'}` }}>
              {props.childposition == 'top' && props.children}
              <Mtable {...props} />
            </div>
            {(props.childposition == 'right' || !props.childposition) && props.children}
          </div>
          {props.childposition == 'bottom' && props.children}
        </Card>
      ) : (
            <div className="tabsTable">
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '16px 20px 0' }}>
                <div style={{ fontSize: 16, fontWeight: 500 }}>{props.pagetitle}</div>
                <div className="center">{renderextra()}</div>
              </div>
              <Tabs items={items} onChange={props.onTabChange} activeTabKey={props.activeTabKey} />
            </div>
          )}
    </div>
  );
};