<template>
	<div class="leftBottom">
		<div class="header">
			<div class="hLeft">项目人员考勤</div>
		</div>
		<div class="content">
			<div class="contentTop">
				<div class="line1">
					<span>出勤人员总数:</span>
					<!-- <div class="numberCard" v-for="(item,i) in '0234'" :key="i">{{item}}</div> -->
					<div class="numberCard" v-for="(item,i) in totalPerson" :key="i">{{item}}</div>
					<span style="margin-left:15px">考勤日环比</span>
					<div style="display:flex" v-if="typeof totalPersonRhbRatio == 'undefined'">
						<div class="dayRadio">0%</div>
					</div>
					<div style="display:flex" v-if="totalPersonRhbRatio > 0">
						<div class="dayRadio">{{totalPersonRhbRatio}}%</div>
						<div class="iconCenter"><el-icon size="20" color="#1E90FF"><Top/></el-icon></div>
					</div>
					<div style="display:flex" v-if="totalPersonRhbRatio == 0">
						<div class="dayRadio">{{totalPersonRhbRatio}}%</div>
					</div>
					<div style="display:flex" v-if="totalPersonRhbRatio < 0">
						<div class="dayRadio">{{totalPersonRhbRatio}}%</div>
						<div class="iconCenter"><el-icon size="20" color="#8B0000"><Bottom/></el-icon></div>
					</div>
				</div>
				<div class="line2">
					<div :class="['line2Item',activeIndex === '0' ? 'activeTab' : '']" @click="handleTab('0')">总包出勤情况分析</div>
					<div :class="['line2Item',activeIndex === '1' ? 'activeTab' : '']" @click="handleTab('1')">人员风险趋势分析</div>
				</div>
				<div class="barContent">
					<div id="bar" style="width:98%;height:100%" ref="bar"></div>
				</div>
			</div>
			<div class="centerBottom">
				<div class="cbTop">
					<div class="header"><div class="hLeft">进度情况分析</div></div>
					<div class="content" style="backgound:black">
						<div class="cbLine1">
							<div style="display:flex">
								<span>项目总进度:</span>
								<div class="numberCard" v-for="(item,i) in projectTotalProgress" :key="i">{{item}}</div>
								<span style="margin-left:5px">%</span>
							</div>
							<div style="display:flex">
								<span style="margin-left:15px">项目剩余天数</span>
								<div class="numberCard" v-for="(item,i) in projectSurplusDayNum" :key="i">{{item}}</div>
								<span style="margin-left:5px">天</span>
							</div>
						</div>
						<div class="cbProcess" v-if="processList.length >= 5">
							<!-- v-if="listData.length>0" :list="listData"  -->
							<vue3-seamless-scroll 
							v-if="processList.length>0" :list="processList" 
							:speed="1" :limitScrollNum="5" :step="0.3" :hover="true" class="scroll">
								<div class="pItem" v-for="(item,i) in processList" :key="i">
									<div class="pLeft">
										<span :class="['plInner','plBgc'+(i+1)%12]">
											<span style="margin-left:10px">Top{{i+1}}</span>
										</span>
									</div>
									<div class="pRight">
										<div class="prTop">
											<div class="prtLeft">{{item.enterpriseName}}</div>
											<div class="prtRight">{{item.changeAfter}}%</div>
										</div>
										<div class="prBottom">
											<div class="processLineBg">
												<div :class="['processLine','plBtnBgc'+(i+1)%12]" :style="{width:item.changeAfter+'%'}">
													<div class="processLineBtn"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</vue3-seamless-scroll>
						</div>
						<div class="cbProcess" v-else>
							<!-- v-if="listData.length>0" :list="listData"  -->
							<!-- <vue3-seamless-scroll 
							v-if="processList.length>0" :list="processList" 
							:speed="1" :limitScrollNum="5" :step="0.3" :hover="true" class="scroll"> -->
								<div class="pItem" v-for="(item,i) in processList" :key="i">
									<div class="pLeft">
										<span :class="['plInner','plBgc'+(i+1)%12]">
											<span style="margin-left:10px">Top{{i+1}}</span>
										</span>
									</div>
									<div class="pRight">
										<div class="prTop">
											<div class="prtLeft">{{item.enterpriseName}}</div>
											<div class="prtRight">{{item.changeAfter}}%</div>
										</div>
										<div class="prBottom">
											<div class="processLineBg">
												<div :class="['processLine','plBtnBgc'+(i+1)%12]" :style="{width:item.changeAfter+'%'}">
													<div class="processLineBtn"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
							<!-- </vue3-seamless-scroll> -->
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import ECharts from 'vue-echarts';
import { selectQualityStatisticsApi } from "@/api/modules/projectOverview";
import { 
	getPersonTypeAndEduStatisticsApi,
	queryAttendanceOfEachCompanyApi,
	getCountTaskProgressApi,
	queryCountEnterpriseApi,
 } from "@/api/modules/agjtCommandApi"; 
import type { TabsPaneContext, ElMessageBox } from "element-plus";
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { GlobalStore } from "@/stores";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
const store = GlobalStore();
const activeName = ref("总包出勤情况分析");
const activeIndex = ref("0" as any);
//出勤人员数据
let totalPerson = ref(""as any)
//考勤日环比
let totalPersonRhbRatio = ref("" as any)
//获取出勤人员数据/考勤日环比
const getPersonTypeAndEduStatistics = async () => {
	const res: any = await getPersonTypeAndEduStatisticsApi({
		projectSn: store.sn
	});
	if (res.result) {
		console.log("出勤人员数据/考勤日环比", res);
		totalPerson.value = res.result.personType.attendancePerson.totalPerson
		// if(totalPerson.value.length < 4){
		// 	let temp = 4-totalPerson.value.length
		// 	for(let i = 0;i<temp;i++){
		// 		totalPerson.value = "0" + totalPerson.value
		// 	}
		// }
		totalPersonRhbRatio.value = res.result.personType.attendancePerson.totalPersonRhbRatio
	}
};

//总包出勤情况分析数据列表
let projectCompanyWorkTotalList = ref([] as any)
let xData = ref([] as any)
let yData = ref([] as any)
//获取总包出勤情况分析数据
const queryAttendanceOfEachCompany = async () => {
	const res: any = await queryAttendanceOfEachCompanyApi({
		projectSn: store.sn
	});
	if (res.result) {
		console.log("获取总包出勤情况分析数据", res);
		projectCompanyWorkTotalList.value = res.result.projectCompanyWorkTotalList
		xData.value = projectCompanyWorkTotalList.value.map(item => item.enterpriseName.substring(0,4))
		yData.value = projectCompanyWorkTotalList.value.map(item => item.attendancePersonNum)
		drawBar()
	}
};

//切换tab
const handleTab = (val:string) => {
	activeIndex.value = val
}

//绘画柱状图
function drawBar() {
	console.log("---------------------bar--------")
	type EChartsOption = echarts.EChartsOption;
	var chartDom = document.getElementById('bar')!;
	var myChart = echarts.init(chartDom);
	var option: EChartsOption;

	option = {
		xAxis: {
			type: 'category',
			// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			data: xData.value,
			axisLabel: {
				fontSize: 12, // 设置字体大小为12px
				// rotate: 45,
				interval: 0, // 显示所有标签
			},
			axisLine: {
				lineStyle: {
					// color: 'white' // 设置X轴刻度线的颜色为白色
					color: 'rgba(200,200,200,1)'
				}
			},
			
		},
		yAxis: {
			type: 'value',
			axisLabel: {
				fontSize: 12, // 设置字体大小为12px
			},
			axisLine: {
				lineStyle: {
					// color: 'white' // 设置Y轴刻度线的颜色为白色
					color: 'rgba(200,200,200,1)'
				}
			},
			// show:false
			splitLine: {
              show: true,
              lineStyle: {
                // type: 'dashed', //y轴分割线类型
                type: 'solid', //y轴实线类型
                color: 'rgba(102,102,102,0.25)',
                width: 2.5,
              },
            },
		},
		dataZoom: [{
			type: 'slider',
			start: 0,
			end: 30,
			width:"100%",
			height:5,
			left:"center",
			bottom:3
        }],
		grid: {
			top: "8%", 
			right: "0",
			left:"5%",
			bottom: "10%",
			
		},
		series: [{
			// data: [120, 200, 150, 80, 70, 110, 130],
			data: yData.value,
			type: 'bar',
			barWidth: 50,
			itemStyle: {
				color: '#3398DB' // 设置柱状图颜色为蓝色
			},
			emphasis: {
				itemStyle: {
					// color: '#8B0000' // 设置鼠标悬浮时的颜色为深红色
					// color: '#ff6b70' // 设置鼠标悬浮时的颜色为水红色
					color: '#00008B' // 设置鼠标悬浮时的颜色为深蓝色
				}
			}
		}],
		tooltip: {
			borderColor: 'rgba(50,50,50, 0.5)',
			backgroundColor: 'rgba(50,50,50, 0.5)', 
			textStyle: { color: '#fff',fontSize:'15'},
			formatter: function(params) {
				console.log(params)
				return '<div style="font-weight:bold">'+params.name+'</div>' + 
						'<div style="line-height:23px"><span style="font-size:16px;margin-right:5px;color:#1E90FF">●</span>在册人员：'+projectCompanyWorkTotalList.value[params.dataIndex].totalPersonNum+'</div>' + 
						'<div style="line-height:23px"><span style="font-size:16px;margin-right:5px;color:#4682B4">●</span>出勤人员总数：'+projectCompanyWorkTotalList.value[params.dataIndex].attendancePersonNum+'</div>' +
						'<div style="line-height:23px"><span style="font-size:16px;margin-right:5px;color:#87CEFA">●</span>出勤率：'+projectCompanyWorkTotalList.value[params.dataIndex].attendancePersonRate+'%</div>' +
						'<div style="line-height:23px"><span style="font-size:16px;margin-right:5px;color:#00BFFF">●</span>出勤率日环比：'+projectCompanyWorkTotalList.value[params.dataIndex].attendancePersonRhbRate+'%</div>';
			}
		}
	};
	// window.addEventListener('resize',function(){
    //       myChart.resize()
    //   })

	option && myChart.setOption(option);
}

//进度数据
let listData = ref([
	{a:'新地能源工程技术有限公司',b:'54'},{a:'中冶沈勘秦皇岛工程设计研究总院有限公司',b:'23'},{a:'鞍山电力实业有限公司',b:'49'},{a:'鞍钢矿业资源利用（鞍山）有限公司',b:'35'},
	{a:'上海建工五建集团有限公司',b:'34'},{a:'辽宁普凡建设有限公司',b:'67'},{a:'沈阳隆基电磁科技股份有限公司',b:'56'},{a:'中国科学院过程工程研究所',b:'78'},
	{a:'宏大爆破工程集团有限责任公司',b:'45'},{a:'鞍钢集团矿业设计研究院有限公司',b:'23'},{a:'辽宁电力能源发展集团监理有限公司鞍山分公司',b:'69'},{a:'辽宁五寰特种材料与智能装备产业技术研究院有限公司',b:'27'},
	{a:'中铝山东工程技术有限公司',b:'59'},{a:'中国华冶科工集团有限公司',b:'14'},{a:'沈阳岩土工程技术测试开发有限公司',b:'38'},{a:'永明项目管理有限公司',b:'41'},
] as any)

// 进度情况分析
// 项目总进度
let projectTotalProgress = ref("" as any)
// 项目剩余天数
let projectSurplusDayNum = ref({} as any)
// 获取项目总进度/项目剩余天数
const getCountTaskProgress = async () => {
	const res: any = await getCountTaskProgressApi({
		projectSn: store.sn
	});
	if (res.result) {
		console.log("项目总进度/项目剩余天数", res);
		projectTotalProgress.value = res.result.projectTotalProgress + ""
		projectSurplusDayNum.value = res.result.projectSurplusDayNum + ""
	}
};
// 总包进度列表
let processList = ref([] as any)
// 获取总包进度列表
const queryCountEnterprise = async () => {
	const res: any = await queryCountEnterpriseApi({
		projectSn: store.sn,
		isCountMainEnterprise: "1"
	});
	if (res.result) {
		console.log("总包进度列表", res);
		processList.value = res.result
	}
};



onMounted(async () => {
	// drawBar()
	getPersonTypeAndEduStatistics()
	queryAttendanceOfEachCompany()
	getCountTaskProgress()
	queryCountEnterprise()
});
</script>

<style lang="scss" scoped>
.leftBottom {
	background: url("@/assets/images/commandScreen/card-left-bottom.png") no-repeat;
	background-size: 100% 100%;
	height: 100%;

	.header {
		display: flex;
		justify-content: space-between;
		padding: 10px 20px;
		border-top: none;
		border-left: none;
		border-right: none;
		border-bottom: 1px solid #0059ff;
		.hLeft {
			width: 50%;
			font-size: 20px;
			font-weight: bold;
			background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}
	}

	.content {
		// background-color: darkred;
		height: 92.5%;
		.contentTop {
			padding: 0 10px;
			height: 50%;
			// background-color: #fff;
			font-size: 13px;
			.line1{
				color: #fff;
				padding-top: 5px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				line-height: 30px;
				height: 30px;
				font-size: 15px;
				.numberCard{
					font-size: 15px;
					padding: 0 8px;
					margin-left: 3px;
					font-weight: bold;
					color: #47bcec;
					background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
					background-size: 100% 100%;
				}
				.dayRadio{
					font-size: 15px;
					margin-left: 15px;
					font-weight: bold;
					color: #47bcec;
				}
				.iconCenter{
					display:flex;
					justify-content:center;
					align-items:center
				}
			}
			.line2{
				padding-top: 5px;
				display:flex;
				justify-content:flex-start;
				align-items:center;
				line-height:25px;
				height: 25px;
				.line2Item{
					color: #fff;
					width: 120px;
					text-align: center;
					cursor: pointer;
					// background-color: #fff;
					background: rgb(0,33,116);
					background: linear-gradient(270deg, rgba(0,33,116,0.8) 0%, rgba(40,88,184,0.3) 96%);
				}
				.activeTab{
					background: rgb(0,33,116);
					background: linear-gradient(270deg, rgba(0,33,116,1) 0%, rgba(40,88,184,1) 96%);
				}
			}
			.barContent{
				height: calc(100% - 65px);
			}
		}

		.centerBottom {
			height: 50%;
			position: relative;

			.cbTop {
				width: 100%;
				height: 100%;

				.header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					// padding: 20px 20px;
					border-bottom: 1px solid #0059ff;

					.hLeft {
						width: 50%;
						font-size: 20px;
						font-weight: bold;
						background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
						-webkit-background-clip: text;
						background-clip: text;
						color: transparent;
					}
				}

				.content {
					padding: 0 10px;
					height: 90%;
					// background-color: rgba($color: #fff, $alpha: 0.1);
					.cbLine1{
						color: #fff;
						padding-top: 5px;
						display: flex;
						justify-content: space-between;
						align-items: center;
						line-height: 30px;
						height: 30px;
						font-size: 15px;
						.numberCard{
							font-size: 15px;
							padding: 0 8px;
							margin-left: 3px;
							font-weight: bold;
							color: #47bcec;
							background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
							background-size: 100% 100%;
						}
					}
					.cbProcess{
						padding-top: 5px;
						height: calc(100% - 55px);
						overflow: hidden;
						// background-color: #fff;
						.pItem{
							width: 100%;
							height: 55px;
							display: flex;
							// background-color: #fff;
							font-size: 13px;
							color: #fff;
							.pLeft{
								width: 20%;
								height: 55px;
								display: flex;
								justify-content: center;
								align-items: center;
								.plInner{
									width: 80px;
									// text-align: center;
									line-height: 30px;
									// background-color: darkred;
									border-radius: 100px;
								}
								
							}
							.pRight{
								width: 80%;
								height: 55px;
								.prTop{
									// background-color: darkblue;
									display: flex;
									justify-content: space-between;
									height: 30px;
									.prtLeft{
										display: flex;
										justify-content: center;
										align-items: flex-end;
									}
									.prtRight{
										display: flex;
										justify-content: center;
										align-items: flex-end;
									}
								}
								.prBottom{
									// background-color: purple;
									height: 15px;
									.processLineBg{
										background-color: rgba(50,50,50,0.5);
										// transform: scaleX(-1);
										.processLine{
											margin-top: 10px;
											// padding-top: 10px;
											height: 5px;
											display: flex;
											justify-content: flex-end;
											.processLineBtn{
												width:3px;
												height:9px;
												background:#fff;
												transform: translateY(-2px);
											}
										}
										// .plBgc1{
										// 	background: rgb(150,0,0);
										// 	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(150,0,0,1) 100%);
										// }
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
.scroll {
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.plBgc1{
	background: rgb(139,0,0);
	background: linear-gradient(90deg, rgba(139,0,0,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc1{
	background: rgb(139,0,0);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(139,0,0,1) 100%);
}
.plBgc2{
	background: rgb(155,155,0);
	background: linear-gradient(90deg, rgba(155,155,0,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc2{
	background: rgb(155,155,0);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(155,155,0,1) 100%);
}
.plBgc3{
	background: rgb(0,0,139);
	background: linear-gradient(90deg, rgba(0,0,139,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc3{
	background: rgb(0,0,139);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(0,0,139,1) 100%);
}
.plBgc4{
	background: rgb(139,0,139);
	background: linear-gradient(90deg, rgba(139,0,139,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc4{
	background: rgb(139,0,139);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(139,0,139,1) 100%);
}
.plBgc5{
	background: rgb(72,61,139);
	background: linear-gradient(90deg, rgba(72,61,139,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc5{
	background: rgb(72,61,139);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(72,61,139,1) 100%);
}
.plBgc6{
	background: rgb(0,206,209);
	background: linear-gradient(90deg, rgba(0,206,209,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc6{
	background: rgb(0,206,209);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(0,206,209,1) 100%);
}
.plBgc7{
	background: rgb(47,79,79);
	background: linear-gradient(90deg, rgba(47,79,79,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc7{
	background: rgb(47,79,79);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(47,79,79,1) 100%);
}
.plBgc8{
	background: rgb(0,100,0);
	background: linear-gradient(90deg, rgba(0,100,0,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc8{
	background: rgb(0,100,0);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(0,100,0,1) 100%);
}
.plBgc9{
	background: rgb(189,183,107);
	background: linear-gradient(90deg, rgba(189,183,107,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc9{
	background: rgb(189,183,107);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(189,183,107,1) 100%);
}
.plBgc10{
	background: rgb(255,140,0);
	background: linear-gradient(90deg, rgba(255,140,0,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc10{
	background: rgb(255,140,0);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(255,140,0,1) 100%);
}
.plBgc11{
	background: rgb(233,150,122);
	background: linear-gradient(90deg, rgba(233,150,122,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc11{
	background: rgb(233,150,122);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(233,150,122,1) 100%);
}
.plBgc0{
	background: rgb(0,139,139);
	background: linear-gradient(90deg, rgba(0,139,139,1) 35%, rgba(0,0,0,0.5) 100%);
}
.plBtnBgc0{
	background: rgb(0,139,139);
	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(0,139,139,1) 100%);
}

</style>
