Outline/src/components/Header.tsx

import { useSelector } from "react-redux";
import bluetooth_nc from "../assets/bluetooth_nc.svg";
import bluetooth_c from "../assets/bluetooth_c.svg";
import icon_avatar from "../assets/icon_avatar.svg";
import icon_logout from "../assets/icon_logout.svg";
import check_mark from "../assets/check_mark.svg";
import icon_pwd from "../assets/icon_pwd.svg";
import { useState, useEffect } from "react";
import {updateDeviceState } from '../store/device/deviceState';
// import { bluetoothList, bluetoothInfo } from '../mock/recordList'
import { Dropdown, MenuProps, message, Button, Popover } from "antd";
import { logout } from "../services/user/user";
import { getDeviceInfo } from "../services/device/deviceState"
import "./bluetooth.scss";
import { useAppSelector } from "../utils/hooks";
import { Device } from "../services/measure/type";
export default function Header() {
		console.log('updateDeviceState---', updateDeviceState)
		let [isConnect, setIsConnect] = useState(false)
		//@ts-ignoref
		const deviceState = useSelector(store => store.deviceState);
		const [bluetoothInfo, setBluetoothInfo] = useState(deviceState)
		console.log('deviceState---',deviceState)
		//获取当前websocet的状态
		const showBlueImg = () => {
			if(!isConnect){
				return <Popover content={getBtList()} title="可连接设备">
									<div ></div>
									<img src={bluetooth_nc} alt="" className="ext-base ml-2 h-6" />
							</Popover>
			}else {
				return <Popover content={getBtContent()} title="">
									<img src={bluetooth_c} onClick={onDisconnectBt} alt="" className="ext-base ml-2 h-6" />
							</Popover>
			}
		}

	let [bluetoothList, setbluetoothList] = useState<Device[]>([])
	//获取mock数据
	useEffect(()=>{
		getDeviceInfo().then(res => {
			console.log('res===', res)
			//@ts-ignore
			setbluetoothList(res.data.list)
		})
	})
	
	//@ts-ignore
	const context = useSelector(store => store.context);
	const [messageApi, contextHolder] = message.useMessage();

	const items: MenuProps["items"] = [
		// {
		// 	key: "1",
		// 	label: "修改密码",
		// 	icon: <img src={icon_pwd} alt="" className="w-[18px]" />,
		// 	onClick: () => {
		// 		messageApi.info('ok')
		// 	},
		// },
		{
			key: "2",
			label: "退出登录",
			icon: <img src={icon_logout} alt="icon" className="w-5" />,
			onClick: () => {
				logout({}).then(res => {
					if (res.status !== 0) {
						messageApi.error(res.data.info)
					}
				})
			}
		},
	];

	
	const getBtList = () => {
		let Dom = null
		if(!isConnect){
			Dom = <div>
				 {bluetoothList.map(item => {
						return <div className="mt-[1rem]" onClick={connectBt}>
							<Button type="link">{item.name}</Button>
						</div>
					})}
			</div>
		}
		return Dom
	}

	//蓝牙已连接
	const getBtContent = ()=> {
		return <div>
			<div>
				<div className="bluetooth_c">
					<img src={check_mark} alt="" className="ext-base ml-2 h-4" />
					<div className="ml-[10px]">设备已连接</div>
				</div>
				<div className="pl-[15px]">
					<div className="mt-[1rem]">型号：{bluetoothInfo.connectPort}</div>
					{/* <div className="mt-[1rem]">电量：{bluetoothInfo.power}</div> */}
				</div>
			</div>
		</div>
	}

	//断开蓝牙连接
	const onDisconnectBt = ()=> {
		setIsConnect(false)
	}
	

	const connectBt = () => {
		setIsConnect(true)
		setTimeout(()=>{
		},1000)
	}

	

	return (
		<>
			{contextHolder}
			<div className="bg-[--bgColor] h-full flex items-center">
				
				<div className="ml-auto mr-8 flex items-center">
					<div className="ml-auto mr-8 flex items-center w-[5rem]">
						{showBlueImg()}
					</div>
					<Dropdown menu={{ items }} trigger={["click"]}>
						<section className="flex items-center">
							<img src={icon_avatar} alt="" className="h-8" />
							<p className="text-base ml-2">{context.user.loginFlag ? context.user.loginUser.nickname : "未登录"}</p>
						</section>
					</Dropdown>
				</div>
			</div>
		</>
	);
}