import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'react-redux';
import { Timeline, Card, Button, Modal, Form } from '@douyinfe/semi-ui';
import { push } from 'react-router-redux';
import '../style.less'
import PerfectScrollbar from "perfect-scrollbar";
import repairFQA from '../../means/containers/repairFQA';
import { Setup, OutHidden } from "$components";
const { Meta } = Card;

let newScrollbar;
let overviewScrollbar;
let memberScrollbar;
let equipmentScrollbar;
let webScrollbar;
let problemsScrollbar;
let alarmScrollbar;


const Control = (props) => {
   const { dispatch, actions, user, loading, socket ,pepProjectId} = props
   const { control } = actions
   const stationList = [
      'url(/assets/images/console/lan_1.png)',
      'url(/assets/images/console/lv_1.png)',
      'url(/assets/images/console/huang_1.png)',
      'url(/assets/images/console/hong_1.png)',
   ]
   const [timelineList, setTimelineList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//最新动态列表

   const [memberList, setMemberList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//相关成员列表

   const [equipmentList, setEquipmentList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//平台设备接入列表

   const [webList, setWebList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//关联web应用列表

   const [problemsList, setProblemsList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//异常&问题列表
   const [setup, setSetup] = useState(false);  //设置是否显现
   const [tableType, setTableType] = useState('');  //localStorage存储名
   const [tool, setTool] = useState(false);  //工具添加修改弹窗
   const [alter, setAlter] = useState(false);  //工具添加或编辑
   const [compile, setCompile] = useState({});  //工具编辑的内容
   const [toolShow, setToolShow] = useState([]);  //工具展示
   const [tableSetup, setTableSetup] = useState([]);  //单一表格设置信息
   const [exhibition, setExhibition] = useState({ workbench: [] });  //页面结构
   const [workData, setWorkData] = useState({});  //我的工作台数据


   const FormApi = useRef()

   useEffect(() => {
      consoleToollink()

      //初始化表格显示设置
      let data = ['workbench']
      data.map(v => {
         localStorage.getItem(v) == null
            ? localStorage.setItem(v, JSON.stringify(show[v]))
            : "";
         attribute(v)
      })

   }, [])

   useEffect(() => {
      dispatch(control.geteteConsoleCount({pepProjectId:pepProjectId})).then(res => {
         if (res.success) setWorkData(res.payload.data)
      })
   }, [pepProjectId])

   useEffect(() => {
      newScrollbar = new PerfectScrollbar("#news", {
         suppressScrollX: true,
      });
      const domProject = document.getElementById("news");
      if (domProject && newScrollbar) {
         newScrollbar.update();
      }
      overviewScrollbar = new PerfectScrollbar("#overview", {
         suppressScrollY: true,
      });
      const domProject1 = document.getElementById("overview");
      if (domProject1 && overviewScrollbar) {
         overviewScrollbar.update();
      }
      memberScrollbar = new PerfectScrollbar("#member", {
         suppressScrollX: true,
      });
      const domProject2 = document.getElementById("member");
      if (domProject2 && memberScrollbar) {
         memberScrollbar.update();
      }
      equipmentScrollbar = new PerfectScrollbar("#equipment", {
         suppressScrollX: true,
      });
      const domProject3 = document.getElementById("equipment");
      if (domProject3 && equipmentScrollbar) {
         equipmentScrollbar.update();
      }
      webScrollbar = new PerfectScrollbar("#web", {
         suppressScrollX: true,
      });
      const domProject4 = document.getElementById("web");
      if (domProject4 && webScrollbar) {
         webScrollbar.update();
      }
      problemsScrollbar = new PerfectScrollbar("#problems", {
         suppressScrollX: true,
      });
      const domProject5 = document.getElementById("problems");
      if (domProject5 && problemsScrollbar) {
         problemsScrollbar.update();
      }
      alarmScrollbar = new PerfectScrollbar("#alarm", {
         suppressScrollY: true,
      });
      const domProject6 = document.getElementById("alarm");
      if (domProject6 && alarmScrollbar) {
         alarmScrollbar.update();
      }

      // ACTION 示例
      //   dispatch(actions.example.getMembers(user.orgId))
   })


   const consoleToollink = () => {
      dispatch(control.getConsoleToollink()).then(res => {
         if (res.success) setToolShow(res.payload.data)
      })
   }

   let Select = {
      workbench: ['project', 'data', 'app', 'device'],
      statistical: [],
      analyse: [],
      dynamic: [],
   }
   let show = {
      workbench: ['project', 'data', 'app', 'device'],
      statistical: [],
      analyse: [],
      dynamic: [],
   }

   let listAll = [
      { name: '关注的项目', sort: 1, key: 'project', data: workData?.projects, img: 'url(/assets/images/console/lan_1.png)' },
      { name: '数据告警', sort: 2, key: 'data', data: workData?.dataSurplus, img: 'url(/assets/images/console/lv_1.png)' },
      { name: '应用告警', sort: 2, key: 'app', data: workData?.appSurplus, img: 'url(/assets/images/console/hong_1.png)' },
      { name: '设备告警', sort: 2, key: 'device', data: workData?.toolSurplus, img: 'url(/assets/images/console/hong_1.png)' },
   ]
   console.log(workData);
   console.log(listAll);

   useEffect(() => {
      attribute('workbench')
   }, [workData])

   const attribute = (title) => {
      let take = localStorage.getItem(title)
         ? JSON.parse(localStorage.getItem(title))
         : [];
      let data = Select[title].map(v => {
         let dataTitle = listAll.find(vv => v == vv.key) || {}
         return { name: dataTitle.name, value: dataTitle.key }
      })
      let TableDisplay = take?.map(v => listAll?.find(vv => v == vv.key))
      TableDisplay.sort((a, b) => a.sort - b.sort)
      setExhibition({ ...exhibition, [title]: TableDisplay })
      setTableSetup([{ list: data }])

   }


   return (
      // 11 ? <img src="/assets/images/install/watting.png" alt="" style={{ width: 'calc(100% + 16px)', position: "relative", top: -12, left: -8, }} /> :
      <>
         <div style={{ padding: '0px 40px', width: '100%' }} className='console'>
            {/* 头部 */}
            <div style={{ margin: '4px 0px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
               <div style={{ display: 'flex', alignItems: 'center' }}>
                  <div style={{ color: '#4A4A4A', fontSize: 14 }}>
                     HI，欢迎回来，
                  </div>
                  <div style={{ fontFamily: 'YouSheBiaoTiHei', fontSize: 20, color: '#005ABD', marginLeft: 4 }}>
                     {user?.name}
                  </div>
               </div>
               <div style={{ width: 25, height: 25, cursor: "pointer" }}>
                  <img src="/assets/images/console/icon_all.png" alt="" style={{ width: '100%', height: '100%' }} />
               </div>
            </div>
            {/* 主体 */}
            <div style={{ display: 'flex', width: '100%' }}>
               {/* 左边 */}
               <div style={{ width: 'calc(100% - 434px)' }}>
                  {/* 工作台和统计概览 */}
                  <div style={{ background: '#FFFFFF', boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', borderRadius: 2, padding: '20px 24px' }}>
                     {/* 我的工作台 */}
                     <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                           <div style={{ width: 0, height: 20, borderLeft: '3px solid #005ABD', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div>
                           <div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#101531', marginLeft: 8 }}>我的工作台</div>
                           <div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>MY WORK STATION</div>
                        </div>
                        <div style={{ marginRight: 25 }}>
                           <img title='设置' src="/assets/images/problem/setup.png" style={{ width: 18, height: 18, cursor: "pointer" }} onClick={() => {
                              setSetup(true)
                              setTableType('workbench')
                           }} />
                        </div>
                     </div>
                     <div style={{ marginTop: 30, display: 'flex' }}>
                        <div style={{ marginTop: 20, marginLeft: 36 }}>
                           <div style={{ display: 'flex', alignItems: 'center', }}>
                              <div style={{ width: 120, fontSize: 14, color: '#969799' }}>
                                 剩余问题:
                              </div>
                              <div style={{ fontSize: 16, color: '#4A4A4A', width: 91 }}>
                                 {(workData?.appSurplus + workData?.dataSurplus + workData?.toolSurplus) || 0}
                              </div>
                           </div>
                           <div style={{ display: 'flex', alignItems: 'center', marginTop: 26 }}>
                              <div style={{ width: 120, fontSize: 14, color: '#969799' }}>
                                 今日新增问题:
                              </div>
                              <div style={{ fontSize: 16, color: '#4A4A4A', width: 91, display: 'flex' }}>
                                 <div>
                                    {(workData?.appNewAdd + workData?.dataNewAdd + workData?.toolNewAdd) || 0}
                                 </div>
                                 <div style={{ display: 'flex', alignItems: 'center', marginLeft: 4 }}>
                                    <img title='设置' src="/assets/images/console/icon_up.png" style={{ width: 18, height: 18 }} />
                                 </div>
                              </div>
                           </div>
                           <div style={{ display: 'flex', alignItems: 'center', marginTop: 26 }}>
                              <div style={{ width: 120, fontSize: 14, color: '#969799' }}>
                                 今日处理:
                              </div>
                              <div style={{ fontSize: 16, color: '#4A4A4A', width: 91 }}>
                                 {(workData?.appConfirme + workData?.dataConfirme + workData?.toolConfirme) || 0}
                              </div>
                           </div>
                        </div>
                        {/* 循环类型 */}
                        <div id='alarm' style={{ width: 'calc(100% - 200px)', position: 'relative', whiteSpace: 'nowrap', }}>
                           {exhibition['workbench']?.map((item, index) => {
                              return (
                                 <div key={item.name} style={{ background: item.img, backgroundSize: "100% 100%", display: "inline-block", width: 270, height: 135, marginRight: 26 }}>
                                    <div style={{ margin: '35px 0px 0px 134px' }}>
                                       <div>
                                          <span style={{ fontSize: 14, color: '#4A4A4A', fontWeight: 500, fontFamily: 'PingFangSC-Medium, PingFang SC' }}>{item.name}</span>
                                          <span style={{ fontSize: 12, color: '#4A4A4A' }}>{item.name == '关注的项目' ? ' ( 个 )' : ' ( 条 )'}</span>
                                       </div>
                                       <div style={{ marginTop: 15, display: 'flex', alignItems: 'center' }}>
                                          <div style={{ fontSize: 32, color: index == 0 ? '#0F7EFB' : index == 1 ? '#0091A1' : index == 2 ? '#FE9812' : '#FF7575', fontFamily: 'YouSheBiaoTiHei' }}>{item.data}</div>
                                          {item.name == '关注的项目' ? '' : <div style={{ fontSize: 12, color: '#969799', marginLeft: 4 }}>待处理</div>}
                                       </div>
                                    </div>
                                 </div>
                              )
                           })
                           }
                        </div>
                     </div>
                     {/* 统计概览 */}
                     <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 25 }}>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                           <div style={{ width: 0, height: 20, borderLeft: '3px solid #005ABD', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div>
                           <div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#101531', marginLeft: 8 }}>统计概览</div>
                           <div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>STATISTICAL OVERVIEW</div>
                        </div>
                        <div style={{ marginRight: 25 }}>
                           <img title='设置' src="/assets/images/problem/setup.png" style={{ width: 18, height: 18, cursor: "pointer" }} onClick={() => setSetup(true)} />
                        </div>
                     </div>
                     <div id='overview' style={{ position: 'relative' }}>
                        <div style={{ display: 'inline-flex', marginTop: 16 }}>
                           {/* 项目里程碑 */}
                           <div style={{ marginBottom: 30, width: 466, height: 221, border: '1px solid rgba(220,222,224,0.2)', boxShadow: '0px 2px 12px 1px #F2F3F5', borderRadius: 2 }}>
                              <div style={{ margin: '20px 0px 20px 24px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold' }}>
                                 项目里程碑
                              </div>
                              <div style={{ display: 'flex', marginBottom: 20, marginLeft: 24 }}>
                                 <div style={{ display: 'flex' }}>
                                    <div style={{ fontSize: 14, color: '#969799', marginRight: 4 }}>
                                       立项时间：
                                    </div>
                                    <div style={{ fontSize: 14, color: '#4A4A4A', width: 104 }}>
                                       2022-5-12
                                    </div>
                                 </div>
                                 <div style={{ display: 'flex' }}>
                                    <div style={{ fontSize: 14, color: '#969799', marginRight: 4 }}>
                                       施工时间：
                                    </div>
                                    <div style={{ fontSize: 14, color: '#4A4A4A' }}>
                                       2022-5-12至2022-12-12
                                    </div>
                                 </div>
                              </div>
                              <div style={{ display: 'flex', marginBottom: 24, marginLeft: 24 }}>
                                 <div style={{ display: 'flex' }}>
                                    <div style={{ fontSize: 14, color: '#969799', marginRight: 4 }}>
                                       内验时间：
                                    </div>
                                    <div style={{ fontSize: 14, color: '#4A4A4A', width: 104 }}>
                                       2023-1-18
                                    </div>
                                 </div>
                                 <div style={{ display: 'flex' }}>
                                    <div style={{ fontSize: 14, color: '#969799', marginRight: 4 }}>
                                       外验时间：
                                    </div>
                                    <div style={{ fontSize: 14, color: '#4A4A4A' }}>
                                       2023-3-18
                                    </div>
                                 </div>
                              </div>
                              <div style={{ display: 'flex', marginBottom: 17, marginLeft: 24 }}>
                                 <div style={{ fontSize: 14, color: '#969799', marginRight: 4 }}>
                                    工程维保时间：
                                 </div>
                                 <div style={{ fontSize: 14, color: '#4A4A4A' }}>
                                    2022-11-11
                                 </div>
                              </div>
                              <div style={{ display: 'flex', background: 'linear-gradient(252deg, #F9FBFF 0%, #DBE7FF 100%)', height: 38, justifyContent: 'space-between' }}>
                                 <div style={{ display: 'flex', marginLeft: 24, alignItems: 'center' }}>
                                    <div style={{ fontSize: 14, color: '#646566', marginRight: 4 }}>
                                       售后维修时间：
                                    </div>
                                    <div style={{ fontSize: 14, color: '#4A4A4A' }}>
                                       2022-11-11至2023-12-14
                                    </div>
                                 </div>
                                 <img src="/assets/images/console/onGoing.png" alt="进行中" />
                              </div>
                           </div>
                           {/* 相关成员 */}
                           <div style={{ width: 360, height: 221, marginLeft: 20, paddingLeft: 24, border: '1px solid rgba(220,222,224,0.2)', boxShadow: '0px 2px 12px 1px #F2F3F5', borderRadius: 2 }}>
                              <div style={{ margin: '20px 0px 17px 0px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold' }}>
                                 相关成员
                              </div>
                              <div id='member' style={{ position: 'relative', height: 161 }}>
                                 {memberList.map((item, index) => {
                                    return (
                                       <div key={index + 'member'} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 15 }}>
                                          <div style={{ display: 'flex', alignItems: 'center' }}>
                                             <div style={{ width: 18, height: 18 }}>
                                                <img src="/assets/images/console/member.png" alt="成员" style={{ width: '100%', height: '100%' }} />
                                             </div>
                                             <div style={{ marginLeft: 8, fontSize: 14, color: '#4A4A4A' }}>
                                                刘昊然
                                             </div>
                                             <div style={{ fontSize: 12, color: '#969799' }}>
                                                （负责人）
                                             </div>
                                          </div>
                                          <div style={{ color: '#969799', fontSize: 14, marginRight: 22 }}>
                                             行业服务部
                                          </div>
                                       </div>
                                    )
                                 })}
                              </div>
                           </div>
                           {/* 平台设备接入 */}
                           <div style={{ width: 360, height: 221, marginLeft: 20, paddingLeft: 24, border: '1px solid rgba(220,222,224,0.2)', boxShadow: '0px 2px 12px 1px #F2F3F5', borderRadius: 2 }}>
                              <div style={{ margin: '20px 0px 17px 0px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold', marginBottom: 16 }}>
                                 平台设备接入
                              </div>
                              <div id='equipment' style={{ position: 'relative', height: 161 }}>
                                 {
                                    equipmentList.map((item, index) => {
                                       return (
                                          <div key={index + 'equipment'} style={{ marginBottom: 15, display: 'flex' }}>
                                             <div style={{ color: '#969799', fontSize: 14, width: 167 }}>
                                                5阶ZK1高清摄球机
                                             </div>
                                             <div style={{ color: '#4A4A4A', fontSize: 14, width: 81 }}>
                                                视频
                                             </div>
                                             <div style={{ width: 18, height: 18, marginRight: 8 }}>
                                                <img src="/assets/images/console/icon_online.png" alt="网络" style={{ width: '100%', height: '100%' }} />
                                                {/* <img src="/assets/images/console/icon_offline.png" alt="网络"  style={{ width: '100%', height: '100%' }} /> */}
                                             </div>
                                             <div style={{ color: '#0F7EFB', fontSize: 14 }}>
                                                在线
                                             </div>
                                             {/* <div style={{color:'#969799',fontSize:14}}>
                                                        掉线
                                                    </div> */}
                                          </div>
                                       )
                                    })
                                 }
                              </div>
                           </div>
                           {/* 关联web应用 */}
                           <div style={{ width: 360, height: 221, marginLeft: 20, paddingLeft: 24, border: '1px solid rgba(220,222,224,0.2)', boxShadow: '0px 2px 12px 1px #F2F3F5', borderRadius: 2 }}>
                              <div style={{ margin: '20px 0px 17px 0px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold', marginBottom: 15 }}>
                                 关联web应用
                              </div>
                              <div id='web' style={{ position: 'relative', height: 161 }}>
                                 {
                                    webList.map((item, index) => {
                                       return (
                                          <div key={index + 'web'} style={{ marginBottom: 15, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                                             <div style={{ display: 'flex' }}>
                                                <div style={{ width: 18, height: 18, marginRight: 8 }}>
                                                   <img src="/assets/images/console/icon_webpage.png" alt="web应用" style={{ width: '100%', height: '100%' }} />
                                                </div>
                                                <div style={{ color: '#646566', fontSize: 14, borderBottom: '1px dotted #0F7EFB' }}>
                                                   superchangnan.anxiny
                                                </div>
                                             </div>
                                             <div style={{ color: '#4A4A4A', fontSize: 14, marginRight: 40 }}>
                                                第三方
                                             </div>
                                          </div>
                                       )
                                    })
                                 }
                              </div>
                           </div>
                           {/* 异常&问题 */}
                           <div style={{ width: 399, height: 221, marginLeft: 20, marginRight: 20, paddingLeft: 24, border: '1px solid rgba(220,222,224,0.2)', boxShadow: '0px 2px 12px 1px #F2F3F5', borderRadius: 2 }}>
                              <div style={{ margin: '20px 0px 17px 0px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold' }}>
                                 异常&问题
                              </div>
                              <div id='problems' style={{ position: 'relative', height: 161 }}>
                                 {
                                    problemsList.map((item, index) => {
                                       return (
                                          <div style={{ marginBottom: 15, paddingRight: 30, }}>
                                             <div style={{ fontSize: 14, color: '#646566' }}>
                                                【告警源A】数据信息中断，诊断为 <span style={{ color: '#0F7EFB', borderBottom: '1px dotted #0F7EFB', cursor: "pointer" }}>服务异常，请前往确认</span>
                                             </div>
                                             <div style={{ color: '#969799', fontSize: 12, marginRight: 40, marginTop: 4 }}>
                                                2022-05-21 15:23:41
                                             </div>
                                          </div>
                                       )
                                    })
                                 }
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div style={{ background: '#FFFFFF', boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', borderRadius: 2, paddingTop: 20, paddingLeft: 24, marginTop: 22 }}>
                     {/* BI分析模块 */}
                     <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                           <div style={{ width: 0, height: 20, borderLeft: '3px solid #005ABD', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div>
                           <div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#101531', marginLeft: 8 }}>BI分析模块</div>
                           <div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>BI ANAL YSIS MODEL</div>
                        </div>
                        <div style={{ marginRight: 25 }}>
                           <img title='设置' src="/assets/images/problem/setup.png" style={{ width: 18, height: 18, cursor: "pointer" }} onClick={() => setSetup(true)} />
                        </div>
                     </div>
                  </div>
               </div>
               {/* 右边 */}
               <div style={{ width: 415, marginLeft: 20 }}>
                  {/* 最新动态 */}
                  <div style={{ width: 415, background: '#FFFFFF', boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', borderRadius: 2, paddingTop: 20, paddingLeft: 21, height: 639, }}>
                     <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                           <div style={{ width: 0, height: 20, borderLeft: '3px solid #005ABD', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div>
                           <div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#101531', marginLeft: 8 }}>最新动态</div>
                           <div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>RECENT NEWS</div>
                        </div>
                        <div style={{ marginRight: 25 }}>
                           <img title='设置' src="/assets/images/problem/setup.png" style={{ width: 18, height: 18, cursor: "pointer" }} onClick={() => setSetup(true)} />
                        </div>
                     </div>
                     <div id='news' style={{ height: 578, position: 'relative', marginTop: 10, }}>
                        <Timeline mode="center" style={{ marginLeft: '-56px', width: 400 }}>
                           {timelineList.map((item, index) => {
                              return (
                                 <Timeline.Item key={index + 'time'} position='left' time="2019-07-14 10:35" className={index % 2 == 0 ? 'even' : 'odd'} >
                                    A项目DTU设备状态异常，诊断为离线
                                 </Timeline.Item>
                              )
                           })}
                        </Timeline>
                     </div>
                  </div>
                  {/* 我常用的工具 */}
                  <div style={{ marginTop: 20, background: '#FFFFFF', boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', borderRadius: 2, padding: 20 }}>
                     <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                           <div style={{ width: 0, height: 20, borderLeft: '3px solid #005ABD', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div>
                           <div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#101531', marginLeft: 8 }}>我常用的工具</div>
                           <div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>MY USUAL TOOLS</div>
                        </div>
                     </div>
                     {toolShow.length > 0 ?
                        toolShow?.map(v =>
                           <div
                              onMouseLeave={() => {
                                 document.getElementById(v.id + 'name').style.display = 'none'
                              }}
                              id={v.id + v.name}
                              style={{ marginTop: 24, position: 'relative', display: "inline-block", cursor: 'pointer' }}>
                              <a href={v.link} target="_blank">
                                 <Button
                                    theme="solid"
                                    type="primary"
                                    style={{
                                       height: 29, borderRadius: 2, marginRight: 10, marginBottom: 15,
                                       background: '#0F7EFB', color: '#FFFFFF', border: '1px solid #0F7EFB',
                                    }}
                                    onContextMenu={(e) => {
                                       e.preventDefault();
                                       document.getElementById(v.id + 'name').style.display = 'block'
                                    }}
                                 >
                                    {v.name}
                                 </Button>
                              </a>
                              <div id={v.id + 'name'}
                                 style={{
                                    position: 'absolute', top: 12, right: -10, background: 'rgb(208 208 223 / 100%)', fontSize: 13,
                                    width: 50, textAlign: "center", borderRadius: 4, padding: '0 10px', display: "none"
                                 }}>
                                 <div style={{ lineHeight: '30px' }}
                                    onClick={() => {
                                       setTool(true)
                                       setAlter(true)
                                       setCompile({ id: v.id, name: v.name, link: v.link, })
                                    }}
                                 >编辑</div>
                                 <div style={{ lineHeight: '30px' }}
                                    onClick={() => {
                                       dispatch(control.deleteConsoleToollink(v.id)).then(res => {
                                          if (res.success) consoleToollink()
                                       })
                                    }}
                                 >删除</div>
                              </div>
                           </div>) : ""}

                     <Button
                        theme="solid"
                        type="primary"
                        style={{
                           width: '100%',
                           height: 40,
                           borderRadius: 2,
                           marginTop: 20,
                           background: '#F2F3F5',
                           color: '#0F7EFB',
                           border: '1px solid #F2F3F5'
                        }}
                        onClick={() => {
                           setTool(true)
                        }}
                     >
                        添加
                     </Button>

                  </div>
               </div>
            </div>
         </div>
         {/* 页面各个设置弹窗 */}
         {
            setup ? (
               <Setup
                  tableType={tableType}
                  tableList={tableSetup}
                  close={() => {
                     setSetup(false);
                     attribute(tableType);
                     setTableType('')
                  }}
               />
            ) : (
               ""
            )
         }
         {/* 工具添加修改弹窗 */}
         {tool ? <Modal
            title={alter ? '编辑' : "添加"}
            visible={true}
            width={600}
            onCancel={() => {
               setTool(false)
               setAlter(false)
               setCompile({})
            }}
            onOk={() => {
               FormApi.current.validate().then((v) => {
                  console.log(v);
                  dispatch(control.putConsoleToollink({ id: compile?.id, name: v.name, link: v.link })).then(res => {
                     if (res.success) {
                        setTool(false)
                        setAlter(false)
                        setCompile({})
                        consoleToollink()
                     }
                  })
               })
            }}
         >
            <div style={{ paddingLeft: 20 }}>
               <Form
                  onSubmit={(values) => console.log(values)}
                  getFormApi={(formApi) => (FormApi.current = formApi)}
               >
                  <Form.Input
                     label='工具名称'
                     labelPosition="left"
                     rules={[{ required: true, message: "请输入工具名称，1～10个字符，支持中英文，数字及常见符号-_ /." }]}
                     field='name'
                     initValue={compile?.name || ''}
                     placeholder='请输入工具名称'
                  />
                  <Form.TextArea maxCount={50} showClear
                     label='地址链接'
                     labelPosition="left"
                     placeholder='请输入URL'
                     initValue={compile?.link || ''}
                     rules={[{ required: true, message: "请输入地址链接" }]}
                     field='link'
                  />
               </Form>
            </div>
         </Modal> : ""
         }
      </>
   )
}

function mapStateToProps (state) {
   const { auth, global, members, webSocket } = state;
   return {
      //   loading: members.isRequesting,
      user: auth.user,
      actions: global.actions,
      pepProjectId: global.pepProjectId,
      //   members: members.data,
      //   socket: webSocket.socket
   };
}

export default connect(mapStateToProps)(Control);