<template>
	<view class="custom-banner">
		<view class="tabbar-title">
			<view class="search-body">
				<image class="left-img" src="../../static/project_manegment/fangdajing.png" mode=""></image>
				<input class="search-input" type="text" v-model="itemName" placeholder="请输入事项名称" />
				<view class="right-btn" @click="caseSearch">
					搜索
				</view>
			</view>
			<!-- <view class="right-pick" @click="showDrawer">
				<image class="right-img" src="../../static/project_manegment/shaixuan.png" mode=""></image>
				<text>筛选</text>
			</view> -->
		</view>

		<u-popup v-model="show" mode="right" :zoom='true' width="600rpx" :mask='true' :closeable='false'
			:safe-area-inset-bottom='true'>
			<scroll-view style="height: 100%;padding-top:20rpx" scroll-y="true">
				<view class="hetong-drawer">
					<view class="top-search">
						<view class="top-title">
							<text>筛选</text>
							<uni-icons class="close-btn" @click="closeDrawer" type="closeempty" size="25" color="#d7d7d7">
							</uni-icons>
						</view>

						<!-- 合同状态 -->
						<view class="hetong-status">

							<view class="search-title">
								合同状态
							</view>
							<view class="search-content">
								<view :class="{'search-content-item-status':true,'active':eventStatus==''}"
									@click="getCurrentStatus()">
									全部
								</view>
								<view :class="{'search-content-item-status':true,'active':eventStatus=='3'}"
									@click="getCurrentStatus('3')">
									审核中
								</view>
								<view :class="{'search-content-item-status':true,'active':eventStatus=='0'}"
									@click="getCurrentStatus('0')">
									已退回
								</view>
								<view :class="{'search-content-item-status':true,'active': eventStatus=='1'}"
									@click="getCurrentStatus('1')">
									审核通过
								</view>
								<view :class="{'search-content-item-status':true,'active': eventStatus=='2'}"
									@click="getCurrentStatus('2')">
									已作废
								</view>
								<view :class="{'search-content-item-status':true,'active': eventStatus=='4'}"
									@click="getCurrentStatus('4')">
									未提交
								</view>
							</view>
						</view>
						<!-- 提交时间 -->
						<!-- <view class="hetong-time">
							<view class="search-title">
								提交时间
							</view>
							<view class="search-content-time">
								<view class="search-content-item-time">
									<uni-datetime-picker type="daterange" :value="beginTime" :border="false"
										:clear-icon="false" @change="changeBeginTime" />
										
								</view>
							</view>
						</view>
						 --><!-- 所属模块 -->
						<!-- <view class="hetong-type">
							<view class="search-title">
								所属模块
							</view>
							<view class="search-content-type">
								<view @click="changeModule(-1)" class="search-content-item-type">
									<text :class="{'active': currentId==-1}">全部</text>

								</view>
								<view v-for="(val,index) in moduleMenu" :key="val.id" @click="changeModule(index)"
									class="search-content-item-type">
									<text :class="{'active': currentId==val.id}">{{val.label}}</text>
								</view>

							</view>
						</view>
 -->
						<view class="empty-view">

						</view>
					</view>
					<view class="bottom-btn" @click="resetSearch">
						<view class="reset">
							重置
						</view>
						<view class="queding" @click="quedingSearch">
							确定
						</view>
					</view>
				</view>

			</scroll-view>
		</u-popup>
    

	
	</view>

</template>

<script>
	export default {
		name: "customTitleBanner",
		data() {
			return {
				itemName: "",
				eventStatus: "",
				submissionTimeFrom: "", //开始时间
				submissionTimeFromTo: "", //结束时间
				moduleId: "",
				moduleMenu: [],
				show:false,
				beginTime:'',
				currentId: -1,
				
			}
		},
		props: {
			obj:{
				type: Object,
				default:null
			}
		},

		created() {
			this._getModuleMenu()

		},
		// mounted() {
		// 	this.getSystemInfo()
		// },
		methods: {
			
			// getSystemInfo(){
			// 	let _this = this;
			// 	uni.getSystemInfo({
			// 		success(res){
			// 			let statusBarHeight = res.statusBarHeight;

			// 		}
			// 	})
			// },
			caseSearch() {
				this.$emit("caseSearch", this.itemName)
			},
			handleModuleMenus(arr) {
				for (let val of arr) {
						this.moduleMenu.push({
						id: val.id,
						label: val.label,
						children:val.children || [],
					})
					if (val.children) {
						this.handleModuleMenus(val.children)
					}
				}
			},
			
			/* 查询所属模块 */
			_getModuleMenu() {
				getModuleMenu().then(res => {
					if (res.statusCode === 200) {
						this.moduleMenu = [];
						let moduleMenus = res.data.data;
						this.handleModuleMenus(moduleMenus)

					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}

				}).catch(err => {
					uni.showToast({
						title: '网络异常, 请求失败',
						icon: 'none'
					})
				})
			},
			_handleData(arr){
				for(let val of arr){
					this.moduleId +=val.id +",";
					if(val.children && val.children.length> 0){
						this._handleData(val.children)
					}
				}
			  
			},
			changeModule(index) {
				let val = this.moduleMenu[index];
				
				if (index!==-1) {
					this.currentId = val.id;
					this.moduleId = val.id +",";
					if(val.children && val.children.length> 0){
						this._handleData(val.children)
					}
					this.moduleId = this.moduleId.slice(0,this.moduleId.length-1);
				} else {
					this.moduleId = "";
					this.currentId = -1;
				}
				
       
			},
			/* 打开弹框 */
			showDrawer() {
				
				this.eventStatus = this.obj.eventStatus;
				this.moduleId = this.obj.moduleId;
							
				this.currentId = this.obj.moduleId;			
				if(this.obj.moduleId && this.obj.moduleId.indexOf(",")!==-1){
					this.currentId = this.obj.moduleId.split(",")[0];
				}
				if(this.moduleId===""){
					this.currentId = -1;
				}
					
				this.submissionTimeFrom = this.obj.submissionTimeFrom;
				this.submissionTimeFromTo = this.obj.submissionTimeFromTo;
				// this.$refs.showRight.open();
				this.show = true;
			},
			closeDrawer() {
				this.show = false;
				// this.$refs.showRight.close();
			},
			/* 重置 */
			resetSearch() {
				this.eventStatus = "";
				this.moduleId = "";
				this.currentId = -1;
				this.submissionTimeFrom = "";
				this.submissionTimeFromTo = "";
			},
			/* 确认 */
			quedingSearch() {
				let queryData = {};

				if (this.eventStatus) {
					queryData.eventStatus = this.eventStatus;
				}
				if (this.moduleId) {
					queryData.moduleId = this.moduleId;
				}
				if (this.submissionTimeFrom && this.submissionTimeFromTo) {
					queryData.submissionTimeFrom = this.submissionTimeFrom;
					queryData.submissionTimeFromTo = this.submissionTimeFromTo;
				}
				this.$emit('quedingSearch', queryData);
				this.closeDrawer();
			},

			/* 处理合同查询参数 */
			getCurrentStatus(status) {
				if (status) {
					this.eventStatus = status;
				} else {
					this.eventStatus = "";
				}

			},
			changeBeginTime(time) {
				this.submissionTimeFrom = time[0] + ' 00:00:00';
				this.submissionTimeFromTo = time[1] + ' 00:00:00';
			},

		}
	}
</script>

<style scoped>
	.search-body {
		width: 560rpx;
		height: 78rpx;
		background-color: #ffffff;
		border-radius: 39rpx;
		border: 1rpx solid #EEEEEE;
		padding: 13rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.search-body .search-input {
		height: 100%;
		flex: 1;
		padding-left: 12rpx;
		font-size: 28rpx;
		display: table-cell;
		vertical-align: middle;
		box-sizing: border-box;
	}

	.left-img {
		width: 24rpx;
		height: 24rpx;

	}

	.right-img {
		width: 32rpx;
		height: 31rpx;
		vertical-align: middle;
		margin-right: 9rpx;
	}

	.right-btn {
		width: 110rpx;
		height: 58rpx;
		line-height: 58rpx;
		background-image: linear-gradient(0deg,
				#2da0f3 0%,
				#54bcff 100%);
		border-radius: 29rpx;
		font-size: 28rpx;
		color: #ffffff;
		text-align: center;
	}

	>>>.uni-navbar-btn-text text {
		font-size: 32rpx !important;
	}

	.tabbar-title {
		background-color: #FFFFFF;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		line-height: 74rpx;
		color: #505050;
		padding-top: 27rpx;
		padding-left: 27rpx;
		padding-right: 27rpx;
	}

	.text-title {
		position: relative;
	}

	.active.text-title::after {
		content: "";
		display: block;
		width: 60%;
		height: 6rpx;
		background-color: #215ece;
		border-radius: 6rpx;
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	/* 筛选框 */

	.right-drawer {
		position: relative;
	}

	>>>.uni-drawer__content {
		width: 600rpx !important;
	}


	/* >>>.uni-drawer {
		 top: 290rpx!important;
	} */
	.top-search {
		padding: 35rpx;
	}

	.top-title {
		display: flex;
		justify-content: space-between;
	}

	.top-title text {
		color: #333333;
	}

	.close-btn>>>.uni-icons {
		width: 23rpx;
		height: 23rpx;
	}

	.search-title {
		font-size: 28rpx;
		color: #676767;
		padding-bottom: 29rpx;
	}

	.search-content {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	/* 合同状态 */
	.hetong-status {
		padding-top: 30rpx;
	}

	.search-content-item-status {
		width: 130rpx;
		height: 48rpx;
		background-color: #f7f7f7;
		color: #9e9e9e;
		border-radius: 24rpx;
		font-size: 24rpx;
		line-height: 48rpx;
		text-align: center;
		margin-right: 22rpx;
		margin-bottom: 25rpx;
	}

	.search-content-item-status.active {
		background-image: linear-gradient(#2c6fd9,
				#2c6fd9),
			linear-gradient(#029ef3,
				#029ef3);
		background-blend-mode: normal,
			normal;
		color: #ffffff;
	}

	/* 合同时间 */
	.hetong-time {
		padding-top: 37rpx;
	}

	.search-content-time {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.search-content-time>>>.uni-date-x {

		height: 54rpx;
		background-color: #f7f7f7;
		border-radius: 27rpx;

		font-size: 24rpx;
		color: #797979;
	}

	.search-content-item-time>>>uni-icons {
		display: none;
	}

	.center-line {
		width: 36rpx;
		height: 1rpx;
		background-color: #b3b3b3;
		margin: 0 12rpx;
	}

	/* 合同类型 */
	.hetong-type {
		padding-top: 50rpx;
	}

	.search-content-type {
		display: flex;
		flex-wrap: wrap;
	}

	.search-content-item-type {
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.search-content-item-type text {
		min-width: 130rpx;
		display: block;
		border-radius: 24rpx;
		font-size: 24rpx;
		line-height: 48rpx;
		background-color: #f7f7f7;
		color: #9e9e9e;
		height: 48rpx;
		box-sizing: border-box;
		text-align: center;
		padding: 0 20rpx;
	}

	.search-content-item-type text.active {
		background-image: linear-gradient(#2c6fd9,
				#2c6fd9),
			linear-gradient(#029ef3,
				#029ef3);
		background-blend-mode: normal,
			normal;
		color: #ffffff;
	}


	.bottom-btn {
		display: flex;
		height: 88rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.bottom-btn view {
		flex: 1;
		font-size: 32rpx;
		line-height: 88rpx;
		text-align: center;
	}

	.reset {
		background-color: #f2f2f2;
		color: #888888;
	}

	.queding {
		background-image: linear-gradient(#2c6fd9,
				#2c6fd9),
			linear-gradient(#029ef3,
				#029ef3);
		background-blend-mode: normal, normal;
		color: #ffffff;
	}

	.empty-view {
		height: 100rpx;
	}
</style>
