<template>
	<div class="political-outlook">
		<div class="content">
			<div class="top-search">
				<div class="search-item">
					<span>姓名</span>
					<el-input placeholder="请输入" size="small" v-model="searchForm.name" :clearable="true" style="width: 150px" />
				</div>
				<div class="search-item">
					<span>通行时间</span>
					<el-date-picker
						v-model="searchForm.rangeTime"
						type="datetimerange"
						size="small"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						format="YYYY-MM-DD HH:mm:ss"
						value-format="YYYY-MM-DD HH:mm:ss"
						:clearable="true"
					/>
				</div>
				<div class="search-item">
					<span>所属企业</span>
					<el-select
						class="m-2"
						placeholder="请选择"
						size="small"
						v-model="searchForm.belongCompany"
						:clearable="true"
						@change="companySelect"
						style="width: 150px"
					>
						<el-option v-for="(item, index) in enterpriseListData" :key="index" :label="item.enterpriseName" :value="item.id" />
					</el-select>
				</div>
				<div class="search-item">
					<span>所属班组</span>
					<el-select
						class="m-2"
						placeholder="请选择"
						size="small"
						v-model="searchForm.belongTeam"
						:clearable="true"
						style="width: 150px"
					>
						<el-option v-for="(item, index) in teamListData" :key="index" :label="item.teamName" :value="item.id" />
					</el-select>
				</div>
				<div class="search-item">
					<span>所属部门</span>
					<el-select
						class="m-2"
						placeholder="请选择"
						size="small"
						v-model="searchForm.belongDepart"
						:clearable="true"
						style="width: 150px"
					>
						<el-option v-for="(item, index) in departListData" :key="index" :label="item.departmentName" :value="item.id" />
					</el-select>
				</div>
				<el-button @click="getMemberCountList('search')">查询</el-button>
			</div>
			<div class="tabList">
				<div>类型</div>
				<div>姓名</div>
				<div>班组</div>
				<div>通行时间</div>
				<div>闸机名称</div>
				<div>图片</div>
			</div>

			<el-scrollbar class="listBox" ref="refScrollbar">
				<div v-for="(item, index) in crewRealTimeList" class="listStyle" :key="item.id">
					<div>{{ item.passType == 1 ? "进" : "出" }}</div>
					<div>{{ item.workerName }}</div>
					<div>{{ item.teamName ? item.teamName : item.departmentName }}</div>
					<div>{{ item.createTime }}</div>
					<div>{{ item.passagewayName }}</div>
					<div class="list-img">
						<el-image v-if="item.imageUrl" fit="contain" class="el-img" :src="item.imageUrl" :preview-src-list="[item.imageUrl]">
						</el-image>
					</div>
				</div>
				<div class="notoDta" v-if="partyMemberList.length == 0">
					<img src="@/assets/images/noData.png" alt="" />
					<p>暂无数据</p>
				</div>
			</el-scrollbar>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { GlobalStore } from "@/stores";
import {
	getCompanyDataList,
	getMemberInfoList,
	getTeamDataList,
	getDepartDataList,
	getRealTimeMoreDataApi
} from "@/api/modules/labor";
const store = GlobalStore();
const props = defineProps(["tip"]);
const crewRealTimeList = ref([] as any);
const BASEURL = import.meta.env.VITE_API_URL;
const departListData = ref([] as any);
const teamListData = ref([] as any);
const enterpriseListData = ref([] as any)
let pageNo = ref(1 as any);
let moreScroll = ref(true as any);
const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
const searchForm = ref({
	name: "",
	rangeTime: "",
	belongCompany: "",
	belongTeam: "",
	belongDepart: ""
});

const partyMemberList = ref({} as any);
// 所属企业选择
const companySelect = async () => {
	await getTeamList();
	await getDepartmentList();
};
//获取 部门 列表
const getDepartmentList = async () => {
	let data = {
		enterpriseId: searchForm.value.belongCompany,
		projectSn: store.sn
	};
	const res: any = await getDepartDataList(data);
	departListData.value = res.result.list;
};
//获取企业的 - 班组列表
const getTeamList = async () => {
	let data = {
		enterpriseId: searchForm.value.belongCompany,
		projectSn: store.sn
	};
	const res: any = await getTeamDataList(data);
	teamListData.value = res.result.list;
};
//获取企业列表
const getCompanyList = async () => {
	let data = {
		projectSn: store.sn,
		enterpriseName: "",
		userEnterpriseId: store.userInfo?.userEnterpriseId
	};
	const res: any = await getCompanyDataList(data);
	if (res.code == 200) {
		enterpriseListData.value = res.result;
	}
};
//获取数据
const getMemberCountList = async (tip: any) => {
	let data:any = {
		projectSn: store.sn,
		userEnterpriseId: store.userInfo?.userEnterpriseId,
        workerName: searchForm.value.name,
		enterpriseId: searchForm.value.belongCompany,
		teamId: searchForm.value.belongTeam,
		departmentId: searchForm.value.belongDepart,
		pageNo: tip == 'search'?1:pageNo.value,
		pageSize: 20
	};
	if(searchForm.value.rangeTime){
		data.startTime = searchForm.value.rangeTime[0]
		data.endTime = searchForm.value.rangeTime[1]
	}
	const res: any = await getRealTimeMoreDataApi(data);
	if (tip == "more") {
		crewRealTimeList.value = crewRealTimeList.value.concat(res.result.records);
	} else {
		crewRealTimeList.value = res.result.records;
	}
	crewRealTimeList.value.map((item: any) => {
		if (item.imageUrl) {
			item.imageUrl = BASEURL + "/image/" + item.imageUrl;
		} else if (item.fieldAcquisitionUrl) {
			item.fieldAcquisitionUrl = BASEURL + "/image/" + item.fieldAcquisitionUrl;
		}
	});
	if (res.result.pages == pageNo.value) {
		moreScroll.value = false;
	} else {
		pageNo.value = pageNo.value + 1;
	}
};

onMounted(async () => {
	await getCompanyList();
	await getMemberCountList("search");
	refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
		// console.log("滚动容器", e);
		const scrollTop = e.target.scrollTop;
		const scrollHeight = e.target.scrollHeight;
		const clientHeight = e.target.clientHeight;
		// console.log("滚动容器", scrollTop, scrollHeight, clientHeight);
		// 向上加载更多
		if (scrollTop >= scrollHeight - clientHeight - 1) {
			// console.log("加载更多");
			if (moreScroll.value) {
				getMemberCountList("more");
			}
		}
	});
});
</script>

<style lang="scss" scoped>
@mixin flex {
	display: flex;
	align-items: center;
}
.political-outlook {
	width: 100%;
	height: 97%;
	.content {
		height: 95%;
		width: 100%;
		margin-top: 10px;
		// background: url("@/assets/images/cardImg.png") no-repeat;
		background-size: 100% 100%;
		.top-search {
			@include flex;
			justify-content: flex-end;
			margin-bottom: 15px;
			.search-item {
				@include flex;
				margin-right: 20px;
				span {
					color: white;
					margin-right: 10px;
				}
			}
		}
		.tabList {
			display: flex;
			width: 100%;
			height: 5%;
			background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
			background-size: 100% 100%;
			// position: absolute;
			left: 75.5%;
			top: 75%;
			color: #ccc;
			font-size: calc(100vw * 14 / 1920);
			line-height: 30px;
			align-items: center;
			div {
				text-align: center;
				width: 17%;
			}
		}
		.listBox {
			height: 82%;
			.listStyle {
				display: flex;
				align-items: center;
				text-align: center;
				color: #fff;
				font-size: 12px;
				margin-bottom: 5px;
				.list-img {
					.el-img {
						width: 30px;
						height: 30px;
						img {
							display: flex;
							align-items: center;
							width: 100%;
							height: 100%;
						}
					}
				}
				div {
					width: 17%;
					white-space: nowrap; //单行
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
			.listStyle:hover {
				background: #091f3f;
			}
		}
	}
}
.notoDta {
	top: 35%;
	width: 20%;
	left: 40%;
	position: absolute;
	text-align: center;
	img {
		width: 40%;
		margin: 5% 30%;
	}
	p {
		color: #fff;
		font-size: calc(100vw * 14 / 1920);
		margin: -6% 37%;
	}
}
// element 组件样式
:deep() {
	.el-date-editor .el-range-input,
	.el-range-separator {
		color: #fff;
	}
	.el-input__wrapper {
		background: #112d59;
	}
	.el-input__inner {
		color: #fff;
	}
	.el-button {
		background-color: #2758c0;
		color: white;
		border-color: transparent;
	}
}
// ::v-deep .el-select .el-input .el-select__caret {
// 	color: #fff;
// }
</style>
