"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, Space, Popconfirm, Modal } from '@douyinfe/semi-ui';
import { IconTreeTriangleDown, IconSearch, IconEdit, IconDelete } from '@douyinfe/semi-icons';
import CustomProjGroupModal from './components/customProjGroupModal'
import PerfectScrollbar from "perfect-scrollbar";
import "./index.less";
import layout from '../../containers/layout';

let newScrollbar;
const Header = (props) => {
   const { dispatch, history, user, actions, socket, headerItems, tochange, projectGroup } = props;
   const { install, projectGroup: projectGroupAC, layout,problem } = actions
   const [pomsList, setPomsList] = useState([])
   const [pomsName, setPomsName] = useState('全局')
   const [pepProjectId, setPepProjectId] = useState()
   const [keyword, setKeyword] = useState('')
   const [Scrollbar, setScrollbar] = useState(false)
   const [prjDropdownVis, setPrjDropdownVis] = useState(false)
   const [prjDropDownTabKey, setPrjDropDownTabKey] = useState('项目')
   const [customProjGroupModalVis, setCustomProjGroupModalVis] = useState(false)
   const [customProjGroupDelPopVis, setCustomProjGroupDelPopVis] = useState(false)
   const [customProjGroupEditData, setCustomProjGroupEditData] = useState(null)
   const [count, setCount] = useState(0)//待办工单数量
   // console.log('actions1',actions)
   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))
         if (v == 'firmware_upgrade') modal.push('device')
      })
      modal.push('control')
      modal = [...new Set(modal)]
      // console.log('headerItems',headerItems)

      modalRole = headerItems?.filter(v => modal.includes(v.itemKey))
      if (userRole?.includes('SuperAdmin') || userRole?.includes('admin')) modalRole = headerItems
   }

   const getProjGroup = () => {
      dispatch(projectGroupAC.getProjectGroup())
   }

   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)
            }
         })
         getProjGroup()
         dispatch(layout.getWorkOrders()).then((res) => {
            if (res.success) {
               setCount(res.payload.data?.count)
            }
         })
         dispatch(problem.getAlarmDataGroup())
      }

   }, [])

   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])

   const semiPortalZindex = () => {
      const semiPortal = document.getElementsByClassName('semi-portal')
      for (let sp of semiPortal) {
         if (sp.style.zIndex == 1060) {
            sp.style.zIndex = 990
            break
         }
      }
   }
   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, cursor: 'pointer' }}
                        onClick={() => {
                           let projectGroup = JSON.parse(localStorage.getItem('project_group'))
                           let curPG = projectGroup && projectGroup?.find(v => v.userId == user?.id)
                           if (curPG) {
                              window.open(`/projectGroup/bigscreen?pomsPG=${curPG.projectGroupId}&pomsU=${user?.pomsUserInfo?.id}`, '_blank')
                           } else {
                              window.open(`/projectGroup/statistic?pomsU=${user?.pomsUserInfo?.id}`, '_blank')
                           }
                        }}
                     />
                  ),
                  text: (
                     <>
                        <SplitButtonGroup style={{ marginLeft: 10 }} aria-label="项目操作按钮组">
                           <Dropdown
                              onVisibleChange={(v) => {
                                 setScrollbar(!Scrollbar)
                                 setKeyword('')
                              }}
                              // trigger="click"
                              // clickToHide={true}
                              trigger={'custom'}
                              visible={prjDropdownVis}
                              onClickOutSide={(e) => {
                                 if (customProjGroupModalVis || customProjGroupDelPopVis) {
                                    return
                                 }
                                 setPrjDropdownVis(false)
                              }}
                              position="rightBottom"
                              stopPropagation={true}
                              render={
                                 <Dropdown.Menu style={{ minWidth: 270, maxWidth: 714, padding: 20, fontSize: 12, position: 'relative', }}>
                                    <Tabs type="button"
                                       activeKey={prjDropDownTabKey}
                                       onChange={
                                          (v) => setPrjDropDownTabKey(v)
                                       }
                                    >
                                       <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)
                                                                  setPrjDropdownVis(false)
                                                               }}>
                                                                  {v.pepProjectName?.length > 15 ? `${v.pepProjectName?.substr(0, 15)}` : v.pepProjectName}
                                                               </div>
                                                            </div>
                                                         </Tooltip>
                                                            : <div onClick={() => {
                                                               setPomsName(v.pepProjectName)
                                                               setPepProjectId(v.pepProjectId)
                                                               setPrjDropdownVis(false)
                                                            }}>{v.pepProjectName}</div>
                                                      }
                                                   </Dropdown.Item>
                                                }) : ""
                                             }
                                          </div>
                                       </TabPane>
                                       <TabPane tab={<div onClick={() => {
                                          setPomsName('全局')
                                          setPepProjectId('')
                                          setPrjDropdownVis(false)
                                       }}>全局</div>} itemKey="全局">
                                       </TabPane>
                                       <TabPane tab={<div onClick={() => {
                                          // setPepProjectId('')
                                       }}>自定义分组</div>} itemKey="自定义分组">
                                          <div style={{ width: '100%', height: 1, background: "#d5cfcf8c", margin: "10px 0" }} />
                                          <div style={{ display: 'flex' }}>
                                             <Button type="primary" onClick={() => {
                                                semiPortalZindex()
                                                setCustomProjGroupModalVis(true)
                                             }}>设置新分组</Button>
                                             <Input style={{
                                                flex: 1, marginLeft: 14
                                             }} suffix={<IconSearch />} onChange={(v) => setKeyword(v)} showClear onClick={(e) => e.stopPropagation()}></Input>
                                          </div>
                                          <div id='overall' className='customGroupPop' style={{ width: '100%', height: 260, position: "relative", marginTop: 10 }}>
                                             {
                                                projectGroup.filter(u => u.name?.includes(keyword))?.map(v => {
                                                   return (
                                                      <Dropdown.Item
                                                         className='customGroupItem'
                                                         key={'projectGroup' + v.id}
                                                         style={{
                                                            width: 224, overflow: 'hidden', borderBottom: '', display: "inline-block", whiteSpace: 'nowrap', color: 'rgb(0, 90, 189)'
                                                         }}
                                                         onClick={(e) => {
                                                            e.stopPropagation()
                                                            setPomsName(v.name)
                                                            setPepProjectId(v.pomsProjectIds.join(','))
                                                            setPrjDropdownVis(false)
                                                         }}
                                                      >
                                                         {
                                                            v.name?.length > 10 ?
                                                               <Tooltip content={<div>{v.name}</div>}>
                                                                  <span  >
                                                                     {v.name?.substr(0, 10)}...
                                                                  </span>
                                                               </Tooltip>
                                                               :
                                                               <span  >
                                                                  {v.name}
                                                               </span>
                                                         }
                                                         <Space style={{ float: 'right', position: 'relative', top: 3, }}>
                                                            <IconEdit className="edit-icon" onClick={(e) => {
                                                               e.stopPropagation()
                                                               semiPortalZindex()
                                                               setCustomProjGroupEditData(v)
                                                               setCustomProjGroupModalVis(true)
                                                            }} />
                                                            <IconDelete className="del-icon" onClick={(e) => {
                                                               e.stopPropagation()
                                                               semiPortalZindex()
                                                               setCustomProjGroupDelPopVis(v.id)
                                                               Modal.warning({
                                                                  title: '确定删除该自定义分组？', content: '此修改将不可逆',
                                                                  onCancel: () => {
                                                                     setCustomProjGroupDelPopVis(null)
                                                                  },
                                                                  onOk: () => {
                                                                     dispatch(projectGroupAC.delProjectGroup(v.id)).then((res) => {
                                                                        if (res.success) {
                                                                           setCustomProjGroupDelPopVis(null)

                                                                           getProjGroup()
                                                                        }
                                                                     })
                                                                  },
                                                                  style: { zIndex: 1090 }
                                                               });
                                                            }} />
                                                         </Space>
                                                      </Dropdown.Item>

                                                   )
                                                })
                                             }
                                          </div>
                                       </TabPane>
                                    </Tabs>
                                 </Dropdown.Menu>
                              }
                           >
                              <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 />} onClick={() => { setPrjDropdownVis(!prjDropdownVis) }}></Button>
                           </Dropdown>
                        </SplitButtonGroup>
                     </>
                  ),
               }}
               footer={
                  <>
                     {modalRole.length > 0 ? modalRole.map((item, index) => {
                        // console.log('item1',modalRole.find(k=>k.text==='工单'))
                        if (item.hasOwnProperty('items')) {
                           return (
                              <Nav.Sub
                                 key={index + 'a'}
                                 itemKey={item.itemKey}
                                 text={item.text === '工单' ? `${item.text}（${count}）` : 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>
                  </>
               }
            />
            {
               <CustomProjGroupModal
                  visible={customProjGroupModalVis}
                  pomsList={pomsList}
                  editData={customProjGroupEditData}
                  cancel={({ refresh } = {}) => {
                     setCustomProjGroupModalVis(false)
                     setCustomProjGroupEditData(null)
                     if (refresh) {
                        getProjGroup()
                     }
                  }}
               />
            }
         </div>
      </>
   );
};

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

export default connect(mapStateToProps)(Header);