'use strict'
import React, { useState, useEffect, useMemo } from 'react'
import { Menu } from 'antd'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import styles from './style.css'
import { setCurrentTab } from '$utils/someStores'
import { WEATHERMARGIN, ICONSMAP } from '../../constants/weather'
import { RouteRequest } from '@peace/utils'
import moment from 'moment'
import ShowTime from './showTime'
import { MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined, LogoutOutlined } from '@ant-design/icons'

const Header = props => {
    const { dispatch, history, user, pathname, actions, clientWidth=100, toggleCollapsed, globalTab, tabChange } = props
    const [tabs, setTabs] = useState({
        patrolManage: [
            { name: '巡检管理', value: 'manage' },
            { name: '巡检项', value: 'item' },
            { name: '巡检日历', value: 'calendar' },
            { name: '巡检报告', value: 'report' },
        ],
        deviceManageTabs: [
            { name: '设备统计', value: 'statistics' },
            { name: '设备台账', value: 'list' },
        ],
    })
    const [patrolManageVisible, setPatrolManageVisible] = useState(false)
    const [deviceManageTabsVisible, setDeviceManageTabsVisible] = useState(false)
    const [currentSubMenuTab, setCurrentSubMenuTab] = useState('')
    const [tab, setTab] = useState('leader')
    const [projectName, setProjectName ]= useState('')
    const [weather, setWeather] = useState([])
    let headerTitleStyle = {
        position: 'absolute',
        left: '3.125rem',
        top: '.125rem',
        fontSize: '1.875rem',
        color: ' #FFFFFF',
        fontWeight: 600,
        fontFamily: 'PangMenZhengDao',
        letterSpacing: '.5231rem',
        width:'39rem'
    }
    let headerTabStyle = {
        width: '4.375rem',
        height: '1.125rem',
        fontFamily: 'PangMenZhengDao',
        fontSize: '1.125rem',
        color: '#CCE6FF',
        letterSpacing: '.0231rem'
    }


    useEffect(() => {
        queryWeather()
        const projectName = JSON.parse(sessionStorage.getItem('user')).projectName
        setProjectName(projectName)
        const timeUpdate = setInterval(() => {
            queryWeather()
        }, WEATHERMARGIN)
        return () => {
            clearInterval(timeUpdate)
        }

    }, [])

    const queryWeather = () => {
        RouteRequest.get(`/query/weather/3d?location=101240101`).then(res => {
            if (res?.daily?.length === 3) {
                setWeather(res.daily)
            }
        })
    }

    const iconSrc = useMemo(() => {
        if (weather.length === 3) {
            const icon = [ICONSMAP[weather[0].textDay], ICONSMAP[weather[1].textDay], ICONSMAP[weather[2].textDay]]
            return icon
        }
        return []
    }, [weather])
    const handelClick = item => {
        if (item.key == 'logout') {
            dispatch(actions.auth.logout(user))
            dispatch({ type: 'CLEAR_GLOBAL_SITE_LIST' }) //清空用户关注工地列表
            history.push(`/signin?pcode=${user.pcode}`)
        }
    }
    const onClick1 = tab => {
        setTab(tab)
        if (tab == 'inspection') {
            setPatrolManageVisible(true)
            setDeviceManageTabsVisible(false)
        } else if (tab == 'device') {
            setDeviceManageTabsVisible(true)
            setPatrolManageVisible(false)
        } else {
            setPatrolManageVisible(false)
            setDeviceManageTabsVisible(false)
            setCurrentSubMenuTab('')
            // dispatch({ type: 'TAB-CHANGE', data: tab })
        }
        tabChange(tab)
    }

    
    return (
        <div className={styles.header} >
            <div className={styles['header-fold']}>
                {/* <img src='/assets/images/logo.svg' style={{ margin: '-14px 12px 0 0', height: 24 }} /> */}
                <div className={styles['header-title']} style={{}}>
                    <span style={headerTitleStyle}>{projectName}</span>
                </div>
            </div>
            <div
                style={{
                    color: '#FFFFFF',
                    fontSize: '1rem',
                    fontWeight: 400,
                    position: 'absolute',
                    left: '47.25rem',
                    top: '.4375rem',
                }}>
                <a
                    onClick={() => {
                        onClick1('leader')
                    }}
                    style={{
                        ...headerTabStyle,
                        // color: tab == 'leader' ? '#E9CF14' : '#FFFFFF',
                        // fontWeight: tab == 'leader' ? 500 : 400,
                        position: 'relative',
                        marginRight: '1.375rem',
                    }}>
                    {/* <img style={{ marginRight: 4, display: tab == 'leader' ? 'inline-block' : 'none' }} src="/assets/bigScreen/left.png" /> */}
                    领导驾驶舱
                    {/* <img style={{ marginLeft: 4, display: tab == 'leader' ? 'inline-block' : 'none' }} src="/assets/bigScreen/right.png" /> */}
                    <img
                        style={{width:'8.3125rem',height:'5.625rem', position: 'absolute', left: '-1.1875rem', top: '-1.5625rem', display: tab == 'leader' ? 'inline-block' : 'none' }}
                        src='/assets/bigScreen/selected-btn.png'
                    />
                </a>
                <a
                    onClick={() => {
                        onClick1('run')
                    }}
                    style={{
                        ...headerTabStyle,
                        // color: tab == 'run' ? '#E9CF14' : '#FFFFFF',
                        position: 'relative', marginRight: '1.375rem'
                    }}>
                    {/* <img style={{ marginRight: 4, display: tab == 'run' ? 'inline-block' : 'none' }} src="/assets/bigscreen/left.png" /> */}
                    运行监控
                    {/* <img style={{ marginLeft: 4, display: tab == 'run' ? 'inline-block' : 'none' }} src="/assets/bigscreen/right.png" /> */}
                    <img
                        style={{width:'8.3125rem',height:'5.625rem', position: 'absolute', left: '-1.75rem', top: '-1.5625rem', display: tab == 'run' ? 'inline-block' : 'none' }}
                        src='/assets/bigScreen/selected-btn.png'
                    />
                </a>
                <a
                    onClick={() => {
                        onClick1('error')
                    }}
                    style={{
                        ...headerTabStyle,
                        // color: tab == 'error' ? '#E9CF14' : '#FFFFFF',
                        position: 'relative', marginRight: '1.375rem'
                    }}>
                    {/* <img style={{ marginRight: 4, display: tab == 'error' ? 'inline-block' : 'none' }} src="/assets/bigscreen/left.png" /> */}
                    故障管理
                    {/* <img style={{ marginLeft: 4, display: tab == 'error' ? 'inline-block' : 'none' }} src="/assets/bigscreen/right.png" /> */}
                    <img
                    
                        style={{ width:'8.3125rem',height:'5.625rem',position: 'absolute', left: '-1.75rem', top: '-1.5625rem', display: tab == 'error' ? 'inline-block' : 'none' }}
                        src='/assets/bigScreen/selected-btn.png'
                    />
                </a>
                <a
                    onClick={() => {
                        onClick1('inspection')
                    }}
                    style={{ 
                        ...headerTabStyle,
                        // color: tab == 'inspection' ? '#E9CF14' : '#FFFFFF',
                         position: 'relative', marginRight: '1.375rem' }}>
                    {/* <img style={{ marginRight: 4, display: tab == 'inspection' ? 'inline-block' : 'none' }} src="/assets/bigscreen/left.png" /> */}
                    巡检管理
                    {/* <img style={{ marginLeft: 4, display: tab == 'inspection' ? 'inline-block' : 'none' }} src="/assets/bigscreen/right.png" /> */}
                    <img
                        style={{
                            width:'8.3125rem',height:'5.625rem',
                            position: 'absolute',
                            left: '-1.75rem', top: '-1.5625rem',
                            display: tab == 'inspection' ? 'inline-block' : 'none',
                        }}
                        src='/assets/bigScreen/selected-btn.png'
                    />
                </a>
                <a
                    onClick={() => {
                        onClick1('aiot')
                    }}
                    style={{ 
                        ...headerTabStyle,

                        // color: tab == 'aiot' ? '#E9CF14' : '#FFFFFF',
                         position: 'relative',marginRight: '1.375rem' }}>
                    {/* <img style={{ marginRight: 4, display: tab == 'aiot' ? 'inline-block' : 'none' }} src="/assets/bigscreen/left.png" /> */}
                    AIOT运维
                    {/* <img style={{ marginLeft: 4, display: tab == 'aiot' ? 'inline-block' : 'none' }} src="/assets/bigscreen/right.png" /> */}
                    <img
                        style={{width:'8.3125rem',height:'5.625rem', position: 'absolute', left: '-1.75rem', top: '-1.5625rem', display: tab == 'aiot' ? 'inline-block' : 'none' }}
                        src='/assets/bigScreen/selected-btn.png'
                    />
                </a>
                <a
                    onClick={() => {
                        onClick1('device')
                    }}
                    style={{ 
                        ...headerTabStyle,
                        // color: tab == 'device' ? '#E9CF14' : '#FFFFFF',
                         position: 'relative', marginRight: '1.375rem' }}>
                    {/* <img style={{ marginRight: 4, display: tab == 'device' ? 'inline-block' : 'none' }} src="/assets/bigscreen/left.png" /> */}
                    设备管理
                    {/* <img style={{ marginLeft: 4, display: tab == 'device' ? 'inline-block' : 'none' }} src="/assets/bigscreen/right.png" /> */}
                    <img
                        style={{width:'8.3125rem',height:'5.625rem', position: 'absolute',left: '-1.75rem', top: '-1.5625rem', display: tab == 'device' ? 'inline-block' : 'none' }}
                        src='/assets/bigScreen/selected-btn.png'
                    />
                </a>
                <a
                    onClick={() => {
                        onClick1('expert')
                    }}
                    style={{ 
                        // color: tab == 'expert' ? '#E9CF14' : '#FFFFFF', 
                        ...headerTabStyle,
                        position: 'relative', marginRight: '1.375rem' }}>
                    {/* <img style={{ marginRight: 4, display: tab == 'expert' ? 'inline-block' : 'none' }} src="/assets/bigscreen/left.png" /> */}
                    运维专家
                    {/* <img style={{ marginLeft: 4, display: tab == 'expert' ? 'inline-block' : 'none' }} src="/assets/bigscreen/right.png" /> */}
                    <img
                        style={{width:'8.3125rem',height:'5.625rem', position: 'absolute', left: '-1.75rem', top: '-1.5625rem', display: tab == 'expert' ? 'inline-block' : 'none' }}
                        src='/assets/bigScreen/selected-btn.png'
                    />
                </a>
                <a
                    onClick={() => {
                        onClick1('info')
                    }}
                    style={{ 
                        ...headerTabStyle,
                        // color: tab == 'info' ? '#E9CF14' : '#FFFFFF',
                         position: 'relative', marginRight: '1.375rem' }}>
                    {/* <img style={{ marginRight: 4, display: tab == 'info' ? 'inline-block' : 'none' }} src="/assets/bigscreen/left.png" /> */}
                    知识库
                    {/* <img style={{ marginLeft: 4, display: tab == 'info' ? 'inline-block' : 'none' }} src="/assets/bigscreen/right.png" /> */}
                    <img 
                        style={{width:'8.3125rem',height:'5.625rem', position: 'absolute', left: '-1.75rem', top: '-1.5625rem', display: tab == 'info' ? 'inline-block' : 'none' }}
                        src='/assets/bigScreen/selected-btn.png'
                    />
                </a>
                <a
                    onClick={() => {
                        onClick1('task')
                    }}
                    style={{
                        ...headerTabStyle,
                        //  color: tab == 'task' ? '#E9CF14' : '#FFFFFF', 
                         position: 'relative', marginRight:'2.1875rem' }}>
                    {/* <img style={{ marginRight: 4, display: tab == 'task' ? 'inline-block' : 'none' }} src="/assets/bigscreen/left.png" /> */}
                    任务统计
                    {/* <img style={{ marginLeft: 4, display: tab == 'task' ? 'inline-block' : 'none' }} src="/assets/bigscreen/right.png" /> */}
                    <img
                        style={{width:'8.3125rem',height:'5.625rem', position: 'absolute', left: '-1.75rem', top: '-1.5625rem', display: tab == 'task' ? 'inline-block' : 'none' }}
                        src='/assets/bigScreen/selected-btn.png'
                    />
                </a>
                <ShowTime marginRight={'0.075rem'} />
                <div style={{ float: 'right', lineHeight: '.1875rem', marginTop: '.5rem' , marginRight: '.875rem' }}>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                            <div style={{ color: '#FFF' }}>{weather[0]?.textDay}</div>
                            {/* <div style={{ color: '#24DCF7' }}>{weather[0]?.tempMin}-{weather[0]?.tempMax}℃</div> */}
                        </div>
                        <img src={iconSrc[0] || ICONSMAP.未知} alt='icon' style={{ width: '2.6875rem', height: '2.375rem', margin: '.29rem .3125rem'  }} />
                    </div>
                </div>
            </div>
            {patrolManageVisible || deviceManageTabsVisible ? (
                <div
                    style={{
                        position: 'absolute',
                        // width: '29%',
                        height: '3.125rem',
                        top: tab == 'oprations' ? '4.125rem' : '4.8125rem',
                        left: patrolManageVisible ? '28%' : '36%',
                        display: 'flex',
                        // justifyContent: 'space-between',
                        justifyContent: 'center',
                        padding: '.75rem',
                    }}>
                    {(patrolManageVisible ? tabs.patrolManage : tabs.deviceManageTabs).map((tab, index) => (
                        <div>
                            <a
                                onClick={() => this.clickSubMenuTab(tab.value)}
                                style={{
                                    color: currentSubMenuTab == tab.value ? '#E9CF14' : 'white',
                                    fontSize: '1rem',
                                    margin: '0 .625rem',
                                }}>
                                {tab.name}
                            </a>
                            <span
                                style={{
                                    display:
                                        index < (patrolManageVisible ? tabs.patrolManage : tabs.deviceManageTabs).length - 1
                                            ? 'inline-block'
                                            : 'none',
                                }}>
                                {/* <img src={`/assets/images/bigscreen/boring_${currentSubMenuTab == tab.value ? 1 : 0}.png`} /> */}
                            </span>
                        </div>
                    ))}
                </div>
            ) : (
                ''
            )}

            <div id='nav' className={styles['header-nav']}>
                <Menu
                    mode='horizontal'
                    style={{ border: 0 }}
                    onClick={handelClick}
                    theme={'light'}
                    items={[
                        {
                            label: <span style={{ color: 'aliceblue' }}>{user.displayName}</span>,
                            key: 'user',
                            icon: <img className={styles['header-nav-user-img']} src={`/assets/images/avatar/5.png`} />,
                            children: [
                                {
                                    label: '退出',
                                    key: 'logout',
                                },
                            ],
                        },
                    ]}
                />
            </div>
        </div>
    )
}

function mapStateToProps(state) {
    const { global, auth, globalTab } = state
    return {
        actions: global.actions,
        user: auth.user,
        clientWidth: global.clientWidth,
        clientHeight:global.clientHeight,
        globalTab: globalTab.tab,
    }
}

export default connect(mapStateToProps)(Header)