<template>
	<div class="projectContent">
		<div class="left">
			<leftTop class="leftTop"></leftTop>
			<leftBottom class="leftBottom" @openDialog="openPeopleCountDialog"></leftBottom>
		</div>
		<div class="center">
			<centerTop class="centerTop" @openDialog="openPeopleCountDialog"></centerTop>
			<centerBottom class="centerBottom" @openDialog="openPeopleCountDialog"></centerBottom>
		</div>
		<div class="right">
			<rightAll class="rightAll" @openDialog="openPeopleCountDialog"></rightAll>
		</div>
		<dataDialog ref="partyBuildRef"></dataDialog>
		<div :class="{'contentsBox':true,'openDialog': show,'hiddenDialog': !show}">
			<div class="topBox">
				<div class="expand">
				</div>
				<div class="retract">
					<el-icon color="#fff" size="26" v-show="show" @click="retract"><DArrowLeft /></el-icon>
				</div>
			</div>
			<div class="bottomBox" v-if="show">
				<div v-for="(item,i) in backendUrls" :key="i">
					<div class="listItem" @click="goBackend(item)">
						<div class="itemIcon" :style="{'background':item.color !== '#dc3c00' ? item.color: 'rgba(0,0,0,0)'}">
							<el-icon :color="item.color == '#dc3c00' ? '#dc3c00' : '#fff'" size="32"><StarFilled /></el-icon>
						</div>
						<span class="itemText">{{ item.name }}</span>
					</div>
				</div>
			</div>
		</div>
		<div class="expandBtn" v-if="!show" @click="expand">
			<el-icon color="#fff" size="26" v-show="!show" @click="expand"><DArrowRight /></el-icon>
		</div>
	</div>
</template>

<script setup lang="ts">
import leftTop from "@/views/commandScreen/commandCenter/leftTop.vue";
import leftBottom from "@/views/commandScreen/commandCenter/leftBottom.vue";
import centerTop from "@/views/commandScreen/commandCenter/centerTop.vue";
import centerBottom from "@/views/commandScreen/commandCenter/centerBottom.vue";
import rightAll from "@/views/commandScreen/commandCenter/rightAll.vue";
import { GlobalStore } from "@/stores";
import dataDialog from "../dialogCompnnents/data-dialog.vue";
import * as mqtt from "mqtt/dist/mqtt.min";
const BASEURL = import.meta.env.VITE_API_URL

// import { getWorkerStatisticsCountApi, getProjectDetail } from "@/api/modules/projectOverview";
import { ref, onMounted } from "vue";
const store = GlobalStore();
// const statisticsCount = ref(null as any);

// const projectData = ref(null as any);
// 弹窗
const partyBuildRef = ref();
const openPeopleCountDialog = (index: any) => {
	partyBuildRef.value.openDialog(index);
};
const options = {
	connectTimeout: 40000,
	clientId: "mqttjs_" + Math.random().toString(16).substr(2, 8),
	username: "root",
	password: "123456",
	clean: true
};
// 监听mqtt下发信息然后刷新列表
const mqttMSG = () => {
	// this.userId = this.$store.state.userInfo.userId;
	// this.topicName = this.$store.state.userInfo.scope;
	const client = mqtt.connect("ws://jxj.zhgdyun.com:8083/mqtt", options);
	// mqtt连接   +"/#"  +workerId
	client.on("connect", () => {
		// this.topicName + this.userId
		client.subscribe("zjsjTopic" + store.userId + "/bigScreen/emergency/alert", { qos: 0 }, (error: any) => {
			if (!error) {
			} else {
			}
		});
	});
	// 接收消息处理
	client.on("message", (topic: any, message: any) => {
		const result = JSON.parse(message);
		openPeopleCountDialog({
			index: 10,
			title: "人员呼叫",
			timeOut: 60,
			timeFlag: null,
			show: true,
			mapsDetail: JSON.parse(result.payload)
		});
	});
	// 断开发起重连
	// client.on("reconnect", (error) => {
	// });
	// 链接异常处理
	client.on("error", (error: any) => {
	});
};
const backendUrls = ref([
	{id:1, name:'项目概况', url:'', color:'#dc3c00'},
	{id:2, name:'工作台', url:'/workSpace', color:'#00aff0'},{id:3, name:'项目基本信息管理', url:'/project/summary/baseInfo', color:'#00aff0'},
	{id:4, name:'区域管理', url:'/project/quality/business', color:'#00aff0'},{id:5, name:'进度管理', url:'/project/progressManagementAg/projectganttChart', color:'#00aff0'},

	{id:6, name:'安全准入', url:'', color:'#dc3c00'},
	{id:7, name:'人员管理', url:'/project/labor/personManage', color:'#0078d7'},{id:8, name:'车辆管理', url:'/project/carManage/realTimeData', color:'#0078d7'},
	{id:9, name:'访客管理', url:'/project/labor/visitRecord', color:'#0078d7'},{id:10, name:'材料入场管理', url:'/project/materialManage/materialEntryManage', color:'#0078d7'},
	{id:11, name:'材料出场管理', url:'/project/materialManage/materialExitManage', color:'#0078d7'},

	{id:12, name:'安全管理', url:'', color:'#dc3c00'},
	{id:13, name:'安全隐患检查', url:'/project/safetyEducation/safetyAnalysis', color:'#113768'},{id:14, name:'AI预警分析', url:'/project/aiAnalysis/dealPushManage', color:'#113768'},
	{id:15, name:'AI训练模型', url:'/project/videoOverview', color:'#113768'},{id:16, name:'综合考试培训', url:'/project/examSystem2/subjectManagement', color:'#113768'},
	{id:17, name:'质量管理', url:'/project/quality/qualityAnalysis', color:'#113768'},{id:18, name:'特殊作业', url:'/project/specialWork/fireWork', color:'#113768'},
	{id:19, name:'智能巡检', url:'/project/inspecPoint/inspection', color:'#113768'},
] as any)
function goBackend(item: any){
	if(item.url != ''){
		// window.location.replace('http://localhost:8080/#/login?command=1&pathItem='+ item.url +'&token=' + store.token);
		console.log(BASEURL)
		window.open(BASEURL + '/#/login?command=1&pathItem='+ item.url +'&token=' + store.token, '_blank');
		// window.open('http://10.0.1.77:8080' + '/#/login?command=1&pathItem='+ item.url +'&token=' + store.token, '_blank');
	}
}
const show = ref(false as any)
function retract(){
	show.value = false
}
function expand(){
	show.value = true
}

onMounted(() => {
	mqttMSG();
	// setTimeout(() => {
	// 	openPeopleCountDialog({
	// 		index: 10,
	// 		title: "人员呼叫",
	// 		timeOut: 10,
	// 		timeFlag: null,
	// 		show: true,
	// 		mapsDetail: {
	// 			alarmPersonId: "1795271026055901186",
	// 			alarmPersonName: "测试0528",
	// 			alarmTime: "2024-06-03 19:19:23",
	// 			departmentName: null,
	// 			disposalReport: null,
	// 			dispositionStatus: 1,
	// 			emergencyDetail: null,
	// 			emergencyTypeId: "-1",
	// 			emergencyTypeName: "一键报警",
	// 			enterpriseId: "1786223302337675266",
	// 			enterpriseName: "测试企业1",
	// 			id: "1797588887538925569",
	// 			incidentClosedStatus: 1,
	// 			incidentSite: "广东省深圳市宝安区福海路福永意库",
	// 			latitude: 22.67405,
	// 			livePicture: null,
	// 			liveVideoSituation: null,
	// 			longitude: 113.80984,
	// 			projectSn: "BD3137498CB84BF0969979E0342CDBCA",
	// 			situations: null,
	// 			teamName: "司机-1",
	// 			updateDate: "2024-06-03 19:19:30"
	// 		}
	// 	});
	// }, 3000);
	// setTimeout(() => {
	// 	openPeopleCountDialog({
	// 		index: 10,
	// 		title: "查看1",
	// 		timeOut: 10,
	// 		timeFlag: null,
	// 		show: true,
	// 		mapsDetail: {
	// 			alarmPersonId: "1795271026055901186",
	// 			alarmPersonName: "测试0528",
	// 			alarmTime: "2024-06-03 19:19:23",
	// 			departmentName: null,
	// 			disposalReport: null,
	// 			dispositionStatus: 1,
	// 			emergencyDetail: null,
	// 			emergencyTypeId: "-1",
	// 			emergencyTypeName: "一键报警",
	// 			enterpriseId: "1786223302337675266",
	// 			enterpriseName: "测试企业1",
	// 			id: "1797588887538925568",
	// 			incidentClosedStatus: 1,
	// 			incidentSite: "广东省深圳市宝安区福海路福永意库",
	// 			latitude: 22.67405,
	// 			livePicture: null,
	// 			liveVideoSituation: null,
	// 			longitude: 113.80984,
	// 			projectSn: "BD3137498CB84BF0969979E0342CDBCA",
	// 			situations: null,
	// 			teamName: "司机-1",
	// 			updateDate: "2024-06-03 19:19:30"
	// 		}
	// 	});
	// }, 6000);
});
</script>
<style lang="scss" scoped>
.projectContent {
	width: 100%;
	height: 100%;
	display: flex;
	.left {
		height: 109.5%;
		width: 26%;
		transform: translateY(-70px);

		.leftTop {
			height: 24.5%;
		}

		.leftBottom {
			height: 75.5%;
			margin: 3% 0 3% 0;
		}
	}

	.center {
		width: 46%;
		margin: 0 1%;

		.centerTop {
			height: 53.8%;
			// margin-bottom: 3%;
		}

		.centerBottom {
			height: 46.85%;
			margin: 1% 0 0 0;
		}
	}

	.right {
		width: 26%;
		height: 109.2%;
		transform: translateY(-70px);
		// .rightAll {
		// 	height: 32%;
		// }
		// .rightCenter {
		// 	height: 33%;
		// 	margin: 3% 0 3% 0;
		// }
		// .rightBottom {
		// 	height: 32%;
		// }
	}

	.contentsBox{
		position: fixed;
		top: 1px;
		left: 0px;
		width: 15.3%;
		height: 100%;
		// padding-top: 10px;
		// transition: left 0.5s; /* 添加过渡效果 */
		.topBox{
			height: 3.7%;
			width: 100%;
			background-color: rgba($color: #000000, $alpha: 0);
			display: flex;
			justify-content: space-between;
			align-items: center;
			.retract{
				cursor: pointer;
			}
		}
		.bottomBox{
			height: 96.3%;
			width: 93%;
			background: #0a1334;
			.listItem{
				color: #fff;
				height: 40px;
				// background-color: darkred;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				cursor: pointer;
				.itemIcon{
					margin-left: 10px;
					width: 60px;
					height: 35px;
					// background-color: darkblue;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.itemText{
					margin-left: 10px;
					font-size: 16px;
				}
			}
		}
	}
	.hiddenDialog{
		left: -1000px;
	}
	.openDialog{
		left: 0;
	}
	.expandBtn{
		cursor: pointer;
		color: #fff;
		position: fixed;
		width: auto;
		height: 3.7%;
		top:0;
		left: 0;
		// background-color: #061f51;
		background-color: rgba($color: #000000, $alpha: 0);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 14px;
		// margin-bottom: 5px;
		// margin-left: 10px;
	}
}
</style>
