import { Button, Tabs } from "antd";
import "./index.less";
import { ClearOutlined } from '@ant-design/icons';
import React from "react";

const { TabPane } = Tabs;

export interface Pane{
    title: string,             //标签显示达到内容
    uuid: string,              //标签
    closable: boolean,
}

interface IProps {
    panes: Pane[];            //展示的标签数组
    selectedKey?: string;
    onChange: (key) => void;  //切换标签时的回调函数
    onClose: (key) => void;   //关闭标签时的回调函数
    onCloseAll: () => void;   //关闭所有标签时的回调函数
}

export default function ClosableTabs(props: IProps){

    return (
        <div className="tn-common-container tn-common">
            <Tabs
            className="tn-common-closable-tabs"
            type="editable-card"
            activeKey={props.selectedKey ? props.selectedKey : "1"}
            hideAdd
            onChange={props.onChange}
            onEdit={props.onClose}
            tabBarExtraContent={(
                <Button type="link" onClick={props.onCloseAll} icon={<ClearOutlined />}>全部关闭</Button>
            )}
            >
                {props.panes.map(pane => (
                    <TabPane
                        tab={pane.title}
                        key={pane.uuid}
                        closable={pane.closable} />
                ))}
            </Tabs>
        </div>
    )
}