import React from 'react';
import { Tabs,Dropdown, Button,Menu,message } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { useDispatch,useSelector } from 'react-redux'
import { active, close, closeOther} from '../../store/reducers/tabPanes'
import './index.less'
import iconLt from '@images/lt.png';
import iconRt from '@images/rt.png';

const { TabPane } = Tabs;
const propTypes = {

}
const defaultProps = {};
function ATabs(){
    const panes =useSelector(state => {
        return state.tabPanes.panes
    });
    const dispatch = useDispatch();
    const activeTab = useSelector(state => {
        return state.tabPanes.activeTab
    });
    //切换tab
    function onChange(activeKey){
        dispatch(active(activeKey))
    }
    //关闭当前tab
    function onDelTab(activeKey){
        if(panes.length===1){
            message.warning("至少保留一个标签哦~",1);
            return;
        }
        const paneIndex = panes.findIndex((it)=>it.key===activeKey);
        dispatch(close({del:paneIndex,active:panes[1].key}))
    }
    //关闭其他tab
    function onDelOtherTab(activeKey){
        const paneIndex = panes.findIndex((it)=>it.key===activeKey);
        dispatch(closeOther({del:paneIndex}))
    }
    const menu = (
        <Menu>
            <Menu.Item key="1" onClick={()=>onDelTab(activeTab)}>
                关闭当前标签
            </Menu.Item>
            <Menu.Item key="2" onClick={()=>onDelOtherTab(activeTab)}>
                关闭其他标签
            </Menu.Item>
        </Menu>
    );
    return (
        <div className="tab-container">
            <span className='pre-tab'><img src={iconLt} alt="向左滑"/></span>
            <Tabs
                className='tab-cont'
                hideAdd
                onChange={onChange}
                onEdit={onDelTab}
                type="editable-card"
                activeKey={activeTab}
            >
                {panes.map(pane => (
                    <TabPane tab={pane.title} key={pane.key}>
                        {pane.content}
                    </TabPane>
                ))}
            </Tabs>
            <span className='next-tab'><img src={iconRt} alt="向右滑"/></span>
            <Dropdown className='tab-oper' overlay={menu}>
                <Button size='small'>
                    <DownOutlined />
                </Button>
            </Dropdown>
        </div>
    )
}

ATabs.propTypes = propTypes;
ATabs.defaultProps = defaultProps;
export default ATabs;