<template>
	<view class="">
	<uni-popup ref="popup" type="top" background-color="#fff">
		<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>
					<view class="li_box" @click="toSelectCustomer">
						<view class="form_right" style="text-align: center;">
							<view :class="customerObj.id ? 'valueActive' : ''">
								{{customerObj.id ? customerObj.name : '点击选择'}}
							</view>
							<view class="iconfont icon-arrows_right"></view>
						</view>
					</view>
				</view>
				<view class="fir_li">
					<view class="li_label">归属人</view>
					<view class="li_box" @click="toSelectStaff">
						<view class="form_right">
							<view :class="staffObj.id ? 'valueactive' : '' ">
								{{staffObj.id ? staffObj.name : '点击选择'}}</view>
							<view class="iconfont icon-arrows_right"></view>
						</view>
					</view>
				</view>
				<view class="fir_li">
					<view class="li_label">成交状态</view>
					<view class="li_box">
						<picker @change="changeStatus" :range="statusArr" :value="statusIndex" :range-key="'name'">
							<view class="form_right">
								<view style="flex:1;text-align: center;"
									:class="statusArr[statusIndex] ? 'valueactive' : '' ">{{statusArr[statusIndex] ? statusArr[statusIndex].name : '成交状态'}}
								</view>
							</view>
						</picker>
					</view>
				</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>
				<search-item v-for="(item,index) in searchForm" :key="index" :objInfo="item" @changeSearchData="changeSearchData"></search-item>
			</view>
		</scroll-view>
		<view class="button_bottom">
			<view @tap.stop="reset">重置</view>
			<view @tap.stop="sureQuery">确定</view>
		</view>
	</uni-popup>
	
	<select-customer ref="customerChild" @getCustomerinfo="getCustomerinfo"></select-customer>
	<select-staff ref="staffChild" @sureStaff="sureStaff"></select-staff>
	</view>
</template>

<script>
	import selectCustomer from '@/components/selectCustomer.vue'
	import selectStaff from '@/components/selectStaff.vue'
	import searchItem from '@/components/search/searchitem.vue'
	
	export default{
		components:{
			selectCustomer,
			selectStaff,
			searchItem
		},
		props:{
			searchForm:{
				type:Array,
				default:[]
			}
		},
		data() {
			return{
				times:'',
				staffObj:{},
				customerObj:{},
				start_time:'',
				end_time:'',
				showIndex:1,
				contract_status:null,  //1：未成交 2：成交
				statusArr:[
					{id:1,name:'未成交'},
					{id:2,name:'已成交'}
				],
				statusIndex:null,
			}
		},
		methods:{
			init(obj) {
				this.$refs.popup.open()
				if(obj.timeArr && obj.timeArr.length!=0 && this.showIndex == 1){
					this.start_time = obj.timeArr[0]
					this.end_time = obj.timeArr[1]
				}
				this.statusIndex = obj.statusIndex
				
				
			},
			close() {
				this.$refs.popup.close()
			},
			changeStatus(e) {
				this.statusIndex = e.detail.value
			},
			toSelectCustomer() {
				this.$refs.customerChild.init()
			},
			getCustomerinfo(obj) {
				this.customerObj = obj
			},
			//选择归属人
			toSelectStaff() {
				this.$refs.staffChild.init()
			},
			sureStaff(obj) {
				this.staffObj = obj
			},
			changeStartTime(e) {
				this.showIndex = 2
				this.start_time = e.detail.value
				if(!this.end_time){
					this.end_time = e.detail.value
				}
			},
			changeEndTime(e) {
				this.showIndex = 2
				this.end_time = e.detail.value
				if(!this.start_time){
					this.start_time = e.detail.value
				}
			},
			changeSearchData(type,key,value){
				this.$emit('changeSearchData',type,key,value)
			},
			reset() {
				this.customerObj = {}
				this.staffObj = {}
				this.start_time = ''
				this.end_time = ''
				this.statusIndex = null
				this.$emit('resetForm')
			},
			sureQuery() {
				let params = {
					createtime:(this.start_time && this.end_time) ? (this.start_time + ',' + this.end_time) : '',
					customer_id:this.customerObj.id?this.customerObj.id:'',
					staff_id:this.staffObj.id?this.staffObj.id:'',
					contract_status:this.statusArr[this.statusIndex]?this.statusArr[this.statusIndex].id:'',
				}
				this.close()
				this.$emit('sureParams',params)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.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;
				justify-content: space-between;
				color:#999;
				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>