<template>
	<uni-popup ref="popup" type="top" background-color="#fff">
		<view class="warpbox">
			<scroll-view scroll-y class="scrollbox" style="height:600rpx;background:#fff;" >
				<!--筛选模块  -->
				<view class="screen_content"  @tap.stop.prevent>
					<view class="fir_li">
						<view class="li_label">审批状态</view>
						<picker @change="changeStatus" :value="statusIndex" :range="statusList" :range-key="'name'">
							<view class="li_box">
								<view class="form_right">
									<view :class="statusList[statusIndex] ? 'valueActive' : '' ">{{statusList[statusIndex] ? statusList[statusIndex].name : '点击选择'}}</view>
									<view class="iconfont icon-arrows_right"></view>
								</view>
							</view>
						</picker>
					</view>
					<view class="fir_li">
						<view class="li_label">时间筛选</view>
						<view class="li_box" style="display: flex;">
							<picker @change="changeStartTime" mode="date" :end="end_time"
								style="width:50%;border-right:1rpx solid #CCCCCC">
								<view class="form_right">
									<view style="flex:1;text-align: center;"
										:class="start_time ? 'valueactive' : '' ">
										{{start_time ? start_time : '开始时间'}}</view>
								</view>
							</picker>
							<picker @change="changeEndTime" mode="date" :start="start_time" style="width:50%">
								<view class="form_right">
									<view style="flex:1;text-align: center;"
										:class="end_time ? 'valueactive' : '' ">{{end_time ? end_time : '结束时间'}}
									</view>
								</view>
							</picker>
						</view>
					</view>
					<view class="fir_li">
						<view class="li_label">审批类型</view>
						<picker @change="changeType" :value="typeIndex" :range="typeList" :range-key="'name'">
							<view class="li_box">
								<view class="form_right">
									<view :class="typeList[typeIndex] ? 'valueActive' : '' ">{{typeList[typeIndex] ? typeList[typeIndex].name : '点击选择'}}</view>
									<view class="iconfont icon-arrows_right"></view>
								</view>
							</view>
						</picker>
					</view>
				</view>
			</scroll-view>
			<view class="button_bottom">
				<view @tap.stop="reset">重置</view>
				<view @tap.stop="sureQuery">确定</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	
	export default{
		props:{
			typeList:{
				type:Array,
				default:[]
			}
		},
		data() {
			return{
				formapproval_id:'',
				typeIndex:null,
				statusList:[
					{id:1, name:'待审核'},
					{id:2, name:'通过'},
					{id:3, name:'拒绝'}
				],
				statusIndex:null,
				start_time:'',
				end_time:''
			}
		},
		methods:{
			changeStatus(e) {
				this.statusIndex = e.detail.value
			},
			init() {
				this.$refs.popup.open()
			},
			closePop() {
				this.$refs.popup.close()
			},
			changeType(e) {
				this.typeIndex = e.detail.value
			},
			changeStartTime(e) {
				this.start_time = e.detail.value
				if(!this.end_time){
					this.end_time = e.detail.value
				}
			},
			changeEndTime(e) {
				this.end_time = e.detail.value
				if(!this.start_time){
					this.start_time = e.detail.value
				}
			},
			reset() {
				this.typeIndex = null
				this.start_time = ''
				this.end_time = ''
			},
			sureQuery() {
				let params = {
					formapproval_id: this.typeList[this.typeIndex]?this.typeList[this.typeIndex].id:'',
					times:(this.start_time && this.end_time) ? (this.start_time + ',' + this.end_time) : '',
					check_status: this.statusList[this.statusIndex]?this.statusList[this.statusIndex].id:''
				}
				this.closePop()
				this.$emit('sureParams',params)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rediowarp{
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		label{
			display: flex;
			justify-content: flex-start;
			margin-right:24rpx;
			align-items: center;
		}
		radio{
			transform: scale(0.7);
		}
	}
	.warpbox{
		width:750rpx;
		bottom:0;
		z-index: 2;
		background:rgba(0,0,0,0.7);
		.screen_content {
			width:702rpx;
			z-index: 2;
			border-top:1rpx solid #CCCCCC;
			background-color: #fff;
			padding:24rpx;
			.fir_li{
				margin-bottom:20rpx;
				.li_label{
					font-size:28rpx;
					color:#333333;
					margin-bottom:15rpx;
				}
				.li_box{
					border-radius: 15rpx;
					border:1rpx solid #CCCCCC;
					height:60rpx;
					padding:0 35rpx;
					line-height: 60rpx;
				}
				.form_right {
					display: flex;
					color: #999;
					justify-content: space-between;
					image {
						width: 40rpx;
						height: 40rpx;
						margin: 28rpx 5rpx 0 0;
					}
					.rightinput{
						height:60rpx;
						line-height: 60rpx;
						width:100%;
					}
				}
			}
		}
		.button_bottom {
			display: flex;
			width: 100%;
			height: 90rpx;
			background-color: #fff;
			line-height: 90rpx;
			text-align: center;
			font-size: 32rpx;
			:first-child {
				flex: 1;
				color: $uni-text-color;
				border-top:1rpx solid #CCCCCC;
			}
			:last-child {
				flex: 1;
				background-color: $uni-text-color;
				color: #fff;
			}
		}
	}
</style>
