<template>
	<div class="leftTop">
		<Card :title="activeTab == 0 ? '人员情况' : '三色评价'">
			<div class="top-content">
				<span :class="activeTab == 0 ? 'active' : ''" @click="activeChange(0)">人员情况</span>
				<span :class="activeTab == 1 ? 'active' : ''" @click="activeChange(1)">三色评价</span>
			</div>
			<div class="box-content" v-show="activeTab == 0">
				<div class="member-top-data">
					<div class="top-data-item">
						<span>未履职人员</span>
						<span>{{ performanceAnalysisObj.notPerformNum || 0 }}/{{ performanceAnalysisObj.inServiceNum || 0 }}</span>
					</div>
					<div class="top-data-item">
						<span>项目经理</span>
						<span>{{ performanceAnalysisObj.xmjlNotPerformNum || 0 }}/{{ performanceAnalysisObj.xmjlInServiceNum || 0 }}</span>
					</div>
					<div class="top-data-item">
						<span>安全员</span>
						<span>{{ performanceAnalysisObj.aqyNotPerformNum || 0 }}/{{ performanceAnalysisObj.aqyInServiceNum || 0 }}</span>
					</div>
					<div class="top-data-item">
						<span>质量员</span>
						<span>{{ performanceAnalysisObj.zlyNotPerformNum || 0 }}/{{ performanceAnalysisObj.zlyInServiceNum || 0 }}</span>
					</div>
					<div class="top-data-item">
						<span>监理</span>
						<span>{{ performanceAnalysisObj.jlNotPerformNum || 0 }}/{{ performanceAnalysisObj.jlInServiceNum || 0 }}</span>
					</div>
				</div>
				<div class="member-bottom-table">
					<div class="list-content">
						<div class="tab-list">
							<div>企业名称</div>
							<div>未履职人数</div>
							<div>项目经理</div>
							<div>安全员</div>
							<div>质量员</div>
							<div>监理</div>
						</div>
						<el-scrollbar class="list-box">
							<div v-for="(item, index) in performanceAnalysisList" class="listStyle" :key="item.id">
								<!-- <div style="width: 5%">{{ index + 1 }}</div> -->
								<div>{{ item.enterpriseName || "" }}</div>
								<div>{{ item.notPerformNum || 0 }}/{{ item.inServiceNum || 0 }}</div>
								<div>{{ item.xmjlNotPerformNum || 0 }}/{{ item.xmjlInServiceNum || 0 }}</div>
								<div>{{ item.aqyNotPerformNum || 0 }}/{{ item.aqyInServiceNum || 0 }}</div>
								<div>{{ item.zlyNotPerformNum || 0 }}/{{ item.zlyInServiceNum || 0 }}</div>
								<div>{{ item.jlNotPerformNum || 0 }}/{{ item.jlInServiceNum || 0 }}</div>
							</div>
						</el-scrollbar>
					</div>
					<div class="not-data" v-if="performanceAnalysisList.length == 0">
						<img src="@/assets/images/noData.png" alt="" />
						<p>暂无数据</p>
					</div>
				</div>
			</div>
			<div class="box-content" v-show="activeTab == 1">
				<div class="remark-top-data">
					<div class="top-data-item">
						<span>低风险</span>
						<span style="color: #45c0b9">{{ statsEnterpriseRiskObj.lowRiskNum }}</span>
					</div>
					<div class="top-data-item">
						<span>中风险</span>
						<span style="color: #e8bc21">{{ statsEnterpriseRiskObj.mediumRiskNum }}</span>
					</div>
					<div class="top-data-item">
						<span>高风险</span>
						<span style="color: #fa2a31">{{ statsEnterpriseRiskObj.highRiskNum }}</span>
					</div>
				</div>
				<div class="remark-bottom-table">
					<div class="list-content">
						<div class="tab-list">
							<div>企业名称</div>
							<div>低风险人数</div>
							<div>中风险人数</div>
							<div>高风险人数</div>
						</div>
						<el-scrollbar class="list-box">
							<div v-for="(item, index) in statsEnterpriseRiskList" class="listStyle" :key="item.id">
								<!-- <div style="width: 5%">{{ index + 1 }}</div> -->
								<div>{{ item.enterpriseName || "" }}</div>
								<div>{{ item.lowRiskNum || 0 }}</div>
								<div>{{ item.mediumRiskNum || 0 }}</div>
								<div>{{ item.highRiskNum || 0 }}</div>
							</div>
						</el-scrollbar>
					</div>
					<div class="not-data" v-if="statsEnterpriseRiskList.length == 0">
						<img src="@/assets/images/noData.png" alt="" />
						<p>暂无数据</p>
					</div>
				</div>
			</div>
		</Card>
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { ref, watch, onMounted } from "vue";
import { GlobalStore } from "@/stores";
import { performanceAnalysisApi, statsEnterpriseRiskApi } from "@/api/modules/agjtCommandApi";
const store = GlobalStore();
const activeTab = ref(0);
const performanceAnalysisObj = ref({
	aqyInServiceNum: 0,
	aqyNotPerformNum: 0,
	enterpriseName: 0,
	inServiceNum: 0,
	jlInServiceNum: 0,
	jlNotPerformNum: 0,
	notPerformNum: 0,
	xmjlInServiceNum: 0,
	xmjlNotPerformNum: 0,
	zlyInServiceNum: 0,
	zlyNotPerformNum: 0
});
const performanceAnalysisList = ref([] as any);
const statsEnterpriseRiskObj = ref({
	lowRiskNum: 0,
	mediumRiskNum: 0,
	highRiskNum: 0
});
const statsEnterpriseRiskList = ref([] as any);
// tab切换
const activeChange = (index: any) => {
	activeTab.value = index;
	if (index == 0) {
		performanceAnalysisFn(true);
	} else {
		statsEnterpriseRiskFn(true);
	}
};
// 人员情况
const performanceAnalysisFn = async (showLoading: boolean) => {
	const res: any = await performanceAnalysisApi(
		{
			projectSn: store.sn
		},
		showLoading
	);
	if (res.result) {
		console.log(res.result, "人员情况");
		performanceAnalysisObj.value = res.result;
		performanceAnalysisList.value = res.result.list || [];
	}
};
// 三色评价
const statsEnterpriseRiskFn = async (showLoading: boolean) => {
	const res: any = await statsEnterpriseRiskApi(
		{
			projectSn: store.sn
		},
		showLoading
	);
	if (res.result) {
		console.log(res.result, "三色评价");
		// performanceAnalysisObj.value = res.result;
		statsEnterpriseRiskList.value = res.result || [];
		let dealData = {
			lowRiskNum: 0,
			mediumRiskNum: 0,
			highRiskNum: 0
		};
		statsEnterpriseRiskList.value.map((item: any) => {
			dealData.lowRiskNum += item.lowRiskNum;
			dealData.mediumRiskNum += item.mediumRiskNum;
			dealData.highRiskNum += item.highRiskNum;
		});
		statsEnterpriseRiskObj.value = dealData;
	}
};
onMounted(async () => {
	performanceAnalysisFn(true);
});
</script>

<style lang="scss" scoped>
.leftTop {
	width: 100%;
	height: 100%;
	.top-content {
		width: 18%;
		position: absolute;
		top: 3%;
		right: 0px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		span {
			font-family: ABeeZee, ABeeZee;
			font-weight: normal;
			font-size: 16px;
			color: rgba(255, 255, 255, 0.6);
			letter-spacing: 1px;
			text-shadow: 0px 4px 4px #14346c;
			text-align: center;
			font-style: italic;
			text-transform: none;
			cursor: pointer;
		}
		.active {
			color: #ffffff;
		}
	}
	.box-content {
		width: 100%;
		height: 100%;
		padding-top: 1%;
		.remark-top-data {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-bottom: 2%;
			.top-data-item {
				width: 135px;
				height: 51px;
				background: url("@/assets/images/comprehensiveManage/bgOne.png") no-repeat;
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				padding: 0.5% 0;
				padding-left: 2%;
				span:nth-child(1) {
					font-size: 16px;
					color: #fff;
					font-family: ABeeZee-Regular;
					margin-bottom: 1%;
				}
				span:nth-child(2) {
					font-size: 24px;
					color: #65d7f9;
					font-family: ABeeZee-Regular;
				}
			}
			.top-data-item:not(:last-child) {
				margin-right: 2%;
			}
		}
		.remark-bottom-table {
			height: 62%;
			box-sizing: border-box;
			margin: 0 2%;
			position: relative;
			.list-content {
				height: 95%;
				width: 100%;
				.tab-list {
					display: flex;
					align-items: center;
					width: 100%;
					height: 31px;
					background: rgba(0, 122, 255, 0.19);
					// position: absolute;
					left: 75.5%;
					top: 75%;
					color: #ccc;
					font-size: 16px;
					// justify-content: space-around;
					div {
						width: 25%;
						text-align: center;
						white-space: nowrap;
					}
				}
				.list-box {
					height: 82%;
					.listStyle {
						display: flex;
						align-items: center;
						color: #fff;
						font-size: 14px;
						line-height: 30px;
						margin-top: 0.5%;
						cursor: pointer;
						background: rgba(0, 122, 255, 0.06);
						div {
							width: 25%;
							text-align: center;
							white-space: nowrap;
						}
					}
					.listStyle:hover {
						background: rgba(0, 122, 255, 0.43);
					}
				}
			}
		}
		.member-top-data {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 2%;
			.top-data-item {
				width: 135px;
				height: 51px;
				background: url("@/assets/images/comprehensiveManage/bgOne.png") no-repeat;
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				padding: 0.5% 0;
				padding-left: 2%;
				span:nth-child(1) {
					font-size: 16px;
					color: #fff;
					font-family: ABeeZee-Regular;
					margin-bottom: 1%;
				}
				span:nth-child(2) {
					font-size: 24px;
					color: #65d7f9;
					font-family: ABeeZee-Regular;
				}
			}
			.top-data-item:not(:last-child) {
				margin-right: 2%;
			}
		}
		.member-bottom-table {
			height: 62%;
			box-sizing: border-box;
			margin: 0 2%;
			position: relative;
			.list-content {
				height: 95%;
				width: 100%;
				.tab-list {
					display: flex;
					align-items: center;
					width: 100%;
					height: 31px;
					background: rgba(0, 122, 255, 0.19);
					// position: absolute;
					left: 75.5%;
					top: 75%;
					color: #ccc;
					font-size: 16px;
					// justify-content: space-around;
					div {
						width: 17%;
						text-align: center;
						white-space: nowrap;
					}
				}
				.list-box {
					height: 82%;
					.listStyle {
						display: flex;
						align-items: center;
						color: #fff;
						font-size: 14px;
						line-height: 30px;
						margin-top: 0.5%;
						cursor: pointer;
						background: rgba(0, 122, 255, 0.06);
						div {
							width: 17%;
							text-align: center;
							white-space: nowrap;
						}
					}
					.listStyle:hover {
						background: rgba(0, 122, 255, 0.43);
					}
				}
			}
		}
		.not-data {
			top: 40%;
			width: 30%;
			left: 35%;
			position: absolute;
			text-align: center;
			img {
				width: 50%;
			}
			p {
				color: #fff;
				font-size: 14px;
			}
		}
	}
}
::v-deep .h-card .content {
	height: 80%;
	margin-top: 1.8%;
}
</style>
