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_usb from "../assets/icon_usb.svg";
import icon_battery from "../assets/icon_battery.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 { useState, useEffect } from "react";
import { Dropdown, MenuProps, message, Button, Popover } from "antd";
import { logout } from "../services/user/user";
import { useNavigate } from "react-router";
import { useAppDispatch, useAppSelector } from "../utils/hooks";
import { updateUser } from "../store/features/contextSlice";
import "./bluetooth.scss";
export default function Header() {
	const navigate = useNavigate();
	const dispatch = useAppDispatch();
	const deviceInfo = useAppSelector(store => store.context.device);
	const deviceState = useAppSelector(store => store.deviceState);
	const userInfo = useAppSelector(store => store.context.user.loginUser);
	let [isConnect, setIsConnect] = useState(deviceState.isConnect);
	//获取当前websocet的状态
	const showBlueImg = () => {
		if (deviceState.isConnect) {
			return (
				<Popover content={getBtContent()} title="" trigger="click">
					<section className="bg-white rounded-md h-9 w-10 flex justify-center items-center mr-3">
						<img src={icon_usb} alt="" className="h-6" />
					</section>
				</Popover>
			);
		}
		return null;
		// 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={icon_usb} onClick={onDisconnectBt} alt="" className="ext-base ml-2 h-6" />
		// 				</Popover>
		// }
	};

	let list = [
		{
			name: "Kdkow_1",
			id: "1",
		},
		{
			name: "llwoa_2",
			id: "2",
		},
	];
	let [bluetoothList, setbluetoothList] = useState(list);
	//获取mock数据
	useEffect(() => {
		if (userInfo.nickname) {
			setNickname(userInfo.nickname);
		} else {
			const user = localStorage.getItem("user");
			if (user) {
				let userData = JSON.parse(user || "");
				setNickname(userData.nickname);
			}
		}
	},[userInfo.nickname]);

	const [messageApi, contextHolder] = message.useMessage();
	const [nickname, setNickname] = useState<string>();
	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);
					} else {
						localStorage.setItem("user", "");
						dispatch(
							updateUser({
								loginFlag: false,
								loginUser: {},
							})
						);
						navigate("/login");
					}
				});
			},
		},
	];

	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]">sn码：{deviceState.sn}</div>
						<div className="mt-[1rem]">设备描述：{deviceState.descriptivePortName}</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">
				<section className="ml-auto rounded-md h-9 mr-4 flex items-center bg-white gap-2 pl-4">
					<span className="w-[94px]">温度：{deviceInfo.temperature.toFixed(1)}℃ </span>
					<span className="w-[120px]">X轴倾斜：{deviceInfo.inclinatorX}</span>
					<span className="w-[120px]">Y轴倾斜：{deviceInfo.inclinatorY}</span>
				</section>
				<section className="bg-white rounded-md h-9 w-12 relative  mr-3 flex justify-center items-center">
					<img
						src={icon_battery}
						className="absolute h-8 w-10 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
						alt=""
					/>
					<p className="text-primary text-xs">{deviceInfo.power.toFixed()}%</p>
				</section>
				{/* <section className="bg-white rounded-md h-9 w-10 flex justify-center items-center mr-3">
					<img src={icon_usb} className="w-6" alt="icon" />
				</section> */}
				{showBlueImg()}
				<div className="mr-8 flex items-center min-w-[5rem]">
					<Dropdown menu={{ items }} trigger={["click"]}>
						<section className="flex items-center">
							<img src={icon_avatar} alt="" className="h-8" />
							<p className="text-base ml-2">{nickname || "未登录"}</p>
						</section>
					</Dropdown>
				</div>
			</div>
		</>
	);
}