import React, {useState, useEffect} from 'react';
import {TabBar} from 'antd-mobile'
import './index.less'
import axiosRequest from '../utils/request';

const Footer = (props) => {
    const [current, setCurrent] = useState();
    const [badge, setBadge] = useState()
    useEffect(() => {
        const keysArray = props.location.pathname.replace(`${props.match.path}/`, '').split("/");
        keysArray.length > 0 && setCurrent(keysArray[0]);
        getData()
    }, []);
    const getData = () => {
        axiosRequest({
            method: 'post',
            url: '/idtAppServiceV6//oApp/getUnDone',
        }).then(res => {
            setBadge(res.total)
        });
    }
    const tabClick = (key, path) => {
        setCurrent(key);
        props.history.push(path)
    };
    const tabItem = [
        {title: '待办', key: 'backlog', icon: '/img/footer-backlog.png', selectedIcon: '/img/footer-backlog-s.png', badge: badge, onPress: '/bord/backlog'},
        {title: '工作', key: 'work', icon: '/img/footer-work.png', selectedIcon: '/img/footer-work-s.png', badge: '', onPress: '/bord/work'},
        {title: '通讯录', key: 'addressList', icon: '/img/footer-communicate.png', selectedIcon: '/img/footer-communicate-s.png', badge: '', onPress: '/bord/addressList'},
        {title: '通知', key: 'notice', icon: '/img/footer-notice.png', selectedIcon: '/img/footer-notice-s.png', badge: badge, onPress: '/bord/notice'}
    ];
    return (
        <div id="footer" className="footer">
            <TabBar
                unselectedTintColor="#949494"
                tintColor="#2E67EA"
                barTintColor="white"
            >
                {tabItem.map(item => (
                    <TabBar.Item
                        key={item.key}
                        title={item.title}
                        icon={<img alt="" className="footer-tab-icon" src={item.icon}/>}
                        selectedIcon={ <img alt="" className="footer-tab-icon" src={item.selectedIcon}/>}
                        badge={item.badge || null}
                        onPress={() => tabClick(item.key, item.onPress)}
                        selected={current === item.key}
                    />
                ))}
            </TabBar>
        </div>
    );
};

export default Footer;
