"use strict";
import React, { useEffect, useState } from 'react'
import { connect, createStore } from "react-redux";
import Immutable from 'immutable';
import { pepProject } from '../../actions/global';
import { SplitButtonGroup, Dropdown, Button, Nav, Avatar, Input, Tooltip, Tabs, TabPane } from '@douyinfe/semi-ui';
import { IconTreeTriangleDown, IconSearch } from '@douyinfe/semi-icons';
import PerfectScrollbar from "perfect-scrollbar";
import "./index.less";

let newScrollbar;
const Header = (props) => {
   const { dispatch, history, user, actions, socket, headerItems, tochange } = props;
   const { install } = actions
   const [pomsList, setPomsList] = useState([])
   const [pomsName, setPomsName] = useState('全局')
   const [pepProjectId, setPepProjectId] = useState()
   const [keyword, setKeyword] = useState('')
   const [Scrollbar, setScrollbar] = useState(false)
   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('control')
      modal = [...new Set(modal)]
      modalRole = headerItems?.filter(v => modal.includes(v.itemKey))
      if (userRole?.includes('SuperAdmin') || userRole?.includes('admin')) modalRole = headerItems
   }

   useEffect(() => {
      if (JSON.parse(sessionStorage.getItem('pomsUser'))?.token) {
         dispatch(install.getProjectPoms({ global: 1 })).then((res) => {  //获取已绑定项目
            if (res.success) {
               let data = res.payload.data?.rows?.filter(v => v.pepProjectIsDelete !== 1)?.map(v => ({ pepProjectId: v.id, pepProjectName: v.pepProjectName || v.name }))
               setPomsList(data)
            }
         })
      }
   }, [])

   useEffect(() => {
      const domProject = document.getElementById("overall");
      if (domProject) {
         newScrollbar = new PerfectScrollbar("#overall", {
            suppressScrollX: true,
         });
         if (domProject && newScrollbar) {
            newScrollbar.update();
         }
      }
   }, [Scrollbar])

   useEffect(() => {
      dispatch(pepProject(pepProjectId))
   }, [pepProjectId])


   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="项目操作按钮组">
                           <Dropdown
                              onVisibleChange={(v) => {
                                 setScrollbar(!Scrollbar)
                                 setKeyword('')
                              }}
                              clickToHide={true}
                              render={
                                 <Dropdown.Menu style={{ minWidth: 270, maxWidth: 714, padding: 20, fontSize: 12 }}>
                                    <Tabs type="button">
                                       <TabPane tab="项目" itemKey="项目">
                                          <div style={{ width: '100%', height: 1, background: "#d5cfcf8c", margin: "10px 0" }}></div>
                                          <Input suffix={<IconSearch />} onChange={(v) => setKeyword(v)} showClear onClick={(e)=>e.stopPropagation()}></Input>
                                          <div id='overall' style={{ width: '100%', height: 260, position: "relative", marginTop: 10 }}>
                                             {pomsList?.length > 0 ?
                                                pomsList.filter(u => u.pepProjectName?.includes(keyword))?.map(v => {
                                                   return <Dropdown.Item
                                                      key={'pomsList' + v.pepProjectId}
                                                      style={{ width: 224, overflow: 'hidden', borderBottom: '', display: "inline-block", whiteSpace: 'nowrap', color: 'rgb(0, 90, 189)' }}>

                                                      {
                                                         v.pepProjectName?.length > 15 ? <Tooltip content={<div>{v.pepProjectName}</div>}>
                                                            <div style={{}} >
                                                               <div onClick={() => {
                                                                  setPomsName(v.pepProjectName)
                                                                  setPepProjectId(v.pepProjectId)
                                                               }}>
                                                                  {v.pepProjectName?.length > 15 ? `${v.pepProjectName?.substr(0, 15)}` : v.pepProjectName}
                                                               </div>
                                                            </div>
                                                         </Tooltip>
                                                            : <div onClick={() => {
                                                               setPomsName(v.pepProjectName)
                                                               setPepProjectId(v.pepProjectId)
                                                            }}>{v.pepProjectName}</div>
                                                      }
                                                   </Dropdown.Item>
                                                }) : ""
                                             }
                                          </div>
                                       </TabPane>
                                       <TabPane tab={<div onClick={() => {
                                          setPomsName('全局')
                                          setPepProjectId('')
                                       }}>全局</div>} itemKey="全局">
                                       </TabPane>
                                    </Tabs>
                                 </Dropdown.Menu>
                              } trigger="click" position="bottomRight">
                              <Button theme="solid" type="primary" style={{ height: 24, background: '#005ABD' }}>{
                                 pomsName.length > 15 ? <Tooltip content={<div>{pomsName}</div>}>
                                    <div style={{}}>
                                       {pomsName.length > 15 ? `${pomsName.substr(0, 15)}...` : pomsName}
                                    </div>
                                 </Tooltip> : pomsName
                              }</Button>
                              <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);