<template>
	<view>
		<view class="barBox" ref="barBox" :style="{height: barBoxHeight + 'px'}">
		<!-- <view class="barBox" ref="barBox"> -->
			<view  class="fixedheader">
			
		
			<headers :themeType="'white'" :showBack="true">
				<view class="headerName">
					承包商管理
				</view>
				<view class="searchBox">
					<form>
						<view class="uni-form-item">
							<input class="uni-input" name="searchName" v-model="searchForm.enterpriseName" placeholder="搜索"
								@input="handleInput" />
							<view class="screen" @click="show = !show">筛选</view>
							<view class="screen" style="margin-top: 6rpx; margin-left: 6rpx;">
								<image src="/static/screenIcon.png" style="width: 30rpx;height: 30rpx">
								</image>
							</view>
						</view>
					</form>
				</view>
			</headers>
		</view>
		</view>
		
		<view :class="{'dialogBox': true,'open-dialog': show,'hidden-dialog': !show}" :style="{'top': barBoxHeight + 'px'}" id="myPopup">
			<view v-for="(item,index) in typeList" :key="index">
				<view :class="{dialogItem: true,activeItem:searchForm.enterpriseTypeId == item.id}" @click="chooseType(item)">
					{{item.companyTypeName}}
				</view>
			</view>
		</view>
		
		<scroll-view :scroll-y="true" class="scrollBox" :style="{'height': scrollHeight + 'px'}" v-if="listData.length > 0">
			<view v-for="(item,index) in listData" :key="index">
				<view class="itemBox" @click="goDetail(item)">
					<view class="itemLine1">
						{{item.enterpriseName || '--'}}
					</view>
					<view class="itemLine2">
						统一社会信用代码：{{item.socialCode || '--'}}
					</view>
					<view class="itemLine3">
						项目负责人：{{item.projectDirectorName || '--'}}
					</view>
					<view class="itemLine4">
						项目负责人电话：{{item.projectDirectorPhone || '--'}}
					</view>
					<view class="itemLine5">
						项目类型：{{item.projectEnterprise.cbsProjectTypeName || '--'}}
					</view>
				</view>
			</view>
			<view class="" style="height: 20rpx;"></view>
		</scroll-view>
		<view class="no_data" v-if="listData.length == 0">
			<image src="/static/noData.png"></image>
			<view>暂无数据</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchForm: {
					pageNo: 1,
					pageSize: 9999,
					projectSn: JSON.parse(uni.getStorageSync('projectDetail')).projectSn,
					enterpriseName: '',
					enterpriseTypeId: '',
				},
				barBoxHeight: '',
				scrollHeight:'',
				listData: [],
				show: false,
				typeList: [],
			};
		},
		created() {

		},
		onReady() {
			this.getHeight()
		},
		onLoad() {
			this.getListData()
			this.getTypeList()
		},
		methods: {
			//搜索
			handleInput(e) {
				setTimeout(() => {
					this.getListData()
				}, 300)
			},
			screenData() {
				var popup = document.getElementById('myPopup');
				if (popup.style.right === '-300px') {
					popup.style.right = '0'; // 滑出盒子
				} else {
					popup.style.right = '-300px'; // 隐藏盒子
				}
			},
			openDialog() {
				this.show = true
			},
			closeDialog() {
				this.show = false
			},
			chooseType(item){
				this.searchForm.enterpriseTypeId = item.id
				this.getListData()
				this.closeDialog()
			},
			async getHeight() {
				const query = uni.createSelectorQuery().in(this);
				
				    let fixedheaderHeight = 0
				    const fixedHeaderPromise = new Promise((resolve) => {
				        query.select('.fixedheader').boundingClientRect(data => {
				            fixedheaderHeight = data.height
				            console.log('fixedheaderHeight：', data.height);
				            resolve();
				        }).exec();
				    });
				
				    let searchBoxHeight = 0
				    const searchBoxPromise = new Promise((resolve) => {
				        query.select('.searchBox').boundingClientRect(data => {
				            searchBoxHeight = data.height
				            console.log('searchBoxHeight：', data.height);
				            resolve();
				        }).exec();
				    });
				
				    let mobileTopHeight = 0
				    const systemInfoPromise = new Promise((resolve) => {
				        uni.getSystemInfo({
				            success(res) {
				                mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
				                resolve();
				            }
				        });
				    });
				
				    await fixedHeaderPromise;
				    await searchBoxPromise;
				    await systemInfoPromise;
				
				    this.barBoxHeight = fixedheaderHeight + searchBoxHeight + mobileTopHeight;
				    console.log('this.barBoxHeight', this.barBoxHeight);
				
				    let screenHeight = uni.getSystemInfoSync().screenHeight;
				    console.log('screenHeight', screenHeight);
				
				    this.scrollHeight = screenHeight - this.barBoxHeight;
				    console.log('this.scrollHeight', this.scrollHeight);
			},
			goDetail(item){
				uni.navigateTo({
					url: './detailList?id=' + item.id + '&projectId=' + item.projectEnterprise.id,
				})
			},
			getListData() {
				this.sendRequest({
					url: 'xmgl/projectEnterprise/list',
					method: 'post',
					data: this.searchForm,
					success: res => {
						console.log("projectEnterprise", res);
						this.listData = res.result.records
					}
				})
			},
			getTypeList() {
				this.sendRequest({
					url: 'xmgl/enterpriseType/list',
					method: 'get',
					success: res => {
						this.typeList = [{
								id: '',
								companyTypeName: '全部'
							},
							...res.result
						]
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.barBox {
		// background-color: #5181F6;
		background-color: #fff;
		min-height: 100%;
		// height: 134px;
		
		.fixedheader {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 1000;
			// height: auto;
			.headerName {
				z-index: 1;
			}
			.searchBox {
				color: #000000;
				// height: 56px;
				background-color: white;
				// position: fixed;
				// top: 44px;
				left: 0;
				width: 100%;
				z-index: 999;
				box-shadow: 0px 8px 30rpx 0px rgba(219,229,255,0.6);
			
				.uni-form-item {
					position: relative;
					display: flex;
					font-size: 28rpx;
					// background-color: darkred;
					/* .search-icon{
					position: absolute;
					top: 50%;
					right: 100rpx;
					transform: translateY(-50%);
				} */
				}
			
				.uni-input {
					border-radius: 40rpx;
					margin: 20rpx 20rpx;
					background-color: #f7f8fa;
					height: 70rpx;
					line-height: 60rpx;
					padding: 0 40rpx;
					font-size: 28rpx;
					width: 70%;
				}
			
				.screen {
					line-height: 100rpx;
					color: gray;
				}
			}
			
		}
	}

	
	.dialogBox {
		color: #000000;
		width: 260rpx;
		min-height: 700rpx;
		position: fixed;
		z-index: 10;
		// top: 50%; /* 将元素顶部定位到页面垂直中间 */
		// transform: translateY(-50%); /* 使用transform属性将元素上移自身高度的一半，使其处于垂直居中位置 */
		// right: -300px; /* 初始时隐藏在屏幕右侧 */
		// transform: translateX(0%);
		background-color: #fff;
		border: 1px solid #dbe5ff;
		border-top: none;
		border-right: none;
		transition: right 0.5s; /* 添加过渡效果 */
		text-align: center;
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding: 10rpx 0;
		float: right;
		.dialogItem {
			line-height: 70rpx;
			// margin-bottom: 10rpx;
		}
		.activeItem{
			background-color: rgba(22,132,252, 0.1);
			border: 8rpx solid #1684fc;
			border-top: none;
			border-bottom: none;
			border-left: none;
		}
	}
	.hidden-dialog{
		right: -600rpx;
	}
	.open-dialog{
		right: 0;
	}
	
	

	.scrollBox {
		z-index: 1001;
		height: 100%;
		width: calc(100% - 40rpx);
		// background-color: darkred;
		margin: 0 20rpx;

		.itemBox {
			width: 100%;
			min-height: 240rpx;
			margin-top: 20rpx;
			border: 1px solid rgba(219, 229, 255, 0.6);
			border-radius: 4rpx;
			padding: 10rpx 20rpx;
			// box-shadow: 0px 8rpx 15rpx 0px rgba(219,229,255,0.6);
			// background-color: darkred;
			font-size: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.itemLine1 {}

			.itemLine1 {
				font-size: 26rpx;
				font-weight: bold;
				white-space: nowrap;
				overflow: hidden; /* 隐藏超出部分 */
				text-overflow: ellipsis; /* 使用省略号显示超出部分 */
			}

			.itemLine2 {
				white-space: nowrap;
				overflow: hidden; /* 隐藏超出部分 */
				text-overflow: ellipsis; /* 使用省略号显示超出部分 */
			}

			.itemLine3 {}

			.itemLine4 {}

			.itemLine5 {}
		}
	}

	.no_data{
		position: fixed;
		top: 35%;
		// transform: translateY(-50%);
		left: 50%;
		transform: translateX(-50%);
		padding-top: 60rpx;
		text-align: center;
		color: rgba(0,0,0,0.5);
		font-size: 28rpx;
		uni-image{
			width: 162rpx;
			height: 130rpx;
			display: block;
			margin: 0 auto;
			margin-bottom: 40rpx;
		}
	}

	.noData{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 68rpx;
		color: darkgray;
		transform: translateY(-120rpx);
	}
</style>