<template>
  
  <!-- pages/index/index.wxml -->
 <view :style="{marginTop: titleTop + 'px', height: 'calc(100% - ' + titleTop+'px)' }" class="sy-container">


	 <view class="topView" @click="my()">
<!--		 <view class="headImg" >{{realName.charAt(0)}}</view>-->
		 <view class="headImg"></view>
	 </view>
	 <view class="title">任务</view>

	 <view class="search-container" >
		 <view class="search">
			 <uni-icons class="icon" type="search" size="30" @click="search"></uni-icons>

			 <input class="search-input" id="search-input"  v-model="searchVal"  type="text" placeholder="请输入任务名称" maxlength="30"  @confirm="search" @input="search"/>
		 </view>
	 </view>


	 <view class="filter">
		 <view class="select" @click="openSelect">
			 {{nowSelect}}
			 <view class="more-icon"></view>
		 </view>

		 <view class="dateSelect">
			 <uni-datetime-picker type="date" v-model="queryParams.taskDate" @maskClick="maskClick" @change="timeChange($event)">
				 {{queryParams.taskDate == null ? "全部日期" : queryParams.taskDate}}
				 <view v-if="queryParams.taskDate == null" class="more-icon"></view>
			 </uni-datetime-picker>

			 <uni-icons v-if="queryParams.taskDate != null" class="icon more-icon2" type="closeempty" size="10"  @click="resetTime"></uni-icons>
<!--			 <view type="date" v-model="single" @click="maskClick" @change="timeChange($event)">全部日期</view>-->
		 </view>
<!--		 <uni-icons class="icon" type="arrow-down" size="10"></uni-icons>-->

<!--		 <view class="dateSelect"  @maskClick="maskClick">-->
<!--			全部日期-->
<!--			 <uni-icons class="icon" type="arrow-down" size="10"></uni-icons>-->
<!--		 </view>-->

	 </view>
	 <uni-popup style="z-index: 10000" ref="popup" type="bottom" border-radius="10px 10px 0 0">
		 <view class="selectContext">
			 <view class="select-item" @click="filter(0)">全部任务</view>
			 <view class="select-item" @click="filter(1)">进行中的任务</view>
			 <view class="select-item" @click="filter(2)">已结束的任务</view>
		 </view>
	 </uni-popup>




	 <scroll-view class="list"
				  :scroll-top="scrollTop"
				  scroll-y="true"
				  :refresher-enabled="isOpenRefresh"
				  :refresher-triggered="triggered"
				  @refresherrefresh="refresh"
				  @scrolltoupper="upper"
				  @scroll="scroll"
				  @scrolltolower="loadMore"
				  @refresherpulling="onPulling"
	 >


		 <view class="item" @click="goDetails(task)" v-for="(task, index) in taskList"  :key="index">
			 <view class="line1">


				 <view class="name-status">
					 <view class="task-name">
						 {{task.taskName}}
					 </view>
					 <view class="status-base" :class="toDate(task.taskDate) == '已结束' ? 'task-status-end' : 'task-status'"/>

				 </view>


				 <view class="price">
					 <view class="num">¥{{task.dayPrice}}元</view>
					 <view class="unit">/天</view>
				 </view>
			 </view>

			 <view class="line3">
				 <view class="num-container" style="background-color: #f1f0f0;">
					 <view class="num-label">
						 用工日期
					 </view>
					 <view class="num">
						 {{task.taskDate}}
					 </view>
				 </view>

				 <view class="num-container" style="background-color: #e4e4fd;">
					 <view class="num-label">
						 用工人数
					 </view>
					 <view class="num">
						 {{task.useNum}}
					 </view>
				 </view>
				 <view class="num-container" style="background-color: #fce6ea;">
					 <view class="num-label">
						 报名人数
					 </view>
					 <view class="num">
						 {{task.baomingNum}}
					 </view>
				 </view>
				 <view class="num-container" style="background-color: #def9fc;">
					 <view class="num-label">
						 点名人数
					 </view>
					 <view class="num">
						 {{task.signNum}}
					 </view>
				 </view>
			 </view>

			 <view class="line4">
				 <view class="date-label">
					 <view class="icon"></view>
					 发布时间: {{task.createTime}}
				 </view>
				 <view class="button"></view>
			 </view>

		 </view>
		 <view v-if="showLoading" class="load-more">加载中...</view>
		 <view v-if="showNoMore" class="no-more">没有更多数据了</view>

	 </scroll-view>

 </view>


</template>

<script>
	import { getTaskList } from "@/api/task";
	// import { getCodeImg } from '@/api/login'
  export default {
	data() {
		return {
			titleTop: 0,
			statusBarHeight: 0,
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				dateStatus: 0,
				taskName: null,
				taskDate: null,
			},
			taskList: [],
			nowSelect: "全部任务",
			searchVal: null,
			realName: "",

			// 是否显示加载更多的loading
			showLoading: false,
			// 是否显示无更多数据提示
			showNoMore: true,
			triggered: false,
			isOpenRefresh: true,
			containerScrollTop: 0,
		};
	  },
    onLoad: function() {

		// let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		// console.log(menuButtonInfo.width)  //宽度，单位：px
		// console.log(menuButtonInfo.height) //高度，单位：px
		// console.log(menuButtonInfo.top)    //上边界坐标，单位：px
		// console.log(menuButtonInfo.right)  //右边界坐标，单位：px
		// console.log(menuButtonInfo.bottom) //下边界坐标，单位：px
		// console.log(menuButtonInfo.left)   //左边界坐标，单位：px
		 
		let that = this;
			// 获取胶囊按钮位置信息
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		const { top, height } = menuButtonInfo;
		const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	
		// 计算标题需要偏移的位置
		const titleTop = top + (height - statusBarHeight) / 2;
		this.titleTop = titleTop;//设置标题顶部距离
		this.statusBarHeight = statusBarHeight;//设置状态栏高度

		this.realName = this.$store.state.user.nickName
		// uni.setNavigationBarTitle({
		//   title: 12333
		// })
		this.getList();
    },
	 methods:{
		 reload(){
			 this.refresh();
		 },
		  openSelect(){
			  // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			  this.$refs.popup.open('bottom')
		  },
		 closeSelect(){
			 // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			 this.$refs.popup.close()
		 },
		 filter(type){
			 this.closeSelect()
			 this.queryParams.dateStatus = type;
			 if (type == 0){
				 this.nowSelect = "查看全部";
			 }else if (type == 1){
				 this.nowSelect = "进行中的任务";
			 }else if (type == 2){
				 this.nowSelect = "已结束的任务";
			 }
			 this.queryParams.pageNum = 1;
			 this.getList();
		 },
		 timeChange(e) {
			 this.single = e;
			 console.log("-change事件:", e);
			 this.queryParams.taskDate = e;
			 this.queryParams.pageNum = 1;
			 this.getList();
		 },
		 toDate(str){
			 var strArray = str.split(" ");
			 var strDate = strArray[0].split("-");
			 // var strTime = strArray[1].split(":");
			 var d = new Date(strDate[0],(strDate[1]-parseInt(1)),strDate[2]);
			 return d > new Date() ? "进行中" : "已结束"
		 },
		 getList() {
			 if (this.showNoMore && this.queryParams.pageNum > 1){
				 return
			 }

			 var that = this;
			 getTaskList(this.queryParams).then(response => {

				 if (that.queryParams.pageNum > 1){
					 that.taskList = that.taskList.concat(response.rows);
				 }else{
					 that.taskList = response.rows;
				 }

				 that.queryParams.pageNum++;
				 if (response.rows.length < this.queryParams.pageSize){
					 that.showNoMore = true;
				 }else{
					 that.showNoMore = false;
				 }
				 that.showLoading = false;
				 that.triggered = false;
				 that.total = response.total;
				 console.log(response)
			 });
		 },
		 search(){
			 // this.queryParams.taskName = e.detail.value;
			 // this.queryParams.taskName = $(".search-input").val();
			 this.queryParams.taskName = this.searchVal;
			 this.queryParams.pageNum = 1;
			 this.getList();
		 },
		 goDetails(task){
			 uni.navigateTo({
				 url: "taskDetails?id=" + task.id
			 })
		 },
		 my(){
			 uni.navigateTo({
				 url: "my"
			 })
		 },
		 resetTime(){
			 this.queryParams.taskDate = null;
			 this.queryParams.pageNum = 1;
			 this.getList();
		 },

		 onPageScroll(e){
		  	console.log(e.scrollTop)
			 this.containerScrollTop = e.scrollTop
			 if (this.containerScrollTop > 0){
				 this.isOpenRefresh = false
			 }else{
				 this.isOpenRefresh = true
			 }
		 },
		 onReachBottom(e){
			 console.log("onReachBottom", e)
			 if (this.showLoading || this.showNoMore) {
				 return;
			 }
			 // 显示加载更多的loading
			 this.showLoading = true;
			 // 请求数据
			 this.getList();
		 },
		 // 刷新函数
		 refresh() {
			 // 请求数据
			 this.triggered = true;
			 this.queryParams.pageNum = 1;
			 this.getList();
		 },
		 upper(){
			 // console.log("upper")
		 },
		 scroll(e){
			 // console.log("scroll", e.detail)
		 },
		 onPulling(e) {
			 // console.log("onpulling", e.detail);
			 if (e.detail.dy < 8) return  // 防止上滑页面也触发下拉
			 this.triggered = true;
		 },
		 // 加载更多函数
		 loadMore() {
			 // console.log("loadMore")
			 // 判断是否正在加载更多或已经没有更多数据
			 if (this.showLoading || this.showNoMore) {
				 return;
			 }
			 // 显示加载更多的loading
			 this.showLoading = true;
			 // 请求数据
			 this.getList();
		 },

	 }
  }
</script>

<style lang='scss'>
	page{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	html, body {
		background-color: #ffffff;
		height: 100%;
	}
	.load-more, .no-more {
		display: grid;
		place-content: center;
		padding: 10rpx;
		color: #999;
		height: 100rpx;
	}
	/*.uni-datetime-picker-reset-btn{*/
	/*	background-color: #ffffff !important;*/
	/*	color: #1f2d3d !important;*/
	/*	border: #1f2d3d 1rpx solid;*/
	/*}*/

	/*.uni-datetime-picker--btn{*/
	/*	width: 40%;*/
	/*	margin-left: auto;*/
	/*	margin-right: auto;*/
	/*}*/
	/*.uni-date-changed{*/
	/*	display: flex;*/
	/*	justify-items: center;*/
	/*}*/
	.sy-container{
		position: relative;
		/*height: calc(100% - 47px);*/

		.title {
			position: absolute;
			top: 0;
			font-size: 25rpx;
			color: #000000;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 90rpx;
			z-index: 0;
		}
		.topView{
			display: flex;
			width: 120rpx;
			padding: 0 10rpx 0 20rpx;
			z-index: 1;
			position: relative;
			.headImg{
				width: 70rpx;
				height: 70rpx;
				background-image: url("/static/images/wode.png");
				background-size: 100% 100%;
			}
		}


		.search-container{
			margin-top: 20rpx;
			border-top: 1rpx solid #dbdbdb;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 30rpx 0rpx 30rpx;
			height: 100rpx;
			.search{
				width: 100%;
				height: 80rpx;
				border-radius: 450px;
				border: 1px solid #6c6c6c;
				display: flex;
				align-items: center;
				/*justify-content: center;*/
				.icon{
					width: 15%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.search-input{
					width: 82%;
				}

			}
		}

		.filter{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 10rpx;
			width: 80%;
			height: 80rpx;
			margin-right: auto;
			margin-left: auto;
			.select{
				width: 50%;
				height: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #939393;
				font-size: 30rpx;
				font-weight: 600;
			}
			.more-icon{
				width: 12rpx;
				height: 12rpx;
				background-image: url("/static/images/index/more-icon.png");
				background-size: 100% 100%;
				margin-left: 5rpx;
				margin-top: 3rpx;
			}
			.more-icon2{
				margin-left: 0rpx;
			}
			.dateSelect{
				width: 50%;
				display: flex !important;
				align-items: center !important;
				justify-content: center !important;
				.uni-date{
					.uni-date-editor{
						display: flex;
						align-items: center;
						justify-content: center;
						color: #939393;
						font-size: 30rpx;
						font-weight: 600;
					}
				}

			}
		}
		.selectContext{
			background-color: #ffffff;
			width: 100%;
			/*height: 500rpx;*/
			margin-bottom: 0px;
			border-radius: 10rpx 10rpx 0 0;
			.select-item{
				height: 100rpx;
				width: 100%;
				display: grid;
				place-items: center;
				font-size: 35rpx;
				border-bottom: 1rpx solid #dbdbdb;
			}
			.select-item:last-child {
				border-bottom: none;
			}
		}
		.vue-ref{
			padding-bottom: 0px !important;
		}

		.uni-date-x{
			background-color: transparent !important;
			color: #000000 !important;
			width: 80%;
			justify-content: right;
		}
		.uni-date__x-input{
			display: flex !important;
			align-items: center !important;
			justify-content: center !important;
			/*justify-content: flex-end !important;*/
			/*margin-left: auto; !* 推动元素到右边 *!*/
		}
		.uni-date__icon-clear{
			width: 20%;
		}
		.uni-date-x--border{
			border: 0 solid #dbdbdb !important;
		}
		.icon-calendar{
			display: none; /* 隐藏图标 */
		}
		/*.uni-date__x-input{*/
		/*	display: flex;*/
		/*	align-items: center;*/
		/*	justify-content: center;*/
		/*}*/


		.list{
			padding: 0rpx 15rpx 0rpx 15rpx;
			/*background-color: #e3e3e3;*/
			height: calc(100% - 270rpx);
			background-image:url('data:image/png;base64,[encoded data, 100312 characters]');
			background-size: 100% 100%;
			.item{
				background-color: #FFFFFF;
				width: 95%;
				border-radius: 20rpx;
				box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
				padding: 10rpx 25rpx 35rpx 25rpx;
				margin: 20rpx auto 20rpx auto;
				.line1{
					height: 100rpx;
					display: flex;
					align-items: center;
					/*justify-content: center;*/
					/*border-bottom: 1rpx solid #dbdbdb;*/


					.name-status{
						display: flex;
						align-items: flex-start;
						.task-name{
							font-size: 33rpx;
							font-weight: 590;
							max-width: 350rpx; /* 设置div的宽度 */
							white-space: nowrap; /* 防止文本换行 */
							overflow: hidden; /* 隐藏超出div的内容 */
							text-overflow: ellipsis; /* 显示省略号来代表被截断的内容 */
						}

						.status-base{
							margin-left: 5rpx;
							width: 50rpx;
							height: 20rpx;
							background-size: 100% 100%;
						}

						.task-status{
							background-image: url("/static/images/index/task-status-1.png");
						}
						.task-status-end{
							background-image: url("/static/images/index/task-status-2.png");
						}
					}

					.day-price{
						margin-left: auto;
						font-size: 28rpx;
					}
					.price{
						margin-left: auto;
						color: #FF0000;
						font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
						display: flex;
						align-items: flex-end;
						height: 38rpx;
						.num{
							font-weight: 650;
							font-size: 38rpx;
							line-height: 38rpx;
						}
						.unit{
							font-weight: 450;
							font-size: 20rpx;
						}
					}
				}



				.line3{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 15rpx 20rpx 0 20rpx;
					.num-container{
						width: 24%;
						display: grid;
						place-items: center;
						margin-right: 1.33%;
						border-radius: 10rpx;
						padding: 15rpx;
						.num-label{
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 23rpx;
							color: #979696;
						}
						.num{
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 20rpx;
							color: #131313;
							overflow: hidden; /* 隐藏超出div的内容 */
							text-overflow: ellipsis; /* 显示省略号来代表被截断的内容 */
							margin-top: 10rpx;
						}
					}
					.num-container:last-child {
						margin-right: 0;
					}
				}

				.line4{
					display: flex;
					align-items: center;
					/*justify-content: center;*/
					margin-top: 40rpx;
					height: 65rpx;
					.date-label{
						display: flex;
						align-items: center;
						border-top: #f1f1f1 solid 1rpx;
						height: 100%;
						width: 70%;
						.icon{
							width: 20rpx;
							height: 20rpx;
							background-image: url("/static/images/index/clock.png");
							background-size: 100% 100%;
							margin-right: 5rpx;
						}
						font-size: 20rpx;
						color: #bfbfbf;
					}
					.button{
						background-image: url("/static/images/index/dm-btn.png");
						background-size: 100% 100%;
						margin-left: 8rpx;
						width: 160rpx;
						height: 65rpx;
						margin-left: auto; /* 推动元素到右边 */
					}
				}

			}
		}

	}



</style>
