WGShare.Client.Electron/src/page/Meeting/UserListWindow/index.tsx

import { role } from '@/config/role';
import styles from '@/page/Meeting/UserListWindow/index.module.scss'
import ImageUrl from '@/utils/package/imageUrl';
import { EllipsisOutlined, ExclamationCircleFilled, SearchOutlined } from '@ant-design/icons';
import { Button, Input, Modal, Popover } from 'antd';
import Avatar from '@/components/Avatar';
import { useEffect, useState } from "react";
import { storage } from '@/utils';
import { GetRoomUser } from '@/api/Meeting';
import { setKeyOpenChildWindow } from '@/utils/package/public';
const { confirm } = Modal;

const UserListWindow: React.FC = () => {
  const [userSearchValue, setUserSearchValue] = useState('')
  const [user, setUser] = useState<any>({});
  const [roomUserList, setRoomUserList] = useState<any>([])
  const channel = new BroadcastChannel('meeting_channel');
  const userInfo = JSON.parse(storage.getItem('user') as string)
  useEffect(() => {
    setUser(userInfo)
    getRoomUser()
    channel.onmessage = function (event) {
      const { type, roomUserList } = event.data;
      switch (type) {
        case 'roomUserList':
          setRoomUserList(roomUserList)
          break;
      }
    }
  }, []);
  // 获取房间用户
  const getRoomUser = async (): Promise<void> => {
    const data = JSON.parse(storage.getItem('stateInfo') as string)
    GetRoomUser(data.channelId).then(res => {
      if (res.code === 200) {
        res.data.forEach((item: any) => {
          item.isShow = true;
          item.isRoom = true;
          item.isAdmin = role.ID.includes(item.roleId) || item.isRoomManager
        })
        setRoomUserList(res.data)
      }
    })
  }
  return (
    <>
      <div className={`${styles.userListWindow}`}>
        <div className={styles.userListWindowTitle}>
          <span>成员列表</span>
          <img src={ImageUrl.icon18} className='drag' alt="" onClick={() => {
            window.electron.closeChildWindow('userListWindow')
            setKeyOpenChildWindow('userListWindow', false)
          }} />
        </div>
        <div className='drag' style={{ padding: '0 10px' }}>
          <Input
            placeholder="请输入用户名"
            prefix={<SearchOutlined style={{ color: 'white' }} />}
            value={userSearchValue}
            onChange={(e) => {
              setUserSearchValue(e.target.value)
              const newRoomUserList = [...roomUserList]
              newRoomUserList.forEach(row => {
                if (e.target.value) {
                  if (row.userName.indexOf(e.target.value) !== -1) {
                    row.isShow = true;
                  } else {
                    row.isShow = false;
                  }
                } else {
                  row.isShow = true;
                }
              });
              setRoomUserList(newRoomUserList)
            }}
          />
        </div>
        <div className={`${styles.userListWindowContent} drag`}>
          {roomUserList.map((item: any, index: number) => {
            return (
              item.isShow && item.isRoom ? <div key={index + item.uid}>
                <div>
                  <div><Avatar name={item.userName} /></div>
                  <span>
                    {item.userName}{item.uid === user.uid ? '(我)' : ''}
                    {role.ID.includes(item.roleId) || item.isRoomManager ?
                      <span style={{ color: '#02B188', marginLeft: '4px' }}>
                        {role.ID.includes(item.roleId) ? '管理员' : '发言人'}
                      </span>
                      : null}
                  </span>
                </div>
                <div>
                  {role.ID.includes(item.roleId) || item.isRoomManager ? <div>
                    <img src={item.enableMicr ? ImageUrl.icon22 : ImageUrl.icon22Active} alt="" onClick={() => {
                      channel.postMessage({
                        type: 'userListWindowPostOpenMicr',
                        userListWindowPostOpenMicr: {
                          enableMicr: !item.enableMicr,
                          uid: item.uid
                        }
                      });
                    }} title={item.enableMicr ? '静音' : '解除声音'} />
                  </div> : null}
                  {role.ID.includes(item.roleId) || item.isRoomManager ? <div>
                    <img src={item.enableCamera ? ImageUrl.icon23 : ImageUrl.icon23Active} alt="" onClick={() => {
                      channel.postMessage({
                        type: 'userListWindowPostOpenCamera',
                        userListWindowPostOpenCamera: {
                          enableCamera: !item.enableCamera,
                          uid: item.uid
                        }
                      });
                    }} title={item.enableCamera ? '关闭视频' : '开启视频'} />
                  </div> : null}
                  {item.uid !== user.uid && role.ID.includes(user.roleId) ? <div>
                    <Popover placement="left" title={''} content={
                      <div style={{ width: '100px' }}>
                        {!role.ID.includes(item.roleId) ? <Button
                          type="primary"
                          className='m-ant-btn'
                          style={{ marginBottom: '10px', width: '100%' }}
                          size={'small'}
                          onClick={() => {
                            if (item.isRoomManager) {
                              channel.postMessage({
                                type: 'userListWindowDeleteRoomManager',
                                userListWindowDeleteRoomManager: {
                                  uid: item.uid
                                }
                              });
                            } else {
                              channel.postMessage({
                                type: 'userListWindowPostRoomManager',
                                userListWindowPostRoomManager: {
                                  uid: item.uid
                                }
                              });
                            }
                          }}
                        >{item.isRoomManager ? '取消发言人' : '设为发言人'}</Button> : null}
                        <Button
                          type="primary"
                          className='m-ant-btn'
                          style={{ width: '100%' }}
                          size={'small'}
                          onClick={() => {
                            channel.postMessage({
                              type: 'shareScreenWindowEquipmentManagement',
                              shareScreenWindowEquipmentManagement: {
                                uid: item.uid,
                                userName: item.userName,
                              }
                            });
                            window.electron.closeChildWindow('userListWindow')
                            setKeyOpenChildWindow('userListWindow', false)
                          }}
                        >设备管理</Button>
                        <Button
                          type="primary"
                          style={{ backgroundColor: '#EC3C3C', width: '100%', marginTop: '10px' }}
                          size={'small'}
                          onClick={() => {
                            confirm({
                              title: '移出会议',
                              icon: <ExclamationCircleFilled />,
                              content: `确定将用户${item.userName}移出会议？`,
                              centered: true,
                              okText: '确定',
                              cancelText: '取消',
                              async onOk() {
                                channel.postMessage({
                                  type: 'userListWindowGetRoomKickout',
                                  userListWindowGetRoomKickout: {
                                    uid: item.uid
                                  }
                                });
                              },
                              onCancel() {
                              },
                            });
                          }}
                        >移出会议</Button>
                      </div>
                    }>
                      <EllipsisOutlined style={{
                        color: '#fff',
                        fontSize: '20px'
                      }} />
                    </Popover>
                  </div> : null}
                </div>
              </div> : null
            )
          }
          )}
        </div>
        <div className={`${styles.userListWindowFooter}`}>
          <div className='drag' onClick={() => {
            channel.postMessage({
              type: 'userListWindowAllPostOpenMicr'
            });
          }}>全员静音</div>
        </div>
      </div>
    </>
  )
}

export default UserListWindow