"use strict";
import React from "react";
import { connect } from "react-redux";
import { SplitButtonGroup, Dropdown, Button, Nav, Avatar } from '@douyinfe/semi-ui';
import { IconTreeTriangleDown } from '@douyinfe/semi-icons';
import "./index.less";

const Header = (props) => {
   const { dispatch, history, user, actions, socket, headerItems, tochange } = props;
   let userRole = user?.pomsUserInfo?.role
   let modalRole = []
   if (userRole) {
      let modal = []
      userRole?.map(v => {
         if (v == 'data_analyst') ['analysis', 'data', 'workOrder', 'means'].map(u => modal.push(u))
         if (v == 'after_sale') ['problem', 'facility', 'workOrder', 'means'].map(u => modal.push(u))
         if (v == 'resource_manage') ['facility', 'workOrder', 'means'].map(u => modal.push(u))
         if (v == 'customer_service') ['service', 'workOrder', 'means'].map(u => modal.push(u))
      })
      modal.push('console')
      modal = [...new Set(modal)]
      modalRole = headerItems?.filter(v => modal.includes(v.itemKey))
      if (userRole?.includes('SuperAdmin') || userRole?.includes('admin')) modalRole = headerItems

   }
   return (
      <>
         <div id="top-slider">
            <Nav
               mode={"horizontal"}
               onClick={({ itemKey }) => {
                  if (itemKey == "logout") {
                     dispatch(actions.auth.logout(user));
                     if (socket) {
                        socket.disconnect();
                     }
                     history.push(`/signin`);
                  }
               }}
               style={{
                  height: 48,
                  minWidth: 520,
                  background: '#1D2343',
                  backgroundSize: "100% 100%",
                  color: "white",
               }}
               header={{
                  logo: (
                     <img
                        src="/assets/images/install/long_logo.png"
                        style={{ display: "inline-block", width: 200, height: 40, marginLeft: -24 }}
                     />
                  ),
                  text: (
                     <>

                        {/* <SplitButtonGroup style={{ marginLeft: 10 }} aria-label="项目操作按钮组"> */}
                        <Button theme="solid" type="primary" style={{ width: 52, height: 24, background: '#005ABD' }}>全局</Button>
                        {/* <Dropdown onVisibleChange={(v) => { }} menu={{}} trigger="click" position="bottomRight"> */}
                        <Button style={{ width: 16, height: 24, background: '#005ABD' }} theme="solid" type="primary" icon={<IconTreeTriangleDown />}></Button>
                        {/* </Dropdown> */}
                        {/* </SplitButtonGroup> */}
                     </>
                  ),
               }}
               footer={
                  <>
                     {modalRole.length > 0 ? modalRole.map((item, index) => {
                        if (item.hasOwnProperty('items')) {
                           return (
                              <Nav.Sub
                                 key={index + 'a'}
                                 itemKey={item.itemKey}
                                 text={item.text}
                                 dropdownStyle={{ color: '#F2F3F5' }}
                              >
                                 {item.hasOwnProperty('items') && item.items.map((ite, idx) => (
                                    <Nav.Item key={idx + 'd'} itemKey={ite.itemKey} text={ite.text} onClick={() => { tochange(ite); }} />
                                 ))}
                              </Nav.Sub>
                           )
                        }
                        else {
                           return (
                              <div key='console' style={{ display: 'inline-flex' }}>
                                 <img src="/assets/images/background/console.png" style={{ width: 24, marginRight: -10 }} />
                                 <Nav.Item key={index + 'a'} itemKey={item.itemKey} text={item.text} onClick={() => { tochange(item) }} />
                              </div>

                           )
                        }
                     }) : ""}
                     <Nav.Sub
                        itemKey={"user"}
                        text={
                           <div
                              style={{
                                 marginLeft: -8,
                                 display: "inline-block",
                                 color: "white",
                              }}
                           >
                              <Avatar size="extra-small" color="light-blue" style={{ marginRight: 4 }}>
                                 {user?.name?.substr(0, 1)}
                              </Avatar>
                              <div style={{
                                 display: "inline-block", position: "relative",
                                 top: 10,
                                 left: 4,
                                 marginRight: 4,
                              }}
                              >
                              </div>
                           </div>
                        }
                     >
                        <div style={{ width: 133, }}>
                           <div style={{ display: "flex", alignItems: 'center', background: '#F0F5FF', padding: '8px 0px 8px 12px' }}>
                              <Avatar size="extra-small" color="light-blue" style={{ marginRight: 4 }}>
                                 {user?.name?.substr(0, 1)}
                              </Avatar>
                              <div style={{ fontSize: 12, color: '#4A4A4A' }}>
                                 {user.name}
                                 <div title={user?.department?.map(v => v.name + '、')} style={{ width: 60, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', color: '#969799', fontSize: 12 }}>{user?.department?.map(v => v.name + '、')}</div>
                              </div>
                           </div>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', height: 30, borderBottom: '1px solid #F2F3F5', cursor: "pointer" }}
                           onClick={() => {
                              history.push(`/userCenter`);
                           }}>
                           <div style={{ width: 15, height: 15, marginLeft: 20 }}>
                              <img src="/assets/images/console/yonghu.png" alt="" style={{ width: '100%', height: '100%' }} />
                           </div>
                           <div style={{ color: '#646566', fontSize: 12, marginLeft: 9 }}>
                              用户中心
                           </div>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', height: 30, borderBottom: '1px solid #F2F3F5', cursor: "pointer" }}>
                           <div style={{ width: 15, height: 15, marginLeft: 20 }}>
                              <img src="/assets/images/console/suo.png" alt="" style={{ width: '100%', height: '100%' }} />
                           </div>
                           <div style={{ color: '#646566', fontSize: 12, marginLeft: 9 }}>
                              安全认证
                           </div>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 27, color: '#646566', fontSize: 12, cursor: "pointer" }}
                           onClick={() => {
                              dispatch(actions.auth.logout(user));
                              if (socket) {
                                 socket.disconnect();
                              }
                              history.push(`/signin`);
                           }}>
                           退出
                           {/* <Nav.Item itemKey={"logout"} text={"退出"} style={{ textAlign: "center" }} /> */}
                        </div>

                        {/* collapseButton   collapseText */}


                     </Nav.Sub>
                  </>
               }
            />
         </div>
      </>
   );
};

function mapStateToProps (state) {
   const { global, auth, webSocket } = state;
   return {
      actions: global.actions,
      user: auth.user,
      socket: webSocket.socket,
   };
}

export default connect(mapStateToProps)(Header);