import React, { useState, uesEffect } from 'react'
import { push } from 'react-router-redux';
import "./style.less"
import { Tabs } from 'antd';


const { TabPane } = Tabs;
const Header = (props) => {
    const { dispatch, tabChange, tabKey } = props
    // const [tab, setTad] = useState("base")
    const onClick = (tab) => {
        // setTad({ tab })
        tabChange(tab)
    }
    const dianji = () => {
        dispatch(push('/fillion/infor'))
    }
    return (
        <div style={{ position: "relative" }}>
            <img style={{ width: "100%", position: "absolute" }} src='/assets/images/quanju/beijingtou.png' />
            <div className={tabKey == "build" ? "tabKey-map" : "notabKey"} style={{ backgroundImage: "url(/assets/images/quanju/zuobeijing.png)", backgroundSize: "100% 100%" }} onClick={() => {
                onClick("build")
            }}><a>建设</a></div>
            <div className={tabKey == "guanli" ? "tabKey-map" : "notabKey"} style={{ left: "11.5%", backgroundImage: "url(/assets/images/quanju/zuobeijing.png)", backgroundSize: "100% 100%" }} onClick={() => {
                onClick("guanli")
            }}><a>管理</a></div>
            <div className={tabKey == "leadership" ? "tabKey-map" : "notabKey"} style={{ left: "23%", backgroundImage: "url(/assets/images/quanju/zuobeijing.png)", backgroundSize: "100% 100%" }} onClick={() => {
                onClick("leadership")
            }}><a>领导驾驶舱</a></div>
            <div className={tabKey == "leadership" ? "tabKey-map" : "notabKey"} style={{ left: "50%", transform: "translate(-50%, -50%)", width: "25%", minWidth: "420px", fontSize: "2.3vw", color: "#FFFFFF", fontFamily: "YouSheBiaoTiHei" }}>南昌县智慧交通监管系统</div>
            <div className={tabKey == "conserve" ? "tabKey-map" : "notabKey"} style={{ left: "65%", backgroundImage: "url(/assets/images/quanju/youbeijing.png)", backgroundSize: "100% 100%" }} onClick={() => {
                onClick("conserve")
            }}><a>养护</a></div>
            <div className={tabKey == "operation" ? "tabKey-map" : "notabKey"} style={{ left: "76%", backgroundImage: "url(/assets/images/quanju/youbeijing.png)", backgroundSize: "100% 100%" }} onClick={() => {
                onClick("operation")
            }}><a>运营</a></div>
            <div style={{ cursor: "pointer", color: "#DBFAFF", position: "absolute", left: "90%", top: "15px", fontSize: "0.6vw", width: "10%", textAlign: "center" }} onClick={() => dianji()}>南昌县交通运输局</div>
        </div>
    )
}
export default Header